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

最近发现打开主页非常慢,通过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%}
本文出自 Frank's Blog

版权声明:


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

留言哦

blonde teen swallows load.xxx videos