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