Wordpress建站碰到的坑

前言

很久以前自己站因为杂七杂八的原因Boom，于是乎就没有管了（其实就是站点迁移炸了）。最近开始重新建站，选了KRATOS主题和WPJAM插件，编辑器选择了Advanced Editor Tools，同时还挂上了CDN加速网页和COS加速图片（主要是没有其他很好的选择），但是还是碰到了一堆坑，这里把碰到的坑列一遍免得以后接着重来。

希望这次这个网站能存活的更久点把，至少或许大概不会那么容易boom。

最后，套用影视飓风的一句话：无限进步。

建站费用

这个是给后续作为参考的费用（时间单位：年；货币单位：人民币）

域名：.com域名一年费用：80元
服务器：本站使用的是很久以前薅羊毛的腾讯云440元5年的2核CPU、4GB内存、60GB SSD云硬盘、6Mbps带宽、1000GB/月流量包的上海轻量（已免费升级成100G SSD云硬盘、7Mbps带宽）=88年
对象存储：目前没存多少东西，费用为：1.18/G每年（现在存了大概1G左右）=1.18元
CDN服务：0.21元/G（我估计一年也就50G把）=10.5元

总计：80+88+1.18+10.5+10（可能的额外支出）=189.68

更新日志

V1.0 2024年3月9日：初始版本。

V1.1 2024年3月11日：补充了部分内容，修订不完善的部分。

V1.2 2024年3月13日：修订和补充和Prism的部分功能完成建设问题的第三、五，不完美的解决了第2。

目前网站建设时问题

~~使用tianxiazui.com域名时字体跨域问题。~~
优雅的使用编辑器输入代码。（解决方法：参看6）
~~tianxizui.com和www.tianxiazui.com显示界面需要很久同步的问题。~~
右边侧边栏比较空（来自WSP同学）
~~Prism奇怪的Bug：引入JS和CSS时不是默认主题，但是他很莫名其妙的直接给我默认主题了！~~
Opcache和Memcached还没有按主机调整，且命中率太低。

1、使用HTTPS后台无法登录

重定向次数太多, 后台页面无法访问，在 wp-config.php 中添加如下配置，强制登录和后台使用 https 访问，配置加载包含 wp-settings.php 前。

$_SERVER['HTTPS']= 'on'; 
define('FORCE_SSL_LOGIN', true);
 define('FORCE_SSL_ADMIN', true);

2、使用HTTPS前端CSS混乱导致网页样式错误

网页样式丢失，错误是 css 文件加载失败，浏览器默认是不允许在 HTTPS 里面引用 HTTP 资源的，解决办法在 function.php 中添加如下代码。

//开启https加载js和css
// wordpress强制跳转https后，JS/CSS不加载的解决方案
add_filter('script_loader_src', 'agnostic_script_loader_src', 20,2);
function agnostic_script_loader_src($src, $handle)
{
return preg_replace('/^(http|https):/', '', $src);
}
add_filter('style_loader_src', 'agnostic_style_loader_src', 20,2);
function agnostic_style_loader_src($src, $handle) 
{
return preg_replace('/^(http|https):/', '', $src);
}

3、前端字体跨域问题（CROS）

因为本网站使用了多个域名，包含www.tianxiazui.com和tianxiazui.com，而站点设置为www.tianxiazui.com，导致通过tianxiazui.com访问时会存在跨域问题，具体显示如下

解决方法为：修改网站的Nginx配置文件，新增允许字体文件跨域

#防止字体被跨域拦截 
location ~* .(eot|ttf|woff|svg|otf|woff2|otf)$ 
{
    add_header Access-Control-Allow-Origin *; 
}

同时修改CDN的HTTP响应头配置，本站基于腾讯云，腾讯云修改如下：

4、代码高亮插件

一开始打算用插件解决，后面试了很多都很麻烦，而且很多不生效，索性直接开始魔改TinyMCE ，参考了前辈的经验，决定使用Prism解决这个问题。同时参考代码并且结合了下kratos主题自带的功能。具体流程如下

4.1、引用Prism的JS和CSS至Wordpress

使用WPJAM样式定制——前台 Head 代码

在body段添加Prism的JS和CSS，下文中的CSS和JS来自Prism官网，可以自行前往其官网定制

<!-- 引入prism.css -->
<link rel="stylesheet" href="https://[你的站点存放Prism.css的目录]/prism.css" />
<!-- 引入prism.js -->
<script type="text/javascript" src="https://[你的站点存放Prism.js的目录]/prism.js"></script>

4.2、基于kratos主题的修改：修改theme-shortcode.php

前往 [你的站点]/wp-content/themes/kratos-4.3.0/inc/theme-shortcode.php目录

新增短代码内容
修改部分函数

新增代码如下：

//引入prism
//Html
function Html($atts, $content = null, $code = "")
{
    $return = '<pre class="lang-markup"
    data-prismjs-copy="复制" 
    data-prismjs-copy-error="复制失败" 
    data-prismjs-copy-success="复制成功">
    <code class="lang-markup">';
    $return .= $content;
    $return .= '</code></pre>';
    return $return;
}
add_shortcode('Html', 'Html');
//PHP
function PHP($atts, $content = null, $code = "")
{
    $return = '<pre class="lang-php"    
    data-prismjs-copy="复制" 
    data-prismjs-copy-error="复制失败" 
    data-prismjs-copy-success="复制成功">
    <code class="lang-php">';
    $return .= $content;
    $return .= '</code></pre>';
    return $return;
}
add_shortcode('PHP', 'PHP');
//C#
function CShap($atts, $content = null, $code = "")
{
    $return = '<pre class="lang-net"    
    data-prismjs-copy="复制" 
    data-prismjs-copy-error="复制失败" 
    data-prismjs-copy-success="复制成功">
    <code class="lang-net">';
    $return .= $content;
    $return .= '</code></pre>';
    return $return;
}
add_shortcode('CShap', 'CShap');
//CSS
function CSS($atts, $content = null, $code = "")
{
    $return = '<pre class="lang-css"    
    data-prismjs-copy="复制" 
    data-prismjs-copy-error="复制失败" 
    data-prismjs-copy-success="复制成功">
    <code class="lang-css">';
    $return .= $content;
    $return .= '</code></pre>';
    return $return;
}
add_shortcode('CSS', 'CSS');
//JS
function JS($atts, $content = null, $code = "")
{
    $return = '<pre class="lang-js"
    data-prismjs-copy="复制" 
    data-prismjs-copy-error="复制失败" 
    data-prismjs-copy-success="复制成功">
    <code class="lang-js">';
    $return .= $content;
    $return .= '</code></pre>';
    return $return;
}
add_shortcode('JS', 'JS');
//PLSQL
function PLSQL($atts, $content = null, $code = "")
{
    $return = '<pre class="lang-plsql"    
    data-prismjs-copy="复制" 
    data-prismjs-copy-error="复制失败" 
    data-prismjs-copy-success="复制成功">
    <code class="lang-plsql">';
    $return .= $content;
    $return .= '</code></pre>';
    return $return;
}
add_shortcode('PLSQL', 'PLSQL');

register_button和add_plugin函数新增代码：

   //以下为register_button新增
    array_push($buttons, " ", "Html");
    array_push($buttons, " ", "PHP");
    array_push($buttons, " ", "CShap");
    array_push($buttons, " ", "CSS");
    array_push($buttons, " ", "JS");
    array_push($buttons, " ", "PLSQL");
    //以下为add_plugin新增
    $plugin_array['Html'] = ASSET_PATH . '/assets/js/buttons/more.js';
    $plugin_array['PHP'] = ASSET_PATH . '/assets/js/buttons/more.js';
    $plugin_array['CShap'] = ASSET_PATH . '/assets/js/buttons/more.js';
    $plugin_array['CSS'] = ASSET_PATH . '/assets/js/buttons/more.js';
    $plugin_array['JS'] = ASSET_PATH . '/assets/js/buttons/more.js';
    $plugin_array['PLSQL'] = ASSET_PATH . '/assets/js/buttons/more.js';

4.3、基于kratos主题的修改：more.js

前往 [你的站点]/wp-content/themes/kratos-4.3.0/assets/js/buttons目录

修改more.js文件如下，插入至(function () {之后。
图片位置:[当前目录] /images/Html.png'。Html.png为此按钮的图片文件。
将所有图片文件上传至images指定位置并重命名正确

//自定义图标
    //HTML
    tinymce.create('tinymce.plugins.Html', {
        init: function (ed, url) {
            ed.addButton('Html', {
                title: 'Html',
                image: url + '/images/Html.png',
                onclick: function () {
                    ed.selection.setContent('<pre class="lang-markup" data-prismjs-copy="复制" data-prismjs-copy-error="复制失败" data-prismjs-copy-success="复制成功"><code class="lang-markup">' + ed.selection.getContent() + '</code></pre>')
                }
            })
        },
        createControl: function (n, cm) {
            return null
        },
    })
    tinymce.PluginManager.add('Html', tinymce.plugins.Html)
    //PHP
        tinymce.create('tinymce.plugins.PHP', {
        init: function (ed, url) {
            ed.addButton('PHP', {
                title: 'PHP',
                image: url + '/images/PHP.png',
                onclick: function () {
                    ed.selection.setContent('<pre class="lang-php" data-prismjs-copy="复制" data-prismjs-copy-error="复制失败" data-prismjs-copy-success="复制成功"><code class="lang-php">' + ed.selection.getContent() + '</code></pre>')
                }
            })
        },
        createControl: function (n, cm) {
            return null
        },
    })
    tinymce.PluginManager.add('PHP', tinymce.plugins.PHP)
    //CSS
        tinymce.create('tinymce.plugins.CSS', {
        init: function (ed, url) {
            ed.addButton('CSS', {
                title: 'CSS',
                image: url + '/images/CSS.png',
                onclick: function () {
                    ed.selection.setContent('<pre class="lang-css" data-prismjs-copy="复制" data-prismjs-copy-error="复制失败" data-prismjs-copy-success="复制成功"><code class="lang-css">' + ed.selection.getContent() + '</code></pre>')
                }
            })
        },
        createControl: function (n, cm) {
            return null
        },
    })
    tinymce.PluginManager.add('CSS', tinymce.plugins.CSS)
    //JS
        tinymce.create('tinymce.plugins.JS', {
        init: function (ed, url) {
            ed.addButton('JS', {
                title: 'JS',
                image: url + '/images/JS.png',
                onclick: function () {
                    ed.selection.setContent('<pre class="lang-js" data-prismjs-copy="复制" data-prismjs-copy-error="复制失败" data-prismjs-copy-success="复制成功"><code class="lang-js">' + ed.selection.getContent() + '</code></pre>')
                }
            })
        },
        createControl: function (n, cm) {
            return null
        },
    })
    tinymce.PluginManager.add('JS', tinymce.plugins.JS)
    //c# 
            tinymce.create('tinymce.plugins.CShap', {
        init: function (ed, url) {
            ed.addButton('CShap', {
                title: 'CShap',
                image: url + '/images/CShap.png',
                onclick: function () {
                    ed.selection.setContent('<pre class="lang-net" data-prismjs-copy="复制" data-prismjs-copy-error="复制失败" data-prismjs-copy-success="复制成功"><code class="lang-net">' + ed.selection.getContent() + '</code></pre>')
                }
            })
        },
        createControl: function (n, cm) {
            return null
        },
    })
    tinymce.PluginManager.add('CShap', tinymce.plugins.CShap)
    //PLSQL
            tinymce.create('tinymce.plugins.PLSQL', {
        init: function (ed, url) {
            ed.addButton('PLSQL', {
                title: 'PLSQL',
                image: url + '/images/PLSQL.png',
                onclick: function () {
                    ed.selection.setContent('<pre class="lang-plsql" data-prismjs-copy="复制" data-prismjs-copy-error="复制失败" data-prismjs-copy-success="复制成功"><code class="lang-plsql">' + ed.selection.getContent() + '</code></pre>')
                }
            })
        },
        createControl: function (n, cm) {
            return null
        },
    })
  tinymce.PluginManager.add('PLSQL', tinymce.plugins.PLSQL)

4.4、基于kratos主题的修改：style.ccs

前往 [你的站点]/wp-content/themes/kratos-4.3.0目录，按如下代码做屏蔽

.k - main.details.article.content pre {
margin: 10px 0;
padding: 11px 16px;
border - radius: 4px;
/*
屏蔽对Pre标签background的处理，使用Prism处理
background-color: #f8f8f8;
*/
background - color: transparent；
word-wrap: break-word;
font - size: 11px;
line - height: 1.7;
word -break: break-all;
}
/*
屏蔽对code标签处理，使用prism处理
.k-main .details .article .content code {
margin: 0 3px;
padding: 2px 4px;
border-radius: 4px;
background-color: #eff0f1;
/*color: #333;
color:inherit
font-size: 13px;
word-break: inherit;
}
*/

4.5、成果展示

但是说句实话···只需要把代码在后台用

<pre><code class="language-plsql">[此处填入PLSQL代码段]</code></pre>

这样框起来就行，切换到文本模式编辑下就可以。但是我懒。好耶！

5、启用WebP+自动上传CDN

Webp 是由谷歌在 2010 年 9 月发布的一种用于 web 端支持有损和无损压缩的图片格式（同时也支持动态图片和透明度），设计这种图片格式的目的主要是为了创建出相对于 jpg, png 和 gif 更小或画质更好的图片，到 2021 年 3 月份，支持 webp 图片格式的浏览器已经占全球份额的 93 %。因此启用WebP是很有必要的（主要是省钱，OSS的CDN流量还是比较贵的！而且我不想管IE的死活）

因此，选用了Plus WebP作为WordPress自动转换Webp的插件。

至于自动上传CDN，选用了WPJAM的CDN加速功能实现。

因此，可以很优雅的在后台媒体直接上传文件，然后直接把图片连接复制到文章中即可。

6、代码高亮插件(无需改动主题)

彻底解决了代码高亮的所有Bug，而且无需改动主题！

6.1 下载插件、引用Prism

从插件库下插件：Advanced TinyMCE Configuration，然后参考4.1引用Prism

6.2 编写TinyMCE 代码

新建文件，命名为Tinymce_Prism.js，复制如下代码，并将其传至CDN或本地服务器

下文的values中，所有对照均可在Prism官网找到

(function () {
  // 添加Code对话框
  tinymce.PluginManager.add("Tinymce_Prism", function (editor, url) {
    editor.addCommand("openCodeDialog", function () {
      editor.windowManager.open({
        title: "插入代码",
        body: [
          {
            type: "listbox",
            name: "codeType",
            label: "选择代码类型",
            values: [
              { text: "HTML", value: "markup" },
              { text: "PHP", value: "php" },
              { text: "CSS", value: "css" },
              { text: "JavaScript", value: "js" },
              { text: ".NET", value: "net" },
              { text: "PLSQL", value: "plsql" },
            ],
          },
          {
            type: "textbox",
            name: "codeContent",
            label: "粘贴代码",
            multiline: true,
            minWidth: 400,
            minHeight: 200,
          },
        ],
        onsubmit: function (e) {
          var selectedType = e.data.codeType;
          var codeContent = e.data.codeContent;
          var codeBlock;
          //HTML需要转义插入
          if (selectedType === "markup") {
            var entityMap = {
              "&": "&",
              "<": "<",
              ">": ">",
              '"': """,
              "'": "'",
              "/": "/",
              "`": "`",
              "=": "=",
            };
            function escapeHtml(string) {
              return String(string).replace(/[&<>"'`=\/]/g, function (s) {
                return entityMap[s];
              });
            }
            var escapedCodeContent = escapeHtml(codeContent);
            codeBlock =
              '<pre class="lang-' +
              selectedType +
              '" data-prismjs-copy="复制" data-prismjs-copy-error="复制失败" data-prismjs-copy-success="复制成功"><code class="lang-' +
              selectedType +
              '">' +
              escapedCodeContent +
              "</code></pre>";
          } else {
            codeBlock =
              '<pre class="lang-' +
              selectedType +
              '" data-prismjs-copy="复制" data-prismjs-copy-error="复制失败" data-prismjs-copy-success="复制成功"><code class="lang-' +
              selectedType +
              '">' +
              codeContent +
              "</code></pre>";
          }
          // 插入转义后的代码到编辑器
          editor.insertContent(codeBlock);
        },
      });
    });

    // 添加一个按钮来触发打开对话框的命令
    editor.addButton("Tinymce_Prism", {
      text: "插入代码",
      onclick: function () {
        editor.execCommand("openCodeDialog");
      },
    });
  });
})();

6.3 配置Advanced TinyMCE Configuration

进入插件设置，选择“Show the default TinyMCE settings”，按如下修改

external_plugins : 在原来Json新增一列："Tinymce_Prism":"[存放Tinymce_Prism.js的直连] "

toolbar1-4随机选择其中一项，新增一列：Tinymce_Prism

然后就完成啦！

6.4 成果展示

这样就可以很优雅的点一下插入代码，直接把代码粘贴进去而且不会出现奇怪的bug！

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可