前言

之前就想要弄这个功能了，但是主题不支持，今天果核更新了主题终于支持了

教程

将如下代码放到子主题的function.php 中即可

/**
 * 新评论回复邮件通知函数（带按钮，美化界面）
 */
function comment_mail_notify($comment_id) {
    // 获取评论对象
    $comment = get_comment($comment_id);
    if (!$comment || $comment->comment_approved === 'spam') {
        return; // 如果评论不存在或标记为垃圾评论，直接返回
    }

    // 获取父评论 ID
    $parent_id = $comment->comment_parent ? $comment->comment_parent : '';
    if (empty($parent_id)) {
        return; // 如果没有父评论，直接返回
    }

    // 获取父评论对象
    $parent_comment = get_comment($parent_id);
    if (!$parent_comment || empty($parent_comment->comment_author_email)) {
        return; // 如果父评论不存在或邮箱为空，直接返回
    }

    // 获取收件人邮箱
    $to = trim($parent_comment->comment_author_email);

    // 构造邮件内容
    $wp_email = 'no-reply@' . preg_replace('#^www.#', '', strtolower($_SERVER['SERVER_NAME']));
    $subject  = '您在 [' . get_option("blogname") . '] 的留言有了回复';
    $comment_link = get_comment_link($comment_id);
    $message  = '
    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f9f9f9;">
        <h2 style="color: #333; font-size: 24px; margin-bottom: 20px;">' . trim($parent_comment->comment_author) . ', 您好!</h2>
        <p style="color: #555; font-size: 16px; line-height: 1.6;">
            您曾在文章《' . get_the_title($comment->comment_post_ID) . '》中留言：
        </p>
        <blockquote style="margin: 20px 0; padding: 10px 20px; background-color: #fff; border-left: 4px solid #0073aa; color: #666; font-style: italic;">
            ' . trim($parent_comment->comment_content) . '
        </blockquote>
        <p style="color: #555; font-size: 16px; line-height: 1.6;">
            ' . trim($comment->comment_author) . ' 给您的回复：
        </p>
        <blockquote style="margin: 20px 0; padding: 10px 20px; background-color: #fff; border-left: 4px solid #0073aa; color: #666; font-style: italic;">
            ' . trim($comment->comment_content) . '
        </blockquote>
        <p style="color: #555; font-size: 16px; line-height: 1.6; text-align: center;">
            点击下方按钮查看完整回复内容：
        </p>
        <div style="text-align: center; margin: 20px 0;">
            <a href="' . $comment_link . '" style="display: inline-block; padding: 12px 24px; font-size: 16px; color: #fff; background-color: #0073aa; border-radius: 4px; text-decoration: none;">
                查看回复
            </a>
        </div>
        <p style="color: #555; font-size: 16px; line-height: 1.6;">
            感谢您对 ' . get_option('blogname') . ' 的支持！
        </p>
        <p style="color: #999; font-size: 14px; margin-top: 20px; text-align: center;">
            此邮件由系统自动发送，请勿直接回复。
        </p>
    </div>';

    // 设置邮件头
    $headers = [
        'From: "' . get_option('blogname') . '" <' . $wp_email . '>',
        'Content-Type: text/html; charset=' . get_option('blog_charset'),
    ];

    // 发送邮件
    wp_mail($to, $subject, $message, $headers);
}

// 挂载钩子
add_action('comment_post', 'comment_mail_notify', 5, 1);
add_action('wp_insert_comment', 'comment_mail_notify', 5, 1);

前言

今天有个群友要在网站底部添加页面生成时间和数据库查询次数，虽然wpopt插件可以实现这个功能，但是仅能管理员查看

效果图

教程

1.首先在function.php 文件中添加如下代码，有子主题可以添加到子主题中

function display_query_count_with_timer() {
    $query_count = get_num_queries();
    $query_time = timer_stop(0, 3);
    $output = "<p>本次数据库查询" . $query_count . "次,页面生成花费".$query_time."秒</p>";
    return $output;
}
add_shortcode('query_timer', 'display_query_count_with_timer');

2.如果想添加在底部可以使用WordPress的小工具中的文本，只需要输入[query_timer] 即可。

前言

今天逛博客看到一个好玩的东西，分享给大家

参考

原地址：https://blog.shiguang666.eu.org/2024/10/25/479d38b5fc12/

教程

1.首先去青桔API申请key,目前我们使用到的API是完全免费且无次数限制的。

2.访问api接口：https://api.76.al/api/ip/query?key=your_key

3.将如下代码添加到WordPress小工具中的自定义html内

<div id="announcement-widget">
    <div class="card-widget card-ip-info">
        <div class="announcement_content">
            <div id="welcome-info" style="display: none;">
                <div class="loading-spinner"></div>
            </div>
        </div>
    </div>
</div>

<style>
    #welcome-info {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
    }
    .loading-spinner {
        width: 50px;
        height: 50px;
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 3px solid #3498db;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<script>
    const createAnnouncementComponent = () => {
        const ipInfoElement = document.createElement('div');
        ipInfoElement.className = "card-widget card-ip-info";
        ipInfoElement.innerHTML = `
            <div class="announcement_content">
                <div id="welcome-info">
                    <div class="loading-spinner"></div>
                </div>
            </div>
        `;
        return ipInfoElement;
    };

    const fetchIpInfo = () => {
        fetch('https://api.76.al/api/ip/query?key=your_key')
            .then(response => response.ok ? response.json() : Promise.reject('Network response was not ok'))
            .then(data => showWelcome(data))
            .catch(() => showErrorMessage());
    };

    const getDistance = (e1, n1, e2, n2) => {
        const R = 6371; // Earth radius
        const toRadians = (degree) => degree * (Math.PI / 180);
        const a = Math.sin(toRadians(n1)) * Math.sin(toRadians(n2)) +
                  Math.cos(toRadians(n1)) * Math.cos(toRadians(n2)) *
                  Math.cos(toRadians(e1 - e2));
        return Math.round(R * Math.acos(a));
    };

    const showWelcome = (ipLocationData) => {
        if (!ipLocationData || !ipLocationData.data) {
            return showErrorMessage();
        }

        // 修改为你自己的经纬度 
            const myLng = 121.38206; //经度
            const myLat = 31.11325; //维度
        const { lng, lat, country, prov, city, district } = ipLocationData.data; // 获取区的信息
        const dist = getDistance(myLng, myLat, lng, lat);
        const pos = country === "中国" ? `${prov} ${city} ${district}` : `${city}, ${district}`; // 包含区的信息

        const welcomeInfoElement = document.getElementById("welcome-info");
        welcomeInfoElement.style.display = 'block';
        welcomeInfoElement.innerHTML = `
            💖 欢迎来自 <b><span style="color:#3390ff;">${pos}</span></b> 的朋友<br>
            📏 您距博主约 <b><span style="color: #3390ff;">${dist}</span></b> 公里<br>
        `;
    };

    const showErrorMessage = () => {
        const welcomeInfoElement = document.getElementById("welcome-info");
        welcomeInfoElement.style.display = 'block';
        welcomeInfoElement.innerHTML = `<p>获取IP信息失败,请检查网络.</p>`;
    };

    const initialize = () => {
        document.body.appendChild(createAnnouncementComponent());
        fetchIpInfo();
    };

    window.onload = initialize;
</script>

4.将其中的your_key改为你自己申请的key

5.访问api接口，将其中的lat和lng替换代码中的经纬度

// 修改为你自己的经纬度  
const myLng = 121.38206; //经度
const myLat = 31.11325; //维度

6.访问主页就可以看到了

# 禁止访问 WordPress 安装脚本，并记录日志
location = /wp-admin/install.php {
    deny all;
    access_log /var/log/nginx/deny.log;
}

# 禁止访问 Nginx 配置文件
location = /nginx.conf {
    deny all;
}

# 禁止访问用户扩展目录
location ~ ^/user_extention/ {
    deny all;
}

# 禁止访问 .htaccess 文件
location ~ /\.htaccess$ {
    deny all;
}

# 禁止访问 WordPress readme 文件
location ~ /readme\.(html|txt)$ {
    deny all;
}

# 禁止访问 WordPress 配置文件
location ~ ^/wp-config.php$ {
    deny all;
}

# 禁止访问 WordPress admin 和 includes 目录中的 PHP 文件
location ~ ^/wp-admin/includes/ {
    deny all;
}

location ~ ^/wp-includes/[^/]+\.php$ {
    deny all;
}

# 禁止访问 .git 和 .svn 目录
location ~ ^.*/\.git/.*$ {
    deny all;
}

location ~ ^.*/\.svn/.*$ {
    deny all;
}

# 禁用 Uploads 目录的 PHP 文件
location ~ ^/wp\-content/uploads/.*\.(?:php[1-7]?|pht|phtml?|phps)$ {
    deny all;
}

# 禁用 Plugins 目录的 PHP 文件
location ~ ^/wp\-content/plugins/.*\.(?:php[1-7]?|pht|phtml?|phps)$ {
    deny all;
}

# 禁用 Themes 目录的 PHP 文件
location ~ ^/wp\-content/themes/.*\.(?:php[1-7]?|pht|phtml?|phps)$ {
    deny all;
}

# 禁用一些文件扩展名，并返回404
location ~ .*\.(ini|zip|7z|rar|tar|gz|sql|conf|bak|asp|aspx|jsp)?$ {
    return 404;
}

# 添加安全头
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options DENY;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https:; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:;";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
add_header Referrer-Policy "no-referrer-when-downgrade";

# 限制上传文件大小
client_max_body_size 2M;

# 速率限制配置，防止暴力攻击
limit_req_zone $binary_remote_addr zone=login_zone:10m rate=1r/s;

location = /wp-login.php {
    limit_req zone=login_zone burst=5 nodelay;
}

# 示例访问控制
# location /wp-admin/ {
#     allow 192.168.1.0/24;
#     deny all;
# }

The post <span class="zyx-badge-text jb-red">NEW</span> Nginx 对于 WordPress 的安全配置优化与设置 加强保护WordPress系统文件 appeared first on 辰安博客.

代码部署

将下面的 PHP 代码加入到主题目录下：/wp-content/themes/zibll/functions.php 文件中

The post <span class="zyx-badge-text jb-red">NEW</span> WordPress 文章自动添加关键词链接，优化内页SEO，提升网站收录效果 appeared first on 辰安博客.

我本人推荐直接使用开源插件

Enable SVG, WebP & ICO Upload   – WordPress 插件 | WordPress.org China 简体中文

在插件库里直接检索到，目前尝试很多种方法，这个插件最直接有效；

启用 SVG、WebP 和 ICO 上传可以直接从您的网站安装。

1. 登录到您网站的仪表板，即 /wp-admin
2. 然后转到插件→添加新插件
3. 搜索启用 “Enable SVG, WebP & ICO Upload”
4. 找到插件“Enable SVG, WebP & ICO Upload”并单击“立即安装”
5. 激活插件 → 导航至“设置”

设置很简单，三处开关按钮，分别针对SVG、WEBP、ICO三种格式的文件，根据自己需要去开启即可

现在，就可以正常上传ico文件，并且可以在媒体库中查看，已上传的ico文件！

The post 解决WordPress上传ICO文件失败的技巧与建议 appeared first on 辰安博客.

演示

教程

 /zibll/inc/functions/bbs/inc/posts.php 搜索 zib_bbs_get_posts_mini_list  整合替换下面代码

创建一个css文件把下面css复制进去

声明：本文转载自 6ke论坛🔗：6ke论坛 原文地址

The post WordPress 子比论坛 如何给帖子添加板块角标，Ta来了！ appeared first on 辰安博客.

// 禁用自动生成的图片尺寸
function shapeSpace_disable_image_sizes($sizes) {
unset($sizes['thumbnail']);    // disable thumbnail size
unset($sizes['medium']);       // disable medium size
unset($sizes['large']);        // disable large size
unset($sizes['medium_large']); // disable medium-large size
unset($sizes['1536x1536']);    // disable 2x medium-large size
unset($sizes['2048x2048']);    // disable 2x large size
return $sizes;
}
add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_image_sizes');
// 禁用缩放尺寸
add_filter('big_image_size_threshold', '__return_false');
// 禁用其他图片尺寸
function shapeSpace_disable_other_image_sizes() {
remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size() 
remove_image_size('another-size');   // disable any other added image sizes
}
add_action('init', 'shapeSpace_disable_other_image_sizes');

将上方的代码添加至您的WordPress当前使用主题文件夹下的 functions.php 文件即可
以当前网站根目录为例，主题函数文件路径一般为：WordPress网站根目录/wp-content/themes/主题文件夹/functions.php 添加至<?php 后面即可

The post WordPress 彻底禁用上传媒体图片自动生成缩略图及多尺寸图片 appeared first on 辰安博客.

前言

一个朋友因为只记录一些文章所以用不到类似corenext主题这样的个性化的主题，所以就使用了WordPress的默认主题twentytwentytwo

但是twentytwentytwo主题默认是没有关键词的设置的。

教程

1.首先安装wpopt插件

2.找到插件设置中的插入代码

3.在页头代码中添加<meta name="keywords" content="你好">

4.将其中的你好改为你需要的关键词即可。

前言

我们在建站过程中想要搜索引擎收录的话就需要用到站点地图，sitemap.xml就是站点地图的文件名。

那它是怎么来的呢？就要用到插件了。

教程

大家可以按照我这样设置一下插件。

下载地址

前言

今天主题群里有个群友在群里询问，为何主题的验证码一直获取不到。

过程

出于好奇，我使用了todesk连接了他的电脑。发现使用了1panel，因为习惯了使用宝塔，所以主用服务器没有安装过1panel。

但是香港的服务器曾经安装过1panel并且搭建过网站，但是也只搭建了typecho。

然后我就F12大发查看报错了什么，发现提示WordPress站点遇到了致命错误，并不是像之前遇到的一样提示waf拦截之类的。

于是我就询问他迁移后有没有修改什么东西，他说并没有。那就更奇怪了，并没有修改任何东西为何会出现这样的情况。

我就继续测试，因为获取验证码是通过post提交给admin-ajax.php，所以我就想到了写文章也是通过admin-ajax.php提交。

但是当我测试时发现并没有问题。然后我就怀疑是nginx的问题，群友也说可能是php拓展的问题，于是我就查看了php版本发现是8.3。

当我以为将它降为7.4就可以解决问题的时候，发现问题并没有得到解决。当我正想添加拓展的时候，他那边因为网络问题断开了连接。

不过最后他也告诉我是因为缺少了gd的php拓展导致获取不到验证码。

结语

1.1panel不像宝塔一样在安装完成时会提示你需要安装运行环境。

2.1panel也不会像宝塔一样在安装运行环境的时候就将所需的扩展安装好，需要你自己去安装。

3.对于新手来说还是使用宝塔比较好，毕竟能够轻松建站。

4.在面板没有遇到重大且无法解决的问题时，还是不要轻易更换面板的选择，因为会大大增加你网站出现bug的可能性。

前言

因为51统计最近一直出现问题，并且有传言称51统计的js文件会出现劫持跳转的问题，于是就想更换统计方式，Umami因此成为我的主要选择。

51统计好的地方在于能够显示出统计挂件，但是有大佬用umami的api也制作出了数据挂件。

参考

张洪HEO：https://blog.zhheo.com/p/61e9.html

木木木木木：https://immmmm.com/hi-umami-api/

教程

1.首先搭建属于自己的umami，具体可以访问

2.token可以到搭建好的umami站点，然后打开开发者工具，找到网络中的https://你的域名/api/auth/verify 里的请求头中的authorization 中Bearer 后面的内容

3.网站ID就是后台网站中的比如https://你的域名/websites/0ba3d4b8-95ec-4e33-a727-32b013d6cfa7 ，其中0ba3d4b8-95ec-4e33-a727-32b013d6cfa7就是网站ID

3.更改如下代码，并且添加到WordPress的自定义html中

<div class="tongji">
今日访问人数 <span id="todayUv">0</span> | 今日访问量 <span id="todayPv">0</span> | 本月访问量 <span id="monthPv">0</span> | 总访问量 <span id="totalPv">0</span>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    umiTongji();
  });

  function umiTongji() {
    var umiToken = "你的token"; //获取到的 token
    var umiId = "网站ID"; //获取到的 websiteId
    var umiTime = Date.parse(new Date());
    var todayStart = new Date().setHours(0, 0, 0, 0);
    var monthStart = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime();
    var umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=" + todayStart + "&endAt=" + umiTime;

    fetch(umiUrl, {
        method: 'GET',
        mode: 'cors',
        cache: 'default',
        headers: {
          'Authorization': 'Bearer ' + umiToken,
          'Content-Type': 'application/json'
        }
      })
      .then(res => res.json())
      .then(resdata => {
        document.querySelector('#todayPv').innerHTML = resdata.pageviews.value;
        document.querySelector('#todayUv').innerHTML = resdata.visitors.value;
      });

    umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=" + monthStart + "&endAt=" + umiTime;

    fetch(umiUrl, {
        method: 'GET',
        mode: 'cors',
        cache: 'default',
        headers: {
          'Authorization': 'Bearer ' + umiToken,
          'Content-Type': 'application/json'
        }
      })
      .then(res => res.json())
      .then(resdata => {
        document.querySelector('#monthPv').innerHTML = resdata.pageviews.value;
      });

    umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=0&endAt=" + umiTime;

    fetch(umiUrl, {
        method: 'GET',
        mode: 'cors',
        cache: 'default',
        headers: {
          'Authorization': 'Bearer ' + umiToken,
          'Content-Type': 'application/json'
        }
      })
      .then(res => res.json())
      .then(resdata => {
        document.querySelector('#totalPv').innerHTML = resdata.pageviews.value;
      });
  }
</script>
<style>
  #todayUv, #todayPv, #monthPv, #totalPv {
    color: #00a0ff;
  }
</style>

前言

不少主题都支持文章页的侧边栏添加文章目录的小工具

教程

将如下代码放到子主题的function.php中

class Article_TOC_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'article_toc_widget',
            '文章目录小工具',
            array( 'description' => '在文章或页面的侧边栏中显示文章目录' )
        );
    }

    public function widget( $args, $instance ) {
        global $post;
        if ( is_singular() && ! empty( $post->post_content ) ) {
            $toc = $this->get_toc( $post->post_content );
            if ( ! empty( $toc ) ) {
                echo $args['before_widget'];
                echo $args['before_title'] . '文章目录' . $args['after_title'];
                echo '<ul>' . $toc . '</ul>';
                echo $args['after_widget'];
            }
        }
    }

    public function get_toc( $content ) {
        $toc = '';
        $dom = new DOMDocument();
        @$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) );
        $xpath = new DOMXPath( $dom );
        $headers = $xpath->query( '//h2|//h3|//h4|//h5|//h6' );
        if ( $headers->length > 0 ) {
            foreach ( $headers as $header ) {
                $id = $header->getAttribute( 'id' );
                if ( empty( $id ) ) {
                    $id = sanitize_title( $header->nodeValue );
                    $header->setAttribute( 'id', $id );
                }
                $toc .= '<li><a href="#' . $id . '">' . $header->nodeValue . '</a></li>';
            }
        }
        return $toc;
    }

}
function register_article_toc_widget() {
    register_widget( 'Article_TOC_Widget' );
}
add_action( 'widgets_init', 'register_article_toc_widget' );

结语

功能不是很完善，但是可以显示了，需要其他功能自己添加

前言

HeoMusic是一个基于Aplayer和MetingJS的静态音乐播放器。

教程

1.首先上传程序文件到网站根目录。

2.在WordPress里新建一个页面。

3.经典编辑器选择文本，将以下代码放到里面

<iframe src="music.html" width="100%" height="600px" style="border:none;"></iframe>
<style>
/* 这里放你的自定义CSS样式 */
iframe {
  border-radius: 10px; /* 设置圆角半径为10px，你可以根据需要调整这个值 */
}

@media (max-width: 1024px) {
  iframe {
    width: 100%;
    height: 400px;
  }
}

@media (max-width: 600px) {
  iframe {
    width: 100%;
    height: 300px;
  }
}
</style>

项目地址

Github：https://github.com/zhheo/HeoMusic

张洪Heo：https://blog.zhheo.com/p/45699256.html

前言

就在刚刚，redis插件提示更新，于是我就进入插件页面进行更新，但是可能由于网络原因一直无法更新成功。

教程

1.于是我便刷新了页面，出现了Briefly unavailable for scheduled maintenance. Check back in a minute. ，翻译过来就是正在执行例行维护，请一分钟后回来。

2.打开宝塔面板的网站根目录，在右上角的搜索中查找.maintenance 这个文件并且删除。

3.刷新页面就可以恢复了。

前言

虽然WordPress很多主题包括CoreNext在文章的底部都有赞赏的按钮，但是页面中是没有的，为了解决这一问题，所以找到了如下教程。

教程

教程非常简单，在需要添加的页面位置添加如下代码，记得更换其中的二维码地址，当然如果你想赞助我的话也是可以的。

<!-- 打赏 -->
<div id="rewardSection" style="padding: 10px 0; margin: 20px auto; width: 100%; font-size: 16px; text-align: center;"><button id="rewardButton" style="border: 1px solid #ccc; line-height: 36px; text-align: center; height: 36px; display: block; border-radius: 4px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; background-color: #04be02; color: #ffffff; margin: 0 auto; padding: 0 25px;">¥ 点我显示打赏</button>
<div id="QR" style="display: none;">
<div id="wechat" style="display: inline-block; margin: 20px;"><img id="wechat_qr" style="width: 180px; max-width: 100%; display: inline-block; margin: 0.8em 2em 0 2em;" src="https://www.xrbk.cn/api/img/sk/wx.png" alt="微信二维码" />微信打赏

</div>
<div id="alipay" style="display: inline-block; margin: 20px;"><img id="alipay_qr" style="width: 180px; max-width: 100%; display: inline-block; margin: 0.8em 2em 0 2em;" src="https://www.xrbk.cn/api/img/sk/zfb.png" alt="支付宝二维码" />支付宝打赏

</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
    $('#rewardButton').click(function() {
        $('#QR').toggle();
    });
});
</script>

<!-- 打赏 -->

前言

CoreNext主题自带的编辑器增强内有标星面板，但是颜色有点少，所以找了个教程给WordPress添加彩色文本渐变框。

教程

1.首先将如下代码添加到CoreNext子主题的function.php 中，如果其他主题也有子主题一样操作。

 add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
 function bolo_after_wp_tiny_mce($mce_settings) {
 ?>
 <script type="text/javascript"> 
 QTags.addButton( 'z_mhz', '迷幻紫', '<div id="zm_mhz">迷幻紫</div>n', "" );
 QTags.addButton( 'z_xgh', '西瓜红', '<div id="zm_xgh">西瓜红</div>n', "" );
 QTags.addButton( 'z_tkzj', '天空之境', '<div id="zm_tkzj">天空之境</div>n', "" );
 QTags.addButton( 'z_xyz', '小宇宙', '<div id="zm_xyz">小宇宙</div>n', "" );
 QTags.addButton( 'z_gll', '橄榄绿', '<div id="zm_gll">橄榄绿</div>n', "" );
 QTags.addButton( 'z_xty', '小太阳', '<div id="zm_xty">小太阳</div>n', "" );
 QTags.addButton( 'z_yyz', '优雅紫', '<div id="zm_yyz">优雅紫</div>n', "" );
 QTags.addButton( 'z_szh', '深邃黑', '<div id="zm_szh">深邃黑</div>n', "" );
 QTags.addButton( 'z_wbk', '无边框', '<div id="zm_wbk">无边框</div>n', "" ); 
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?php
 }

2.将如下CSS代码添加到CoreNext子主题的CSS文件夹中的main.css中

/*渐变框区块*/
#zm_mhz,#zm_xgh,#zm_tkzj,#zm_xyz,#zm_gll ,#zm_xty,#zm_yyz,#zm_szh,#zm_wbk{
  /*圆角值,在此定义*/
  border-radius: 8px;
}
/*迷幻紫*/
#zm_mhz{
    color: #555555;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0 12px -5px rgb(189, 196, 252);
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
    background-image: -webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
}
/*西瓜红*/
#zm_xgh{
      color: #555555;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(255, 176, 172), -6px 0 12px -5px rgb(255, 161, 174);
    background-color: #ff9a8b66;
    background-image: linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%);
    background-image: -webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%);
}
/*华为P30 天空之境*/
#zm_tkzj {
    color: #555555;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-color: #FFDEE9;
    background-image: linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
    background-image: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
}
/*小宇宙*/
#zm_xyz {
    color: #eeeeee;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(12, 85, 141), -6px 0 12px -5px rgba(10, 58, 93, 0);
    background-image: radial-gradient( circle 263px at 100.2% 3%, rgba(12,85,141,1) 31.1%, rgba(205,181,93,1) 36.4%, rgba(244,102,90,1) 50.9%, rgba(199,206,187,1) 60.7%, rgba(249,140,69,1) 72.5%, rgba(12,73,116,1) 72.6% );
}
/*橄榄绿*/
#zm_gll {
    color: #eeeeee;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163);
    background-image: linear-gradient( 102deg, rgba(68,110,92,1) 17.4%, rgba(107,156,120,1) 49.3%, rgba(154,183,130,1) 83.4%, rgba(247,237,191,1) 110.3% );
}
/*小太阳*/
#zm_xty {
    color: #ffffff;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
     /*border-radius: 10px; */
    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-image: radial-gradient( circle farthest-corner at -8.9% 51.2%, rgba(255,124,0,1) 0%, rgba(255,124,0,1) 15.9%, rgba(255,163,77,1) 15.9%, rgba(255,163,77,1) 24.4%, rgba(19,30,37,1) 24.5%, rgba(19,30,37,1) 66% );
}
/*优雅紫*/
#zm_yyz {
  color: #ffffff;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0);
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(95,117,227,1) 0%, rgba(188,167,205,1) 90% );
}
/*深邃黑*/
#zm_szh {
  color: #c7c7c7;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 5px;*/
    box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0);
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 90.2% );
}
/*无边框*/
#zm_wbk {
    color: #000000;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#zm_xyz a , #zm_gll a{
   color: #eeeeee;
}
#zm_szh a{
  color: #c7c7c7;  
}
#zm_xty a, #zm_yyz a{
  color: #ffffff;
}

3.现在就可以在编辑器内添加如下代码使用效果了。

<div id="zm_mhz">迷幻紫</div>
<div id="zm_xgh">西瓜红</div>
<div id="zm_tkzj">天空之境</div>
<div id="zm_xyz">小宇宙</div>
<div id="zm_gll">橄榄绿</div>
<div id="zm_xty">小太阳</div>
<div id="zm_yyz">优雅紫</div>
<div id="zm_szh">深邃黑</div>
<div id="zm_wbk">无边框</div>

演示

参考

原文地址：https://www.owwee.cn/post/212.html

前言

因为之前安装了WPOPT，里面有个功能就是能够在控制台查看MYSQL查询次数以及页面创建的时间，之前一直都是高达四十几次的查询次数。

所以就决定安装redis将数据库查询次数降低下来。

重要提醒

如果服务器内有两个WordPress程序，请先将其中一个WordPress程序的数据库表开头从wp_改为其他的，否则会出现相互干扰的情况。

教程

本教材基于宝塔面板教学，特别方便。

1.首先到宝塔面板的软件商店找到redis 并且安装。

2.找到PHP版本，并且安装redis 扩展。

3.WordPress后台搜索并安装Redis Object Cache 。

4.设置插件启用对象存储，如出现下图则表示启用成功。

5.最后看一下MYSQL的查询次数。

只有2次查询次数，刷新了几次最多也就是15左右，大部分都是个位数，效果相当给力。

前言

之前介绍过用tianliAPI添加文章AI摘要，那个要花钱今天分享给大家一个免费的。

介绍

Core AI Power是由lovestu开发的一款WordPress AI增强插件。旨在为WordPress提供一些AI功能。

目前提供的主要功能是，AI内容摘要。

目前接入的API是免费的文心一言，所有WordPress网站，都可以快速接入。

对比tianliAPI的好处是可以指定给某个文章使用AI摘要并且使用文心一言的免费API。

截图

下载地址

前言

在某个网站看到鼠标放到首页文章,它的底部会出现线条,于是就突发奇想想给自己网站弄一个

效果

别人的：

自己的：

教程

请将如下两个代码中的任何一个添加到子主题的CSS文件夹中的main.css 中或在主题设置中添加自定义css代码

1.固定颜色

.post-item {
  position: relative;
}

.post-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color, #000);
  transition: width 1s, background-color 0.5s; /* 添加了背景颜色的过渡效果 */
}

.post-item:hover::before {
  width: 100%;
}

/* 使用计算来设置颜色 */
.post-item:nth-of-type(1)::before {
  --color: hsl(0, 100%, 50%); /* 设置第一个.post-item的线条颜色 */
}

.post-item:nth-of-type(2)::before {
  --color: hsl(72, 100%, 50%); /* 设置第二个.post-item的线条颜色 */
}

.post-item:nth-of-type(3)::before {
  --color: hsl(144, 100%, 50%); /* 设置第三个.post-item的线条颜色 */
}

.post-item:nth-of-type(4)::before {
  --color: hsl(216, 100%, 50%); /* 设置第四个.post-item的线条颜色 */
}

.post-item:nth-of-type(5)::before {
  --color: hsl(288, 100%, 50%); /* 设置第五个.post-item的线条颜色 */
}

.post-item:nth-of-type(6)::before {
  --color: hsl(324, 100%, 50%); /* 设置第六个.post-item的线条颜色 */
}

.post-item:nth-of-type(7)::before {
  --color: hsl(36, 100%, 50%); /* 设置第七个.post-item的线条颜色 */
}

.post-item:nth-of-type(8)::before {
  --color: hsl(108, 100%, 50%); /* 设置第八个.post-item的线条颜色 */
}

.post-item:nth-of-type(9)::before {
  --color: hsl(180, 100%, 50%); /* 设置第九个.post-item的线条颜色 */
}

.post-item:nth-of-type(10)::before {
  --color: hsl(252, 100%, 50%); /* 设置第十个.post-item的线条颜色 */
}

2.动态颜色

.post-item {
  position: relative;
}

.post-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color, #000);
  transition: width 1s;
}

.post-item:hover::before {
  width: 100%;
}

.post-item:hover::before {
  animation: randomColor 2s infinite;
}

@keyframes randomColor {
  0% {
    background: red;
  }
  25% {
    background: blue;
  }
  50% {
    background: green;
  }
  75% {
    background: yellow;
  }
  100% {
    background: purple;
  }
}

前言

闲着无聊想弄个自助申请友链的功能，这样就不弄在评论区慢慢输入网站标题等文字了。

教程

因为我是登录才能评论所以以下代码只适用登录后才能评论。

1.首先在子主题的function.php 中添加如下代码。

function display_friendlink_form() {
    ob_start();
    ?>
    <style>
        #friendlink-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        #friendlink-form input[type="text"],
        #friendlink-form input[type="url"] {
            width: 20%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        #friendlink-form button[type="submit"] {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #friendlink-form button[type="submit"]:hover {
            background-color: #45a049;
        }

        #friendlink-notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: #fff;
            padding: 10px;
            border-radius: 4px;
            display: none;
            z-index: 9999;
        }
    </style>

    <form id="friendlink-form" method="post">
        <div>
            <label for="website-name">网站名称：<input type="text" name="website-name" id="website-name" required></label>
        </div>
        <div>
            <label for="website-description">网站描述：<input type="text" name="website-description" id="website-description" required></label>
        </div>
        <div>
            <label for="website-url">网站地址：<input type="url" name="website-url" id="website-url" required></label>
        </div>
        <div>
            <label for="website-icon">网站图标：<input type="url" name="website-icon" id="website-icon" required></label>
        </div>
        <button type="submit" id="submit-friendlink" disabled>提交</button>
    </form>

    <div id="friendlink-notification"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var submitButton = document.getElementById('submit-friendlink');
            var websiteNameInput = document.getElementById('website-name');
            var websiteDescriptionInput = document.getElementById('website-description');
            var websiteUrlInput = document.getElementById('website-url');
            var websiteIconInput = document.getElementById('website-icon');

            function validateForm() {
                if (websiteNameInput.value.trim() !== '' &&
                    websiteDescriptionInput.value.trim() !== '' &&
                    websiteUrlInput.value.trim() !== '' &&
                    websiteIconInput.value.trim() !== '') {
                    submitButton.disabled = false;
                } else {
                    submitButton.disabled = true;
                }
            }

            websiteNameInput.addEventListener('input', validateForm);
            websiteDescriptionInput.addEventListener('input', validateForm);
            websiteUrlInput.addEventListener('input', validateForm);
            websiteIconInput.addEventListener('input', validateForm);

            document.getElementById('friendlink-form').addEventListener('submit', function(event) {
                event.preventDefault();

                var websiteName = websiteNameInput.value;
                var websiteDescription = websiteDescriptionInput.value;
                var websiteUrl = websiteUrlInput.value;
                var websiteIcon = websiteIconInput.value;

                var commentContent = '网站名称：' + websiteName + 'nn' +
                                     '网站描述：' + websiteDescription + 'nn' +
                                     '网站地址：' + websiteUrl + 'nn' +
                                     '网站图标：' + websiteIcon;

                var commentData = {
                    action: 'submit_friendlink',
                    websiteName: websiteName,
                    websiteDescription: websiteDescription,
                    websiteUrl: websiteUrl,
                    websiteIcon: websiteIcon,
                    post_id: <?php echo get_the_ID(); ?>,
                    user_id: <?php echo get_current_user_id(); ?>,
                };

                var xhr = new XMLHttpRequest();
                xhr.open('POST', '<?php echo admin_url('admin-ajax.php'); ?>', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            location.reload(); // 手动刷新页面
                        } else {
                            showNotification('你尚未登录请登录后重试。');
                        }
                    } else {
                        showNotification('你尚未登录请登录后重试。');
                    }
                };
                xhr.send(Object.keys(commentData).map(function(key) {
                    return encodeURIComponent(key) + '=' + encodeURIComponent(commentData[key]);
                }).join('&'));
            });
        });

        function showNotification(message) {
            var notification = document.getElementById('friendlink-notification');
            notification.textContent = message;
            notification.style.display = 'block';
            setTimeout(function() {
                notification.style.display = 'none';
            }, 2000);
        }
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('friendlink_form_new', 'display_friendlink_form');

function submit_friendlink_callback() {
    if (is_user_logged_in()) {
        $websiteName = $_POST['websiteName'];
        $websiteDescription = $_POST['websiteDescription'];
        $websiteUrl = $_POST['websiteUrl'];
        $websiteIcon = $_POST['websiteIcon'];
        $postID = $_POST['post_id'];
        $userID = $_POST['user_id'];

        if (empty($websiteName) || empty($websiteDescription) || empty($websiteUrl) || empty($websiteIcon)) {
            echo json_encode(array('success' => false));
            wp_die();
        }

        $commentData = array(
            'comment_post_ID' => $postID,
            'comment_author' => get_userdata($userID)->display_name,
            'comment_content' => "网站名称：$websiteNamenn网站描述：$websiteDescriptionnn网站地址：$websiteUrlnn网站图标：$websiteIcon",
            'comment_type' => '',
            'comment_parent' => 0,
            'user_ID' => $userID,
        );

        $commentID = wp_new_comment($commentData);
        if ($commentID) {
            echo json_encode(array('success' => true));
        } else {
            echo json_encode(array('success' => false));
        }
    } else {
        echo json_encode(array('success' => false));
    }

    wp_die();
}
add_action('wp_ajax_submit_friendlink', 'submit_friendlink_callback');
add_action('wp_ajax_nopriv_submit_friendlink', 'submit_friendlink_callback');

2.在友链页面合适的地方添加[friendlink_form_new] 短代码。

前言

之前的文章介绍了如何给WordPress添加自定义字体，今天教大家如何使用CN-Font-Split给中文字体进行分片

介绍

cn-font-split 是 中文网字计划 所使用的字体分包工具，通过高性能的各种技术将庞大的字体包拆分为适合网络分发的版本。经过四个版本的字体研究与代码迭代，这项技术在我们的网站中得到了充分的应用，实现了中文字体在 Web 领域的加载速度与效率的双飞跃。

项目地址

gitcode：https://gitcode.com/KonghaYao/cn-font-split

github：https://github.com/KonghaYao/cn-font-split

教程

1.首先去nodejs官网下载大于18版本的安装包，这里我下载的是19.9.0

2.其次就是打开安装包进行安装。

3.打开CMD输入以下代码安装项目

npm install @konghayao/cn-font-split
npm install @konghayao/cn-font-split -g # 如果使用命令行，推荐全局安装

4.继续输入以下命令进行分包

cn-font-split -i=../demo/public/SmileySans-Oblique.ttf -o=./temp

其中../demo/public/SmileySans-Oblique.ttf 可以替换成你字体的具体路径，./temp 替换成你想要分包出的文件的路径。

5.上传到网站的某个文件夹里。

6.调用方式：主题后台的页头代码或Head的html代码中添加如下代码

<link rel="stylesheet" href="https://你的域名/字体文件夹/result.css" />

7.查看result.css 文件中font-family 后面的文字就是你字体的名字。

8.在主题自定义css或子主题的css文件中添加如下代码

body {
    font-family: "字体名字", sans-serif;
}

这样就完成了字体的分包和调用。

前言

不少主题都有字体的设置，比如CoreNext，但是字体不太满意或者主题没有相关设置该怎么办？

教程

落霞孤鹜

BootCDN的字体库

BootCDN是Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。

落霞孤鹜字体库网站链接：BootCDN - lxgw-wenkai-webfont

引入CSS

找到主题后台的自定义代码中的页面代码，也可以在head头部添加html代码

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" />

添加CSS

如CoreNext主题可以在子主题设置如下代码，或者在主题设置里添加自定义CSS

body {
    font-family: "LXGW WenKai Screen", sans-serif;
}

如果是CoreNext主题，在sans-serif 和; 之间加上!important

自定义字体

添加自定义css

@font-face {
  font-family: '字体文件名';
  src: url('/zt/字体文件名.woff2') format('woff2');
  /* 添加其他字体格式，如woff、ttf等，以提供更好的兼容性 */
  /* src: url('字体文件路径') format('字体格式'); */
}

body {
    font-family: "字体名", sans-serif !important;
}

前言

不久之前知乎的每日60秒读懂世界停止了更新，图片不能复制新闻内容很麻烦，所以今天教大家弄一个WordPress实时新闻文字版页面。

教程

1.首先下载文件到网站任意目录

2.在主题目录的function.php文件添加如下代码

function display_external_content() {
    $image_url= '域名/xinwen/data/60s_'.date('D').'.png';
    $url = '域名/xinwen';
    $response = wp_remote_get( $url );
    $image_html = '<div style="text-align: center;"><img src="' . $image_url . '" alt="Image" width="450" height="250" /></div>';
    $body = wp_remote_retrieve_body( $response );
    $text_html = '<p style="text-align: left;">' . $body. '</p>';
    $content_html = $image_html . $text_html;
    return $content_html;
}
add_shortcode( 'baidu_hot_new', 'display_external_content' );

3.在想要展示的页面中添加[baidu_hot_new] 短代码。

下载地址

前言

逛了不少博客，发现WordPress默认还是有rss订阅功能的，比如访问域名+/feed 。

RSS（Really Simple Syndication）是一种用于发布和订阅网站内容的标准格式，而 FreshRSS 是一款自托管的开源 RSS 阅读器。

并且 FreshRSS 提供了非常简洁的界面，可以自行添加分类和订阅源，

教程

命令安装

docker run -d 
--name freshrss 
-p 8090:80 
-v /home/docker/freshrss/data:/config 
-e TZ=Asia/Shanghai 
--restart unless-stopped 
linuxserver/freshrss:latest

设置

1.首先将语言设置为简体中文

2.数据库类型选择SQlite即可

3.设置用户名和密码

4.找到订阅管理，把默认的给清空即可。

5.添加分类和订阅

前言

不少主题都自带加载动画，意思就是你网站页面尚未加载完成之前整个页面都会被加载动画所覆盖。

建议

相信不少朋友第一次听说了这个功能都会觉得不错，因为这会让访客在访问自己网站等待页面加载的时候不是空白页面而是有动画效果的。

但其实不然，因为主题中不可避免的会有调用其他网站的内容，比如css,js,图片等文件，但这些文件有些是很重要的，但有些是无关紧要的。

比如本人就在域名尚未备案之前使用的香港服务器搭建网站的时候,网站偶尔会出现加载小慢的时候,于是我就去主题后台开启了这个功能,但是首页出现速度反而更慢了。

于是我就排查其原因，发现是当初在美化网站加复制提醒的时候调用了其他网站的js文件导致了网站访问速度变慢,但是这个功能重要吗？其实也并不是那么重要。

所以为了网站的访问速度我关闭了主题的加载动画。

结语

首先在搭建网站的时候，能够不调用外部文件就不要调用外部文件。其次就是没必要的美化就不要加了不然就是对网站的负优化！

前言

用WordPress搭建网站的站长都知道，WordPress自带的搜索路径为?s= ，这就导致搜索结果出来的时候会包含页面而不是只有文章内容，所以今天教大家如何让搜索结果屏蔽所有页面内容。

教程

我用的是CoreNext主题自带有子主题，如果没有子主题的要慎重修改。

将如下代码加到function.php 中即可

function search_filter_page($query) {
    if ($query->is_search) {
        $query->set('post_type', 'post');
    }
    return $query;
 }
add_filter('pre_get_posts','search_filter_page');

测试

加代码之前的效果：

加代码之后的效果：