作者： Jet L

【网站】为SSL证书自动续期设定正确的Nginx配置

使用certbot进行renew证书操作，基于Nginx+Apache。

在webroot模式下的Nginx配置，需要对80端口和443端口进行配置，以保证验证程序可以读取/.well-known/acme-challenge/路径


# 80端口
 # ACME challenge
    location ^~ /.well-known/acme-challenge/ {
        root  #webroot路径;
        allow all;
    }
   # 其他请求跳转 HTTPS
    location / {
        return 301 https://example.cn$request_uri;
    }


# 443端口
# ACME challenge
    location ^~ /.well-known/acme-challenge/ {
        root #webroot路径;
        allow all;
    }

2025年6月3日

【网站】为WordPress配置正确的文件夹权限

参考链接

Hardening WordPress – Advanced Administration Handbook | Developer.WordPress.org

# 切换到WP目录
cd /var/www/wordpress

# 将所有权设置为 www-data（用户和组）
sudo chown -R www-data:www-data .

# 所有目录设为 755
sudo find . -type d -exec chmod 755 {} \;

# 所有文件设为 644
sudo find . -type f -exec chmod 644 {} \;

# 强化 wp-config.php 权限
sudo chmod 640 wp-config.php

2025年5月6日

【网站】如何用Docker容器运行供应商的定制版WordPress

一、一个烂摊子

部门此前寻找网站供应商制作了产品网站，其交付网站架构较为老旧，网站基于WordPress 5.0版本构建，PHP版本要求为不高于7.3，MySQL版本5.7。

就是这种要求在回迁公司服务器时也出现了各种问题。由于公司服务器环境过于杂乱，连mysql5.7的数据库都无法顺利导入。

这里面也有供应商的一些问题，例如交付的WordPress配置文件与数据库表头不匹配，数据库时间配置错误等。

在我的帮助下，数据库和配置文件都得以修改正常，网站终于部署上线，但是系统环境导致包含中文文件名的文件无法被解析，在调整Nginx配置无效后，IT让我修改中文名文件，我。。。

二、服务器和Docker

借由新ECS服务器和公司官网的搭建，考虑把产品网站也纳入部门服务器的管理。

但供应商的环境版本老久，为了避免产品网站潜藏的漏洞影响整体服务器的稳定，我使用了Docker来为产品网站配置环境。

中间也考虑使用LXD来实现，但是网络环境始终无法配置完成，因此不再浪费时间，使用Docker实现功能。

三、Docker的问题

最大的问题是镜像源，国内能搜索到的镜像源很多都停止了服务。因此需要在/etc/docker/daemon.json里配置可以访问的镜像源，这个不再赘述。

四、部署

将供应商的WP文件夹上传到服务器，可以在同位置配置Docker的yml文件。

version: '3.7'

services:
  wordpress:
    build: .
    container_name: wordpress-container
    ports:
      - "8000:80"  # WordPress 端口
    volumes:
      - /# 本地 WordPress 目录 wp:/var/www/html  # 本地 WordPress 目录
    networks:
      - wordpress_network
    depends_on:
      - mariadb  # 依赖 MariaDB 服务
    environment:
      WORDPRESS_DB_HOST: mariadb:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: # 用户名
      WORDPRESS_DB_PASSWORD: ${MYSQL_PASSWORD}  # 从 .env 读取密码
    restart: always

  mariadb:
    image: mariadb:latest
    container_name: mariadb-container
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}  # 从 .env 读取密码
      MYSQL_DATABASE: wordpress
      MYSQL_USER: # 用户名
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    volumes:
      - mariadb_data:/var/lib/mysql  # 使用 Docker Volume 代替宿主机路径
      - # 初始数据库地址:/docker-entrypoint-initdb.d/#初始数据库.sql  # 初始 SQL 数据
    ports:
      - "3307:3306"
    networks:
      - wordpress_network
    restart: always

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin-container
    environment:
      PMA_HOST: mariadb
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}  # 从 .env 读取密码
    ports:
      - "8081:80"
    networks:
      - wordpress_network
    restart: always

networks:
  wordpress_network:
    driver: bridge

volumes:
  mariadb_data:

从.env文件读取密码：

MYSQL_ROOT_PASSWORD=# 密码1
MYSQL_PASSWORD=# 密码2

如果是使用mariadb，则需要在WP的Config文件中修改配置：

define('DB_HOST', 'mariadb');

后端启动之后，我们可以通过IP+端口来进行服务的测试，如果没有问题，就可以通过主机的Nginx代理，来配置域名访问。

server {
    listen 80;
    server_name #域名;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name #域名;

    ssl_certificate /etc/letsencrypt/live/#域名/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/#域名/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        proxy_pass http://127.0.0.1:8000;#映射docker端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Forwarded-Proto https;
        proxy_redirect off;
    }
}

五、其他注意事项：

1、如果WP的重写规则不可用，检查WP文件夹权限。

2、如果配置HTTPS发现页面正常，但是管理界面出现问题，考虑是配置文件问题，参考官方说明配置。

define( 'FORCE_SSL_ADMIN', true );
// in some setups HTTP_X_FORWARDED_PROTO might contain 
// a comma-separated list e.g. http,https
// so check for https existence
if( strpos( $_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false )
    $_SERVER['HTTPS'] = 'on';

2025年3月22日

【网站】如何把多站点的WordPress网站从Nginx+PHP-FPM切换到Apache

最近手搓基于WP架构的企业官网，发现用Nginx+PHP-FPM时，在多站点的情况下可能会有一些地方不容易调试，所以尝试使用Nginx作为代理服务器，Apache作为后端，发现这对WordPress有很好的兼容性。

那么此前的网站如果已经完成在Nginx+PHP-FPM的部署，如何切换到Nginx+Apache呢？

这里省略Apache和其PHP模块的配置说明，需要重点修改的有以下几点：

1、Apache的配置：

Apache的端口设置，因为我们要使用Nginx转发HTTPS，因此设置Apache的监听端口为8080，避免和Nginx的端口冲突。

<VirtualHost *:8080>
    DocumentRoot /var/www/html/wordpress
    ServerName yourdomain.com
    <Directory /var/www/html/wordpress>
        AllowOverride All
        Require all granted
    </Directory>
    
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

2、WP-Config的配置修改：

如果网站使用了HTTPS，那么需要按照WordPress的官方设置来进行修改WP-Config：

define( 'FORCE_SSL_ADMIN', true );
// in some setups HTTP_X_FORWARDED_PROTO might contain 
// a comma-separated list e.g. http,https
// so check for https existence
if( strpos( $_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false )
    $_SERVER['HTTPS'] = 'on';

3、修改Nginx的站点配置文件：

删除此前用于PHP-FPM的配置代码，把HTTPS转发到Apache处理。

location / {
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_redirect off;
}

4、修改.htaccess文件：

如果使用子文件夹模式：

# BEGIN WordPress Multisite
# Using subfolder network type: https://wordpress.org/documentation/article/htaccess/#multisite

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]

# END WordPress Multisite

如果使用子域模式：

# BEGIN WordPress Multisite
# Using subdomain network type: https://wordpress.org/documentation/article/htaccess/#multisite

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

# END WordPress Multisite

5、修改PHP配置文件：

选择适合自己的媒体处理限制，因为此前处理媒体的PHP服务是PHP-FPM，切换到Apache后需要配置对应的PHP服务。

6、检验Nginx配置文件，重启Nginx服务和Apache服务。

2025年3月19日

【工作】手搓一个基于WordPress的企业官网（1）

前情提要

工作以来，我全权负责了企业品牌网站和产品网站的上线全过程，回顾这俩网站，一个基于PHP5一个基于PHP7，漏洞百出且UI基于桌面浏览习惯设计，虽然有移动适配但是不多。

服务商往往都想在建设和运营上收取double的金钱，而机智的领导们总是在免费的第一年服务午餐吃完后就让网站回迁到公司服务器之上。

为什么不找供应商

因为闲（不是

小公司受限于预算，供应商的水平和投入度都会较低，对接起来身心俱疲。

贵公司的IT在干嘛？

OA系统封面加载的5M大小PNG让我对IT心怀敬意（那我问你

开搞新网站

去年自己手搓了公司的企业小程序，在移动端效果尚可，同时根据此前的网站后台数据，我们的web端八成流量都来自移动平台。

因此构建一个适合移动浏览，完全掌握在部门手中的互联网平台成为了计划中的事件。

为什么选择WordPress

第一是因为熟悉，NASA、白宫之类的网站都在使用（可以跟领导吹牛逼）

第二是需要考虑后续的可维护性，WP的生态目前挺好。

选择服务器

（1）选择了阿里云的ECS服务器，第一企业域名在阿里云，第二是因为做活动便宜，公司再没钱99也能拿出来吧。

（2）请第一时间删除阿里云相关的云助手之类的自带软件。若你没有很多的预算购置一些快照服务，自行做好后续的维护。

部署多站点系统的WP

由于企业网站需要中英文两个版本，使用不同的域名，因此多站点系统是必须的。

之前我采有标准的LNMP架构，这次则是在LAMP基础上，使用NGINX做代理，WP的多站点支持对apache2更加友好，PHP版本建议选择WP推荐版本，最新的版本我在使用中还是会出现一些容易BUG的地方。

2025年3月17日

【网站】在WP区块中添加CSS+JS动画

类似如下效果：

H armony

O ptimize

N ature

E nergy

S ustainability

S olutions

ALL In

HONESS.

可以直接在区块代码编辑器中进行添加。

<p class="has-text-align-left has-text-color"
    style="color:#ffffff61;font-size:72px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase">
    <em>H</em> <strong>armony</strong></p>

例如以上是第一行动画文字的代码，因为在区块中我们给不同的文字设定了不同的标签，我们可以直接在代码中修改后面strong标签的类，改成如下：

<p class="has-text-align-left has-text-color"
    style="color:#ffffff61;font-size:72px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase">
    <em>H</em> <strong class="change-word">armony</strong></p>

这样我们就可以利用CSS+JS动画实现该标签的动画效果。

CSS：

<style>
    .change-word {
        display: inline-block;
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    }
    .hidden {
        opacity: 0;
        transform: translateY(-10px);
    }
</style>

JS：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const words = [
            ["armony", "ope", "ealth", "appiness"], // H
            ["ptimize", "pportunity", "rganic", "vergreen"], // O
            ["ature", "urture", "eeds", "urturing"], // N
            ["nergy", "arth", "cology", "nvironment"], // E
            ["ustainability", "ynergy", "upport", "olutions"], // S
            ["olutions", "trategy", "uccess", "ymbiosis"] // S
        ];

        function changeWord(index, element, delay) {
            setTimeout(() => {
                element.classList.add("hidden"); // 先隐藏
                setTimeout(() => {
                    let nextWord = words[index].shift();
                    words[index].push(nextWord);
                    element.textContent = nextWord;
                    element.classList.remove("hidden"); // 显示
                }, 400);
            }, delay);
        }

        function startAnimation() {
            let elements = document.querySelectorAll(".change-word");
            let delay = 100;
            elements.forEach((el, index) => {
                setInterval(() => changeWord(index, el, index * delay), 2500);
            });
        }

        startAnimation();
    });
</script>

2025年3月13日

【网站】让WordPress封面区块的视频背景支持在微信环境下自动切换为照片

移动版本的微信，在其内置的微信WEB环境中，对视频播放有很多限制，如果我们的封面区块想设置视频，就会出现无法加载播放的情况。

为了解决这个问题，我去看了一下一些大厂的做法，当然大厂用的肯定不是WP，不过思路是可以借鉴的。

华为的做法是用一个JS来判断是否是微信环境，如果是微信环境则切换到图片。OPPO的做法更加直接，他们直接用图片+动画的形式解决了视频这个问题，emm通用性确实刚刚的。

那么我们在WP下，使用原版的封面区块是否可以进行类似的切换呢？也是可以的，原理是在区块代码中插入一个图片，利用一个简单的IF判断来实现微信环境下的自动切换。

具体代码如下：

<!-- wp:cover {"url":"//默认图片地址","id":588,"dimRatio":50,"overlayColor":"contrast","isUserOverlayColor":true,"backgroundType":"video","minHeight":840,"minHeightUnit":"px","isDark":false,"className":"main-container","layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light main-container" style="min-height:840px">
    <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span>

    <!-- 视频背景，添加 id="background-video" -->
    <video id="background-video" class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline 
        src="//视频地址" data-object-fit="cover">
    </video>

    <!-- 备用静态图片，默认隐藏 -->
    <img id="background-image" src="//图片地址" 
        alt="Background Image" style="display:none; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;">

    <div class="wp-block-cover__inner-container">
        <!-- 可添加文本或其他内容 -->
    </div>
</div>
<!-- /wp:cover -->

<script>
document.addEventListener("DOMContentLoaded", function () {
    function isWeChatBrowser() {
        return /MicroMessenger/i.test(navigator.userAgent);
    }

    if (isWeChatBrowser()) {
        let video = document.getElementById("background-video");
        let image = document.getElementById("background-image");

        if (video && image) {
            video.style.display = "none"; // 隐藏视频
            image.style.display = "block"; // 显示备用图片
        }
    }
});
</script>

2025年3月12日

【网站】WordPress中如何获得无间隔的区块
```
    "spacing": {
        "blockGap": "1.2rem",
        "padding": {
            "left": "var:preset|spacing|50",
            "right": "var:preset|spacing|50"
        }
    },
```
6.X版本的Wordpress中，区块之间会有一个默认1.2rem的间隔，这个间隔在页眉页脚设置中会与其他不同色彩的区块产生非常显眼的割裂，或者同一种非白色区块中间产生间隔缝隙。

如何修改这个问题？很简单，我们可以在主题样式和区块设置 (theme.json)中进行更改，去掉这个间隔，让我们的区块背景更加融合或者分离的更明显，具体如上代码，找到 “spacing” 中的 “blockGap” 部分，将预设的 “1.2rem” 改为null即可（不用带引号），修改完毕的代码如下所示↓

修改完毕后最好检查一下页面是否有其他区块被影响，目前观察容易受到影响的有导航栏，可以在其单独的样式中针对性调整区块间隔。
```
    "spacing": {
        "blockGap": null,
        "padding": {
            "left": "var:preset|spacing|50",
            "right": "var:preset|spacing|50"
        }
    },
```
2025年3月10日
【音乐】《问月》——你可听过百年故事千年唱

跳转我的碎碎念

歌词：

玉盘玉盘

你为何悬于屋顶上

玉盘玉盘

你为何白白送银光

玉盘玉盘

你为何有时招摇有时藏

有时瘦来有时胖

玉盘玉盘

你可曾装过喜时糖

玉盘玉盘

你可曾见过别时泪长淌

玉盘玉盘

你可曾听过百年故事千年唱

长诗逾万行

月亮月亮心头光

月光月光亮汪汪

月亮月亮

那孩子正抬头凝望

请仙鹤来访

直驾九天上

玉盘玉盘

太白和眼睛谁比较璀璨

玉盘玉盘

金乌和嫦娥谁比较孤单

玉盘玉盘

是什么亮闪闪推动我的小船

有时明来有时暗

玉盘玉盘

那天宫是否有答案

玉盘玉盘

那大圣取经何时还

玉盘玉盘

那孩子乘风越过天上万重山

漫漫漫漫漫漫向星汉

月亮月亮太极长

月光月光浩茫茫

月亮月亮

那孩子已拂去风霜

为他揽星辰

带他回故乡

月亮月亮太极长

月光月光浩茫茫

月亮月亮

那孩子已拂去风霜

为他揽星辰

带他回故乡

月亮月亮嘿月亮

抬头凝望，玉盘悬于屋顶上，今人不见古时月，今月曾经照古人。从古人对广寒宫的朴素畅想，到如今的玉兔在月，鹊桥环绕，无论阴晴圆缺，月亮始终伴随中华民族的成长，见证无数聚散，其已经成为一个意义丰富的文化符号。

今年的春晚我并没有认真看，这两天却听到了其中的《玉盘》，这简单重复的旋律，却有一种特别的引力，因此我找到了《问月》，也知道了谭淇尹、葫芦童声、妞妞合唱团，知道了歌曲背后的故事，了解了一群可爱的孩子。

说来有趣，我最喜欢的主旋律歌曲也和航天有关——《祖国不会忘记》，说来有趣，我也和凉山的孩子有过一些间接的接触——通过敬爱的支教老师，也捐赠过一些学习用品。

因此在听这首歌时候，更有一些别样的情感，难以一言以蔽之，有对文化的回响，有对经历的共鸣，有对星空的畅想，鉴于这是一首与航天有关的曲子，更有康斯坦丁·齐奥尔科夫斯基的话语——“地球是人类的摇篮，但人类不可能永远被束缚在摇篮里”。

回顾这几年，有的人类在摇篮里厮杀，也有人类试图朝着太空不断进发（当然也有人想回还没回来（X））但愿月亮成为人类的前进的基地，携手向更远的世界探索，让未来的百年或者千年故事可以传唱其他的行星、卫星或者恒星，毕竟我们已经对着月亮唱了千年。

2025年2月20日
【小贴士】WordPress主题更新的问题

我的网站一般通过functions.php文件来加载特定的JS代码或CSS，这样虽然有一定的灵活性，但是WordPress主题文件更新时，其会将用户上传到主题文件夹的代码删除，也会重置functions.php文件，不过不用太担心，这个操作在你点击更新之前会进行提示而非全自动就给你覆盖掉了。

因此必须定期备份修改过的文件，此外也可以考虑采用子主题——Child Theme，这个操作可以参考WordPress的子主题介绍来进行。

其中对于如何上传自主题、如何修改functions.php，都有较为详细的解释。

2025年2月12日

作者： Jet L

前情提要

为什么不找供应商

贵公司的IT在干嘛？

开搞新网站

为什么选择WordPress

选择服务器

部署多站点系统的WP