官网: https://github.com/Licoy/wordpress-theme-puock
根据2.8.0 版本修改了主题。
需要 设置的部分
主题基本设置
-
资源与更新:主题更新检测频率:876000 (100年,相当于不更新)
-
全局设置
- 禁止非管理员访问用户资料页
- 隐藏文章浏览量
-
基础设置
- 图片懒加载
- 正文图片懒加载
- 留言头像懒加载
- 正文内容首行缩进: 不要打开,因为标题没有缩进
- 正文内容链接新标签页打开
- 正文内容侧边目录菜单生成
- 异步浏览量统计
- 评论相关:全部开启
- Gravatar头像源:cravatar
-
脚本及样式
- 底部关于我们,底部版权说明: 关闭
-
脚本及样式
- 底部页脚信息: 清空
Puock: 主题页脚 (footer.php)
在 <div class="info">
后增加如下内容
<div class="fs12 mt10 c-sub">
<span>Copyright :copyright:2021-<?php echo date("Y")?>, <a target="_blank" class="c-sub" title="rankment.com" href="https://rankment.com">rankment.com</a>, All Rights Reserved.</span>
</div>
外观,菜单
-
:house: 首页,
/
-
:milky_way: 关于,
/p/da6b9bd9ece356e6101ba1029bd5829a/
(无该页面) -
:man_pilot: 管理,
/wp-admin/
-
:check_mark: to do ,
/p/983f805e0cb779b62752bdd24e11c0f5/
(无该页面)
外观,小工具
-
删除默认
-
通用,侧边栏
-
文章搜索
-
随机文章
-
主题已经修改,不需要设置
删除“发表至”,发表时间
single.php
<!-- <div>
<span><?php _e('发表至:', PUOCK) ?></span><?php echo get_post_category_link_exec(true) ?>
</div> -->
<!-- <div>
<span class="c-sub"><i class="fa-regular fa-clock"></i> <?php pk_get_post_date() ?></span>
</div> -->
首页随机头图
准备头图,jpg 格式,按整数编号,copy 到主题目录: /var/www/html/wp-content/themes/wordpress-theme-puock-x.x.x/assets/img/random/
主题模板函数 functions.php:
//首页随机头图
function get_post_images($_post = null)
{
global $post;
if ($_post != null) {
$post = $_post;
}
$post_id = $post->ID;
// 如果有封面图取封面图
if (has_post_thumbnail()) {
$res = get_the_post_thumbnail_url($post, 'large');
if ($res != null) {
return $res;
}
}
if ($post_id == null && $post) {
$content = $post->post_content;
} else {
$content = get_post($post_id)->post_content;
}
preg_match_all('/<img.+src=[\'"](/p/148a59af602169aa0f2f4d3806871212);
if ($matches && $matches[1]) {
$res = $matches[1][0];
} else {
$res = get_stylesheet_directory_uri() . '/assets/img/random/' . mt_rand(1, 8) . '.jpg';
}
return $res;
}
修改为:
function get_post_images($_post = null)
{
global $post;
if ($_post != null) {
$post = $_post;
}
$post_id = $post->ID;
// 如果有封面图取封面图
if (has_post_thumbnail()) {
$res = get_the_post_thumbnail_url($post, 'large');
if ($res != null) {
return $res;
}
}
// if ($post_id == null && $post) {
// $content = $post->post_content;
// } else {
// $content = get_post($post_id)->post_content;
// }
// preg_match_all('/<img.+src=[\'"](/p/148a59af602169aa0f2f4d3806871212);
// if ($matches && $matches[1]) {
// $res = $matches[1][0];
// } else {
// $res = get_stylesheet_directory_uri() . '/assets/img/random/' . mt_rand(1, 8) . '.jpg';
// }
// return $res;
$res = get_stylesheet_directory_uri() . '/assets/img/random/' . mt_rand(1, 180) . '.jpg';
return $res;
}
删除post列表中的分类
编辑 templates/module-post.php, 注释掉两条如下语句
<?php echo get_post_category_link('badge d-none d-md-inline-block bg-' . pk_get_color_tag(['danger', 'warning', 'dark']) . ' ahfff') ?>
引用固定边框
通过增加css完成: header.php
<style>
blockquote {
background: #f9f9f9;
border: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
}
</style>
</head>
<body class="puock-<?php echo pk_theme_light() ? 'light' : 'dark';
echo current_theme_supports('custom-background') ? ' custom-background' : ''; ?>">
markdown代码:
> test
> $y=x^2$
> test
效果:
test
$y=x^2$
test
标题颜色为蓝色
header.php
#post-title {
color: blue;
}
."a-link t-w-400 t-md"{
color: blue;
}
mathjax支持
参考:https://docs.mathjax.org/en/latest/web/start.html#configuring-mathjax
分别修改 header.php, footer.php, 添加 mathjax配置
<!-- header 部分 -->
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<!-- footer 部分 -->
<script id="MathJax-script" async
src="/wp-content/themes/wordpress-theme-puock-2.8.0/assets/js/tex-chtml.js">
</script>
tex-chtml.js 原始地址: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js
对emoji的支持
- python预处理emoji为短代码
: smile :
- 使用js-emoji: https://github.com/iamcal/js-emoji
从 https://github.com/iamcal/js-emoji/tree/master/lib 获取
- emoji.min.js , 保存到 wordpress-theme-puock-2.8.0\assets\js
- emoji.css, 保存到 wordpress-theme-puock-2.8.0\assets\style
编辑主题的 single.php
<link href="/wp-content/themes/wordpress-theme-puock-2.8.0/assets/style/emoji.css" rel="stylesheet" type="text/css" />
<script src="/wp-content/themes/wordpress-theme-puock-2.8.0/assets/js/emoji.min.js" type="text/javascript"></script>
...
<script>
jQuery(document).ready(function(){
var emoji = new EmojiConvertor();
// convert colons explicitly to unicode
emoji.replace_mode = 'unified';
emoji.allow_native = true;
// replaces :smile: with platform appropriate content
var post_html = emoji.replace_colons(jQuery('#post').html());
jQuery('#post').html(post_html);
});
</script>
存在的问题:emoji 对应的短代码不全,不过一般应该够用了。
在数据库中保存emoji是终极解决方案(未处理)
头部流量统计代码可以用emoji 作为favicon
header.php
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>????????????????:1st_place_medal:</text></svg>">
不显示阅读数,评论次数
注释掉如下页面的相关行:
- Puock: 单独页面 (page.php):同时注释掉“编辑”按钮
- single.php: 同时注释掉“编辑”按钮
- module-post.php (templates/module-post.php)
修改更新日期: function pk_get_post_date()
function pk_get_post_date()
{
$time = get_post_time();
//$c_time = time() - $time;
//$day = 86400;
$res = date('Y-m-d', $time);
// switch ($c_time) {
// //todo 本地化翻译
// case $c_time < $day:
// $res = '近一天内';
// break;
// case $c_time < ($day * 2):
// $res = '近两天内';
// break;
// case $c_time < ($day * 3):
// $res = '近三天内';
// break;
// case $c_time < ($day * 4):
// $res = '四天前';
// break;
// case $c_time < ($day * 5):
// $res = '五天前';
// break;
// case $c_time < ($day * 6):
// $res = '六天前';
// break;
// default:
// $res = date('Y-m-d', $time);
// }
echo $res;
}