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 &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></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 &raquo;', '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工具,可以很容易检测出来网页加载时都在干什么,这个工具非常棒,看到了两个问题:

  1. Jetpack好像再查什么东西
  2. 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中出现错误,纠正错误语法即可,详细信息可以参考

https://stackoverflow.com/questions/2941169/what-does-the-php-error-message-notice-use-of-undefined-constant-mean

命令:#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内有问题:

[root@frank ~]# 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
[root@frank ~]# 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>
[root@frank ~]# docker exec -it 7b3 bash
root@7b3b7fc556b6:/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即可生效,如下:

[root@frank wordpress_data]# more php.ini
#file_uploads = On
memory_limit = 32M
upload_max_filesize = 32M
post_max_size = 32M
max_execution_time = 360
[root@frank 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
[root@frank 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 ... done

2022-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
[root@frank]# 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内,所以这个过程不会造成任何影响,起来后直接使用:

[root@frank my_wordpress]# docker image rm wordpress
[root@frank my_wordpress]# docker-compose up -d
[root@frank 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后,发现恢复了。。。😒

本文出自 Frank's Blog

版权声明:


本文链接:Revision Record
版权声明:本文为原创文章,仅代表个人观点,版权归 Frank Zhao 所有,转载时请注明本文出处及文章链接

留言哦

blonde teen swallows load.xxx videos