在chatgpt帮助下实现wordpress搭建、主题修改以及网站优化

Auth:河川       Date:2023/10/3       Cat:玩物志       Word:共12950字

2条回复

wordpress搭建部分

vps配置：甲骨文4核24g内存

LNMP的安装

步骤1：更新系统

首先，你应该更新你的系统到最新版本：

sudo apt update && sudo apt upgrade -y

步骤2：安装Nginx

使用以下命令安装Nginx：

sudo apt install nginx

启动Nginx并设置为开机启动：

sudo systemctl start nginx
sudo systemctl enable nginx

在浏览器中输入你的VPS IP地址，你应该能看到Nginx的欢迎页面。

步骤3：安装MySQL

安装MySQL服务器：

sudo apt install mysql-server

运行安全配置脚本，设置密码并移除不需要的选项：

sudo mysql_secure_installation

步骤4：安装PHP

安装PHP及其常见模块：

sudo apt install php-fpm php-mysql

接下来，配置Nginx使用PHP。打开你的站点配置（例如默认站点）：

sudo nano /etc/nginx/sites-available/default

在server块中，添加或修改以下内容：

location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/run/php/php7.x-fpm.sock; # 注意php版本号，确保它匹配你的PHP版本
}

保存并退出。

重新启动Nginx：

sudo systemctl restart nginx

步骤5：测试

在web根目录创建一个info.php文件：

echo "<?php phpinfo(); ?>" | sudo tee /var/www/html/info.php

在浏览器中访问http://your_vps_ip/info.php，你应该能看到PHP信息页面。

步骤6：安全性配置

  1. 使用ufw防火墙（如果你的系统上没有安装，可以使用sudo apt install ufw来安装）。

    启用ufw：

    sudo ufw enable

    允许SSH、HTTP和HTTPS：

    sudo ufw allow ssh
sudo ufw allow http
sudo ufw allow https

需要注意的地方

- 数据库安全性测试及php设置

chatgpt给的说明如下：

  1. 运行安全配置脚本，设置密码并移除不需要的选项

    当你首次安装MySQL服务器时，它会带有一些默认设置，其中一些可能是不安全的。例如，默认的匿名用户、没有密码的root用户等。为了使MySQL更加安全，MySQL提供了一个名为mysql_secure_installation的脚本来帮助你改善安全性。

    当你运行这个脚本：

    sudo mysql_secure_installation

    你会被问到以下几个问题：

    • Validate password plugin：是否启用密码验证插件，它可以确保MySQL用户密码的强度。
    • New password：为root用户设置一个新密码。
    • Remove anonymous users：删除匿名用户，通常建议做这个。
    • Disallow root login remotely：不允许root用户远程登录，通常建议这么做。
    • Remove test database and access to it：删除测试数据库，这也是推荐的。
    • Reload privilege tables now：重新加载权限表来应用新的更改。

    这个脚本的主要目的是帮助你简化MySQL的初步安全配置。

  2. 配置Nginx使用PHP

    当你安装了PHP和Nginx后，它们并不会自动地开始一起工作。你需要告诉Nginx如何处理PHP文件，这就是为什么我们需要修改Nginx的站点配置的原因。

    Nginx的配置文件通常位于/etc/nginx/sites-available/。默认的配置文件是default。

    使用nano或你喜欢的文本编辑器打开这个文件：

    sudo nano /etc/nginx/sites-available/default

    你需要在此配置中添加或修改一个“location”块来处理.php文件。这个块告诉Nginx当请求一个.php文件时，将它传递给PHP处理。

    
location ~ \.php$ {
   include snippets/fastcgi-php.conf;
   fastcgi_pass unix:/run/php/php7.x-fpm.sock;  # 注意php版本号，确保它匹配你的PHP版本
}

在这里我犯了个错误，版本是7.4，我写成了7.4.3

- 防火墙设置

sudo iptables -P INPUT ACCEPT
sudo iptables -P FORWARD ACCEPT
sudo iptables -P OUTPUT ACCEPT
sudo iptables -F
apt-get purge netfilter-persistent
reboot

wordpress安装

3.a 上传WordPress安装包至VPS，并解压

# 下载WordPress
wget https://wordpress.org/latest.zip

# 解压WordPress
unzip latest.zip

# 将解压得到的文件移动到web服务器的根目录
sudo mv wordpress /var/www/html/wordpress

3.b 创建MySQL数据库，用户名和密码

# 登录到MySQL
mysql -u root -p

# 创建新数据库
CREATE DATABASE wordpress_db;

# 创建新用户并分配权限
CREATE USER 'wordpress_user'@'localhost' IDENTIFIED BY 'your_strong_password';
GRANT ALL PRIVILEGES ON wordpress_db.* TO 'wordpress_user'@'localhost';
FLUSH PRIVILEGES;

# 退出MySQL
exit;
CREATE USER 'mabc'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON wordpress_db.* TO 'mabc'@'localhost';
FLUSH PRIVILEGES;
/var/www/html/wordpress

3.c 访问你的VPS的对应目录，按照提示完成安装

在你的浏览器中输入你的VPS的IP地址，后面跟上你的WordPress安装的路径，例如: http://your_vps_ip/wordpress。

上面第3.c执行不了，还需要对nigx进行配置

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

    root /var/www/html/wordpress;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ /index.php?$args;
    }

    # pass PHP scripts to FastCGI server
    #
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;

        # With php-fpm (or other unix sockets):
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        # With php-cgi (or other tcp sockets):
        # fastcgi_pass 127.0.0.1:9000;
    }

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}
}

后续配置https时还要对其进行修改

server {
    listen 80 default_server;
    listen [::]:80 default_server;
        return 301 https://$host$request_uri;
}

    # SSL configuration
    #
server {    
        listen 443 ssl default_server;
    listen [::]:443 ssl default_server;
        ssl_certificate /home/tls/junjies.com.crt;  # 请替换为您的证书文件路径
        ssl_certificate_key /home/tls/junjies.com.key;  # 请替换为您的私钥文件路径
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

    root /var/www/html/wordpress;

    # Add index.php to the list if you are using PHP
    index index.php index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ /index.php?$args;
    }

    # pass PHP scripts to FastCGI server
    #
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;

        # With php-fpm (or other unix sockets):
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        # With php-cgi (or other tcp sockets):
        # fastcgi_pass 127.0.0.1:9000;
    }

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}
}

消除站点健康提示

在使用Nginx时，您还是需要安装和配置PHP和其相关的模块。下面是在基于Debian/Ubuntu的系统中通过PHP FPM安装和启用PHP模块的方法：

  1. 首先，更新您的软件包列表：

    sudo apt update

  2. 然后依次安装所需的PHP模块：

    sudo apt install php-curl php-xml php-imagick php-mbstring php-zip php-gd php-intl

  3. 安装完成后，您需要重新启动PHP FPM服务来应用这些更改。具体的命令取决于您安装的PHP版本。如果您使用PHP 7.4，那么命令将是：

    sudo systemctl restart php7.4-fpm

  4. 为了确保Nginx也重新加载了新的配置，请重新启动Nginx：

    sudo systemctl restart nginx

  5. 在重新启动服务后，您可以使用php -m命令来验证PHP模块是否已成功安装：

    php -m | grep -E 'curl|dom|imagick|mbstring|zip|gd|intl'

如果您看到所有列出的模块名，则表示他们已成功安装和启用。

注意：确保您使用的PHP版本与PHP FPM服务中指定的版本匹配。如果您不确定，您可以使用以下命令来查找：

php -v

这将显示当前安装的PHP版本。您可以根据显示的版本调整PHP FPM重启命令。

主题的修改

参考链接：基于此主题修改

字体的修改

参考链接：字体的修改

在 header.php中，将以下代码插入到 <?php wp_head(); ?> 之前：

<!-- Screen version -->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/style.css" />
<style>
  body {
    /* Screen version */
    font-family: "LXGW WenKai Screen", sans-serif;
  }
</style>

所以，你的代码应该如下所示：

<?php wp_head(); ?>
<!-- Screen version -->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/style.css" />
<style>
  body {
    /* Screen version */
    font-family: "LXGW WenKai Screen", sans-serif;
  }
</style>
</head>

头像的修改

参考链接：头像的修改
在funtion.php中修改

if ( ! function_exists( 'get_cravatar_url' ) ) {
    function get_cravatar_url( $url ) {
        $sources = array(
            'www.gravatar.com',
            '0.gravatar.com',
            '1.gravatar.com',
            '2.gravatar.com',
            'secure.gravatar.com',
            'cn.gravatar.com',
            'gravatar.com',
        );
        return str_replace( $sources, 'cravatar.cn', $url );
    }

    add_filter( 'um_user_avatar_url_filter', 'get_cravatar_url', 1 );
    add_filter( 'bp_gravatar_url', 'get_cravatar_url', 1 );
    add_filter( 'get_avatar_url', 'get_cravatar_url', 1 );
}

if ( ! function_exists( 'set_defaults_for_cravatar' ) ) {
    function set_defaults_for_cravatar( $avatar_defaults ) {
        $avatar_defaults['gravatar_default'] = 'Cravatar 标志';
        return $avatar_defaults;
    }

    add_filter( 'avatar_defaults', 'set_defaults_for_cravatar', 1 );
}

if ( ! function_exists( 'set_user_profile_picture_for_cravatar' ) ) {
    function set_user_profile_picture_for_cravatar() {
        return '<a href="https://cravatar.cn" target="_blank">您可以在 Cravatar 修改您的资料图片</a>';
    }

    add_filter( 'user_profile_picture_description', 'set_user_profile_picture_for_cravatar', 1 );
}

禁用自动保存和修订版本

在wp-config.php文件中添加如下代码：

define('WP_POST_REVISIONS', false);
define('AUTOSAVE_INTERVAL', 86400);

禁用google字体

在funtion.php中添加：

function remove_google_fonts() {
    wp_dequeue_style( 'twentytwelve-fonts' );
    wp_deregister_style( 'twentytwelve-fonts' );
}
add_action( 'wp_enqueue_scripts', 'remove_google_fonts', 20 );

顶部图片的修改

参考链接：图片设置
在header.php 文件中添加如下代码：

<hgroup>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    <a href="https://junjies.com/" title="回到首页"><img src="https://junjies.com/wp-content/uploads/2023/09/Maggie-Chiang-Illustrations.jpg" alt="河川" width="70" height="70"/></a>
</hgroup>

在css文件中加入下面的代码，和参考链接中的有区别

/*顶部图片*/
.site-header hgroup{position: relative;}
.site-header hgroup img{position: absolute;right: 0;}
@media (max-width: 650px) {
.site-header hgroup img{ display:none}
}
.site-header hgroup img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

标签云样式

/* 标签云样式修改 */ 
 .tagcloud {
     overflow:hidden;
     line-height:20px;
 }
 .tagcloud a {
    font-size: 13px!important;
    padding: 3px;
    margin-right: 3px;
    float: left;
    display: block;
 }
 .tagcloud a:not(.dots):hover {
     background-color: #336699;
     color: #FFFFFF;
     border:0;
 }

归档页面

参考链接：归档页面、代码在这个网站，样式是对照着yinji的css文件修改、归档样式代码

分隔线与标签重叠的问题

/* 文章页标题、meta块、和脚部样式修改 */
#content .title {
    font-size: 24px;
    padding-bottom: 24px;
    text-align: center;
}
#content .meta {
    font-size: 13px;
    padding: 10px 0 10px 0;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    text-align: center;
    letter-spacing: 0.035rem;
}
#content .content-foot {
    font-size: 13px;
    padding: 10px 0 10px 24px;
    ~~margin: 0 -24px -24px -24px;~~
    letter-spacing: 0.035rem;
    background-color: #ededed;
}

上述代码中这一段要删除：margin: 0 -24px -24px -24px;

标题样式修改

源代码中h2h3h4存在错误，修改如下：

/* 文章目录 h标题序号 */
.single-post {
    counter-reset: h2 h3 h4;
}

.single-post .entry-content {
    counter-reset: h2 h3 h4; /* 在每个新的 entry-content 区域开始时重置 h2, h3, 和 h4 计数器 */
}

.single-post .entry-content h2 {
    text-indent: 1.4rem;
    font-weight: bold;
    position: relative;
    margin: 0 0 16px;
     counter-reset: h3 h4; /* 添加这行：每次开始新的h2时，重置h3和h4计数器 */
}

.single-post .entry-content h2:before {
    margin-left: -1.4rem;
    padding-right: 6px;
    counter-increment: h2; /* 每次遇到 h2 标签时递增 h2 计数器 */
    content: counter(h2) ".";
}

.single-post .entry-content h3 {
    margin: 0 0 16px;
    text-indent: 2.2rem;
    font-weight: bold;
    position: relative;
    counter-reset: h4; /* 添加这行：每次开始新的h3时，重置h4计数器 */
}

.single-post .entry-content h3:before {
    margin-left: -2.2rem;
    padding-right: 6px;
    counter-increment: h3; /* 每次遇到 h3 标签时递增 h3 计数器 */
    content: counter(h2) "." counter(h3); /* 显示 h2 和 h3 计数器的值 */
}

.single-post .entry-content h4 {
    line-height: 1.8;
    margin: 0 0 16px;
    padding: 0;
    text-indent: 3rem;
    font-weight: bold;
    position: relative;
}

.single-post .entry-content h4:before {
    margin-left: -3rem;
    padding-right: 6px;
    counter-increment: h4; /* 每次遇到 h4 标签时递增 h4 计数器 */
    content: counter(h2) "." counter(h3) "." counter(h4); /* 显示 h2, h3 和 h4 计数器的值 */
}

参考链接：标题目录结构

文章目录

在css文件中添加如下代码：

/*文章目录*/
#toc_container {
    float: right;
    max-width: 200px;
    border: 1px solid #888;
    padding: 4px 12px 0;
    margin: 10px 0 10px 16px;
}
.toc_title {
    font-weight: bold;
}
#toc_container ol {
    text-indent: 1.4rem;
    margin: 0;
    padding: 0 0 6px 0;
    counter-reset: lia;
}
#toc_container li {
    list-style: none;
    margin: 0;
    width: 99%;
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
    overflow: hidden;
}
#toc_container ol li:before {
    margin-left: -1.4rem;
    padding-right: 6px;
    counter-increment: lia;
    content: counter(lia) ".";
}
#toc_container ol ol {
    counter-reset: lib;
    padding: 0 0 0 12px;
    margin: 0;
}
#toc_container ol ol li:before {
    padding-right: 6px;
    counter-increment: lib;
    content: counter(lia) "." counter(lib);
}
#toc_container ol ol ol {
    counter-reset: lic;
}
#toc_container ol ol ol li:before {
    padding-right: 6px;
    counter-increment: lic;
    content: counter(lia) "." counter(lib)"."counter(lic);
}

/*内容折叠丝滑*/
.toc_list.catalog {
    transition: max-height 0.3s ease, opacity 0.3s ease; /* 丝滑效果 */
    max-height: 800px; /* 一个足够大的值 */
    opacity: 1;
    overflow: hidden;
}

.toc_list.catalog.toc_hidden {
    max-height: 0;
    opacity: 0;
}
#toc_container a {
    text-decoration: none;
}

#toc_container {
   border-radius: 5px; 
    box-shadow: 0 0 5px gray;  /* 增大阴影范围 */
}

/*内容折叠*/
.showmore span{
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
    padding: 0 8px;
    cursor: pointer;
}
.section-content {
    color: #8b8b8b;
    border-left: 5px solid #aaa;
    margin: -16px 0 24px;
    padding: 0 0 0 12px;
    display: none;
}
.taxonomy-title {
    font-size: 16px;
}
.taxonomy-description{
    margin: 16px 0 0;
}

在模板函数中添加如下代码：

//页面目录
function add_toc_and_toggle_script() {
?>
<script>
    window.onload = function() {
    var tocContainer = document.getElementById('toc_container');
    var headers = document.querySelectorAll('.single-post .entry-content h2, .single-post .entry-content h3');
    var currentH2 = null;

    if (headers.length > 0) {
        var mainOl = document.createElement('ol');
        mainOl.className = "toc_list catalog";

        headers.forEach(function(header) {
            var li = document.createElement('li');
            var a = document.createElement('a');
            var id = header.textContent.replace(/\s+/g, '-').toLowerCase();
            header.setAttribute('id', id);
            a.setAttribute('href', '#' + id);
            a.setAttribute('title', header.textContent);
            a.textContent = header.textContent;
            li.appendChild(a);

            if (header.tagName === "H2") {
                mainOl.appendChild(li);
                currentH2 = li;
            } else if (header.tagName === "H3" && currentH2) {
                if (!currentH2.children[1] || currentH2.children[1].tagName !== "OL") {
                    var subOl = document.createElement('ol');
                    currentH2.appendChild(subOl);
                }
                currentH2.children[1].appendChild(li);
            }
        });

        var tocTitle = document.createElement('div');
        tocTitle.className = "toc_title";
        tocTitle.innerHTML = '文章目录 <span class="toc_toggle">「隐藏」</span>';

        tocContainer.appendChild(tocTitle);
        tocContainer.appendChild(mainOl);
    }

    // 添加目录隐藏/显示功能
    var tocToggle = document.querySelector(".toc_toggle");
    var tocList = document.querySelector(".toc_list.catalog");
    if (tocToggle && tocList) {
        tocToggle.addEventListener("click", function() {
            if (!tocList.classList.contains('toc_hidden')) {
                tocList.classList.add('toc_hidden');
                tocToggle.textContent = "「显示」";
            } else {
                tocList.classList.remove('toc_hidden');
                tocToggle.textContent = "「隐藏」";
            }
        });
    }
};
</script>
<?php
}
add_action('wp_footer', 'add_toc_and_toggle_script');

在content.php中添加如下内容：

<!-- 添加文章目录容器 -->
        <div id="toc_container" class="article_toc"></div>

位置在</header><!-- .entry-header -->之后

参考链接：文章目录

网站的优化

通过Cloudflare加速

点亮小云朵，Cloudflare的 SSL/TLS 加密模式修改为Full (strict)，设置为Flexible会有重定向的问题。链接：解决重定向

数据库缓存

参考链接：WP Super Cache 与 Redis 结合使用

《在chatgpt帮助下实现wordpress搭建、主题修改以及网站优化》有2个想法

    1. 河川 文章作者

      感谢青山大佬点评，有点受宠若惊。
      因为是零基础，所以我还是比较满意的😆。就这个挫样子，都已让我折腾了好几天。
      我是基于官方主题修改，想修改成你博客的那种样式，本以为只要按照你博客写得简单改改就可以，大错特错啊。多亏了chatgpt，后面的再一点一点完善😅

      回复 ↓

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注