WordPress 的自定义修改

发表于 作者 daozhihun

老夫把博客从官方托管的 wordpress.com 重新搬运到 self hosted 自己的主机后，终于可以对 WordPress 进行一些个性化的修改以便满足自己的使用偏好（wordpress.com 需要高级套餐才能进行自定义，而贫穷的老夫显然承担不起这个费用）。

这篇博文来记录一下老夫进行的自定义修改，以便今后折腾博客的时候可以直接抄袭，而不需要自己再去尝试了。

PS：以下修改建议采用“子主题”的形式进行，否则主题升级以后自己修改的内容就消失了。关于子主题的使用方式具体参见这里。

添加页面底部的备案信息

备案完成后需要在网站底部添加工信部和公安的备案信息和跳转。打开主题编辑器，找到 template-parts/footer/site-info.php，在这个 site-info 的 div 里另起一行添加备案信息即可。为了简洁，老夫把原本的内容进行了缩减。

<div class="site-info">
	<span class="powered-by">
		<a href="https://www.daozhihun.cn/">
			刀之魂的成长日记
		</a>		
	</span>
	<span class="sep"> | </span>
	<span class="powered-by">
		<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'yocto' ) ); ?>" target="_blank">
			基于 WordPress.org
		</a>		
	</span>
	<span class="sep"> | </span>
	<span class="site-designer">
		主题：<a href="https://humblethemes.com/" target="_blank">Yocto</a>
	</span>
	<br />
	
	<span class="powered-by">
		<a href="https://beian.miit.gov.cn/" target="_blank">
			湘ICP备20013950号-1
		</a>		
	</span>
	<span class="sep"> | </span>
	<span class="site-designer">
		<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=43021102000205" target="_blank">
			<img class="alignnone size-full wp-image-5851" src="https://www.daozhihun.cn/wp-content/uploads/2020/07/备案图标.png" alt="" width="20" height="20">
			湘公网安备43021102000205号
		</a>		
	</span>

	<!--span class="sep"> | </span> -->
</div><!-- .site-info -->

效果看起来是这样：

文章列表的摘要添加超链接

默认情况下，在文章列表的页面，乃需要点击文章的标题才能跳转到文章的详情页，点击摘要文字和封面图片则没有反应，在手机浏览时尤其不方便。手机排版的宽度比较窄，所以摘要可能会占据很长的区域，要返回去点击标题还要向上滑，不符合其他大多数 APP 的使用习惯。所以老夫就需要做一个点击摘要文字或者封面图都跳转详情页的功能。

文章列表的样式在 template-parts/content.php 中，和文章的详情页显示是共用的，在 if ( is_singular() ) : 的 else 子句即为文章列表的布局内容。可以看到默认情况下只有标题才添加了跳转链接（第 9 行）：

//......
	else : ?>

		<header class="entry-header">
			<?php 
				if ( is_sticky() && is_home() ) :
					echo yocto_get_svg( array( 'icon' => 'pin' ) );
				endif;
				the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); 
			?>
		</header>

		<div class="entry-content">

			<?php
			get_template_part( 'template-parts/entry-meta' );
			yocto_post_thumbnail();
			the_excerpt();
			wp_link_pages( array(
				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'yocto' ),
				'after'  => '</div>',
			) );
			?>

		</div>
		<?php 
	endif; // End check single. ?>

如果只要给摘要做跳转，则我们只需要重写一下 the_excerpt 的内容即可。在 functions.php 的末尾添加如下 filter：

function the_excerpt_more_link( $excerpt ){
    $post = get_post();
    $excerpt = '<a href="'. get_permalink($post->ID) . '">'.$excerpt . '</a>';
    return $excerpt;
}
add_filter( 'the_excerpt', 'the_excerpt_more_link', 100 );

但酱紫的话，缩略图就不能进行跳转了。老夫用的这个主题获取缩略图是 yocto_post_thumbnail() 这个方法，修改这个方法也行，但反正文字和图片都要加，所以直接在父 div 上增加一个 onclick 不管点了哪里直接跳转就好了，一了百了。所以修改上述代码段的第 13 行，给 div 添加一个跳转：

		<div class="entry-content" onclick="location.href='<?php echo get_permalink(get_the_ID()) ; ?>'" style="cursor:pointer;">
			//......
		</div>

调整首页和文章页的样式

如果只需要调整外观样式而非布局元素，那么就不要去改主题的文件了，WordPress 直接提供了“额外 CSS”的功能，这个额外 CSS 会覆盖掉主题提供的样式。打开主题的“自定义”功能，找到额外 CSS 即可直接修改，也支持实时预览，非常方便。

调整字体大小

在手机上查看站点时，文章标题的字体大的一笔，需要调小一点，这个最简单，直接设置 .entry-title 的样式即可：

.entry-title {
	font-size: 36px;
}

调整图片说明文字的样式

老夫这个主题在默认情况下，图片的描述文字和正文文字看起来没什么区别，老夫还是喜欢默认主题下的那种样式：图片描述文字为灰色，并且比正文文字小一点：

.wp-block-image figcaption {
	font-size: 15px;
	color: #808080;
}

调整分隔符的样式

老夫用的主题的分隔符会占据整行的空间，并且线条很粗，老夫觉得不好看。老夫想要它变细一点，并且只居中显示一小段就可以了（就是乃现在看到的分隔符的效果）：

hr {
    height: 0;
    margin-top: -1px;
    margin-bottom: 24px;
    padding-top: 2px;
    border: 1px solid #ccc;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
    border-width: 0 0 1px;
    clear: both;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    margin-left: auto;
    margin-right: auto;
    max-width: 100px;
}

.footer-widgets hr, hr {
    background-color: #ccc;
}

代码段的字体大小

老夫的代码段使用的是 Code Syntax Block，默认字体看起来有点大。

code[class*="language-"], pre[class*="language-"] {
	font-size: 14px;
}

未登录状态隐藏评论

WordPress 只提供了显示/隐藏评论的开关，而与用户是否登录无关。如果老夫们希望在没有登录的情况下看不到其他人的评论，也不能发表评论，则需要修改 single.php（针对文章） 以及 page.php（针对页面）。

默认情况下，如果评论开放或者评论数量不为 0，就会加载评论功能。我们只需要增加一个是否登录的判断即可，类似这样：

		if (is_user_logged_in()) :
			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) :
				comments_template();
			endif;
		endif;

酱紫的话，只有登录用户才能看到和发表评论了。

添加第三方搜索引擎

WordPress 自己的搜索功能比较智障，目测是使用的类似于 subString 的模式进行匹配，稍微有点不一样就搜索不到了，所以有时候还是需要专业的搜索引擎来干这件事情。

比如老夫想在没有搜索结果，或者用户遇到 404 的时候才显示第三方搜索引擎，则需要修改 template-parts/content-none.php 页面。如果乃想在右侧的工具栏显示第三方搜索引擎，则直接增加一个小组件，输入类似的 html 即可。

在页面的 page-content 的 div 末尾增加如下内容，即可整出一个 Google 搜索框，支持本站搜索和全球搜索功能：

    //......

		<br/>
		
		<h3>
			乃可以试试使用 Google 来搜索本站内容：
		</h3>
		<div>  
		<form method="GET" action="https://www.google.com/search">    
		<input type="hidden" value="GB2312">    
		<input type="hidden" value="GB2312">    
		<input TYPE="hidden" VALUE="zh-CN">   
		<div style="float:left">    
		<img src="https://www.daozhihun.cn/wp-content/uploads/2020/08/googlelogo_color_272x92dp.png" width="20%" height="20%"　border="0" alt="Google" height="20px">  
		</div>  
		<div style="float:left">  
		<input type="text" name="q" size="18" maxlength="255"  value="">   
		<input type="submit" name="btnG" VALUE="Google搜索">    
		</div><br><br>  <br>  
		<div>  
		<input type="radio" name="sitesearch" value="daozhihun.cn" checked>本站搜索    
		<input type="radio" name="sitesearch" value="" > 全球搜索
		</div>   
		</form>   
		</div>  
	</div><!-- .page-content -->

效果如下：

兼容手机浏览器

WordPress 近两年的新主题基本上都采用了响应式的网页设计，会根据屏幕大小进行自动适应，所以也没有额外需要做的工作。

老夫目前使用的主题是 Yocto，对手机支持较好，乃不妨也试试。

左图：手机浏览时，顶部的菜单栏会收起成按钮，点击即可展开。
中图：右侧的搜索、文章归档等组件会显示在页面底部。
右图：详情页会根据设备尺寸进行适应，手机阅读也很方便。

✏️ 有任何想法？欢迎发邮件告诉老夫：daozhihun@outlook.com