修改 WordPress Twenty Fifteen 主题页脚以增加备案号

感觉 Twenty Fifteen(2015)这个主题挺简洁,甚合我意。不过发现这个主题页脚没有提供可视化的设置,于是乎只能在主题编辑器上面看看页脚的源码(footer.php)怎么写的:

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the "site-content" div and all content after.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

	</div><!-- .site-content -->

	<footer id="colophon" class="site-footer">
		<div class="site-info">
			<?php
				/**
				 * Fires before the Twenty Fifteen footer text for footer customization.
				 *
				 * @since Twenty Fifteen 1.0
				 */
				do_action( 'twentyfifteen_credits' );
			?>
			<?php
			if ( function_exists( 'the_privacy_policy_link' ) ) {
				the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
			}
			?>
			<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>" class="imprint">
				<?php
				/* translators: %s: WordPress */
				printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' );
				?>
			</a>
		</div><!-- .site-info -->
	</footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>

注意到第 23 行这里提供了一个钩子可以注入代码,如果在子主题里使用这个方法注入的话,就不需要修改原主题页脚的代码,这样的话代码量小,后期升级兼容性也更好。

那么就新建一个子主题,在 functions.php 这里加载:

add_action( 'twentyfifteen_credits', 'custom_footer_provider' );
function custom_footer_provider() {
	printf( '<a class="imprint" href="%s" target="_blank">%s</a>', 'https://beian.miit.gov.cn/', '粤ICP备XXX号-X' );
}

此时页脚已经可以显示备案号了,不过和原有的“自豪地采用WordPress”文字挤在一起,不太好看。注意到这两个元素其实是在一个 <div class="site-info"></div> 里的,那么只需要在 style.css 里面设置一下 flex 布局:

.site-info {
	display: flex;
	justify-content: space-between;
}

此时两个文字已经贴靠两边显示了。

发表评论

您的电子邮箱地址不会被公开。