WordPress建站技术笔记

本站使用wordpress系统，在建站时，遇到了一些问题，在此记录一下。

autoptimize插件异常

启用了autoptimize来优化页面加载。其主要功能是优化压缩html，合并js和css代码，减少http请求次数，加快页面加载。
但启用后就发现页面加载存在异常，console有报错信息。

Uncaught ReferenceError: jQuery is not defined

这个主要是因为合并js后，js加载会被懒加载，但jquery因为需要提前加载。

解决办法

自定义主题里通常会自带jquery文件，首先关掉Autoptimize，然后用浏览器找出jquery的路径。
然后进入autoptimize的高级设置中，找到从 Autoptimize 排除脚本的输入框，将jquery的路径写入。
再开启Autoptimize就没有问题了。

页面显示warning信息

加载了一个主题后，打开页面发现页面中多出了以下文字。

Warning: Illegal string offset php xxx in

这个问题直接出现在页面上，影响用户体验。原因是现有的php版本比较新，比如我用了7.2版本，不再支持先前的语法。
这个错误类似于数组越界。

$post_abstract = $meta_data['post_abstract'];
# $meta_data['post_abstract']不存在。

解决办法

回退php版本，5.6版本应该就没问题了。
修改代码，使用isset函数，先判断是不是存在这个字段。
关闭warning告警。(不推荐)

图片显示报错

A TimThumb error has occured
The following error(s) occured:
Need to add the picture outside the chain domain name!

TimThumb图片插件报错，原因是图片链接的域名是站外的。应该是改了域名造成的。

解决办法

修改图片链接，订正域名。
去掉图片链接的域名。

让超链接在新标签打开

wordpress默认是当前页打开，但在文章中，有时候会有些引用的链接，此时我们希望可以在新标签中打开。

解决办法

在Theme Editor中修改主题代码。加入以下代码。

<base target="_blank">

如果想要全站都在新标签打开链接，可以在header.php里修改。因为header代码会被所有页面引用。所以放在header的head标签里，所有的超链接都会在新标签打开。
如果放在部分页面中，就可以只让某些页面的超链接在新标签打开。比如文章页single.php。

特别注意，WP Editor.md插件和回收站冲突

使用WP Editor.md插件，markdown格式编写的文章，移动到回收站后，再移动回来。文章就会变成html格式。所以特别注意不要把文章移动到回收站。

浏览器console报错Syntax error问题

问题连接

Syntax error, unrecognized expression: #catalog a[href*=#],area[href*=#]

最终定位到是因为由于wordpress升级后，主题部分代码在问题导致。
最终在console中找到代码位置，在主题的js/scripts.js文件，找到对应代码即可修复。看上去就是没双引号的问题。

Change this:
$( 'a[href*=#]:not([href=#])' ).click( function() {
To this:
$( 'a[href*="#"]:not([href="#"])' ).click( function() {

外网无法连接的问题解决

由于wordpress站点在国外，导致升级各种连不上的问题。所以弄个代理v2ray解决这个问题。

bash <(curl -L https://raw.githubusercontent.com/v2fly/fhs-install-v2ray/master/install-release.sh)

安装后，修改配置文件然后启动服务。

# 启动
systemctl start v2ray
# 日志查看
journalctl -f -t v2ray
# 确定端口，tcp的
[root@x64 ~]# netstat -nap|grep v2ray

服务的config.json，可从windows下copy过去。
然后修改wordpress的代理，在WordPress配置文件wp-config.php

// 设置代理
define('WP_PROXY_HOST', '127.0.0.1');
define('WP_PROXY_PORT', '7890');

注意

网上的这个代理已经失效。

define('WP_PROXY_HOST', 'us.centos.bz');
define('WP_PROXY_PORT', '31281');

分享按钮

分享站点代码所在文件

百度分享已经完全不能使用，使用分享插件WP Open Social。
该插件可以在设置中配置按钮位置，也可以在主题的分享代码中加入php代码指定分享按钮位置。比如主题中的特殊位置。
begin主题的代码的位置:

template/share.php

<div id="share" style="padding-left: 40%;padding-top: 10%;">
    <?php echo open_social_share_html();?>
</div>

Gravatar头像问题彻底解决

请移步连接

修复WP-Editor和主题代码高亮冲突问题

注释掉style文件中主题的代码高亮css

.single-content code{
}

优化搜索功能

在查询资料时，发现搜索功能太弱。所以启用了搜索插件ivory-search。Ajax搜索效果不错。
注意: 数据量较小时，不需要启用倒排索引。倒排索引模糊查询效果并不好，不支持查询分类和标签。

优化搜索路径和禁止空值查询

// 修改搜索路径
function redirect_search() {
    if (is_search() && !empty($_GET['s'])) {
        wp_redirect(home_url("/search/").urlencode(get_query_var('s')));
        exit();
    }
}
add_action('template_redirect', 'redirect_search' );


//禁止搜索关键词为空
function uctheme_redirect_blank_search( $query_variables ) {
     if (isset($_GET['s']) && !is_admin()) {
         if (empty($_GET['s']) || ctype_space($_GET['s'])) {
             wp_redirect( home_url() );
             exit;
         }
     }
     return $query_variables;
}
add_filter( 'request', 'uctheme_redirect_blank_search' );

文章版权归作者所有，未经允许请勿转载。

THE END

计算机技术
# 建站 # 前端 # Wordpress