一、效果预览
Ps:由于暂时没考虑好瀑布流布局用于哪个分类,所以这里的预览图看上去有些丑,实际效果还是不错的。
二、后台添加相关设置项
首先:打开【inc/options/begin-options.php】文件,找到代码
$options[] = array( 'name' => '', 'desc' => '时间轴', 'id' => 'cat_layout_line', 'std' => '', 'type' => 'text' );
在其下面添加
$options[] = array( 'name' => '', 'desc' => '瀑布流', 'id' => 'cat_layout_fall', 'std' => '', 'type' => 'text' );
然后:打开【inc/meta-boxs.php】文件,找到代码
// 文章手动缩略图 $thumbnail_post_meta_boxes = array( "thumbnail" => array( "name" => "thumbnail", "std" => "", "title" => "输入图片地址,调用指定缩略图,图片尺寸要求与主题选项中对应缩略图大小相同", "type"=>"text"), );
将其修改成
// 文章手动缩略图 $thumbnail_post_meta_boxes = array( "thumbnail" => array( "name" => "thumbnail", "std" => "", "title" => "输入图片地址,调用指定缩略图,图片尺寸要求与主题选项中对应缩略图大小相同", "type"=>"text"), "fall_img" => array( "name" => "fall_img", "std" => "", "title" => "输入图片地址,用于瀑布流缩略图", "type"=>"text"), );
最后:打开【inc/thumbnail.php】文件,在文件最后添加
// 瀑布流 function zm_waterfall_img() { global $post; if ( get_post_meta($post->ID, 'fall_img', true) ) { $image = get_post_meta($post->ID, 'fall_img', true); echo '<a href="'.get_permalink().'"><img src='; echo $image; echo ' alt="'.$post->post_title .'" /></a>'; } else { $content = $post->post_content; preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER); $n = count($strResult[1]); if($n > 0){ echo '<a href="'.get_permalink().'"><img src="'.$strResult[1][0].'" alt="'.$post->post_title .'" /></a>'; } else { if ( zm_get_option('rand_img_n') ) { $random = mt_rand(1, zm_get_option('rand_img_n')); } else { $random = mt_rand(1, 5); } echo '<a href="'.get_permalink().'"><img src="'.get_template_directory_uri().'/img/random/'. $random .'.jpg" alt="'.$post->post_title .'" /></a>'; } } } function zm_waterfall_img_h() { global $post; if ( get_post_meta($post->ID, 'fall_img', true) ) { $image = get_post_meta($post->ID, 'fall_img', true); echo '<span class="load"><a href="'.get_permalink().'"><img src="' . get_template_directory_uri() . '/img/loading.png" data-original='; echo $image; echo ' alt="'.$post->post_title .'" /></a></span>'; } else { $content = $post->post_content; preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER); $n = count($strResult[1]); if($n > 0){ echo '<span class="load"><a href="'.get_permalink().'"><img src="'.$strResult[1][0].'" alt="'.$post->post_title .'" /></a></span>'; } else { if ( zm_get_option('rand_img_n') ) { $random = mt_rand(1, zm_get_option('rand_img_n')); } else { $random = mt_rand(1, 5); } echo '<span class="load"><a href="'.get_permalink().'"><img src="' . get_template_directory_uri() . '/img/loading.png" data-original="'.get_template_directory_uri().'/img/random/'. $random .'.jpg" alt="'.$post->post_title .'" /></a></span>'; } } }
三、添加前台布局文件和样式
首先:在主题根目录下新建一个名为【category-fall.php】的文件,并向该文件添加下面的代码
<?php /** * 分类瀑布流 */ get_header(); ?> <section id="post-fall" class="content-area"> <main id="main" class="site-main" role="main"> <?php if ((zm_get_option('no_child')) && is_category() ) { ?> <?php $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1; query_posts(array('category__in' => array(get_query_var('cat')), 'paged' => $paged,)); ?> <?php } ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class('fall wow fadeInUp'); ?> data-wow-delay="0.3s"> <div class="picture-box"> <figure class="picture-img"> <a rel="bookmark" href="<?php echo esc_url( get_permalink() ); ?>"></a> <?php if (zm_get_option('lazy_s')) { zm_waterfall_img_h(); } else { zm_waterfall_img(); } ?> <?php if ( has_post_format('video') ) { ?><a rel="bookmark" href="<?php echo esc_url( get_permalink() ); ?>"><i class="be be-play"></i></a><?php } ?> <?php if ( has_post_format('quote') ) { ?><div class="img-ico"><a rel="bookmark" href="<?php echo esc_url( get_permalink() ); ?>"><i class="be be-display"></i></a></div><?php } ?> <?php if ( has_post_format('image') ) { ?><div class="img-ico"><a rel="bookmark" href="<?php echo esc_url( get_permalink() ); ?>"><i class="be be-picture"></i></a></div><?php } ?> </figure> <?php the_title( sprintf( '<h2 class="grid-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?> <span class="grid-inf"> <?php if ( has_post_format('link') ) { ?> <?php if ( get_post_meta($post->ID, 'link_inf', true) ) { ?> <span class="link-inf"><?php $link_inf = get_post_meta($post->ID, 'link_inf', true);{ echo $link_inf;}?></span> <?php } ?> <?php } ?> <span class="grid-inf-l"> <?php if( function_exists( 'the_views' ) ) { the_views( true, '<span class="views"><i class="be be-eye"></i> ','</span>' ); } ?> <?php if ( get_post_meta($post->ID, 'zm_like', true) ) : ?><span class="grid-like"><span class="be be-thumbs-up-o"> <?php zm_get_current_count(); ?></span></span><?php endif; ?> </span> </span> <div class="clear"></div> </div> </article> <?php endwhile;?> </main><!-- .site-main --> </section><!-- .content-area --> <?php begin_pagenav(); ?> <?php get_footer(); ?>
然后:打开【archive.php】文件,在适当位置添加下面的代码
elseif ( is_category(explode(',',zm_get_option('cat_layout_fall')))) { get_template_part( 'category-fall' ); }
最后:打开【style.css】文件,在适当位置添加样式
/** 瀑布流 **/ #post-fall { position:relative; -moz-column-count:4; -webkit-column-count:4; column-count:4; -moz-column-gap:1em; -webkit-column-gap:1em; column-gap:1em } #post-fall .ias-trigger { position:absolute; bottom:-30px; left:0 } @media screen and (max-width:700px) { #post-fall { -moz-column-count:3; -webkit-column-count:3; column-count:3 } } @media screen and (max-width:550px) { #post-fall { -moz-column-count:2; -webkit-column-count:2; column-count:2; padding-bottom:50px } #post-fall .ias-trigger { position:absolute; bottom:0; left:44% } } #post-fall .post { background:transparent; margin:0; padding:0; border:0; box-shadow:none; border-radius:0 } .fall { -moz-page-break-inside:avoid; -webkit-column-break-inside:avoid; break-inside:avoid; overflow:auto } #post-fall .grid-title { height:auto }
四、启用布局
- 找到【主题选项--基本设置--选择不同分类布局】选项,在【瀑布流】选项中输入想要应用该布局的分类ID即可
- 瀑布流布局的缩略图图片可以在编辑文章时,手动向【手动缩略图】面板中的【输入图片地址,用于瀑布流缩略图】添加图片地址
- 如果不手动设置该图片,则默认以正文第一张图片作为缩略图。如果正文没有图片,则调用主题的随机缩略图
继续阅读
如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
2019年3月12日 06:38 1F
这是一条用来测试评论的评论
2019年3月12日 06:39 1B
@评论测试的名字 这是一条用来回复评论测试的评论
2019年3月12日 06:41 1B
@评论测试的名字 这还是一条用来回复评论测试的评论
2019年3月22日 21:25 1B
@评论测试的名字 测试SMTP邮件发送功能
2019年3月22日 21:31 1B
@评论测试的名字 再次测试SMTP功能