Revision Record
2010-01 添加个性图标
这是我建站后的第一件事，实在记不清是什么时候的事了，2010年是我第五次Blog搬家，时间不重要，重要的是内容:) ，给网站加favicon.ico图标（个性图标），在header.php中：
[link rel=”shortcut icon” href=”/wp-content/themes/page-shippou/img/favicon.ico” ]
2011-07 增加置顶及相应的CSS
具体时间记不清了，增加了置顶文章的代码，并且增加了几个CSS样式表，“fontbg”是设置背景颜色的，“zhiding”是文章置顶的样式，另外在置顶样式中修改了默认的超链接显示：
/* frank's css */
#fontbg {
background-color: #99ccff;
margin-top: 5pt;
margin-bottom: 5pt;}
#zhiding {
background-color:#FFFEC6;
margin:0px;
font-weight:bolder;color:#EA0000;
}
#zhiding a{color: #fff; text-decoration: none;}
#zhiding a:hover {text-decoration: underline;}
/* End frank's css */下面是在在index的php代码：
<?php //置顶代码开始 ?>
<?php if(is_sticky()) { ?>
<div id="zhiding">[置顶] <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</div>
<?php }else{ ?>
<div class=padding></div>
<div class="post" id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<div class="postinfo"><span class="date"><?php the_time('F jS, Y') ?>,由 <strong><?php the_author_nickname(); ?></strong>撰写</span><span class="urcomments"> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></span><?php edit_post_link(__('Edit', 'page'), '<span class="editpost">', '</span>'); ?><!-- by <?php the_author() ?> --></div>
<div class="clear"></div>
<div class="entry">
<?php the_content(__('Read the rest of this entry »', 'page')); ?>
</div>
<div class="postmetadata clear">
<span class="categorys"><?php the_category(', ') ?> </span>
<?php the_tags('<span class="tags">', ',', '</span>'); ?>
</div>
</div>
<?php } //置顶代码结束?>2015-03 代码高亮插件
最近在学习Python，JAVA，TCL等语言，所以会在BLOG里填写代码，看到其他博客的代码高亮很是眼馋，于是一直想找一款好用又可移植的插件来高亮代码，优化阅读。在之前的文章中，我一直用pre来标识信息，并且简单自定义了下，如改变了背景。所以在想有没有相应的class，我原来用pre标记的不受影响，当有代码段时，调用pre不同的class，这样灵活方便，而且即使插件不能用了，也就是class不用调用，仍然会用pre，不会影响格式问题！
后来找到了Crayon Syntax Highlighter，不能不说这个很漂亮，但通过在pre调用class的方式不成功，有报错，只能通过下面方法调用，这种方法有严重弊端，当从文本编辑器切换到可视化后，代码中的空格会消失，格式混乱！另外如果插件不工作，后果不堪设想！另外为了TS，我特意换了一个主题，发现问题一样，估计是兼容性的问题。为了使用插件，特意去作者的support网站发了一个帖子，但暂时没有解决方法，也有人跟我的情况一样。。。
[crayon lang="java", title="Code：FlashDisk"]
[/crayon最后本想放弃了，直接用默认的pre，虽然不好看，但毕竟格式是正常的，却发现有网友介绍了一个非常好用的代码高亮轻插件：“Auto SyntaxHighlighter”，这就是我想要的，Crayon功能多加载慢，能明显感觉出来，而这款插件功能少加载很快！
2015-03 调用SSL Gravatar
下面方法已经不生效，请移至2022-01的更新
最近发现打开主页非常慢，通过firefox的firebug工具，可以很容易检测出来网页加载时都在干什么，这个工具非常棒，看到了两个问题：
- Jetpack好像再查什么东西
- Gravatar一直访问超时
关于Jetpack，关闭了大部分功能，只留了网站统计功能后，不再报类似的提示；但Gravatar仍然有问题，后来查了下，发现GFW把他屏蔽了，应该是去年的事，还好有些解决办法，只要把下面代码放入主题functions.php中就ok了：
function get_ssl_avatar($avatar) {
$avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2">',$avatar);
return $avatar;
}
add_filter('get_avatar', 'get_ssl_avatar');更详细的可以参考：Gravatar 头像被屏蔽导致网站速度变慢
题外话：如果启动网站的私有SSL（https），需要host供应商支持，Hostgator每年要50刀…
2017-10 搬迁到Bandwagonhost VPS
由于种种原因，变迁到VPS，并用docker部署WP，详细过程看http://www.zhaocs.info/blog-move-new-vps-bandwagonhost.html
2018-10 重新部署
由于变更VPS的地址，里面很多应用受到影响，所以重新安装并重新部署WP，步骤如上面总结的，不过恢复完发现主页如下错误：
Warning: Use of undefined constant wp_cumulus_widget – assumed ‘wp_cumulus_widget’ (this will throw an Error in a future version of PHP) in /var/www/html/wp-content/plugins/wp-cumulus/wp-cumulus.php on line 375经过排障，发现使用docker安装的WP是最新版本的，由于PHP已经升级到了7.2，这导致我WP备份版本（4.8.7）中的语法在7.2中出现错误，纠正错误语法即可，详细信息可以参考
命令：#nano +375 wp-content/plugins/wp-cumulus/wp-cumulus.php
原始代码：register_sidebar_widget( “WP-Cumulus”, wp_cumulus_widget );
变更代码：register_sidebar_widget( “WP-Cumulus”, ‘wp_cumulus_widget‘ );
2020-08 Docker DNS问题
最近突然发现Wordpress的插件都无法更新了，以为wordpress有问题，尝试重新安装，但发现下载失败：
正在从https://downloads.wordpress.org/release/zh_CN/wordpress-5.4.2.zip下载更新…
下载失败。: URL无效。
安装失败通过“站点健康”，发现有很多timeout告警，下面是其中之一：
REST API是WordPress及其他应用与服务器通信的一种途径。一个例子是区块编辑器页面，它依赖REST来显示及保存您的页面和文章。
REST API请求因遇到了错误而失败。
错误：cURL error 28: Resolving timed out after 10522 milliseconds（http_request_failed）通过查找，发现跟DNS相关，但主机的DNS没任何问题，只是docker内有问题：
[[email protected] ~]# nslookup wordpress.org
;; Got recursion not available from 97.74.106.27, trying next server
Server: 1.0.0.1
Address: 1.0.0.1#53
Non-authoritative answer:
Name: wordpress.org
Address: 198.143.164.252[[email protected] ~]# curl wordpress.org
<html>
<head><title>301 Moved Permanently</title></head>
<body>
<center><h1>301 Moved Permanently</h1></center>
<hr><center>nginx</center>
</body>
</html>
[[email protected] ~]# docker exec -it 7b3 bash
[email protected]:/var/www/html# curl wordpress.org
curl: (6) Could not resolve host: wordpress.org所以根据这个文章，添加dns信息：DOCKER 容器内部 DNS 解析失败的问题
2020-08 Failed to load plugin
自从Wordpress支持字块后，编辑文章时从会有下面报错：
Failed to load plugin url: http://www.zhaocs.info/wp-content/plugins/auto-syntaxhighlighter/tinymce/ash/langs/zh.js这次重新部署了blog，把上面DNS的问题解决了，所以想把这个问题也解决了，检查了下，发现此插件是没有langs以及zh.js的文件，所以下载语言tinymce4x_languages，把zh_CN.js 改名成zh.js并上传到相应目录下，fix此问题
2021-01 调整CSS样式
还是很喜欢目前这个主题，但里面的样式表做的不好，导致内容展示很别扭，所以这次好好弄一下
原创声明
首先在文章页面(single.php)添加原创声明
<?php //Frank 版权声明 ?>
<div id="fenge"></div>
本文出自 <a href="www.zhaocs.info" rel="bookmark" title="www.zhaocs.info" data-type="URL" data-id="zhaocs.info">Frank's Blog</a>
<p><b>版权声明：</b></p><hr style=" height:2px;border:none;border-top:2px dotted #185598;" />
<b>本文链接：</b><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a><br>
<b>版权声明：</b>本文为原创文章，仅代表个人观点，版权归 <a href="www.zhaocs.info" rel="bookmark" title="www.zhaocs.info" data-type="URL" data-id="zhaocs.info"><strong>Frank Zhao</strong></a> 所有，转载时请注明本文出处及文章链接
</div>
<?php //Frank 版权声明 ?>通过CSS修饰此段声明
#cpstyle{
border-style: solid;
background-color: #FCF2EA;
border-left-color: #FD7927;
border-width: 0px 0px 0px 4px;
padding: 10px 10px 10px 15px;
margin: 20px 30px 20px 0px;
}在声明和文章之间通过CSS加隔离线
#fenge{
border-style: dashed;
border-width: 0.75px 0px 0px 0px;
border-top-color: #D3D3D3;
padding: 10px 10px 10px 10px;
margin: 30px 30px 0px 0px;
}修饰引用部分
.entry blockquote {
border-style: solid;
background-color: #EEF6FC;
border-left-color: #3BA3F8;
border-width: 0px 0px 0px 4px;
padding: 10px 15px 10px 15px;
margin: 20px 0px 20px 0px;
}修饰Pre code样式
对Pre进行修饰
.entry pre {
box-sizing:border-box;
overflow:scroll;
-webkit-overflow-scrolling:touch;
/* font-family:monospace, Menlo, Monaco, Consolas, 'Courier New'; */
font-size:11px;
padding:9.5px;
margin-top:0px;
margin-bottom:10px;
line-height:1.42857;
color:#333333;
word-break:break-all;
word-wrap:break-word;
border:1px solid #CCCCCC;
border-radius:4px;
background-color:#F5F5F5;
}改后发现不是所有的Pre都起作用，经过Chome + F12 debug查看了下应用样式，发现新的Wordpress又增加了一个额外的CSS (“wp-includes/css/dist/block-library/style.min.css“)，这样可以方便用户 bypass 主题的样式表自定义自己的，这样更安全
不过我没有研究，直接找到后，把code中的两个样式去掉就行了，不过wordpress升级后，估计会变回去，到时在研究下如何基于wordpress自定义用户样式表
修饰图片样式
这样是可以修饰，看上去美观多了
.entry img {
border:0.75px solid #000;
padding:2px;
max-width:580px;
height:auto;
margin:3px;
border-radius: 0px;
box-shadow: 0 0 2px 1px rgba(14, 13, 13, 0.5);
}可是图片的右边框有问题，感觉超出范围了。。。这是什么原因造成的？
通过Chrome的开发者界面，找到了原因，内容部分在div中设置的是650，减去两边留白后，内容部分为598，我在修饰图片时，又增加了一定的padding和margin（减掉我加的，应该是586），所以超出了边框。但又不能简单的加上宽度，这样所有图片都被拉伸到这个宽度了，是否有其他办法？图片自适应大小主要靠下面CSS（”wp-includes/css/dist/block-library/style.min.css“）中“wp-block-code code”样式实现的：
max-width: 100%这个100%就是598，那么既然我只能用百分比来完成图片自适应，那么直接改小这个百分比就可以了 ?，因此调整到98%后恢复正常！
2021-02 自定义额外CSS
wordpress自动升级了，之前在style.min.css中改的那两处失效了，简单看了下，其实可以直接用wordpress自带的自定义额外CSS功能，这样即使升级了，也不会覆盖了，这样更安全，以后慢慢把之前改的CSS挪到这里把~
.wp-block-code code{white-space:pre;overflow-wrap:break-word}
.wp-block-image img{max-width:98%}2021-08 解决“white-space:pre”在Safari上不生效
查了下，发现增加word-wrap参数即可解决此问题，可以参考：Safari 浏览器 white-space: pre 无效，如下：
.wp-block-code code{white-space:pre; word-wrap:normal; overflow-wrap:break-word; -webkit-overflow-scrolling:touch; }
.wp-block-image img{max-width:98%}2021-10 解决上传2m的限制
之前就有这个问题，稍微大点就上传不了了，并报警：
上传的文件大小超过php.ini文件中定义的upload_max_filesize值。所以这回想彻底解决这个问题，查了下需要改php.ini，但docker版本的Wordpress没有这个文件，所以查了下发现直接在Wordpress目录下新建立一个php.ini，然后重启docker即可生效，如下：
[[email protected] wordpress_data]# more php.ini
#file_uploads = On
memory_limit = 32M
upload_max_filesize = 32M
post_max_size = 32M
max_execution_time = 360
[[email protected] my_wordpress]# docker-compose down
Stopping my_wordpress_wordpress_1 ... done
Stopping my_wordpress_db_1 ... done
Removing my_wordpress_wordpress_1 ... done
Removing my_wordpress_db_1 ... done
Removing network my_wordpress_default
[[email protected] my_wordpress]# docker-compose up -d
Creating network "my_wordpress_default" with the default driver
Creating my_wordpress_db_1 ... done
Creating my_wordpress_wordpress_1 ... done2022-01 “is-style-stripes” no any effect
更新后的Wordpress对表格增加了样式，可以根据需求选择，如下：
但问题是编辑时是有效果的，但是更新后效果就消失了。通过Chrome的F12开发者模式，逐一检查了CSS，发现都去掉所有相关CSS后均没有太多变化，此时怀疑是主题的CSS把Wordpress的Inline CSS样式表给覆盖了，所以找到主题CSS，并注释掉跟Table/tr/td/th，更新后发现Inline CSS样式生效了~
不过看上去表格和文字很紧凑，没有任何空隙，很不好看，想用cellpadding，但发现html5已经移除了此属性，因此就在Wordpress的Inline CSS样式表中增加：
table tr td{padding:8px;}并在“is-style-stripes”中修饰了下表格，增加上下边框，为了防止wordpress升级导致“is-style-stripes”被重置，把这部分代码也加进Inline CSS样式表中：
.wp-block-table.is-style-stripes {border-spacing:0;border-collapse:inherit;background-color:transparent;border-width:1px 0px 1px 0px;border-style:solid;}2022-01 再次修复Gravatar
2015年修复的方法目前已经不工作了，下了几个Gravator缓存插件也有同样的问题，真的很郁闷。后来查到了有一个Cravator，不过不知道如何调用，而且需要安装第三方wordpress插件，所以就暂时放弃了。最后找到一种方法，目前还有效果，就是去掉2015年加的那段函数，并添加下面新的函数：
//Gravatar 头像修复
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'
);
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 );
};2022-06 更新Wordpress后自定义CSS消失
更新新版本后，自定义CSS部分消失了，因此按照此篇的记录，重新又加了回来，为了方便日后维护，把目前所有CSS都列出来：
.wp-block-code code{white-space:pre; word-wrap:normal; overflow-wrap:break-word; -webkit-overflow-scrolling:touch; }
.wp-block-image img{max-width:98%}
table tr td{padding:8px;}
.wp-block-table.is-style-stripes {border-spacing:0;border-collapse:inherit;background-color:transparent;border-width:1px 0px 1px 0px;border-style:solid;}2022-09 更新Wordpress Container
最近使用Wordpress自带的监控检查，发现php少了一个module，经过查看，是因为新版本需要这个module，但我使用的docker container已经两年没动过了：
Module 'intl' not installed[[email protected]]# docker image inspect wordpress:latest |grep -i version
"PHP_VERSION=7.4.8",
"WORDPRESS_VERSION=5.4.2",
"DockerVersion": "18.09.7",
"PHP_VERSION=7.4.8",
"WORDPRESS_VERSION=5.4.2",为了解决这个问题，需要移除这个Container，让其重新下载最新的image。因为我把Wordpress的文件都存在本地了，而不是在Docker内，所以这个过程不会造成任何影响，起来后直接使用：
[[email protected] my_wordpress]# docker image rm wordpress
[[email protected] my_wordpress]# docker-compose up -d
[[email protected] my_wordpress]# docker image inspect wordpress:latest |grep -i version
"PHP_VERSION=7.4.30",
"DockerVersion": "20.10.12",
"PHP_VERSION=7.4.30",2022-09 确认上传图片告警问题
最近写Blog时发现图片无法上传，并报“Cannot read properties of undefined (reading ‘get’)”，当时就把我整蒙了……话说我没装太多插件呀，一通Google也没查出啥，都说冲突导致。我尝试把所有插件都关了，发现问题仍然存在……
因为这个告警不知所云，所以就用Chrome的开发者模式看看到底是啥情况，经过查看，发现在调用媒体上传api接口时，连接失败，如下：
根据这些告警查询，发现跟防火墙有关。。。难道被限制了？切换成自己的4G后，发现恢复了。。。?