标签: wordpress

  • WordPress添加 Google Analytics站点分析

    WordPress安装 Google Analytics 代码

    准备工作:

    • 拥有 Google Analytics 账户
      • 前往 Google Analytics 网站注册账户。
      • 创建一个 GA4 属性,并获取您的数据流 ID(以 “G-” 开头)。
    • 备份您的 WordPress 网站:
      • 在编辑任何主题文件之前,务必备份网站,以防出现意外情况。

    安装步骤:

    1. 获取 Google Analytics 代码:

    • 登录您的 Google Analytics 账户。
    • 选择您的 GA4 属性。
    • 点击“管理” -> “数据流”。
    • 选择您的网站数据流。
    • 在“标记说明”部分,找到您的 Google Analytics 代码。
    • 记录下您的 “G-XXXXXXXXXX” 的数据流 ID。

    2. 编辑 functions.php 文件(手动添加代码):

    • 将以下代码片段复制并粘贴到当前主题的 functions.php 文件中。
    • 将代码粘贴到 functions.php 文件的末尾,并将 “G-XXXXXXXXXX” 替换为您的数据流 ID:
    // Google analytics
    function add_google_analytics() {
    ?>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    
    gtag('config', 'G-XXXXXXXXXX');
    </script>
    <?php
    }
    add_action('wp_head', 'add_google_analytics');

    3. 验证 Google Analytics 代码:

    • 清除 WordPress 缓存和浏览器缓存。
    • 访问您的网站,并查看源代码(右键单击页面,选择“查看页面源代码”)。
    • 确认 Google Analytics 代码已正确添加到 <head> 部分。
    • 返回您的 Google Analytics 账户,查看“实时”报告,确认数据是否正在收集。
  • WordPress 中添加预计阅读时间功能

    如何通过将以下代码片段添加到 WordPress 主题的 functions.php 文件中,来为您的文章显示预计阅读时间。可以帮助您的读者了解每篇文章所需的大致阅读时间。

    1. 找到您的 functions.php 文件

    • 编辑到您当前使用的主题目录,通常位于 wp-content/themes/your-theme-name/
    • 找到 functions.php 文件并使用文本编辑器打开它。

    2. 将代码片段添加到 functions.php

    将以下代码复制并粘贴到 functions.php 文件的末尾:

    // Estimated reading time
    function article_reading_time($content) {
        if (is_single()) { // Only display on single article pages
            // Remove HTML tags, keep content inside code blocks
            $text = strip_tags($content, '<pre><code>'); 
            
            // Keep only Chinese, English characters, and numbers; remove other characters
            $text = preg_replace('/[^a-zA-Z0-9\x{4e00}-\x{9fa5}]/u', '', $text); 
    
            // Calculate word count (only count Chinese, English, and number characters)
            $word_count = mb_strlen($text, 'UTF-8'); 
    
            // Calculate estimated reading time, assuming 300 words per minute
            $reading_time = ceil($word_count / 300);
    
            // Display estimated reading time with updated colors
            $output = '<div class="post-meta" style="padding: 12px; background: #FFF4E5; border-left: 5px solid #FF7300; 
                       margin-bottom: 15px; font-size: 16px; line-height: 1.6; color: #A74C00;">';
            $output .= '<strong>预计阅读时间:</strong> ' . $reading_time . ' 分钟';
            $output .= '</div>';
    
            return $output . $content; // Insert reading time before article content
        }
        return $content;
    }
    add_filter('the_content', 'article_reading_time');
    
    代码解释:
    • 这段代码会在每篇文章的开头显示预计阅读时间。
    • article_reading_time 函数会提取文章中的中文、英文和数字字符,然后根据每分钟阅读 300 个字的假设,计算出预计阅读时间。
    • 最后,这段代码会在文章内容的上方显示预计阅读时间。

    3. 保存 functions.php 文件

    • 保存对 functions.php 文件的更改。

    4. 查看效果

    现在,您可以访问任意一篇文章页面,您应该能够看到每篇文章上方会显示一个类似这样的标签:

    预计阅读时间:X 分钟

    这里的 X 会根据每篇文章的字数动态变化。

  • 几行搞定 WordPress 邮件发送

    要通过代码方式在 WordPress 中配置 SMTP,而无需使用插件,您可以通过修改 wp-config.php 文件并添加一些代码来实现。以下是详细步骤:

    1. 打开 wp-config.php 文件

    在您的 WordPress 根目录下找到 wp-config.php 文件,使用文本编辑器打开。

    2. 添加 SMTP 配置代码

    wp-config.php 文件中,添加以下代码来配置 SMTP 设置:

    // SMTP Configuration
    define('WP_MAIL_SMTP_HOST', 'smtp.example.com');  // SMTP server address
    define('WP_MAIL_SMTP_PORT', 587);                 // SMTP port number
    define('WP_MAIL_SMTP_USERNAME', '[email protected]');  // SMTP username
    define('WP_MAIL_SMTP_PASSWORD', 'your-email-password');     // SMTP password
    define('WP_MAIL_SMTP_FROM', '[email protected]');      // Sender email
    define('WP_MAIL_SMTP_FROM_NAME', 'Your Name');              // Sender name
    define('WP_MAIL_SMTP_SECURE', 'tls');                       // Encryption method, use 'tls' or 'ssl'
    define('WP_MAIL_SMTP_AUTH', true);                          // Whether to enable authentication

    3. 使用 phpmailer 配置 SMTP

    在主题的 functions.php 文件中添加以下代码来启用 SMTP 配置:

    // SMTP Configuration
    add_action( 'phpmailer_init', 'custom_phpmailer_init' );
    
    function custom_phpmailer_init( $phpmailer ) {
        $phpmailer->isSMTP();
        $phpmailer->Host = WP_MAIL_SMTP_HOST;
        $phpmailer->SMTPAuth = WP_MAIL_SMTP_AUTH;
        $phpmailer->Port = WP_MAIL_SMTP_PORT;
        $phpmailer->Username = WP_MAIL_SMTP_USERNAME;
        $phpmailer->Password = WP_MAIL_SMTP_PASSWORD;
        $phpmailer->From = WP_MAIL_SMTP_FROM;
        $phpmailer->FromName = WP_MAIL_SMTP_FROM_NAME;
        $phpmailer->SMTPSecure = WP_MAIL_SMTP_SECURE;
    }

    4. 保存文件并测试

    • 保存 wp-config.phpfunctions.php 文件。

    这将配置 WordPress 使用指定的 SMTP 服务器发送电子邮件,而不需要使用插件。

  • WordPress代码高亮无需插件快速实现

    在 WordPress 中使用 Prism.js 实现代码高亮

    Prism.js 是一个轻量级、可扩展的代码语法高亮显示工具。通过将 Prism.js 集成到您的 WordPress 主题中,可以轻松地为博客文章中的代码片段添加漂亮的语法高亮。

    我们的目标是利用 WordPress 古腾堡编辑器内置的“代码”区块,并结合 Prism.js 这个轻量级的代码高亮库,通过 CDN 方式加载,从而实现快速且无需插件的代码高亮效果。

    步骤 1:编辑主题的 functions.php 文件

    1. 编辑到您当前使用的主题目录,通常位于 wp-content/themes/your-theme-name/
    2. 找到 functions.php 文件并使用文本编辑器打开它。

    步骤 2:添加 Prism.js 代码

    将以下代码片段复制并粘贴到 functions.php 文件中

    // Code highlighting
    function enqueue_prism_cdn() {
        $prism_version = '1.29.0';
        $cdn = 'https://cdnjs.cloudflare.com/ajax/libs/prism/' . $prism_version;
        $theme_css = $cdn . '/themes/prism-okaidia.min.css';
        $line_numbers_css = $cdn . '/plugins/line-numbers/prism-line-numbers.min.css';
        $prism_js = $cdn . '/prism.min.js';
        $line_numbers_js = $cdn . '/plugins/line-numbers/prism-line-numbers.min.js';
        $bash_js = $cdn . '/components/prism-bash.min.js';
        $custom_css = 'pre.line-numbers, pre { background: #2d2d2d; padding: 1em; overflow: auto; border-radius: 4px; color: #f8f8f2; } pre.line-numbers { position: relative; padding-left: 3.8em; } code { background: none !important; padding: 0 !important; }';
        $custom_js = 'document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll("pre:not(.line-numbers)").forEach(pre => { pre.classList.add("line-numbers"); const code = pre.querySelector("code:not([class*=\'language-\'])"); if (code) code.classList.add("language-bash"); }); if (typeof Prism !== "undefined") Prism.highlightAll(); });';
        wp_enqueue_style('prism-css', $theme_css);
        wp_enqueue_style('prism-line-numbers-css', $line_numbers_css);
        wp_enqueue_script('prism-js', $prism_js, [], $prism_version, true);
        wp_enqueue_script('prism-line-numbers-js', $line_numbers_js, ['prism-js'], $prism_version, true);
        wp_enqueue_script('prism-bash', $bash_js, ['prism-js'], $prism_version, true);
        wp_add_inline_style('prism-css', $custom_css);
        wp_add_inline_script('prism-js', $custom_js);
    }
    add_action('wp_enqueue_scripts', 'enqueue_prism_cdn');

    步骤 3:保存 functions.php 文件

    • 保存对 functions.php 文件的更改。

    如何使用

    1. 在WordPress古腾堡编辑器中,添加“代码”区块。
    2. 在代码区块中,输入您的代码。
    3. 保存文章或页面,查看效果。

  • Docker swarm 集群搭建实现wordpress高可用

    1. 安装Docker

    curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh

    2. 配置swarm

    # manage节点
    docker swarm init --advertise-addr 192.168.1.190
    
    # worker节点
    docker swarm join --token <TOKEN> 192.168.1.190:2377
    
    # 样例
    docker swarm join --token SWMTKN-1-29g8esjiy370vvmp4p3d0cldhca0q2uwfsb2eyszwmkhg99pc5-a6n5vf0gpg2hf14xsz9i4ybpu 192.168.1.190:2377
    验证
    # manage 节点查看
    docker node ls
    
    # 输出
    root@debian:~# docker node ls
    
    ID&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; HOSTNAME &nbsp; STATUS&nbsp; &nbsp; AVAILABILITY &nbsp; MANAGER STATUS &nbsp; ENGINE VERSION
    
    stnfb1bdotj8ka915yuhrt8ex * &nbsp; debian &nbsp; &nbsp; Ready &nbsp; &nbsp; Active &nbsp; &nbsp; &nbsp; &nbsp; Leader &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 28.0.1
    
    upicmogfh7spfgcsuy9knljna &nbsp; &nbsp; debian &nbsp; &nbsp; Ready &nbsp; &nbsp; Active&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 28.0.1
    
    root@debian:~#

    3. Docker Swarm来运行 WordPress 并实现高可用

    1. WordPress 数据持久化:使用 local volume 并在 Swarm 模式下进行数据同步。
    2. MySQL 主从复制:使用 MySQL 8.0 实现 主从架构,保证数据库高可用。
    3. 负载均衡:使用 Swarm 内置的 ingress 网络,让 WordPress 服务在两台机器上自动负载均衡。
    4. 自动重启:如果某个节点故障,Swarm 可以自动将容器调度到可用节点。

    4. 部署步骤

    Docker Compose 文件 (docker-compose.yml)

    version: '3.8'
    
    services:
      mysql-master:
        image: mysql:8.0
        command: --server-id=1 --log-bin=mysql-bin --binlog-format=ROW
        environment:
          MYSQL_ROOT_PASSWORD: rootpassword
          MYSQL_DATABASE: wordpress
          MYSQL_USER: wpuser
          MYSQL_PASSWORD: wppassword
        volumes:
          - mysql_master_data:/var/lib/mysql
        networks:
          - wp_network
        deploy:
          replicas: 1
          placement:
            constraints:
              - node.role == manager
    
      mysql-slave:
        image: mysql:8.0
        command: --server-id=2 --log-bin=mysql-bin --binlog-format=ROW
        environment:
          MYSQL_ROOT_PASSWORD: rootpassword
          MYSQL_DATABASE: wordpress
          MYSQL_USER: wpuser
          MYSQL_PASSWORD: wppassword
        volumes:
          - mysql_slave_data:/var/lib/mysql
        networks:
          - wp_network
        deploy:
          replicas: 1
          placement:
            constraints:
              - node.role == worker
    
      wordpress:
        image: wordpress:latest
        depends_on:
          - mysql-master
        environment:
          WORDPRESS_DB_HOST: mysql-master
          WORDPRESS_DB_USER: wpuser
          WORDPRESS_DB_PASSWORD: wppassword
          WORDPRESS_DB_NAME: wordpress
        volumes:
          - wordpress_data:/var/www/html
        networks:
          - wp_network
        deploy:
          mode: replicated
          replicas: 2
          restart_policy:
            condition: on-failure
        ports:
          - "80:80"
    
    volumes:
      mysql_master_data:
      mysql_slave_data:
      wordpress_data:
    
    networks:
      wp_network:
        driver: overlay

    1. 将 docker-compose.yml上传到管理节点

    scp docker-compose.yml user@swarm-manager:/home/user/

    2. 在 Swarm 管理节点上执行部署

    docker stack deploy -c docker-compose.yml wordpress

    3. 验证服务是否正常运行

    docker stack services wordpress

    4. 查看所有容器运行状态

    docker ps

    高可用性

    • 数据库:主从架构,若 mysql-master 失败,可手动切换 mysql-slave 为主库。
    • WordPress:多个副本运行在不同的 Swarm 节点,即使一台机器宕机,站点依然可用。
    • 负载均衡:Swarm 内置负载均衡,所有 WordPress 副本共享流量,确保访问分布均衡。