0.前言

当你想要阅读这篇文章时, 大概你已经有了自己博客比较完整的骨架喽。 那现在要做到就是为它注入灵魂。

当然, 太过个人的自定义我貌似也管不着, 我才懒得管呢哈哈。 我要分享的是大家都会遇到的一些配置问题, 所以这篇文章大概率会长期更新的吧。

好了, 废话不多说, 直接进入正题。


1.实用技巧汇总

1>上传大小限制

截止2019年, 最新的wordpress会限制上传到媒体库的文件大小为不超过2M, 这对于想要丰富自己网站的小伙伴们哪里会够呢。 所以, 我们就需要修改来增加上传文件的大小上限。

我们要更改的是.htaccess文件, 一般来说它应该在网站的根目录下。 我们需要在这个文件的末尾加上下面的代码, 就可以更改上传文件的大小限制和上传时间限制了。 当然, 自己也可以改成想要的大小。

# BEGIN CHANGE_FILE_MAX
php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300
#END CHANGE_FILE_MAX

注: 要注意不要在wordpress原本的模块下写入上述代码, 原因是在刷新时wordpress会将它所负责的模块刷新为默认, 自己写入的代码就消失了, 当然就不起作用了。 所以,将代码在最下面加入, 作为独立的模块即可。

2>关闭wordpress官方、主题和插件更新提示

官方和主题的更新是有一定必要的, 最主要的是安全问题。 但是, 频繁的更新性价比并不太高。 当你跟随着它们每次更新, 也就意味着你会面临部分组件在更新后崩盘的风险。 当然, 如果有时间折腾当然所向无敌, 但并不是所有人都会将修复更新引起的变化作为主要的任务。 所以关闭更新提示, 择日再见就会是一个很好的选择。

具体做法也不难, 在主题自定义的Theme Editor中找到模版函数functions.php, 在最后添加如下代码即可。

add_filter('pre_site_transient_update_core',    create_function('$a', "return null;")); // 关闭核心提示

add_filter('pre_site_transient_update_plugins', create_function('$a', "return null;")); // 关闭插件提示

add_filter('pre_site_transient_update_themes',  create_function('$a', "return null;")); // 关闭主题提示

remove_action('admin_init', '_maybe_update_core');    // 禁止 WordPress 检查更新

remove_action('admin_init', '_maybe_update_plugins'); // 禁止 WordPress 更新插件

remove_action('admin_init', '_maybe_update_themes');  // 禁止 WordPress 更新主题

3>技术博客中的代码高亮

在编写技术博客时, 免不了要贴上很多的代码, 但是wordpress的默认代码格式就显得过于单调了, 并且在插入大量代码时, 默认格式很不好看。 那么如何做出一个看起来很酷的代码块格式呢?

我目前推荐的是Prism的代码样式, 免费而且还算炫酷, 并且可以自定义自己想要的功能进行配合。 点击Prism就可以连接到下载页面。 什么? 你想看看效果? 好吧, 我随便贴两行代码看看(摊手)。 Hmmm贴点啥好呢(敲桌)?

#!/usr/bin/env bash
read text
if [ -z $text ]
then
	echo "you didn't say anything"
	exit 0
else

具体做法如下所示:

1*搭配需要的功能

在下载界面选择想要的主题, 接着选择所需要的语言。 请不要贪多, 毕竟这个会在访问网站时加载, 如果体积太大会对速度有一定的影响。

在最后的插件选择上, 勾选Line Highlight。 如果想让其更易于阅读和操作, 推荐勾选显示行号的Line Number, 一键复制的Copy to Clipboard Button等等。 一切功能在自己的手中~ 完成后, 下载JS和CSS到本地。

2*上传配置文件到服务器

在上一步下载好的JS和CSS文件就是包含一切的关键了。 将其传入网站的目录下, 具体的位置并没有什么要求。 使用scp进行传输是很方便的, windows上的话winscp是个不错的选择。

3*配置网页加载文件

上传完成后, 请记住其所在位置。 打开Theme Editor(若忘记见2>), 选择主题页眉header.php, 在head标签中加上下面的两行代码。

<link rel="stylesheet" type="text/css" href="/prism/prism.css">
<script src="/prism/prism.js"></script>

注: 请根据文件所在位置进行调整, 修改href和src为对应位置。

4*配置wordpress调用

下面的配置过程分两种, 会分别进行讲解。 这两种方法的选择取决于你使用哪种文章编辑器。 在wordpress5.0之前的版本中, 编辑文章会使用称为“Classic Editor”的编辑器, 而wordpress5.0之后的版本, 会默认使用全新的“Block Editor”编辑器, 即革新的Gutenberg风格。

在刚进行这个重大革新时, 很多人使用起来并不方便, 并且习惯了经典版本的编辑器后, 很容易对革新版产生排斥。 但现在来看, 新版的编辑器已经趋于完善, 不存在当时的问题了。 故个人推荐第一种方案, 但第二种方案对于老用户会更加舒服(* ̄︶ ̄*)。

1**Block Editor方案

由于wordpress默认为Block Editor, 所以并不需要什么额外的配置。 当要调用高亮时, 先插入一个自定义html模块, 然后在其中插入以下代码。

<pre style="height:500px; overflow-y:scroll;"><code class="language-php line-numbers">***</code></pre>

自己可以调整应用的语言等, 将要展示的代码插入到html标签中间的***位置即可完成任务。 上述的方法也可以通过在右上角将可视化编辑器改为代码编辑器来实现, 相关步骤不再赘述。

2**Classic Editor方案

如果想要使用老式编辑器, 需要先禁用默认的编辑器。 在模版函数下加入下面这行代码即可。

add_filter('use_block_editor_for_post', '__return_false');

然后紧接着插入下面的代码。 这是利用wordpress官方函数制作一个hook, 这样在开启编辑器时, 会用相应的按钮来方便地调用高亮模块。

function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
        ?>
        <script type="text/javascript">
            QTags.addButton( 'syz_PHP', 'PHP', '<pre style="height:500px; overflow-y:scroll;"><code class="language-php line-numbers">', '</code></pre><br />', 'z', 'PHP 代码高亮');
            QTags.addButton( 'syz_HTML', 'HTML', '<pre style="height:500px; overflow-y:scroll;"><code class="language-markup line-numbers">', '</code></pre><br />', 'h', 'HTML 代码高亮');
            QTags.addButton( 'syz_CSS', 'CSS', '<pre style="height:500px; overflow-y:scroll;"><code class="language-css line-numbers">', '</code></pre><br />', 'c', 'CSS 代码高亮');
            QTags.addButton( 'syz_Js', 'JavaScript', '<pre style="height:500px; overflow-y:scroll;"><code class="language-javascript line-numbers">', '</code></pre><br />', 'j', 'JavaScript 代码高亮');
            QTags.addButton( 'syz_Bash', 'Bash', '<pre style="height:500px; overflow-y:scroll;"><code class="language-bash line-numbers">', '</code></pre><br />', 'b', 'Bash 代码高亮');
        </script>
        <?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

这样一来就可以方便调用模块来, 大功告成。

5*注意事项

可能你会觉得这样来实现代码高亮还是很麻烦, 但博主目前还是没有什么较好的方法。 如果追求方便, 可以自己制作一个插件来实现, 目前博主测试的主流prism插件都不太适用现在的wordpress版本, 所以只好维持现状。

此外,请注意代码高亮的实现是通过编辑html实现的, 所以如果你想要贴上的是html代码的话, 鬼知道会发生什么奇怪的事情, 解决方法就是一个一个将标签转义啦。

4>谷歌字体库的加载

在网站的调试过程中, 可以从浏览器的开发者模式(F12)中选择Network那一项来看看加载速度如何。 为了模拟新访客的加载过程, 在刷新时应该使用Ctrl+F5进行刷新。

当发现有哪一项的时间条超级长, 但大小并不大时, 这可能就是拖慢网站加载速度的罪魁祸首之一。 在wordpress的大部分主题下, 默认会采用谷歌的字体库来渲染, 所以如果发现网站在访问fonts.googleapis.com等这种网址却时常没有回应时, 大概就是被天朝的墙阻塞掉了。

解决这个问题也很简单, 按照下面的方法做就可以了。打听到360有个字体库是http://libs.useso.com/,但貌似已被弃用。 搜索到可以使用中科大的字体源, 博主没有亲自试过, 仅供参考。

在wordpress根目录下找到wp-includes, 编辑script-loader.php文件, 搜索所有谷歌字体的网址, 替换为fonts.lug.ustc.edu.cn即可。 如果有其他需求, 比如对于ajax库, themes库, gstatic字体库替换, 可以分别选择以下三个网址替换。

ajax.lug.ustc.edu.cn
google-themes.lug.ustc.edu.cn
fonts-gstatic.lug.ustc.edu.cn

注: 目前来看访问谷歌字体库并没有很大的延迟, 不知道是不是和我个人的服务器在国外有关。 如果国内的服务器出现这样的问题, 可以尝试用上面的方法来解决。

5>虚位以待…


2.The End

先写下这么多, 如果想到其他的会进行补充, 希望能对新晋站长们有所帮助~

撒花撒花~

发表评论

电子邮件地址不会被公开。 必填项已用*标注