wordpress主题D8 5.3

使用参考

wordpress 后台设置

  • wordpress 后台,工具,自动更新器:自动更新 WordPress 核心,插件和主题
  • 用户
    • 个人资料:昵称,显示:银河量化
  • 工具
    • 站点健康
      • 删除默认主题和 D8 主题之外的其他主题
      • 删除不用的插件
  • 菜单 top_menu
    • 关于:/archives/20210103_about.html
    • admin:/wp-admin/
    • 显示位置: 网站导航 页面导航

插件

启用所有插件的自动更新

WP Super Cache 和 Redis Object Cache

  • WP Super Cache
    • 通用:启用缓存功能
    • 高级:专家模式,禁用登录访客的缓存。在专家模式下,WP Super Cache 插件 直接生成文件到服务器,不会调用 Redis 内存。如果使用普通模式,就可能有冲突。
  • Redis
    • 安装 Redis 服务器:sudo apt install redis-server
    • wordpress 安装 Redis Object Cache 插件

redis 测试:

apt-get install redis-server
service redis-server start
redis-cli.exe -h 127.0.0.1 -p 6379
127.0.0.1:6379> set a 123
OK
127.0.0.1:6379> get a
"123"

其他插件

  • WP Mail SMTP by WPForms:发送邮件。
  • Wordfence Security:安全插件
  • Q2W3 Fixed Widget:小工具固定插件,需要自定义 HTML ID 设置需要个悬浮固定的小工具,然后清除缓存。
  • Companion Auto Update:自动更新
  • WordFence
  • Disable XML-RPC
    • Disable built-in WordPress file editor:OFF,否则无法编辑主题问题。
  • WPS Hide Login:菜单依然可以设置为 /wp-admin/, 登录后该网址依然可用。
  • Theme Authenticity Checker:一键检测主题是否安全,是否含有恶意代码, 提示“Theme OK!” 证明是安全的。不安全的主题则会有一个红色的提示框告诉你“Encrypted Code Found!”。这个插件误报情况比较严重,因为机器现在还不能像人一样智能。 已经很久没有更新,可以检查后卸载
  • Autoptimize(不使用,会导致部分 js 冲突)
  • Bulk Delete:批量删除帖子

主题后台设置

  • 列表在手机端简化展示
  • 不显示访客数 不显示作者 不显示评论数 不显示时间
  • 导航固定在顶部: 关闭。开启状态下有时候会挡住图片。
  • 百度流量统计代码
  • 列表 Ajax 加载分页内容: 移动端可以滚动加载
  • 禁止站内文章 Pingback
  • 主题设置:文章无特色图时不显示默认缩略图 关闭
<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c223328933763c73c8f47f522c9b3318";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

主题右侧边栏加搜索功能

Q2W3 Fixed Widget 插件添加 ID:block-right-side-search

小工具搜索 html,添加自定义代码:

<div class="widget widget_block widget_search" id="block-right-side-search" style="border-style:none;margin:0 auto;">
    <form role="search" method="get" action="https://yinhe.co/" style="border-style:none;margin:0 auto;"
        class="wp-block-search__button-outside wp-block-search__text-button background-color:transparent;border:0; wp-block-search">
        <div class="wp-block-search__inside-wrapper">
            <input style="border-style:none;margin:0 auto;" type="search" id="wp-block-search__input-1" class="wp-block-search__input" name="s" value="" 
                placeholder=" 输入关键字搜索 " required />
            <button style="border-style:none;margin:0 auto;" type="submit" class="wp-block-search__button "> 搜索 </button></div>
    </form>
</div>

nginx 设置不能访问相关扩展名文件

包括:

  • python
  • markdown
  • ini
location / {if ($request_uri ~* .(php|php5|sh|pl|py|md|ini)$) {return 403;}

ngix gzip 压缩

    gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
    gzip_disable "MSIE [1-6].";
    gzip_vary on;

VPS 侧 Markdown 文件更新到 Wordpress:用 inotifywait 监视文件夹变化并更新 wordpress

1.vps 安装:sudo apt install inotify-tools

2. 创建脚本:/home/ubuntu/markdownfiles/auto_check.sh

参考:inotifywait 命令如何监控文件变化?

#!/bin/bash
dir=/home/ubuntu/markdownfiles              #指定需要监视的文件夹
inotifywait -mr $dir  -e  modify -e move -e create -e delete  |
while read events; do
        echo "----------changed,wait for some seconds to update posts ----------"
        sleep  10 # 保证更新后启动 
        echo "----------changed----------"
        cd /home/ubuntu/markdownfiles/ && python3 /home/ubuntu/markdownfiles/md2wp.py
done

3. 设置开机启动脚本:sudo vi /etc/crontab , 添加:

@reboot root /home/ubuntu/markdownfiles/auto_check.sh

重启 vps

其他问题:

  • inotifywait 会在一次同步中触发多个事件导致重复更新,需要在 python 脚本中处理:保证每次的 markdown 更新只更新一次 post 到 wordpress
  • inotifywait 会在同步没有完成前第一次检测到文件变动时开始启动 post 更新,需要 sleep 一段时间,在 python 脚本确保这一点
if __name__=='__main__':
    # 如果存在 have_updated.txt 文件,则不重复更新
    # 避免 inotify 事件触发的反复更新
    if not os.path.exists("have_updated.txt"):
        print("----------file changed,wait for some seconds to update posts ----------")
        time.sleep(10)
        update_posts(force=False)
        print('------posts updated------')
        os.mknod("have_updated.txt") # 创建空文件
    else:
        print('------no repeated update------')

本地编辑 Markdown 文件:通过 ubuntu 或 windows 下 WSL2 里的 rsync 同步到 VPS

WSL2 Inotify not working, 所以不能用 inotify 自动同步文件,只用手动用 rsync。

WSL 并不能称为真正的 Linux. 实际上 crontab 也有问题。:hankey:

yinhe 脚本:

#!/bin/bash
# This is our first script.
# 将脚本所在目录加入 $PATH
set -x #echo on
cd /mnt/d/98blog_yh/
while true
do
rsync -av --delete   --chmod=Du+rwx  /mnt/d/98blog_yh/markdownfiles/ ubuntu@110.42.238.175:/home/ubuntu/markdownfiles
sleep 60
done

可以在 windows 下使用 MobaXterm 运行该脚本,每 60 秒会自动同步一次。

D8 主题定制参考

基于 D8 主题 5.3 版本定制,支持到 php7.4, 并不支持 php8.

主题文件夹 d8(区分大小写)

已经支持的功能列表

  • 本地编辑 Markdown 文件:通过 ubuntu 或 windows 下 WSL2 里的 rsync 同步到 VPS.
  • VPS 侧 Markdown 文件更新到 Wordpress:用 inotifywait 监视文件夹变化并更新 wordpress
  • TOC 目录
  • Tasklist、checklist
  • prism 语法高亮
  • 文章自动随机头图
  • 非登录用户不显示私密 post,包括搜索:该主题本来就自带了该功能
  • 文章组织: 通过本地 markdown 源文件目录层次组织,舍弃分类和标签。
  • 随机引言
  • 支持 mathjax
  • 图像: 不需要处理 zoom,markdown 文件目前单行只能支持一张图片,并不支持多张及相册
  • 评论支持 Markdown
  • 自带 jQuery 版本 1.7.2 升级到 3.6.0
  • 支持直接插入 markdown 文件同一目录下的 csv 文件
  • 支持一行多图
  • 支持相册
  • 支持图片 zoom
  • 引言 css 格式优化
  • 支持 mermaid 作图: 按需引入 js
  • 置顶文章
  • 支持标签维护
  • 新标签页打开外链、彩色标签

插件 Theme Check(仅用于检查修改主题时使用)

尽量修复了 warning 部分的 条目。

最新消息: 不显示

header.php,注释掉如下行:

    <!-- <div class="speedbar">
        <?php 
        if(dopt('d_sign_b') ){ 
            global $current_user; 
            wp_get_current_user();
            $uid = $current_user->ID;
            $u_name = get_user_meta($uid,'nickname',true);
        ?>
            <div class="pull-right">
                <?php if(is_user_logged_in()){
                    echo '<i class="icon-user icon12"></i> '.$u_name.'   '; 
                    echo '<a href="'.site_url('/wp-admin').'" target="_blank"> 后台管理 </a>';
                    echo '     <i class="icon-off icon12"></i> ';
                }else{echo '<i class="icon-user icon12"></i> ';}; 
                wp_loginout(); 
                ?>
            </div>
        <?php } ?>
        <div class="toptip"><strong class="text-success"> 最新消息:</strong><?php echo dopt('d_tui'); ?></div>
    </div> -->

最新发布:不显示

index.php

        // if($paged && $paged > 1){//  echo '<header class="archive-header"><h1> 最新发布 第 '.$paged.' 页 </h1><div class="archive-header-info"><p>'.get_option('blogname').get_option('blogdescription').'</p></div></header>';
        // }else{//  if( dopt('d_sticky_b') ) include 'modules/sticky.php';
        //  echo '<h2 class="title"> 最新发布 </h2>';
        // }

备案等信息:已写死

footer.php, 显示在右侧

        <div class="copyright pull-left">
            ©2020-<?php echo date('Y'); ?> <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> All Rights Reserved. <br />
            <span class="text-ellipsis">
                <a href="https://beian.miit.gov.cn/" rel="external nofollow"  target="_blank"> 蜀 ICP 备 20011690 号 </a><br />
                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51019002002885" style="display:inline-block;text-decoration:none;">
                    <img src="https://cdn.jsdelivr.net/gh/yinhedot/cdn/other/beian_ghs.png" style="float:left;" /> 川公网安备 51019002002885 号 </a>
            </span>
        </div>

share.js 堵塞:Https 页面使用百度分享的解决方法

替换其他方案。参考 https://github.com/overtrue/share.js, 将 dist 文件夹下的 css,js,fonts 文件夹拷贝到 D8 主题根目录文件夹下。

1.jsjquery.js,将如下的行注释掉

    // if($('.bdsharebuttonbox').length ){//  if( $('.article-content').length ) $('.article-content img').attr('data-tag', 'bdshare')

    //  window._bd_share_config={
    //      "common":{
    //          "bdText":"",
    //          "bdMini":"2",
    //          "bdMiniList":false,
    //          "bdPic":"",
    //          "bdStyle":"0",
    //          "bdSize":"24"
    //      },
    //      "share":{},
    //      "image":{
    //          tag: 'bdshare',
    //          "viewList":["qzone","tsina","tqq","renren","weixin"],
    //          "viewText":" ",
    //          "viewSize":"16"
    //      }/*,
    //      "selectShare":{
    //          "bdContainerClass":'article-content',
    //          "bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]
    //      }*/
    //  };
    //  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
    // }

2.footer.php 添加:

    <script src="/wp-content/themes/D8/js/social-share.min.js" ></script>
</footer>

3.header.php 添加

<link rel='stylesheet' href='/wp-content/themes/D8/css/share.min.css' type='text/css' media='all' />
<style type="text/css">
[class*="social-share-icon"] {background-image: none;}
</style>
</head>

4. 修改 functions.php

function deel_share(){echo '<div class="share"><h5> 分享到 </h5><div class="bdsharebuttonbox"><a class="bds_weixin" data-cmd="weixin"></a><a class="bds_tsina" data-cmd="tsina"></a><a class="bds_sqq" data-cmd="sqq"></a><a class="bds_qzone" data-cmd="qzone"></a><a class="bds_youdao" data-cmd="youdao"></a><a class="bds_baidu" data-cmd="baidu"></a><a class="bds_douban" data-cmd="douban"></a><a class="bds_bdhome" data-cmd="bdhome"></a><a class="bds_fbook" data-cmd="fbook"></a><a class="bds_twi" data-cmd="twi"></a><a class="bds_more" data-cmd="more"></a><a class="bds_count" data-cmd="count"></a></div></div>';}

替换为:

function deel_share(){echo '<div class="social-share" data-disabled="tencent,diandian"></div>';}
  1. 搜索调整 <?php deel_share(); ?> 的位置,或者替换为 <div class="social-share" data-disabled="tencent,diandian"></div>,防止微信二维码被遮挡。目前仅仅替换了 single.php

logo

mobile 状态下获取导航栏的色块制作 logo,大小 220 x 60 像素,名称:logo.png

gavatar

修改 functions.php, 替换默认不能使用的 gravatar 服务器。

add_filter('get_avatar', 'get_ssl_avatar');
function get_ssl_avatar($avatar) {// $avatar = preg_replace('/.*/avatar/(.*)?s=([d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2&d=mm" class="avatar avatar-$2" height="50" width="50">',$avatar);
    $avatar = preg_replace('/.*/avatar/(.*)?s=([d]+)&.*/','<img src="https://sdn.geekzu.org/avatar/$1?s=$2&d=mm" class="avatar avatar-$2" height="50" width="50">',$avatar);
    return $avatar;
}

favicon

将大小设置最少 70×70,因为这个尺寸可以生成桌面图标,格式最好为 PNG,能够与浏览器更好的融合

favicon.ico:d8/img/favicon.ico

支持 prism 语法高亮

参考:

将 prism.css,prism.js 放入 css,js 文件夹

header.php 中添加:

<link rel='stylesheet' href='/wp-content/themes/d8/css/prism.css' type='text/css' media='all' />

footer.php 中添加

<script src="/wp-content/themes/d8/js/prism.js" ></script>

为了显示行号, 需要给 pre 添加 class <pre class="line-numbers">, 最后生成的代码类似下面这种:

<pre class="line-numbers language-bash" style="white-space:pre-wrap;">
<code class="language-bash">function clrhist() {awk -i inplace -v rmv="$1" '!index($0,rmv)' "$HISTFILE"
}</code></pre>

原始代码类似下面这种:

<pre class="codehilite"><code class="language-shell">dpkg -i xxx.deb`
apt-get install supervisor
# vi /var/run/supervisor.sock  ---> 创建空文件保存
chmod 777 /var/run/supervisor.sock
systemctl enable supervisor.service
systemctl start supervisor.service
cd /etc/supervisor/conf.d/
vi hugo.conf
</code></pre>

所以在用 python 生成 html 代码时进行替换即可。

评论默认头图 (未解决)

替换 img/default.png

自动随机头图

图片文件数字编号存储到 img humbnail,文件来源 http://bimg.top/, 图片大小 220x150,可以用脚本 pic2thumbnail.py 处理。

修改 functions.php,参考 https://www.fffmo.com/887.html

原始代码:

else {
        $content = $post->post_content;  
        preg_match_all('/<img.*?(?: |\t|\r|\n)?src=['"]?(.+?)['"]?(?:(?: |\t|\r|\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);  
        $n = count($strResult[1]);  
        if($n > 0){echo '<img src="'.$strResult[1][0].'" alt="'.trim(strip_tags( $post->post_title)).'" />';  
        }else {echo '<img src="'.get_template_directory_uri().'/img/thumbnail.png" alt="'.trim(strip_tags( $post->post_title)).'" />';  
        }  
    }

替换如下,随机 22 张图片的例子。

else {$random = mt_rand(1, 22);
        echo '<img src="'.get_template_directory_uri().'/img/thumbnail/'.$random.'.png"' alt="'.trim(strip_tags( $post->post_title)).'" />';   
    }

已经优化为使用 webp 格式图片。

标题字体加粗

style.css, 修改 font-weight 为 bold

.article-content h2{font-size:18px;font-weight:bold;margin:20px -20px 20px -24px;padding:10px 20px 9px 20px;line-height:18px;border-left:4px solid #428BCA;background-color:#fbfbfb}
.article-content h3{font-size:16px;font-weight:bold;}
.article-content h4{font-size:14px;font-weight:bold;}
.article-content h5{font-size:12px;font-weight:bold;}

登录用户的管理菜单

默认在 functions.php 中是隐藏的,不用修改,在菜单上加个后台入口就可以了。 如果修改为显示,登录用户的文章内容第一行会被遮蔽。

    // 隐藏 admin Bar
    add_filter('show_admin_bar','hide_admin_bar');

文章 meta 信息:删除

single.php

        <header class="article-header">
            <h1 class="article-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
            <!-- <div class="meta">
                <?php  
                    $category = get_the_category();
                    if($category[0]){echo '<span class="muted"><a href="'.get_category_link($category[0]->term_id ).'"><i class="icon-list-alt icon12"></i> '.$category[0]->cat_name.'</a></span>';
                    }
                ?>
                <span class="muted"><i class="icon-user icon12"></i> <a href="<?php echo get_author_posts_url(get_the_author_meta( 'ID') ) ?>"><?php echo get_the_author() ?></a></span>
                <?php echo dopt('d_post_from_s') && hui_get_post_from() ? '<span class="muted">'.hui_get_post_from().'</span>' : '' ?>
                <time class="muted"><i class="ico icon-time icon12"></i> <?php echo timeago(get_the_time('Y-m-d H:i:s') )?></time>
                <span class="muted"><i class="ico icon-eye-open icon12"></i> <?php deel_views(' 浏览 '); ?></span>
                <?php if (comments_open() ) echo '<span class="muted"><i class="icon-comment icon12"></i> <a href="'.get_comments_link().'">'.get_comments_number('0', '1', '%').' 评论 </a></span>'; ?>
                <?php edit_post_link('[ 编辑]'); ?>
            </div> -->
        </header>

与本文相关的文章:删除

single.php

        <!-- <footer class="article-footer">
            <?php the_tags('<div class="article-tags"> 继续浏览有关 ','',' 的文章 </div>'); ?>
            move to functions.php $content.= '<p> 转载请注明:行上侧
            <?php deel_share(); ?>
        </footer> -->

        <!-- <div class="relates">
            <h3> 与本文相关的文章 </h3>
            <?php include('modules/related.php'); ?>
        </div> -->

随机引言

随机引言的内容可以不断在这里更新

  • 在主题的 functions.php 中添加如下随机引言代码
/* ===> 随机引言 by https://yinhe.co , 修改自 wordpress 插件 RQuotes*/
function show_quotes() {
    global $show_quotes;
    // eot 里面的就是随机显示的格言,可以自定义一句一行即可。$quotes = <<< eot
兴趣是最好的老师——爱因斯坦
想象力比知识更重要! 因为知识是有限的, 而想象力概括着世界的一切, 推动着进步, 并且是知识进化的源泉。——爱因斯坦
只有偏执狂才能生存!——Andy Grove 
控制风险的最好办法是深入思考, 而不是投资组合。——巴菲特
价值投资不能保证我们盈利, 但价值投资给我们提供了通向成功的唯一机会。——巴菲特
我从事投资时, 会观察一家公司的全貌; 而大多数投资人只盯着它的股价。——巴菲特
退潮时, 便可知道谁在裸泳。——巴菲特
在 b 进位制中,以数 n 起头的数出现的机率为 logb(n + 1) − logb(n) —— 本福特定律
Don't misinform your Doctor nor your Lawyer. —— Benjamin Franklin
别向医生和律师提供错误的消息。—— 本杰明·富兰克林
知识上的投资总能得到最好的回报。——本杰明。 富兰克林
640K 对每一个人来说都已足够 —— 比尔盖茨
一个伟大的程序员, 其价值相当于普通程序员的 1 万倍!——比尔盖茨
计算机没什么用。他们只会告诉你答案。——毕加索
想想看吧,已经有一百万只猴子坐在一百万台打字机旁,可 Usenet 就是比不上莎士比。—— Blair Houghton
我向星星许了个愿。我并不是真的相信它,但是反正也是免费的,而且也没有证据证明它不灵。—— 加菲猫
要节约用水,尽量和女友一起洗澡——加菲猫
通往地狱的路,都是由善意铺成的——哈耶克
不管我们已经观察到多少只白天鹅,都不能确立“所有天鹅皆为白色”的理论。只要看见一只黑天鹅就可以驳倒它。——卡尔·波普尔
天地不仁,以万物为刍狗;圣人不仁,以百姓为刍狗。—— 老子
没有人足够完美,以至可以未经别人同意就支配别人。——林肯
你可以暂时地蒙骗所有人, 也可以永久地蒙骗部分人, 但不可能永久地蒙骗所有人。——林肯
实力永远意味着责任和危险。—— 罗斯福。 T.
大多数人宁愿死去, 也不愿思考。-- 事实上他们也确实到死都没有思考。——罗素
如果你想走到高处,就要使用自己的两条腿!不要让别人把你抬到高处;不要坐在别人的背上和头上。—— 尼采
在认识一切事物之后,人才能认识自己,因为事物仅仅是人的界限。——尼采
我注意过,即便是那些声称一切都是命中注定的而且我们无力改变的人,在过马路之前都会左右看。——史提芬·霍金
Stay hungry. Stay foolish.——史蒂夫。 乔布斯
这辈子没法做太多的事情, 所以每一件都要做到精彩绝伦!——史蒂夫。 乔布斯
我每天都自问: ' 如果今天是我生命的最后一天, 我还会做今天打算做的事情吗?'——史蒂夫。 乔布斯
领袖和跟风者的区别就在于创新!——史蒂夫。 乔布斯
尊严不值钱,却是我唯一真正拥有的!—— V For Vendetta
你自己的代码如果超过 6 个月不看,再看的时候也一样像是别人写——伊格尔森定律
不要恐慌 ——《银河系漫游指南》没有一个人的记性,好到可以作个成功的说谎者——林肯
eot;

    // Here we split it into lines
    $quotes = explode("
", $quotes);
    // 随机选择一行输出
    $show_quotes = wptexturize($quotes[ mt_rand(0, count($quotes)-1 ) ] );
        //echo "<p class="blog-post" style="text-align:center; ">".$show_quotes."</p>";
        echo "<blockquote><p>".$show_quotes."</p></blockquote>";
}
/* ===> 随机引言 by https://yinhe.co , 修改自 wordpress 插件 RQuotes*/

添加随机引言:

single.php

        <article class="article-content">
            <?php the_content(); ?>
            <?php show_quotes(); ?>
            <?php wp_link_pages('link_before=<span>&link_after=</span>&before=<div class="article-paging">&after=</div>&next_or_number=number'); ?>
        </article>

文章版权

修改 functions.php

        // $content.= '<p> 转载请注明:<a href="'.home_url().'">'.get_bloginfo('name').'</a> » <a href="'.get_permalink().'">'.get_the_title().'</a></p>';
        $content.='<span>© Licensed under CC BY-NC-SA 4.0</span>';

支持 mathjax

single.php

<?php get_header(); ?>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
    MathJax = {
        tex: {inlineMath: [['$', '$'], ['\(', '\)']]
        }
    };
</script>

评论支持 Markdown

参考:https://github.com/erusev/parsedown

下载文件 Parsedown.php

functions.php


// 垃圾评论
// 如果 HTTP_REFERER 值没有被设置或者为空 则不会继续到下一步添加评论。 
function check_referrer_comment() {if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == '') {wp_die(__(' 请不要直接访问这个文件。'));
    }
}
add_action('check_comment_flood', 'check_referrer_comment');

// 禁止全英文评论 
// 评论中需要有中文 laobuluo.com

function wp_refused_spam_comments($comment_data) {$pattern = '/[ 一 - 龥]/u';
$jpattern = '/[ぁ - ん]+|[ァ - ヴ]+/u';
include_once(get_template_directory()."/Parsedown.php");
$Parsedown = new Parsedown();
$Parsedown->setSafeMode(true);

// 登录用户不做判断
if (is_user_logged_in() ) {$comment_data['comment_content'] = $Parsedown->text($comment_data['comment_content']);
    return ($comment_data);
}
if (!preg_match($pattern, $comment_data['comment_content'])) {err(__(' 评论中需要有一个汉字!'));
}
if (preg_match($jpattern, $comment_data['comment_content'])) {err(__(' 不能有日文!'));
}
if (all_external_link($comment_data, $host = '') ){err(__(' 不能有外链!'));
}
$comment_data['comment_content'] = $Parsedown->text($comment_data['comment_content']);
return ($comment_data);
}
add_filter('preprocess_comment', 'wp_refused_spam_comments');

//   is_external_link 检测字符串是否包含外链
//   @param string $text 文字
//   @param string $host 域名
//   @return boolean    false 有外链 true 无外链
function all_external_link($text = '', $host = '') {if (empty($host)) $host = $_SERVER['HTTP_HOST'];
  $reg = '/http(?:s?)://((?:[A-za-z0-9-]+.)+[A-za-z]{2,4})/';
  preg_match_all($reg, $text, $data);
  $math = $data[1];
  foreach ($math as $value) {if($value != $host) return false;
  }
  return true;
}
// 垃圾评论 

评论支持语法高亮

D8 原始代码自动支持。

自带 jQuery 版本 1.7.2 升级到 3.6.0

jquery 参考:https://jquery.com/download/

主题自行添加的代码,参考 original 文件。

D8 主题的原始作者处理的很好,直接在该文件中添加自定义代码。

支持直接插入 markdown 文件同一目录下的 csv 文件

需要安装命令行工具:pip install csvtomd,sudo pip install csvtomd

插入 csv 文件语法: ![](xxx.csv), csv 将直接转为 表格。 csv 文件的字符编码建议用 utf8

支持登录后显示本地 markdown 文件路径

仅支持 PC 版 chrome,其他没有测试。

1.python 脚本写入 div 并隐藏

2. 根据 cookie 判断是否有登录:wp-settings-time-xxx

jquery.js 添加如下代码:

        $(document).ready(function(){
        // show local path
        var aCookie = document.cookie.split(";");
        for (var i = 0; i < aCookie.length; i++) {if(aCookie[i].substring(1,18)=='wp-settings-time-'){if( document.getElementById("localMarkdownFilePath")){document.getElementById("localMarkdownFilePath").style.display="";
                }

            }
        }

修复错误:jquery.js:36 Uncaught TypeError: $(……).lazyload is not a function

footer.php 添加如下代码:

<script src="https://cdn.jsdelivr.net/npm/jquery-lazyload@1.9.7/jquery.lazyload.min.js"></script>

修复错误:jquery.js:70 Uncaught TypeError: $(……).tooltip is not a function

参考:https://www.jsdelivr.com/package/npm/jquery-ui-dist

footer.php 添加如下代码:

<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js"></script>

修复错误:Uncaught TypeError: Cannot read properties of undefined (reading 'msie')

参考:https://stackoverflow.com/questions/14923301/uncaught-typeerror-cannot-read-property-msie-of-undefined-jquery-tools

jquery.js 添加如下代码:

// fix: Uncaught TypeError: Cannot read properties of undefined (reading 'msie')
jQuery.browser = {};
(function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    }
})();

修复错误:Uncaught TypeError: $.ias is not a function

footer.php

<script src="https://cdn.jsdelivr.net/npm/jquery-ias@2.3.1/src/jquery-ias.min.js"></script>

修复错误:jquery.js:2 Uncaught ReferenceError: IASCallbacks is not defined

参考:https://stackoverflow.com/questions/23779374/jquery-ias-infinite-scrolling-packery-iascallbacks-is-not-defined

js 原始文件:https://raw.githubusercontent.com/webcreate/infinite-ajax-scroll/2.x/src/callbacks.js, 来自该项目:https://github.com/webcreate/infinite-ajax-scroll

footer.php

<script src="/wp-content/themes/d8/js/callbacks.js"></script>

修复错误 Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth')

得判断对象是否存在,再执行相关操作:

footer.php

    if ($('.photos').length >0){$('.photos').gallerify({
            margin:2,
            mode:'default'
        });
    }

垃圾邮件

参考 https://justyy.com/archives/2465 修改 functions.php


// 垃圾评论
// 如果 HTTP_REFERER 值没有被设置或者为空 则不会继续到下一步添加评论。 
function check_referrer_comment() {if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == '') {wp_die(__(' 请不要直接访问这个文件。'));
    }
}
add_action('check_comment_flood', 'check_referrer_comment');

// 禁止全英文评论 
// 评论中需要有中文 laobuluo.com
function wp_refused_spam_comments($comment_data) {$pattern = '/[ 一 - 龥]/u';
$jpattern = '/[ぁ - ん]+|[ァ - ヴ]+/u';
// 登录用户不做判断
if (is_user_logged_in() ) {return ($comment_data);
}
if (!preg_match($pattern, $comment_data['comment_content'])) {err(__(' 评论中需要有一个汉字!'));
}
if (preg_match($jpattern, $comment_data['comment_content'])) {err(__(' 不能有日文!'));
}
if (all_external_link($comment_data, $host = '') ){err(__(' 不能有外链!'));
}
return ($comment_data);
}
add_filter('preprocess_comment', 'wp_refused_spam_comments');

/**
 * is_external_link 检测字符串是否包含外链
 * @param string $text 文字
 * @param string $host 域名
 * @return boolean    false 有外链 true 无外链
 * /
function all_external_link($text = '', $host = '') {if (empty($host)) $host = $_SERVER['HTTP_HOST'];
  $reg = '/http(?:s?)://((?:[A-za-z0-9-]+.)+[A-za-z]{2,4})/';
  preg_match_all($reg, $text, $data);
  $math = $data[1];
  foreach ($math as $value) {if($value != $host) return false;
  }
  return true;
}
// 垃圾评论 

支持一行多图

python 脚本中支持,一行多个图片:![](xxx)![](xxx)

参考:https://github.com/xremix/xGallerify

single.php

footer.php

<!-- Latest Version -->
<script src="https://cdn.jsdelivr.net/npm/xgallerify@latest/dist/jquery.xgallerify.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){$('.photos').gallerify({
        margin:2,
        mode:'default'
    });

//Render Async will allow to render the images that have been loaded asynchronus after the Gallery was initialized
//gallery.gallerify.renderAsyncImages();}); 
</script>

使用,参考:https://stylehatch.github.io/photoset-grid/

python 脚本需要的输出类似,没有使用宽度:

<div class="photos xgallerify">
    <img src="xxx.jpg" style="display: inline-block; margin: 2px; width: 488px;">
    <img src="xxx.jpg" style="display: inline-block; margin: 2px; width: 149.95px;">
</div>

需要 PIL 库获取 width

sudo pip install Pillow
pip install Pillow

支持图片 zoom

参考 https://github.com/fat/zoom.js/

  • transition.js(暂时未添加)
  • zoom.css
  • zoom.min.js

主题 single.php 需要添加的文件:

<link rel='stylesheet' href='/wp-content/themes/d8/css/zoom.css' type='text/css' media='all' />

footer.php

<script src="/wp-content/themes/d8/js/zoom.min.js" ></script>

python 处理图片时,需要添加 action

<img src="img/blog_post_featured.png" data-action="zoom">

引言 css 格式优化

style.css

/* for blockquote */
.article-content blockquote {
    border: 0.1em dashed #c76c0c;
    display: block;
    font-size: 32px;
    line-height: 1.3em;
    font-weight: bold;
    margin-top: 0em;
    letter-spacing: 0;
}
.article-content blockquote p{margin:0;padding:0;margin-bottom:5px;font-size:16px;line-height: 20px}
/* for blockquote */

支持 mermaid 作图: 按需引入 js

cdn:https://www.jsdelivr.com/package/npm/mermaid

mermaid 安装参考:http://mermaid-js.github.io/mermaid/#/

html 输出示例:

<div class="mermaid">
    sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
</div>

需要将:

<pre class="line-numbers" style="white-space:pre-wrap;"><code class="language-markdown">
code here
</code></pre>

替换为:

<div class="mermaid">
code here
</div>

用 python 的 re 模块处理。python 脚本中完成替换,并且存在 mermaid 时,增加相关内容引入 js,实现按需引入:

<script src="https://cdn.jsdelivr.net/npm/mermaid@8.8.4/dist/mermaid.min.js"></script>
<script>
    mermaid.initialize({startOnLoad: true});
</script>

functions.php 需要添加如下代码,防止 wordpress 处理原始内容。

// 禁止 wordpress 自动添加 <br />, <p> 标签
remove_filter ('the_content' , 'wpautop');
// 取消内容转义
remove_filter('the_content', 'wptexturize');
// 取消摘要转义
remove_filter('the_excerpt', 'wptexturize');
// 取消评论转义
remove_filter('comment_text', 'wptexturize');

支持置顶文章

在 python 脚本中定时刷新 post_date 完成。需要在文章中定义字段 top 为大于等于 0 整数

支持标签维护

python 脚本中,tag 用英文逗号分割,作为字符串存入 wp_posts 表的 guid 字段

  1. 标签存在 post_content_filtered 字段中,由 python 脚本更新

  2. wordpress 中标签的更新由 md2wp.php 脚本完成,该脚本在 md2wp.py 的最后被调用, 然后在 python 脚本中完成 tag 的清理。

  3. single.php,显示 tag 相关的内容

注意点:

require_once  "/home/ubuntu/wordpress/wp-blog-header.php";
  • 需要设置登录状态,否则不会处理私密 post

其他参考:

标签显示:

1.functions.php

// 文章(包括 feed)末尾加版权说明
function deel_copyright($content) {
    global $post;
    if(!is_page() ){$pid = get_the_ID();
        $name = get_post_meta($pid, 'from.name', true);
        $link = get_post_meta($pid, 'from.link', true);
        $show = false;
        if($name){
            $show = $name;
            if($link){$show = '<a target="_blank" href="'.$link.'">'.$show.'</a>';}
        }else if($link){$show = '<a target="_blank" href="'.$link.'">'.$link.'</a>';}
        if($show){$content.= '<p> 来源:'.$show.'</p>';}
        // show tags 
        if (get_the_tags( $post->ID) ) {
            $temp_tag_string.='<div class="article-tags">';
            foreach (get_the_tags( $post->ID) as $tag ) $temp_tag_string.= '<a href="' . get_tag_link($tag) . '" rel="tag">' . $tag->name . '</a>';
            $temp_tag_string.='</div>';
            $content.=$temp_tag_string;
          }

2.style.css, 去掉下划线

div.article-tags a {text-decoration:none}

新标签页打开外链、彩色标签

footer.php

function open_links() {
    // 外网 url, 在新 tab 页打开
    $('a').each(function () {
        try {var url = decodeURIComponent($(this).attr("href"));
            $(this).attr('href', url);
            var parser = document.createElement('a');
            parser.href = url;
            if (parser.hostname != window.location.hostname) {$(this).attr('target', '_blank');
            }
        } catch (err) {}});
}

function color_tags() {
    // 彩色标签
    var colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
    $('.article-tags a').each(function () {
        try {tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
            $(this).css("background", tagsColor);
        }
        catch (err) {}});
}

设置标题颜色并加粗

style.css

h2,h3,h4,h5,h6 {color:#5086f7;font-weight:bold}

优化 js

将自定义 js 代码写入 jquery.js

其他

报错:此站点遇到了致命错误。

打开 WordPress 根目录下的 wp-config.php

define('WP_DEBUG', false);

修改为:

define('WP_DEBUG', true);
define('WP_DEBUG_DISPLAY', true);

自动优化图片,另外生成 webp 格式图片:如果 webp 图片不存在或者时间靠前。

1. 需要修改 VPS 的名称为 yinhe.co

sudo vi  /etc/hostname

2.md2wp 中处理,确保本地运行该脚本时会更新图片对应的 webp 文件。

to do

  • 自动优化图片,另外生成 webp 格式图片:如果 webp 图片不存在或者时间靠前。
  • 支持 php8
  • 修改对目录的支持:php 和 python 脚本均不把相关目录写死。下次重新部署时完成。
  • csv 内容更新时,更新对应的 markdown?不实现该功能,仅更新一点 markdown 文件内容即可。

D8 自定义主题下,用 Markdown 写 wordpress 博客

  • 网址相关的别名、slug:用小写
  • > 标识的并列的引用:用 ----<br> 之类的 html 标识隔开
  • 插入图片:![][picFileName], 为方便 python 脚本处理,省略方括号内的 Alt text 文字
  • 插入 csv 文件:![][csvFileName], 为方便 python 脚本处理,csv 文件为 utf-8 编码。 慎用 csv,不会自动更新 csv,对应 markdown 文件更新了才会自动更新。
  • 包含反引号的代码,代码整体可以右移 3 个 TAB 直接变成代码块,不需要转义反引号
  • 置顶博客,top: 整数 ,整数为非负整数,整数越小越靠前,最小为 0
  • tag: 用逗号分割标签
  • 列表缩进,使用至少 4 个空格

相关文件说明

  • md2wp.py:解析 markdown 文件,导入 wordpress 对应的数据库
  • md2wp.php:调用 wordpress 原生函数,更新 post 的 tag
  • auto_check.sh:监控文件夹变化,调用 md2wp 更新文件夹,需要在 /etc/crontab 中设置为开机启动
@reboot root /home/ubuntu/markdownfiles/auto_check.sh
评论(没有评论)