给主题添加瀑布流布局

  • A+
所属分类:建博笔记

一、效果预览

PC端效果预览:点击预览

移动端效果预览:点击预览

Ps:由于暂时没考虑好瀑布流布局用于哪个分类,所以这里的预览图看上去有些丑,实际效果还是不错的。

 

二、后台添加相关设置项

首先:打开inc/options/begin-options.php文件,大约3963行的位置,找到代码

	$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文件,大约214行的位置,找到代码

// 文章手动缩略图
$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.php文件,在适当位置添加样式

/** 瀑布流 **/
#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即可。

瀑布流布局的缩略图图片可以在编辑文章时,手动向“手动缩略图”面板中的“输入图片地址,用于瀑布流缩略图”添加图片地址。

如果不手动设置该图片,则默认以正文第一张图片作为缩略图。如果正文没有图片,则调用主题的随机缩略图。

若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!

本文来源于互联网:给主题添加瀑布流布局

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注