wordpress 中英文混排

中英文之间加个空格会提高内容的可阅读性,可我还没有完全的养成这种习惯,有时候不自觉的就会中英文连在一起。于是搜索了下,看看有没有可以自动在中英文之间加空格的办法,网上千篇一律,几乎都是用 css+js 还要在 html 里加 class 的方法。

正好在弄 TTIM 主题,就用正则表达式写了一段代码。

//中英文混排
function auto_space($content){
 $content = preg_replace('/([\x80-\xff])(\w+)/', '${1} ${2}', $content);
 $content = preg_replace('/(\w+)([\x80-\xff])/', '${1} ${2}', $content);
 return $content;
}
add_filter("the_title", "auto_space", 200);
add_filter("the_excerpt", "auto_space", 200);
add_filter("the_content", "auto_space", 200);

把这段代码加到主题的 function.php 文件里就可以了,比起加 class 、 css 、 js 要方便些。

The Time Is Mine

the time is mine 使用 bootstrap V3.3.7 框架,仿照 sparkling 的样式进行开发。这是一款 Wordpress 主题,没有复杂的功能只有简洁的界面,甚至连 logo 都没有。

Github 地址是:https://github.com/BorLee/The-Time-Is-Mine

部分代码要求 Wordpress4.4 及以上版本

这个主题有

  • 一个顶部菜单
  • 一个右侧边栏(可关闭)
  • 文章目录(识别 h3 和 h4 标题)
  • 自带一个 h3 样式
  • 底部描述(包括“ The Time Is Mine ”和社交图标)
  • 自带页面(文章归档和友情链接)

设置顶部菜单

在 后台——外观——菜单 里设置。

使用文章目录

编辑文章,在文本模式下点击“文章目录”按钮,系统就会自动将激活代码插入到文章中,这段代码在文章中的任何位置都可以。

系统会自动识别文章里的 h3 、 h4 标题并做出锚链接。

目录会放置在文章的最开头部分,且只在文章页面显示。

其他选项设置

在 后台——外观—— The Time Is Mine 里设置

最近更新内容

添加了如下功能:
2017-05-24

  • SEO 设置
  • sitemap.xml 生成
  • 可选择移除 自动保存 和 修订版本
  • 一个 Semail 按钮,页面插入 Email 可防采集
  • 文章中英文之间自动加空格 https://leebo.name/wordpress/wordpress-auto-space.html

调整行间距为 2 倍

Semail 效果演示:123456@qq.com(请查看源码)

病了瞎折腾

中秋放假回家,胡吃海喝之后中招感冒了,第二天起床喉痛痒还怕冷,呆在床上躺了一天。

闲着没事就改动了点博客主题样式,中间做了点记录就留下来了。

本站主题采用的是老赵的收费主题 OWL (他已经弃坑不再出新主题的,最新的是 Pluto 详情请访问老赵茶馆)。

编辑文件 format-standard.php

<div class="post-inner">
    <?php if ( !is_single() && !is_page()) { ?>

改成

<div class="post-inner">
    <?php if ( !is_single() && !is_page() && !is_mobile()) { ?>

添加并列判断非手机状态,作用是移除手机访问时的文章特色图(这个特色图比例手机端跟电脑端展示的有出入不好调控,索性就移除了还节省访客流量)。

在样式表中插入下面代码,使得原先只有文字链接的阅读更多变成一个按钮

.read_more a {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 7px 15px;
  border-radius: 15px; }
.read_more a {
  color: #70675c;
  background: #f2eada; }
.read_more a:hover {
    background: #a29b84; }
.read_more a::after {
    font-family: FontAwesome;
    content: "\f101";
    margin-left: 5px; }

其他的改动都是一些细节的调整就不一一列举了。

利用 shortcode 快速插入 Youtube 、 Youku 、 Tudou 视频

昨天发布了一篇WordPress 视频自适应的教程,其中以 youtube 为例。里面的方法是添加 div class=…

这个方法有个不好的地方就是每次添加视频都要添加那么长的代码,还要记 class 值,还要在视频网站复制分享代码。

下面有个相对更方便的方法来插入自适应视频。

最后实现的效果就是只需要插入

[youtube]https://www.youtube.com/watch?v=BtGKNmV4088[/youtube]

你没有看错,只需要在视频的链接前后加入 youtube 标签就可以插入视频了!!!

当然这个方法的前提是添加了自适应的 css ,详见WordPress 视频自适应。没有添加自适应 css 的请根据实际情况修改代码使用。

方法其实很简单,以 Youtube 为例,编辑主题的function.php文件

在最底部添加如下代码

/* youtube 视频短代码 */
add_shortcode( 'youtube', 'borlee_youtube_shortcode' );
function borlee_youtube_shortcode( $atts, $content='' ) {
	if(substr($content,24,5)=="embed"){
		return '<div class="video-container"><iframe src="'.$content.'" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div></br>来源: Youtube';
	}else{
		return '<div class="video-container"><iframe src="https://www.youtube.com/embed/'.substr($content,32).'" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div></br>来源: Youtube';
	}
}

然后更新文件

添加视频的时候只需要复制干净的视频链接,然后在链接前后加上 youtube 标签即可。

比如:

[youtube]https://www.youtube.com/watch?v=BtGKNmV4088[/youtube]
或者
[youtube]https://www.youtube.com/embed/BtGKNmV4088[/youtube]

下面是优酷土豆的方法

/* 优酷视频短代码 */
add_shortcode( 'youku', 'borlee_youku_shortcode' );
function borlee_youku_shortcode( $atts, $content='' ) {
	if(preg_match('#http://v.youku.com/v_show/id_(.*?).html#i',$content,$matches)){
		return '<div class="video-container"><iframe src="http://player.youku.com/embed/'.esc_attr($matches[1]).'" frameborder=0 allowfullscreen></iframe></div>';
	}
}
/* 土豆视频短代码 */
add_shortcode( 'tudou', 'borlee_tudou_shortcode' );
function borlee_tudou_shortcode( $atts, $content='' ) {
	if(preg_match('#http://www.tudou.com/programs/view/(.*?)#i',$content,$matches)){
		return '<div class="video-container"><iframe src="http://www.tudou.com/programs/view/html5embed.action?code='. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe></div>';
	}
}

使用方法和上面类似

[[youku]http://v.youku.com/v_show/id_XXXXXXXXXXXXXX.html[/youku]]
[[tudou]http://www.tudou.com/programs/view/XXXXXXX/[/tudou]]

由于使用了视频自适应的效果,所以我去除了 iframe 的宽度和高度属性,如果没有使用本站的自适应方法,请根据实际情况清醒修改。参考更多

WordPress 视频自适应

某天发现老赵的 Island 有个显示问题,就是文章内容到了手机端可能会走样。

具体表现为表格和 iframe 引用的视频,这两种元素插入在文章里的时候,在电脑上看可能会好好的,但是在手机的浏览器上看就有超出屏幕的可能。

表格还好直接用百分比就可以自适应,但是 iframe 的宽度属性设置了百分比的话,高度不能自适应屏幕。把高度设置成百分比,就会出现一个长方形的视频,当时也没截图,反之自己试过就知道了。

网上也有一大堆的解决办法,逐一尝试发现起作用的并没有几个,也没有能让我满意的。

后来终于找到一篇文章解决了这个问题,更多

原文有比较详细的讲述作者的思路,这里只有告诉你怎么做。

首先在主题的 CSS 表( Island 主题设置——代码里可以插入外源代码方便升级)里加入如下代码

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

然后在文章当中 iframe 代码外加上

<div class="video-container">.....</div>

<div class="video-container">
<iframe src="https://www.youtube.com/embed/BtGKNmV4088" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

然后就是发表文章即可。

另外在解决这个问题的过程中我还发现了原来 wordpress 文章当中直接插入一些网站的链接就会自动加载成视频或者图片的,包括但不限于以下网站

这是比较老的版本了,我昨天在 wordpress 中也发现了优酷土豆的代码,也尝试过优酷,同样也可以自动识别,虽然没试过土豆,但是理论上讲优酷和土豆的视频也都已经被支持了。

只要在文章中另起一行插入优酷、土豆的视频页面就可以自动被文章识别成视频了。

不过主题自身不能帮你自适应的话,还是乖乖的用上面的方法加 iframe 吧。

WordPress 插件之微信机器人安装小记

wordpress 的微信机器人插件其实挺容易安装的,遇到了两个问题。

  1. 函数重复声明
  2. 和微信公众平台 token 验证失败

一开始在后台启用微信机器人的时候全站都白屏了,一时间我方了,于是把插件目录删除了,博客回复正常。

试过好几个版本的都这样。

遂怀疑是 php 脚本出现异常,于是在服务器开启了 php 错误提示
开启方法:

打开 php.ini ,找到display_errors = Off改成display_errors = On

然后找到 error_reporting 最好设置成

error_reporting = E_ALL & ~E_DEPRECATED & ~E_NOTICE

这两部设置起来基本上就可以在浏览器看到 php 报错信息,而不至于白屏了。更多

打开 php 报错以后发现

Fatal error: Cannot redeclare ……后面隐去若干字

报错指向到主题文件,遂编辑主题 Island

在 functions.php 中查找is_weixin

找到下列代码

/* 判断微信浏览器 */
function is_weixin()
{ 
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
        return true;
    }  
        return false;
}
if (is_weixin()) {
} else {
}

这是作者老赵加进去的的判断访问者是否通过微信内置浏览器浏览博客的代码

话说这代码还没写全呢,莫非老赵有打算把微信机器人也集成到主题里?

这段代码微信机器人里也有,造成了 function 重复声明,微信机器人里看似更全,于是把主题里的这段代码注释掉(不会注释的直接删去)。

后台开启微信机器人,成功开启!

设置啥的就不多做解释了,然后遇到的问题是微信公众平台后台和博客通信验证的 token 总是通信失败,尝试了各种方法都不行,用 WPJam 的说法就是服务器配置问题,但是他也没具体说是哪里的配置问题。

后来发现一个偏方解决了这个问题。

先在博客后台把原来的微信机器人全部停用掉,然后在安装插件里搜索 Light weight WeChat ,安装并启用。设置好 token 。

登陆 FTP ,把博客根目录下 index.php 文件备份一份。

在 Light weight WeChat 插件目录(博客根目录/wp-content/plugins/wechat-subscribers-lite )下找到 wechatsucks.php 文件(官方是这么说的,不过我找到的是文件名是“ __wechatsucks__.php ”)

把这个文件复制到博客根目录下并改名为 index.php

然后在微信公众平台后台进行验证 token 的通信地址是 http(s)://域名/根目录/?token 吗

比如你设置的 token 码是 weixin ,以本站 https://leebo.name 为例子

token 通信地址就是

https://leebo.name/?weixin

没启用 https 协议的网站,前面协议部分要改成 http://

在微信公众平台重新进行通信验证。

通信成功以后就可以把 index.php 删除了,把之前备份好的还原回去,然后停用 Light weight WeChat 插件,启用自己原先的微信机器人插件, token 最好设置成一样的。更多

接下来的自己慢慢捣鼓吧。

另外我才知道使用微信机器人的话,个人订阅号是不能设置自定义菜单的,囧。原因是微信没有开放接口。

个人订阅号本身是可以设置自定义菜单的,由于平台并没有开放接口出去,使得微信机器人不能直接设置。

非要设置也可以,网上也有偏方解决这个问题。

登陆微信公众平台(mp.weixin.qq.com)

先停用服务器配置

开发——基本配置——服务器配置(已启用)——停用

然后设置自定义菜单

功能——自定义菜单——自行设置

设置好了以后在开启服务器配置,启用不需要重新设置 token 通信

开发——基本配置——服务器配置(已停用)——启用

然后开启自定义菜单

功能——添加功能插件——自定义菜单——开启

到这里就大功告成了。

最后吐槽下,微信机器人对于个人订阅号来说唯一的功能就是能让用户快速检索博客文章了。其他的并没有什么卵用。

解决 LNMP 导致 WordPress 后台不显示其他已上传主题

这个问题是前几天才发现的,进入后台主题,只看到一个正在使用的主题,而其余已经上传的主题一个也看不到,包括默认的主题。造成这个问题的原因也是 LNMP 的危险函数,只要将相应被禁用的函数取消即可。

经过测试是由于 scandir 函数被禁用,所以不能显示其他主题。

解决方法来自@小简博客,解决方法如下;

进入 ssh , root 登录;

输入命令;

sed -i 's/,scandir//g' /usr/local/php/etc/php.ini

还是那句话,方法可以用在其他的安装包上,具体请修改 php.ini 的路径即可。

最后把 Lnmp 重启一下即可。