WordPress Twenty Twelve 主题开启暗黑模式

吃饱没事干,折腾了一下,给网站加了个根据时间自动切换暗黑模式的小功能。晚上 19.00 点到第二天早上 7.00 点之间,网站会自动变成暗色风格,看起来比较护眼。这次没有直接改 Twenty Twelve 主题的文件,而是用子主题的方式搞定的,这样以后主题更新也不用来回改代码。

给 WordPress 增加代码高亮功能:https://be7v.top/archives/93.html
WordPress Twenty Twelve 主题修改:https://be7v.top/archives/43.html

之前写的这两个教程里面的功能我都全部整合到子主题 function.php 文件里了,还加了个”返回到顶部”的小按钮。大家如果想用的话,只要把 twentytwelve-child 文件夹上传到主题目录,在 WordPress 后台启用一下就行了,不需要动任何原主题的代码。

效果图就不贴了,晚上 19.00 以后打开本站就能看到暗黑模式的效果啦~

子主题 twentytwelve-child 下载地址:https://be7v.top/static/twentytwelve-child.zip

开发提示:父主题的 functions.php 会先加载,子主题的 functions.php 随后加载。期间踩了很多坑,顺序真的很重要

子主题 function.php

<?php

/**
 * Twenty Twelve 子主题功能
 * 包含: 主题样式管理、资源加载、页面增强
 */

/**
 * 主题样式管理
 * -----------------------------------------------------------------------------
 */

/**
 * 移除父主题的默认样式
 * 
 * 这个函数会:
 * 1. 从队列中移除父主题样式
 * 2. 注销父主题样式的注册
 */
function child_remove_parent_styles()
{
	wp_dequeue_style('twentytwelve-style');    // 从队列中移除样式,使其不会输出
	wp_deregister_style('twentytwelve-style'); // 注销注册的样式,让它"彻底失效"
}
add_action('wp_enqueue_scripts', 'child_remove_parent_styles', 20); // 设置优先级为 20,确保在父主题样式被注册后执行

/**
 * 加载主题样式
 * 
 * 根据时间自动切换明暗主题:
 * - 晚上19:00到早上7:00使用暗色主题
 * - 其他时间使用亮色主题
 */
function grand_sunrise_enqueue_css()
{
	// 1. 加载父主题基础样式
	wp_enqueue_style(
		'grand-sunrise-parent-style',
		get_template_directory_uri() . '/style.css',
		array(),
		'20250526'
	);

	// 2. 根据时间选择明暗主题
	$hour = intval(current_time('H'));
	$is_night_mode = ($hour >= 19 || $hour < 7);

	// 注册当前时间对应的主题样式
	wp_register_style(
		'twentytwelve-style',
		get_stylesheet_directory_uri() . ($is_night_mode ? '/style-dark.css' : '/style.css'),
		array('grand-sunrise-parent-style'),
		'20250526'
	);
	wp_enqueue_style('twentytwelve-style');

	// 3. 加载代码高亮样式
	wp_enqueue_style(
		'grand-sunrise-highlight-style',
		'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/atom-one-dark.min.css'
	);

	// 4. 加载返回顶部按钮样式
	wp_enqueue_style(
		'grand-sunrise-back-to-top-style',
		get_stylesheet_directory_uri() . '/back-to-top.css',
		array(),
		'20250526'
	);
}
add_action('wp_enqueue_scripts', 'grand_sunrise_enqueue_css', 30); // 设置优先级为 30,确保在 child_remove_parent_styles 之后执行

/**
 * JavaScript资源管理
 * -----------------------------------------------------------------------------
 */

/**
 * 加载所需的JavaScript资源
 * 
 * 包括:
 * 1. 代码高亮
 * 2. Google Analytics
 * 3. 返回顶部功能
 */
function grand_sunrise_enqueue_js()
{
	// 1. 代码高亮相关脚本
	wp_enqueue_script(
		'grand-sunrise-highlight-script',
		'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js',
		array(),
		null,
		true
	);

	wp_enqueue_script(
		'grand-sunrise-highlight-languages-script',
		'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js',
		array('grand-sunrise-highlight-script'),
		null,
		true
	);

	// 初始化代码高亮
	wp_add_inline_script(
		'grand-sunrise-highlight-languages-script',
		'hljs.highlightAll();'
	);

	// 2. Google Analytics
	wp_enqueue_script(
		'grand-sunrise-google-analytics',
		'https://www.googletagmanager.com/gtag/js?id=G-EFJ7WDQ068',
		array(),
		null,
		true
	);
	wp_add_inline_script(
		'grand-sunrise-google-analytics',
		'window.dataLayer=window.dataLayer||[];' .
			'function gtag(){dataLayer.push(arguments)}' .
			'gtag("js",new Date());' .
			'gtag("config","G-EFJ7WDQ068");'
	);

	// 3. 返回顶部按钮脚本
	wp_register_script('back-to-top', '', array(), null, true);
	wp_enqueue_script('back-to-top');
	wp_add_inline_script(
		'back-to-top',
		'const btn=document.getElementById("topBtn");' .
			'window.addEventListener("scroll",()=>{' .
			'    if(window.scrollY>300){' .
			'        btn.classList.add("show");' .
			'    }else{' .
			'        btn.classList.remove("show");' .
			'    }' .
			'});' .
			'btn.addEventListener("click",()=>{' .
			'    window.scrollTo({top:0,behavior:"smooth"});' .
			'});'
	);
}
add_action('wp_enqueue_scripts', 'grand_sunrise_enqueue_js');

/**
 * 页面增强功能
 * -----------------------------------------------------------------------------
 */

/**
 * 添加响应式视口meta标签
 */
function add_custom_meta_tags()
{
	echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">';
}
add_action('wp_head', 'add_custom_meta_tags');

/**
 * 添加返回顶部按钮
 */
function add_back_to_top()
{
	echo '<button id="topBtn">' .
		'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" ' .
		'stroke="currentColor" stroke-width="2.5" stroke-linecap="round" ' .
		'stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>' .
		'</button>';
}
add_action('wp_footer', 'add_back_to_top');


/**
 * 文章摘要350字
 */
function custom_trim_excerpt_for_index($content)
{
	if (!is_main_query() || !in_the_loop()) {
		return $content;
	}

	if (is_single() && get_post_type() === 'post') {
		return $content;
	}

	$raw_content = wp_strip_all_tags($content);
	$trimmed = wp_trim_words($content, 350, ' ...');

	if (strlen($raw_content) >= 350) {
		$trimmed .= ' <a href="' . get_permalink() . '" rel="bookmark">阅读更多</a>';
	}

	return $trimmed;
}
add_filter('the_content', 'custom_trim_excerpt_for_index');

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注