给主题添加瀑布流布局

一、效果预览

• PC端效果预览：点击预览
• 移动端效果预览：点击预览

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">&nbsp;<?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即可
• 瀑布流布局的缩略图图片可以在编辑文章时，手动向【手动缩略图】面板中的【输入图片地址，用于瀑布流缩略图】添加图片地址
• 如果不手动设置该图片，则默认以正文第一张图片作为缩略图。如果正文没有图片，则调用主题的随机缩略图