mirror of
https://ghproxy.net/https://github.com/AlxMedia/boxstyle.git
synced 2025-08-26 06:17:39 +08:00
Add a featured slider
This commit is contained in:
Alexander Agnarson
parent
7ae789b005
commit
fb0dde9ba1
8 changed files with 218 additions and 2 deletions
26
content-featured.php
Normal file
26
content-featured.php
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<article id="post-<?php the_ID(); ?>" <?php post_class('group'); ?>>
|
||||
<div class="post-inner post-hover">
|
||||
|
||||
<div class="post-thumbnail">
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
<?php if ( has_post_thumbnail() ): ?>
|
||||
<?php the_post_thumbnail('boxstyle-large'); ?>
|
||||
<?php else: ?>
|
||||
<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-medium.png" alt="<?php the_title_attribute(); ?>" />
|
||||
<?php endif; ?>
|
||||
<?php if ( has_post_format('video') && !is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-play"></i></span>'; ?>
|
||||
<?php if ( has_post_format('audio') && !is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-volume-up"></i></span>'; ?>
|
||||
<?php if ( is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-star"></i></span>'; ?>
|
||||
</a>
|
||||
<?php if ( comments_open() && ( get_theme_mod( 'comment-count','on' ) == 'on' ) ): ?>
|
||||
<a class="post-comments" href="<?php comments_link(); ?>"><span><i class="fa fa-comments-o"></i><?php comments_number( '0', '1', '%' ); ?></span></a>
|
||||
<?php endif; ?>
|
||||
|
||||
<h2 class="post-title">
|
||||
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
|
||||
</h2><!--/.post-title-->
|
||||
|
||||
</div><!--/.post-thumbnail-->
|
||||
|
||||
</div><!--/.post-inner-->
|
||||
</article><!--/.post-->
|
||||
|
|
@ -485,6 +485,25 @@ if ( ! function_exists( 'boxstyle_post_images' ) ) {
|
|||
}
|
||||
|
||||
|
||||
/* Get featured post ids
|
||||
/* ------------------------------------ */
|
||||
if ( ! function_exists( 'boxstyle_get_featured_post_ids' ) ) {
|
||||
|
||||
function boxstyle_get_featured_post_ids() {
|
||||
$args = array(
|
||||
'category' => absint( get_theme_mod('featured-category','') ),
|
||||
'numberposts' => absint( get_theme_mod('featured-posts-count','3')),
|
||||
);
|
||||
$posts = get_posts($args);
|
||||
if ( !$posts ) return false;
|
||||
foreach ( $posts as $post )
|
||||
$ids[] = $post->ID;
|
||||
return $ids;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ------------------------------------------------------------------------- *
|
||||
* Filters
|
||||
/* ------------------------------------------------------------------------- */
|
||||
|
|
@ -580,6 +599,29 @@ add_filter( 'video_embed_html', 'boxstyle_embed_html_jp' );
|
|||
* Actions
|
||||
/* ------------------------------------------------------------------------- */
|
||||
|
||||
/* Include or exclude featured articles in loop
|
||||
/* ------------------------------------ */
|
||||
if ( ! function_exists( 'boxstyle_pre_get_posts' ) ) {
|
||||
|
||||
function boxstyle_pre_get_posts( $query ) {
|
||||
// Are we on main query ?
|
||||
if ( !$query->is_main_query() ) return;
|
||||
if ( $query->is_home() ) {
|
||||
|
||||
// Featured posts enabled
|
||||
if ( get_theme_mod('featured-posts-count','3') != '0' ) {
|
||||
// Get featured post ids
|
||||
$featured_post_ids = boxstyle_get_featured_post_ids();
|
||||
// Exclude posts
|
||||
if ( $featured_post_ids && !get_theme_mod('featured-posts-include') )
|
||||
$query->set('post__not_in', $featured_post_ids);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
add_action( 'pre_get_posts', 'boxstyle_pre_get_posts' );
|
||||
|
||||
/* Script for no-js / js class
|
||||
/* ------------------------------------ */
|
||||
if ( ! function_exists( 'boxstyle_html_js_class' ) ) {
|
||||
|
|
@ -679,6 +721,47 @@ add_action('woocommerce_after_main_content', 'boxstyle_wc_wrapper_end', 10);
|
|||
* Frontend scripts
|
||||
/* ------------------------------------------------------------------------- */
|
||||
|
||||
/* Flexslider featured
|
||||
/* ------------------------------------ */
|
||||
if ( ! function_exists( 'boxstyle_flexslider_featured' ) ) {
|
||||
|
||||
function boxstyle_flexslider_featured() {
|
||||
|
||||
if( is_home() && !is_paged() && ( get_theme_mod('featured-posts-count','3') !='0') ) {
|
||||
|
||||
$script = '
|
||||
jQuery(document).ready(function(){
|
||||
var firstImage = jQuery("#flexslider-featured").find("img").filter(":first"),
|
||||
checkforloaded = setInterval(function() {
|
||||
var image = firstImage.get(0);
|
||||
if (image.complete || image.readyState == "complete" || image.readyState == 4) {
|
||||
clearInterval(checkforloaded);
|
||||
jQuery("#flexslider-featured").flexslider({
|
||||
animation: "slide",
|
||||
useCSS: false, // Fix iPad flickering issue
|
||||
directionNav: true,
|
||||
controlNav: true,
|
||||
pauseOnHover: true,
|
||||
animationSpeed: 400,
|
||||
smoothHeight: true,
|
||||
touch: false,
|
||||
slideshow: false,
|
||||
slideshowSpeed: 7000,
|
||||
});
|
||||
}
|
||||
}, 20);
|
||||
});
|
||||
';
|
||||
|
||||
wp_add_inline_script( 'boxstyle-scripts', $script );
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'boxstyle_flexslider_featured' );
|
||||
|
||||
|
||||
/* Flexslider gallery post format
|
||||
/* ------------------------------------ */
|
||||
if ( ! function_exists( 'boxstyle_flexslider_gallery' ) ) {
|
||||
|
|
|
|||
|
|
@ -142,7 +142,8 @@ a,
|
|||
.author-bio .bio-avatar:after,
|
||||
.widget_calendar caption,
|
||||
.commentlist li.bypostauthor > .comment-body:after,
|
||||
.commentlist li.comment-author-admin > .comment-body:after { background-color: '.esc_attr( get_theme_mod('color-1') ).'; }
|
||||
.commentlist li.comment-author-admin > .comment-body:after,
|
||||
#flexslider-featured .flex-control-nav li a.flex-active { background-color: '.esc_attr( get_theme_mod('color-1') ).'; }
|
||||
|
||||
.alx-tabs-nav li.active a,
|
||||
.comment-tabs li.active a,
|
||||
|
|
@ -177,7 +178,9 @@ img,
|
|||
#profile-image img,
|
||||
.post-list .post-thumbnail img,
|
||||
.post-format,
|
||||
.post-thumbnail img { -webkit-border-radius: '.esc_attr( get_theme_mod('image-border-radius') ).'px; border-radius: '.esc_attr( get_theme_mod('image-border-radius') ).'px; }
|
||||
.post-thumbnail img,
|
||||
#flexslider-featured.featured .post-inner { -webkit-border-radius: '.esc_attr( get_theme_mod('image-border-radius') ).'px; border-radius: '.esc_attr( get_theme_mod('image-border-radius') ).'px; }
|
||||
#flexslider-featured.featured .post-title { border-radius: 0 0 '.esc_attr( get_theme_mod('image-border-radius') ).'px '.esc_attr( get_theme_mod('image-border-radius') ).'px; }
|
||||
'."\n";
|
||||
}
|
||||
// header logo max-height
|
||||
|
|
|
|||
|
|
@ -135,6 +135,40 @@ Kirki::add_field( 'boxstyle_theme', array(
|
|||
'step' => '1',
|
||||
),
|
||||
) );
|
||||
// Blog: Featured Posts Include
|
||||
Kirki::add_field( 'boxstyle_theme', array(
|
||||
'type' => 'checkbox',
|
||||
'settings' => 'featured-posts-include',
|
||||
'label' => esc_html__( 'Featured Posts', 'boxstyle' ),
|
||||
'description' => esc_html__( 'To show featured posts in the slider AND the content below. Usually not recommended.', 'boxstyle' ),
|
||||
'section' => 'blog',
|
||||
'default' => false,
|
||||
) );
|
||||
// Blog: Featured Category
|
||||
Kirki::add_field( 'boxstyle_theme', array(
|
||||
'type' => 'select',
|
||||
'settings' => 'featured-category',
|
||||
'label' => esc_html__( 'Featured Category', 'boxstyle' ),
|
||||
'description' => esc_html__( 'By not selecting a category, it will show your latest post(s) from all categories', 'boxstyle' ),
|
||||
'section' => 'blog',
|
||||
'default' => '',
|
||||
'choices' => Kirki_Helper::get_terms( 'category' ),
|
||||
'placeholder' => esc_html__( 'Select a category', 'boxstyle' ),
|
||||
) );
|
||||
// Blog: Featured Post Count
|
||||
Kirki::add_field( 'boxstyle_theme', array(
|
||||
'type' => 'slider',
|
||||
'settings' => 'featured-posts-count',
|
||||
'label' => esc_html__( 'Featured Post Count', 'boxstyle' ),
|
||||
'description' => esc_html__( 'Max number of featured posts to display. Set to 1 and it will show it without any slider script. Set it to 0 to disable', 'boxstyle' ),
|
||||
'section' => 'blog',
|
||||
'default' => '3',
|
||||
'choices' => array(
|
||||
'min' => '0',
|
||||
'max' => '10',
|
||||
'step' => '1',
|
||||
),
|
||||
) );
|
||||
// Blog: Frontpage Widgets Top
|
||||
Kirki::add_field( 'boxstyle_theme', array(
|
||||
'type' => 'switch',
|
||||
|
|
|
|||
37
inc/featured.php
Normal file
37
inc/featured.php
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?php
|
||||
// Query featured entries
|
||||
$featured = new WP_Query(
|
||||
array(
|
||||
'no_found_rows' => false,
|
||||
'update_post_meta_cache' => false,
|
||||
'update_post_term_cache' => false,
|
||||
'ignore_sticky_posts' => 1,
|
||||
'posts_per_page' => absint( get_theme_mod('featured-posts-count','3') ),
|
||||
'cat' => absint( get_theme_mod('featured-category','') )
|
||||
)
|
||||
);
|
||||
?>
|
||||
|
||||
<?php if ( is_home() && !is_paged() && ( get_theme_mod('featured-posts-count','3') =='1') && $featured->have_posts() ): // No slider if 1 post is featured ?>
|
||||
|
||||
<div class="featured">
|
||||
<?php while ( $featured->have_posts() ): $featured->the_post(); ?>
|
||||
<?php get_template_part('content-featured'); ?>
|
||||
<?php endwhile; ?>
|
||||
</div><!--/.featured-->
|
||||
|
||||
<?php elseif ( is_home() && !is_paged() && ( get_theme_mod('featured-posts-count','3') !='0') && $featured->have_posts() ): // Show slider if posts are not 1 or 0 ?>
|
||||
|
||||
<div class="featured flexslider" id="flexslider-featured">
|
||||
<ul class="slides">
|
||||
<?php while ( $featured->have_posts() ): $featured->the_post(); ?>
|
||||
<li>
|
||||
<?php get_template_part('content-featured'); ?>
|
||||
</li>
|
||||
<?php endwhile; ?>
|
||||
</ul>
|
||||
</div><!--/.featured-->
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<?php wp_reset_postdata(); ?>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<div class="content">
|
||||
|
||||
<?php get_template_part('inc/page-title'); ?>
|
||||
<?php get_template_part('inc/featured'); ?>
|
||||
<?php get_template_part('inc/front-widgets-top'); ?>
|
||||
|
||||
<?php if ( have_posts() ) : ?>
|
||||
|
|
|
|||
|
|
@ -83,6 +83,9 @@
|
|||
.notebox { font-size: 15px; }
|
||||
|
||||
/* blog */
|
||||
#flexslider-featured.featured .post-inner { background: #333; }
|
||||
#flexslider-featured.featured .post-title { color: #333; background: transparent; font-size: 20px; position: static; box-shadow: none; }
|
||||
|
||||
.front-widgets { padding: 10px 20px 10px 20px; }
|
||||
.front-widget-col { width: 100%; }
|
||||
.front-widget-inner { margin: 0; }
|
||||
|
|
@ -173,6 +176,8 @@
|
|||
#nav-header.nav-container { border-top-color: #e5e5e5; }
|
||||
|
||||
/* blog */
|
||||
#flexslider-featured.featured .post-title { font-size: 16px; }
|
||||
|
||||
.front-widgets { padding: 10px 15px 10px 15px; }
|
||||
.post-inner { margin-left: 0; display: block; }
|
||||
|
||||
|
|
|
|||
27
style.css
27
style.css
|
|
@ -762,6 +762,33 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
|
|||
* Post Entry
|
||||
/* ------------------------------------------------------------------------- */
|
||||
|
||||
/* post : featured
|
||||
/* ------------------------------------ */
|
||||
#flexslider-featured { padding: 30px 0 30px; border-bottom: 1px solid #f2f2f2; z-index: 9; position: relative; }
|
||||
#flexslider-featured .flex-direction-nav { height: 0; }
|
||||
#flexslider-featured .flex-direction-nav a { color: #333; background: #eee; }
|
||||
#flexslider-featured .flex-direction-nav a:before { color: #333; }
|
||||
#flexslider-featured .flex-direction-nav li { margin-left: 0; }
|
||||
|
||||
#flexslider-featured .flex-control-nav { position: absolute; bottom: 10px; left: 2px; right: 0; top: auto; text-align: center; }
|
||||
#flexslider-featured .flex-control-nav li { padding: 0; margin: 0 4px; }
|
||||
#flexslider-featured .flex-control-nav li a { background: #ccc; width: 10px; height: 10px; text-indent: -999px; overflow: hidden;
|
||||
-webkit-border-radius: 100%; border-radius: 100%;
|
||||
-webkit-box-shadow: none; box-shadow: 0 1px 0 #fff, inset 0 1px 0 rgba(0,0,0,0.2); }
|
||||
#flexslider-featured .flex-control-nav li a:hover { }
|
||||
#flexslider-featured .flex-control-nav li a.flex-active { background: #198cff; }
|
||||
|
||||
#flexslider-featured.featured,
|
||||
#flexslider-featured.featured.flexslider { margin: 0; position: relative; }
|
||||
#flexslider-featured.featured .post-inner { border-radius: 10px; }
|
||||
#flexslider-featured.featured .post-title { font-size: 26px; border-radius: 0 0 10px 10px; background: rgba(0,0,0,0.4); position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: 0; z-index: 9; padding: 10px 20px 10px 20px;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.7);
|
||||
box-shadow: 0 -1px 0 rgba(255,255,255,0.07), inset 0 1px 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 10px 10px rgba(0,0,0,0.1); }
|
||||
#flexslider-featured.featured .post-title a { color: #fff; }
|
||||
#flexslider-featured.featured li .post { padding: 0 50px; }
|
||||
#flexslider-featured.featured .post-hover:hover .post-title a { color: #fff; }
|
||||
#flexslider-featured.featured .post-comments { top: 7px; right: auto; left: 7px; bottom: auto; }
|
||||
|
||||
/* post : standard loop
|
||||
/* ------------------------------------ */
|
||||
.blog .post,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
