吃饱没事干,折腾了一下,给网站加了个根据时间自动切换暗黑模式的小功能。晚上 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');