博客

现在已经是9102年了，整个网页一张图都没有实在是太斋了，没有任何看的欲望，虽然没有什么人看，自己看着也觉得有点枯燥。但是又得修改主题模板，CSS样式表等又要折腾不少的时间 … 每个人都有自己感兴趣的事情，比如玩一下手游，总会挤一点时间出来，花在感兴趣的事情上面。下面记录折腾过程

实现文章标题+缩略图大概思路

这是针对我自己使用的 WordPress 主题 twentyseventeen 来修改，因为没钱买更美丽的主题了。

一、文章页(blog)与目录页(category)必需按照标题+摘要的方式显示。

二、特色图片+抓取文章第一张图片+默认缩略图，输出标题缩略图。

三、完善CSS样式表。

确定了大概思路，开始修改主题的模板文件以及主题函数。

一、文章页与目录页按照标题+摘要方式显示

主题默认是显示整篇文章的，除非自己手动添加【更多（more）】布局元素。为了整体统一，修改为摘要显示方式。

修改相关的模板实现摘要显示

1、文章页（blog）使用的是index.php

2、分类目录页（category），使用的是archive.php

分别打开这两个文件，模板默结构是完整文章输出，我们修改为只输出显示摘要。

	/* Start the Loop */
	while ( have_posts() ) :
		the_post();

		/*
		 * Include the Post-Format-specific template for the content.
		 * If you want to override this in a child theme, then include a file
		 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
		 */
		/* 修改这里默认的get_post_format() 修改为'excerpt' */
		get_template_part( 'template-parts/post/content', 'excerpt' );

	endwhile;

是调用输出摘要的模板content-excerpt.php

二、特色图片+抓取文章第一张图片+默认缩略图，输出标题缩略图

twentyseventeen主题的特色图片这个功能一直都没有使用。因为该主题的特色图片的默认尺寸是2000×1200，对于网站宽带压力不小了，如果每一篇博客文章都加入特色图片的话，加载图片会特别慢了。

那么就将这个特色图片的功能用作文章标题的缩略图，将默认尺寸更改为200×200，并且将主题的 thumbnail-avatar 也设置为200×200，就不会造成生成太多种尺寸的缩略图。

1、修改主题函数 functions.php ，更改特色图片尺寸

	add_image_size( 'twentyseventeen-featured-image', 200, 200, true );

	add_image_size( 'twentyseventeen-thumbnail-avatar', 200, 200, true );

2、添加抓取文章第一张图片函数到 functions.php

//抓取文章第一张图片
function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
	//$first_img = $matches [1] [0];
	
	if( empty( $matches [1] [0] ) ){ //Defines a default image
		$first_img = get_theme_file_uri( '/assets/images/fz-default-thumbnail.png' );
	} else {
		$first_img = $matches [1] [0];
	}
	
	return $first_img;
}

这个抓取图片函数，如果文章没有图片，会调取默认设置好的一张图片输出。

抓取文章第一张图片函数，是网上找的代码，自己当然不懂代码，只是复制来的。但参考了一些资料，稍微做了细微的修改不知道是否合理，反正正常工作咯。

即使原本的代码也是正常工作的，但据说可能会不太合理的代码，会影响PHP性能。抓取文章第一张图片的原代码如下：

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	
	if(empty($first_img)){ //Defines a default image
		$first_img = "/default.jpg";
	}
	
	return $first_img;
}

3、输出标题缩略图

因为上面我们使用了标题+摘要的方式，因此我们需要在摘要模板 content-excerpt.php 这里添加缩略图输出。

content-excerpt.php模板源码如下：

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<header class="entry-header">
		<?php if ( 'post' === get_post_type() ) : ?>
			<div class="entry-meta">
				<?php
				echo twentyseventeen_time_link();
				twentyseventeen_edit_link();
				?>
			</div><!-- .entry-meta -->
		<?php elseif ( 'page' === get_post_type() && get_edit_post_link() ) : ?>
			<div class="entry-meta">
				<?php twentyseventeen_edit_link(); ?>
			</div><!-- .entry-meta -->
		<?php endif; ?>

		<?php
		if ( is_front_page() && ! is_home() ) {

			// The excerpt is being displayed within a front page section, so it's a lower hierarchy than h2.
			the_title( sprintf( '<h3 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h3>' );
		} else {
			the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
		}
		?>
	</header><!-- .entry-header -->

	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->

</article><!-- #post-## -->

我之前加入了文章统计阅读次数的功能，但是在使用摘要显示方式之后，文章列表无法统计阅读次数了。

所以摘要模板修改为如下：

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
		<div class="post-thumbnail">
			<a href="<?php the_permalink(); ?>">
				<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
			</a>
		</div><!-- .post-thumbnail -->
		
	<?php else : ?>
	
		<div class="post-thumbnail">
			<a href="<?php the_permalink(); ?>">
				<?php echo '<img src="'; echo catch_that_image(); echo '" />'; ?>
			</a>
		</div><!-- .post-thumbnail -->
		
	<?php endif; ?>

	<header class="entry-header">
		<?php		
		if ( is_single() ) {
			the_title( '<h1 class="entry-title">', '</h1>' );
		} elseif ( is_front_page() && is_home() ) {
			the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
		} else {
			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
		};

		if ( 'post' === get_post_type() ) {
			echo '<div class="entry-meta">';
			if ( is_single() ) {
				twentyseventeen_posted_on();
			} else {
				echo twentyseventeen_time_link();
				twentyseventeen_edit_link();
			};
			
			//阅读次数
			echo '<span class="postviews-icon">'; echo getPostViews(get_the_ID()); echo '</span>';
			
			echo '</div><!-- .entry-meta -->';
		}
		?>
	</header><!-- .entry-header -->

	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->

</article><!-- #post-## -->

缩略图放在标题前面，代码已经可以正常工作了，统计阅读次数也可以正常工作了。代码只是可用，但并不太好（我觉得）

4、移除文章内特色图片

原本主题如果设置了特色图片，会在文章内头部显示特色图片的。所以这里要把它干掉，不然文章内标题头部出现一张200×200的小图片，很难看。

修改header.php，调用特色图片的源代码如下：

	<?php
	/*
	 * If a regular post or page, and not the front page, show the featured image.
	 * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
	 */
	if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
		echo '<div class="single-featured-image-header">';
		echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
		echo '</div><!-- .single-featured-image-header -->';
	endif;
	?>

将这段代码删除掉，即可去除文章内的特色图片。

三、完善CSS样式表

样式表就各花入各眼了，我要求不高了，整洁即可，我需要的样式就如下图

CSS样式表用到了一些参数，与各种老旧浏览器的兼容性可能并不太好。我需要移动端ios的各种浏览器兼容，PC端谷歌浏览器兼容，就够了。

标题在容器内超出2行显示省略号

.entry-header .entry-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

摘要设置不自动换行，超出的显示省略号

.blog .site-main > article p, .category .site-main > article p, .recent-posts > article p {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

那么我需要的标题右边显示缩略图，到此就已经折腾完成了。大概是已经记录完整了吧，如发现有遗漏的，有空再继续完善。