标签归档:WordPress

Crayon Syntax Highlighter代码高亮的替代品:Enlighter

之前一直使用Crayon Syntax Highlighter作为代码高亮插件,但是在最新版的Wordpress 5.x中,由于兼容性问题已经无法使用。在网上搜索,找到了替代品:Enlighter。

替换方法:

停用旧的Crayon Syntax Highlighter,安装启用Enlighter。修改Enlighter设置中的以下内容:

  • Enlighter -> 选项 -> 高级选项 -> 阻止CSS选择器 设为
pre.EnlighterJSRAW, pre[class="lang:"][class~="decode:true"]
  • Enlighter -> 选项 -> 高级选项 -> 内嵌CSS选择器 设为
code.EnlighterJSRAW, span[class="lang:"][class~="decode:true"][class~="crayon-inline"]
  • Enlighter -> 测试版 -> 测试版特性 -> 启用DRI 设为 不勾选

参考:

WordPress主题额外CSS的实现

观察到最近的版本中,WordPress在主题自定义页面添加了一个功能:额外CSS。之前许多第三方主题自带了这个功能,而WordPress官方是如何实现这个功能的呢。

首先,主题的配置文件只存在于两处:

  • /wp-content/themes/主题目录/
  • 数据库wp_options表

而此类的输入型属性一般都是在数据库中存储,所以我重点关注了下数据库。执行查询:

select option_id, option_name from wp_options where option_name like "%theme%" order by option_id;

果然找到其中一条关于我正在使用的主题twentyfifteen的记录

+-----------+--------------------------------------------------+
| option_id | option_name              |
+-----------+--------------------------------------------------+
|     32154 | theme_mods_twentyfifteen |

下面我们来看看这条记录具体的内容

select * from wp_options where option_id = 32154;

查到结果中的option_value的值如下:

a:6:{s:18:"nav_menu_locations";a:2:{s:7:"primary";i:6;s:6:"social";i:102;}s:16:"background_color";s:6:"efefef";s:12:"color_scheme";s:7:"default";s:17:"sidebar_textcolor";s:7:"#ffffff";s:23:"header_background_color";s:7:"#303030";s:18:"custom_css_post_id";i:1371;}

这是一条序列化了的记录,不过还是注意到了最后有一个custom_css_post_id,这不就是我们的自定义css吗!key名中含有post id,难道是以文章的形式存储的?于是带着这个id的值”1371″,我到文章表wp_posts中查找。

select post_content from wp_posts where ID = 1371;

得到的内容如下:

html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input {
        font-family: Microsoft YaHei, Century Gothic !important;
}

果然,真相大白,新版的WordPress中自定义CSS的配置被以文章形式存储在了数据库中。

.blog域名将于年底开启注册

20160514213755

根据WordPress官网在5月12日的新闻,WordPress.com公司所持有的.blog顶级域名将于年底开启注册(原文链接)。根据之前的消息,.blog域名由WordPress.com的母公司Automattic所拥有。

昨日宣布已获得 .blog 域名的审查和出售、注册的权利。一年前,此域名曾被拍卖给一个神秘买家。Automattic 的一位发言人表示旗下子公司联合一家收购域名的公司 Primer Nivel 达成合作,共同出资 190 万美元获得该域名的运营权。(VR报道 )

20160514213731

根据官网提供的时间表,.blog域名将于今年8月开启SUNRISE注册,即商标持有人注册。在此阶段,拥有商标(品牌)的企业将能够提前注册与自己品牌相关的域名。之后是10月份开启的LANDRUSH注册阶段,这个阶段的规则解释如下:

LANDRUSH阶段的域名,若只有一个合格的申请者申请,那么域名将分配给该申请者;若同一个域名多个合格的申请者,所有合格的申请者将安排网上拍卖,拍卖将采用英式的拍卖模式,并且具有合理的透明度。

最后是GENERAL AVAILABILITY阶段,这个阶段预计于11月开始,这个阶段开始后,普通用户也可以进行域名注册,即开放注册。

TwentyTwelve主题添加顶部搜索框

WordPress自带了一个叫做get_search_form()的方法,调用这个方法就能够显示一个搜索框,所以为了在顶部添加搜索框,我们就需要在header.php中调用这个方法,具体如下:

<hgroup>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" style="font-family: Microsoft YaHei;font-weight: normal" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <div class="headersearch"><?php get_search_form_header(); ?></div>
</hgroup>
    <h2 class="site-description">&nbsp-&nbsp<?php bloginfo( 'description' ); ?></h2>

这里把headersearch加入到了hgroup中,并把h2从hgroup中拿出,是为了让显示的时候能够使搜索框和站点标题在同一水平线上。

然后修改style.css,在底部加入以下内容:

.headersearch {
	float: right;
	padding: 25px 0 0 0;
	margin-right: 70px;
}

.site-header h1, .headersearch {
	display:inline-block;
	clear:none;
}

注意到,我在header.php中添加的方法是get_search_form_header()而不是原来的get_search_form()这是因为我对头部的搜索框进行了修改,不现实搜索按钮。这个方法添加在general-template.php中,具体为:

function get_search_form_header( $echo = true ) {
        
        do_action( 'pre_get_search_form' );

        $format = current_theme_supports( 'html5', 'search-form' ) ? 'html5' : 'xhtml';

        
        $format = apply_filters( 'search_form_format', $format );

        $search_form_template = locate_template( 'searchform.php' );
        if ( '' != $search_form_template ) {
                ob_start();
                require( $search_form_template );
                $form = ob_get_clean();
        } else {
                if ( 'html5' == $format ) {
                        $form = '<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
                                <label>
                                        <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
                                        <input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />
                                </label>
                        </form>';
                } else {
                        $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . esc_url( home_url( '/' ) ) . '">
                                <div>
                                        <label class="screen-reader-text" for="s">' . _x( 'Search for:', 'label' ) . '</label>
                                        <input type="text" value="' . get_search_query() . '" name="s" id="s" />
                                </div>
                        </form>';
                }
        }
        
        $result = apply_filters( 'get_search_form', $form );

        if ( null === $result )
                $result = $form;

        if ( $echo )
                echo $result;
        else
                return $result;
}

其实就是复制get_search_form()方法,删除其中的搜索按钮。

效果预览:

20151118095450

关闭WordPress自动更新

当网站定型后,为了避免代码更新和插件不兼容等情况,可以将WordPress的自动更新功能关闭,同时关关闭主题和插件的更新,具体操作为:

1、关闭WordPress更新。

修改根目录下的wp-config.php,加入以下行:

define( 'AUTOMATIC_UPDATER_DISABLED', true );

2、关闭WordPress核心、主题、插件更新和更新提示。

在管理界面修改function.php,加入以下行:

add_filter('pre_site_transient_update_core',    create_function('$a', "return null;"));#关闭核心提示
add_filter('pre_site_transient_update_plugins', create_function('$a', "return null;"));#关闭插件提示
add_filter('pre_site_transient_update_themes',  create_function('$a', "return null;"));#关闭主题提示
remove_action('admin_init', '_maybe_update_core');
#禁止 WordPress 检查更新
remove_action('admin_init', '_maybe_update_plugins');
#禁止 WordPress 更新插件
remove_action('admin_init', '_maybe_update_themes');
#禁止 WordPress 更新主题

 

加快WordPress访问速度和SEO的修改

1、增加head中“keywords”和“description”的<meta>信息,在header.php中加入以下内容

<meta name="keywords"  content="YOUR_KEYWORDS" />
<meta name="description"  content="YOUR_DESCRIPTION"/>

2、底部增加登录/登出按钮和回到顶部按钮,在footer.php中加入以下内容

#登录/登出按钮
<?php $current_user = wp_get_current_user();
    if ( 0 == $current_user->ID ) {
        echo "<a href='http://blog.zivers.com/wp-login.php'>登录</a>";
    } else {
        echo "<a href='http://blog.zivers.com/wp-login.php?action=logout'>登出</a>";
    }
?>

#回到顶部按钮
<a href="javascript:scroll(0,0)" style="float: right">返回顶部</a>

3、删除管理模式下页面左上角的WordPress Logo,在functions.php中加入以下内容

add_action( 'admin_bar_menu', 'cwp_remove_wp_logo_from_admin_bar_new', 25 );
function cwp_remove_wp_logo_from_admin_bar_new( $wp_admin_bar ) {
    $wp_admin_bar->remove_node( 'wp-logo' );
}

4、删除页面引用CSS和JS时所带的版本号(ver参数)。在functions.php中加入以下内容

在之前的帖子 替换wordpress登录页logo的方法 中有提到过这个参数,十分多余,不如删了。

if(!function_exists('cwp_remove_script_version')){
    function cwp_remove_script_version( $src ){  return remove_query_arg( 'ver', $src ); }
    add_filter( 'script_loader_src', 'cwp_remove_script_version' );
    add_filter( 'style_loader_src', 'cwp_remove_script_version' );
}

5、删除Google字体open sans的调用,在functions.php中加入以下内容

class Disable_Google_Fonts {
    public function __construct() {
        add_filter( 'gettext_with_context', array( $this, 'disable_open_sans' ), 888, 4);
    }

    public function disable_open_sans( $translations, $text, $context, $domain ) {
        if ( 'Open Sans font: on or off' == $context && 'on' == $text ) {
            $translations = 'off';
        }
        return $translations;
    }
}
$disable_google_fonts = new Disable_Google_Fonts;

6、清理WordPress前台信息,在functions.php中加入以下内容

function cwp_header_clean_up(){
    if (!is_admin()) {
        foreach(array('wp_generator','rsd_link','index_rel_link','start_post_rel_link','wlwmanifest_link') as $clean){remove_action('wp_head',$clean);}
        remove_action( 'wp_head', 'feed_links_extra', 3 );
        remove_action( 'wp_head', 'feed_links', 2 );
        remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
        remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
        remove_action( 'wp_head', 'adjacent_posts_rel_link', 10, 0 );
        foreach(array('single_post_title','bloginfo','wp_title','category_description','list_cats','comment_author','comment_text','the_title','the_content','the_excerpt') as $where){
         remove_filter ($where, 'wptexturize');
        }
        /*remove_filter( 'the_content', 'wpautop' );
        remove_filter( 'the_excerpt', 'wpautop' );*/
        wp_deregister_script( 'l10n' );
    }
}

WordPress标签云小工具美化

之前的标签云小工具丑的不堪入目,所以需要对它进行一些美化。

这里需要修改style.css文件,在文件中加入以下样式代码:

.tagcloud {
	margin-top: 25px;
}

.tagcloud a {
	padding: 6px 7px;
	margin-right: 0;
	margin-bottom: 4px;
	line-height: 100%;
	display: inline-block;
	color: #FFF !important;
	background-color: #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	font-size: 12px !important;
	-webkit-transition: background-color .3s linear;
}
	
.tagcloud a:hover {
	background-color: #75a5b5;
	border-color: #75a5b5;
}

最后的实现效果如下图:

20160516125944

替换WordPress登录页logo的方法

由于WordPress版本的更新,替换这个logo已经不是像原来一样只需要替换一个logo-login.png这么简单的事情了。现在WordPress的登录页面logo已经替换成.svg格式,并在链接中加入了版本标记,所以直接替换是不起作用的,必须把版本号一起改了。下面是具体步骤:

1、首先需要一个64×64的.svg文件,没有的话用png在线转一个,在线转换。将此文件重命名为:

wordpress-logo.svg

2、审查元素发现在登录页面调用了一个叫做login.min.css的样式表(请注意这个样式表是带ver字段的,也就是说有版本号的区别)。在第1290行标记了logo的URL20151023124006

请注意,这个URL也是带版本号的,之后要修改。

background-image: none,url(../images/wordpress-logo.svg?ver=20131107);

3、将/wp-admin/images/中的wordpress-logo.svg用步骤1中的文件替换

4、修改login.min.css

~# vi wp-admin/css/login.min.css

找到步骤2中所提到的字段,将ver=20131107修改为步骤1中.svg文件的创建日期(我是今天创建的所以日期是20151023),或者直接删除“ ?ver=20131107 ”。

5、修改css完成后,这个css文件并没有生效,因为在wp-login.php中是这样引用的:

<link rel='stylesheet' id='login-css' href='http://blog.zivers.com/wp-admin/css/login.min.css?ver=4.3.1' type='text/css' media='all'/>

注意到,css的引用中也带了ver参数,即也有版本控制。所以我们需要更新一下css的引用

~# vi wp-login.php

找到下面这一行

wp_admin_css( 'login', true );

在wp-login中是调用了wp_admin_css()这个方法来生成css引用列表的。我们可以在wp-includes/general-template.php这个文件中找到wp_admin_css()方法的声明:

function wp_admin_css( $file = 'wp-admin', $force_echo = false ) {
        // For backward compatibility
        $handle = 0 === strpos( $file, 'css/' ) ? substr( $file, 4 ) : $file;

        if ( wp_styles()->query( $handle ) ) {
                if ( $force_echo || did_action( 'wp_print_styles' ) ) // we already printed the style queue. Print this one immediately
                        wp_print_styles( $handle );
                else // Add to style queue
                        wp_enqueue_style( $handle );
                return;
        }

        echo apply_filters( 'wp_admin_css', "<link rel='stylesheet' href='" . esc_url( wp_admin_css_uri( $file ) ) . "' type='text/css' />\n", $file );

        if ( function_exists( 'is_rtl' ) && is_rtl() ) {
                /** This filter is documented in wp-includes/general-template.php */
                echo apply_filters( 'wp_admin_css', "<link rel='stylesheet' href='" . esc_url( wp_admin_css_uri( "$file-rtl" ) ) . "' type='text/css' />\n", "$file-rtl" );
        }
}

所以,重新生成只需要在调用wp_admin_css的时候将参数$force_echo设为false即可,即修该wp-login.php中的调用语句:

wp_admin_css( 'login', false );

6、刷新登录页面即可看到效果。

为了安全,将刚才修改的wp_admin_css()方法的参数改回true。