跳到主要内容

WordPress

WordPress 速度优化

禁止 WordPress 头部加载 s.w.org 影响速度

从 WordPress 4.6 开始,就自动会在头部加载 <link rel='dns-prefetch' href='//s.w.org'> 代码,是为了从 s.w.org 预获取表情和头像,提供速度,但是 s.w.org 对国内用户没什么用,还会影响速度,所以直接取消吧,方法如下:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

function remove_dns_prefetch( $hints, $relation_type ) {
if ( 'dns-prefetch' === $relation_type ) {
return array_diff( wp_dependencies_unique_hosts(), $hints );
}
return $hints;
}
add_filter( 'wp_resource_hints', 'remove_dns_prefetch', 10, 2 );

开启 304 Not Modified Header,提高 WordPress 效率

什么 304 Not Modified Header?

客户端(一般是浏览器)发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回 304 Not Modified 这个状态码。

浏览器在请求一个文件的时候,发现自己缓存的文件有 Last Modified ,那么在请求中会包含 If Modified Since ,这个时间就是缓存文件的 Last Modified 。因此,如果请求中包含 If Modified Since,就说明已经有缓存在客户端,只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200。

WordPress 中如何开启 304 Not Modified Header

WordPress 作为一个 CMS 系统,如果每天更新的内容不多,对于未登录的用户来说,每次访问同一个页面,如果浏览器中已经有缓存,其实服务器无需再次生成一次页面,直接返回 304 Not Modified Header,让用户直接查看浏览器中缓存即可。

那么在 WordPress 中如何给未登录用户开启 304 Not Modified Header 呢?

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

add_filter('wp_headers','wpjam_headers',10,2);
function wpjam_headers($headers,$wp){
if(!is_user_logged_in() && empty($wp->query_vars['feed'])){
$headers['Cache-Control'] = 'max-age:600';
$headers['Expires'] = gmdate('D, d M Y H:i:s', time()+600) . " GMT";

$wpjam_timestamp = get_lastpostmodified('GMT')>get_lastcommentmodified('GMT')?get_lastpostmodified('GMT'):get_lastcommentmodified('GMT');
$wp_last_modified = mysql2date('D, d M Y H:i:s', $wpjam_timestamp, 0).' GMT';
$wp_etag = '"' . md5($wp_last_modified) . '"';
$headers['Last-Modified'] = $wp_last_modified;
$headers['ETag'] = $wp_etag;

// Support for Conditional GET
if (isset($_SERVER['HTTP_IF_NONE_MATCH']))
$client_etag = stripslashes(stripslashes($_SERVER['HTTP_IF_NONE_MATCH']));
else $client_etag = false;

$client_last_modified = empty($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? '' : trim($_SERVER['HTTP_IF_MODIFIED_SINCE']);
// If string is empty, return 0. If not, attempt to parse into a timestamp
$client_modified_timestamp = $client_last_modified ? strtotime($client_last_modified) : 0;

// Make a timestamp for our most recent modification...
$wp_modified_timestamp = strtotime($wp_last_modified);

$exit_required = false;

if ( ($client_last_modified && $client_etag) ?
(($client_modified_timestamp >= $wp_modified_timestamp) && ($client_etag == $wp_etag)) :
(($client_modified_timestamp >= $wp_modified_timestamp) || ($client_etag == $wp_etag)) ) {
$status = 304;
$exit_required = true;
}

if ( $exit_required ){
if ( ! empty( $status ) ){
status_header( $status );
}
foreach( (array) $headers as $name => $field_value ){
@header("{$name}: {$field_value}");
}

if ( isset( $headers['Last-Modified'] ) && empty( $headers['Last-Modified'] ) && function_exists( 'header_remove' ) ){
@header_remove( 'Last-Modified' );
}

exit();
}
}
return $headers;
}

开启 304 Not Modified Header 后,因为读取的是缓存文件,所以最新评论,可能会看不见,文章阅读次数不会更新,大家根据自己网站情况,决定开不开启这个功能吧。

WordPress 实现 HTML5 预加载方法

WordPress 实现 HTML5 预加载方法,HTML5新增加了预加载页面技术,预加载是一种浏览器机制,使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源,当用户访问某个预加载的链接时,如果从缓存命中,页面就得以快速呈现。

IE11、Firefox、chrome 和 opera 支持 HTML5 预加载技术,预加载不一定是一个网页,并不一定是网页文件 其他静态资源JS、CSS、图片等等一样可以。

下面教大家如何让WordPress 实现 HTML5 预加载方法:

1.「后台」→「外观」→「编辑」 「header.php」文件,把下面的代码加入到 <head></head> 之间

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } ?>

如果想加个判断预读首页,可以根据上面的代码修改:

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } elseif (is_singular()) { ?>
<link rel="prefetch" href="<?php bloginfo('home'); ?>">
<link rel="prerender" href="<?php bloginfo('home'); ?>">
<?php } ?>

这样我们就基本完成 WordPress 实现 HTML5 预加载方法,快试试效果吧!

屏蔽 WordPress后台 没用到的模块

WordPress后台有很多功能基本上没用到,除了占地外还影响 WordPress后台 加载速度,下面教大家屏蔽WordPress后台 没用到的模块:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去

屏蔽左侧菜单

function remove_menus() {
global $menu;
$restricted = array(
__('Dashboard'),
__('Posts'),
__('Media'),
__('Links'),
__('Pages'),
__('Appearance'),
__('Tools'),
__('Users'),
__('Settings'),
__('Comments'),
__('Plugins')
);
end ($menu);
while (prev($menu)){
$value = explode(' ',$menu[key($menu)][0]);
if(strpos($value[0], '<') === FALSE) {
if(in_array($value[0] != NULL ? $value[0]:"" , $restricted)){
unset($menu[key($menu)]);
}
}else {
$value2 = explode('<', $value[0]);
if(in_array($value2[0] != NULL ? $value2[0]:"" , $restricted)){
unset($menu[key($menu)]);
}
}
}
}
if (is_admin()){
// 屏蔽左侧菜单
add_action('admin_menu', 'remove_menus');
}

删除子菜单

function remove_submenu() {
// 删除”设置”下面的子菜单”隐私”
remove_submenu_page('options-general.php', 'options-privacy.php');
// 删除”外观”下面的子菜单”编辑”
remove_submenu_page('themes.php', 'theme-editor.php');
}
if (is_admin()){
//删除子菜单
add_action('admin_init','remove_submenu');
}
屏蔽后台更新模块

function wp_hide_nag() {
remove_action( 'admin_notices', 'update_nag', 3 );
}
add_action('admin_menu','wp_hide_nag');
屏蔽 WP 后台“显示选项”和“帮助”选项卡

function remove_screen_options(){ return false;}
add_filter('screen_options_show_screen', 'remove_screen_options');
add_filter( 'contextual_help', 'wpse50723_remove_help', 999, 3 );
function wpse50723_remove_help($old_help, $screen_id, $screen){
$screen->remove_help_tabs();
return $old_help;
}

屏蔽后台仪表盘无用模块

function example_remove_dashboard_widgets() {
// Globalize the metaboxes array, this holds all the widgets for wp-admin
global $wp_meta_boxes;
// 以下这一行代码将删除 "快速发布" 模块
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
// 以下这一行代码将删除 "引入链接" 模块
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
// 以下这一行代码将删除 "插件" 模块
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
// 以下这一行代码将删除 "近期评论" 模块
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
// 以下这一行代码将删除 "近期草稿" 模块
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);
// 以下这一行代码将删除 "WordPress 开发日志" 模块
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
// 以下这一行代码将删除 "其它 WordPress 新闻" 模块
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
// 以下这一行代码将删除 "概况" 模块
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
}
add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

屏蔽后台页脚版本信息

function change_footer_admin () {return '';}
add_filter('admin_footer_text', 'change_footer_admin', 9999);
function change_footer_version() {return '';}
add_filter( 'update_footer', 'change_footer_version', 9999);
屏蔽后台左上LOGO

function annointed_admin_bar_remove() {
global $wp_admin_bar;
/* Remove their stuff */
$wp_admin_bar->remove_menu('wp-logo');
}
add_action('wp_before_admin_bar_render', 'annointed_admin_bar_remove', 0);

以上的功能根据自己的需求添加,完了后 WordPress 后台加载速度会提升一些。

给 WordPress侧边栏 添加缓存,优化网站速度

WordPress 缓存大多数人会用 「WP Super Cache」 插件,可以减少数据库的读取,提高网站加载速度,但「WP Super Cache」没有单独给 侧边栏 提供缓存选项。

很多时候 WordPress侧边栏 加载太多东西也会影响到速度,所以需要给WordPress侧边栏 添加缓存,下面提供一个很简单的方法:

  1. 进入 WordPress 后台,「外观」→ 「主题编辑」→ 「Sidebar (sidebar.php)

  2. 在 sidebar.php 开头加入以下代码:

<?php 
$sidebar_html = ABSPATH . "wp-content/cache/sidebar.txt";
$have_cached = false;
if (file_exists($sidebar_html)){
$file_time = filemtime($sidebar_html);
if (($file_time + 3600) > time()){ //缓存1小时
echo "<!-- cached sidebar -->";
echo(file_get_contents($sidebar_html));
echo "<!-- end of cached sidebar -->";
$have_cached = true;
}
}
if(!$have_cached){
ob_start();
?>
  1. 在 sidebar.php 结尾加入以下代码:
<?php
$sidebar_content = ob_get_contents();
ob_end_clean();
$sidebar_fp = fopen($sidebar_html, "w");

if ($sidebar_fp){
fwrite($sidebar_fp, $sidebar_content);
fclose($sidebar_fp);
}

echo $sidebar_content;
}
?>

代码说明:

  1. 可以自己修改缓存时间,看代码注释。

  2. 一旦采用这样的缓存,在缓存时间内对 sidebar 做任何修改都不会生效。

  3. 如果你又想缓存又想修改东西,你可以把缓存时间修改为1秒,作了修改之后,让 sidebar 缓存生成之后,再把缓存时间修改为原来的。

  4. 如果你的 sidebar 为不同页面不同 sidebar,那么你要根据自己的 sidebar 生成不同 sidebar 缓存,如:sidebar_home, sidebar_single,基本代码类似。

  5. 会对 Recent Post, Recent Comment 这些插件产生延迟,在缓存的时间内,如果这些列表更新了回不能及时体现。

优化 WordPress 速度,异步加载JS代码分享

网站用了太多的 JS,网页载入慢咋办?除了可以用 「CDN公共库」 来加速外,还可以通过 异步加载JS代码 方法来优化速度,下面教大家如何在 WordPress 添加 异步加载JS 的方法。

将下面代码添加到主题 functions.php 中:

// 异步加载JS
add_filter( 'script_loader_tag', 'async_script', 10, 3 );
function async_script( $tag, $handle, $src ) {
$zm_method = 'async';// 可将“async”改为“defer”
$zm_exclusions = 'jquery.min.js,script.js';// 排除的JS
$array_exclusions = !empty( $zm_exclusions ) ? explode( ',', $zm_exclusions ) : array();
if ( false !== $zm_enabled && false === is_admin() ) {
if ( !empty( $array_exclusions ) ) {
foreach ( $array_exclusions as $exclusion ) {
$exclusion = trim( $exclusion );
if ( $exclusion != '' ) {
if ( false !== strpos( strtolower( $src ), strtolower( $exclusion ) ) ) {
return $tag;
}
}
}
}
$tag = str_replace( 'src=', $zm_method . "='" . $zm_method . "' src=", $tag );
return $tag;
}
return $tag;
}

需要说明的是:有些JS异步加载后,会没有效果,这时候就需要排除了,$zm_exclusions = 'jquery.min.js,script.js'; 这段代码里面添加需要排除的 JS 。

关于同步加载与异步加载的区别:

1.同步加载:同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。

2.异步加载:异步加载又叫非阻塞,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。

为何使用异步加载原因

优化脚本文件的加载提高页面的加载速度,一直是提高页面加载速度很重要的一条。因为涉及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载,因此更多的采用异步加载。

WordPress 百度云加速规则设置方法

百度云加速是可以免费给网站支持CDN加速,没有备案的网站也可以使用,小羿也用上了百度云CDN,下面教大家如何设置WordPress 百度云加速规则:

1、到 百度云CDN 网站上添加自己的网站,可以通过修改DNS 或者CNAME方式

2.免费的 百度云CDN 只能支持3条规则,对于 WordPress 来说够用了,规则如下:

www.wlg.com/wp-admin/*,缓存设置选择细致:根据不同参数缓存

www.wlg.com/*/comment-page-*,缓存设置选择细致:根据不同参数缓存

wlg.com,缓存设置选择所有都缓存

WordPress 压缩前端HTML页面,加快速度

压缩前端HTML页面就是删除页面所有空行和制表符等不必要的内容,从而实现加速 WordPress 的效果,早前给大家发过插件 Autoptimize 可以实现压缩HTML页面,下面给大家分享代码版的:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

function wp_compress_html(){
function wp_compress_html_main ($buffer){
$initial=strlen($buffer);
$buffer=explode("<!--wp-compress-html-->", $buffer);
$count=count ($buffer);
for ($i = 0; $i <= $count; $i++){
if (stristr($buffer[$i], '<!--wp-compress-html no compression-->')) {
$buffer[$i]=(str_replace("<!--wp-compress-html no compression-->", " ", $buffer[$i]));
} else {
$buffer[$i]=(str_replace("\t", " ", $buffer[$i]));
$buffer[$i]=(str_replace("\n\n", "\n", $buffer[$i]));
$buffer[$i]=(str_replace("\n", "", $buffer[$i]));
$buffer[$i]=(str_replace("\r", "", $buffer[$i]));
while (stristr($buffer[$i], ' ')) {
$buffer[$i]=(str_replace(" ", " ", $buffer[$i]));
}
}
$buffer_out.=$buffer[$i];
}
$final=strlen($buffer_out);
$savings=($initial-$final)/$initial*100;
$savings=round($savings, 2);
$buffer_out.="\n<!--压缩前的大小: $initial bytes; 压缩后的大小: $final bytes; 节约:$savings% -->";
return $buffer_out;
}
ob_start("wp_compress_html_main");
}
add_action('get_header', 'wp_compress_html');

不压缩部分的相应代码改为:

<!--wp-compress-html--><!--wp-compress-html no compression-->
此处代码不会被压缩,主要是避免压缩带来的错误,比如JS错误
<!--wp-compress-html no compression--><!--wp-compress-html-->

禁用 WordPress 头部加载 Emoji 表情

新版的 WordPress 自动在页面的头部落增加window._wpemojiSettings这样的 emjo表情加载,通过源码查看,类似的代码如下:

<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/devework.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f;c.supports={simple:d("simple"),flag:d("flag")},c.supports.simple&&c.supports.flag||(f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>

对于大部分人来说,这个是十分鸡肋的功能。下面提供方法教大家如何屏蔽:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

/**
* Disable the emoji's
*/
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );

/**
* Filter function used to remove the tinymce emoji plugin.
*/
function disable_emojis_tinymce( $plugins ) {
return array_diff( $plugins, array( 'wpemoji' ) );
}

WordPress 启用 WP Super Cache 和 Memcached Object Cache 方法

WordPress 启用 WP Super Cache 和 Memcached Object Cache 才是终极加速方案,早前已经给大家介绍过了 WP Super Cache 插件,下面给大家介绍下 Memcached Object Cache 。

1、WP Super Cache 插件缓存HTML页面和资源,减少硬盘读写次数 2、Memcached Object Cache 缓存MySQL查询语句尤其是组合查询语句,减少数据库读写次数 3、CloudFlare CDN 提供CDN缓存,尽可能减少首次访问用户对服务器的读写

CloudFlare不说了,简单明了。主要说一下WP Super Cache和Memcached Object Cache的同时启用

安装组件

WP Super Cache开启PHP缓存模式,压缩关闭使用服务器的Gzip即可,JS和CSS minify关闭因为有可能会导致文件损坏,其他默认即可。在未启动Memcached之前是看不到对象缓存选项的,下面说一下Memcached

首先一点,Memcache(传送门)是一项技术。Memcache是一个自由和开放源代码、高性能、分配的内存对象缓存系统。用于加速动态web应用程序,减轻数据库负载,原理是在内存里维护一张hash表保存SQL查询,后来的相同查询即可直接从内存里读取而不必访问数据库了。因此,你需要安装Memcache,服务器的名称叫做Memcached

# Redhat/Centos 用yum,Debian/Ubuntu用apt-get
yum -y install memcached

# 启动服务
service memcached start

# 开机自启动
chkconfig memcached on

# 安装 dependencies
yum install cyrus-sasl-devel zlib-devel gcc-c++

# 下载最新版 libmemcached 源码包
wget https://launchpad.net/libmemcached/1.0/1.0.18/+download/libmemcached-1.0.18.tar.gz
tar -xvf libmemcached-1.0.18.tar.gz
cd libmemcached-1.0.18

# 编译安装
./configure --disable-memcached-sasl
make
make install

# 用 pecl 安装 memcached
pecl install memcached

# Enable it for PHP
# 把 extension=memcached.so 取消注释或者添加到php.ini
# 比如 /usr/local/php/etc/php.ini

# 如果不知道php.ini在哪,执行下面这行即可
php --ini

# 重新启动 nginx 和 php-fpm
service nginx restart
service php-fpm reload

memcached默认监听端口是11211,一般没必要改

好,现在忘掉服务器Memcached,我们来谈一下 PHP Memcache 和 PHP Memcached。这两个都是Memcache的客户端,不带D的是老版本,带D的是新版本,更高更快更强,所以我们用 PHP Memcached (传送门)

整合WordPress

OK现在你有了服务器Memcached,也有了客户端PHP Memcached,下面需要让WordPress可以调用PHP Memcached,所以你需要一个插件,Memcached Object Cache

官网版本(只能用于PHP Memcache!):Memcached Object Cache

PHP Memcached版本:tollmanz/wordpress-pecl-memcached-object-cache

切记要选择对版本,如果你安装的是Memcache(不带D的版本),官网的插件是对的;如果你安装的是Memcached,切记请使用Github那个版本,否则就会出现下面的错误

Slyar$ curl -IL http://www.slyar.com/blog/2016-honda-accord-touring-v6.html HTTP/1.1 500 Internal Server Error Date: Tue, 25 Oct 2016 15:07:10 GMT Content-Type: text/html; charset=UTF-8 Connection: keep-alive GMT; path=/; domain=.slyar.com; HttpOnly X-Powered-By: PHP

2016/10/25 23:11:33 [error] 20413#0: *1013 FastCGI sent in stderr: "PHP message: PHP Fatal error: Class 'Memcache' not found in /xxxxxxxxxxxxxxxxx/wp-content/object-cache.php on line 425" while reading response header from upstream, client: xxxxxxxxxxx, server: slyar.com, request: "GET /blog/2016-honda-accord-touring-v6.html HTTP/1.1", upstream: "fastcgi://unix:/tmp/php-cgi.sock:", host: "www.slyar.com"

下载插件,然后将object-cache.php手动上传到/wp-content/下面(注意不是plugin目录)

然后再次进入WP Super Cache的设置界面 - 高级,这时应该就可以看到这个选项了,『 使用对象缓存系统来存储缓存文件。 (实验室功能)』,勾选,更新设置

如果一切正常,wp-content看起来应该是这样的

[slyar@slyar.com wp-content]$ ls -l *.php
-rw-r--r--. 1 www www 1027 Oct 25 07:46 advanced-cache.php
-rw-r--r--. 1 www www 85719 Oct 25 08:25 object-cache.php
-rw-r--r--. 1 www www 4991 Oct 27 04:53 wp-cache-config.php

Memcached探针

下面来查看以下Memcached的工作情况

下载pecl-memcache: https://pecl.php.net/get/memcache-3.0.8.tgz

解压缩以后提取里面的memcache.php放置在web能访问到的地方,vim编辑,改一下下面这几个地方就好了

define('ADMIN_USERNAME','www.slyar.com');    // Admin Username
define('ADMIN_PASSWORD','www.slyar.com'); // Admin Password

$MEMCACHE_SERVERS[] = '127.0.0.1:11211'; // add more as an array
// $MEMCACHE_SERVERS[] = 'mymemcache-server2:11211'; // add more as an array

网页访问即可看到Memcached的工作情况了,HIT(命中)92%效果非常显著

WordPress 启用 WP Super Cache 和 Memcached Object Cache 方法 第1张-小羿

使用 ngx_pagespeed 优化 WordPress 前端

Nginx PageSpeed 是 Nginx 的一个扩展模块,主要的功能是再服务器端优化网站的前端页面,使前端页面符合 PageSpeed Insights 的指导原则,有了 PageSpeed,网站开发人员就可以在开发前端页面的时候,稍微轻松一点了,把前端优化的任务都交给服务器来处理,虽然这会使服务器负载增加;但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的,反正现在服务器也越来越便宜,大不了增加服务器配置就好了,下面我们来看一下安装和使用 Nginx PageSpeed 的方法。

ngx_pagespeed 模块的主要功能如下

ngx_pagespeed 几乎为我们提供了优化网站前端页面所需要的所有功能,下面是一些比较常用和重要的功能,其他功能可以到 ngx_pagespeed 官方文档 查看。

  • 图像优化:移除图片元数据、动态调整,重新压缩
  • CSS 和 JavaScript 压缩、合并、级联、内联,把当前页面需要的 CSS 直接放在页面中,符合 PageSpeed Insights 提出的 “清除首屏内容中阻止呈现的 JavaScript 和 CSS” 原则。
  • 小资源内联,比如比较小的图片,直接转换成 base64 格式的,放在 HTML 中。
  • 推迟图像和 JavaScript 加载,只加载当前屏幕显示的图像,异步加载 JavaScript
  • 对HTML重写、压缩空格、去除注释等,吧 HTML 页面中不必要的内容都移除了,减少了 HTML 的体积。
  • 提升缓存周期,把静态资源的缓存过期时间提高了。

下面是本站使用 ngx_pagespeed 优化过后,通过 PageSpeed Insights 测试出来的分数,不管是移动端、还是桌面端,均达到了100分,这是手工优化前端页面很难达到的高度。当然,优化的过程是动态的,也不是每个页面随时都能达到这个分数,但是整体上来看,使用 ngx_pagespeed 优化后,前端页面的打开速度确实快了许多,用肉眼就能分辨出来。

使用 ngx_pagespeed 优化 WordPress 前端 第1张-小羿

解决安装 ngx_pagespeed 所需的依赖

安装之前,首先要解决安装或升级 ngx_pagespeed 所需的依赖环境。

RedHat, CentOS, or Fedora

sudo yum install gcc-c++ pcre-devel zlib-devel make unzip

Ubuntu or Debian

sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip

如果已经安装了则需要更新依赖(要求 gcc ≥ 4.8 or clang ≥ 3.3)

LNMP 安装 ngx_pagespeed 的方法

由于我使用的是军哥的 LNMP 一键安装脚本,直接编辑升级 Nginx 的脚本,加上编译 ngx_pagespeed 的参数,升级 Nginx 就可以了,当然,如果不想升级,直接输入当前的 Nginx 版本号,相当于重新安装了一遍。

1、首先,根据官方教程下载 Page Speed,把下面的命令保存成 download_pagespeed.sh 文件,然后运行 chmod +x download_pagespeed.sh 赋予该文件可执行权限,然后运行 ./download_pagespeed.sh 即可自动下载并解压 ngx_pagespeed 模块的源代码。

#[check the release notes for the latest version]
NPS_VERSION=1.13.35.2-stable
cd /opt
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
nps_dir=$(find . -name "*pagespeed-ngx-${NPS_VERSION}" -type d)
cd "$nps_dir"
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/}
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/}
psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}x64.tar.gz
[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${psol_url}
tar -xzvf $(basename ${psol_url}) # extracts to psol/

从 1.12.34 版本开始,按照官方的教程进行的时候,可能会遇到无法下载 PSOL 的情况,这时候,按照下面的地址下载对应版本的 PSOL 就可以了。

https://dl.google.com/dl/page-speed/psol/[PageSpeed版本]-x[系统位数].tar.gz

2、然后编辑 Nginx 升级脚本

我用的是 LNMP 1.3,其他版本更换安装路径即可。

cd /lnmp1.3-full/include
vi upgrade_nginx.sh

找到 ./configure --user=www --group=www --prefix=/usr/local/nginx,在这行代码的末尾添加,其中 ngx_pagespeed-1.13.35.2-stable 是第一步下载的 PageSpeed 模块的目录名称,根据实际情况替换即可。

--add-module=/opt/incubator-pagespeed-ngx-1.13.35.2-stable

接着更新 Nginx,可以根据需要,选择 Nginx 版本升级,一般选择最新的稳定版本即可。

./upgrade_nginx.sh

十几分钟之后,如果没有提示其他错误,Nginx 升级到指定版本的同时,ngx_pagespeed 就安装好了。

宝塔面板安装ngx_pagespeed 模块

宝塔面板虽然是图形界面,但最终执行的还是命令行的操作,所以我们一样可以给Nginx添加ngx_pagespeed 模块,宝塔面板安装Nginx的脚本文件路径为:/www/server/panel/install/nginx.sh,我们修改这个文件,添加编译配置,然后在后台重新安装Nginx,安装的时候选择编译安装就可以了。

安装完成后,直接在站点设置的网站配置或伪静态里面添加 Pagespeed 配置就可以了。

Centos 6 安装 ngx_pagespeed 很容易出现的错误及解决办法

有些朋友在安装 ngx_pagespeed 时,出现了以下错误,

build_from_source=false error: module ngx_pagespeed requires the pagespeed optimization library

意思是需要 pagespeed 优化库,也就是上面下载的 psol 文件。明明已经下载了,可是为什么找不到呢?这是因为Centos 6 的 gcc 版本较低,达不到安装 ngx_pagespeed 的要求,这时候,升级一下 gcc 就可以了。

cd /etc/yum.repos.d && wget http://people.centos.org/tru/devtools-2/devtools-2.repo
yum -y install devtoolset-2-gcc devtoolset-2-binutils devtoolset-2-gcc-c++

上面的命令将安装的文件放在了 /opt/rh/devtoolset-2,要使用这个 gcc 来编辑,需要再编辑的时候,指定 gcc 的位置,重新编辑 upgrade_nginx.sh,在文件的末尾加入以下命令。

./configure (中间省略) --add-module=pagespeed代码路径 --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc

最终,upgrade_nginx.sh 编辑 Nginx 的命令应该是这样子的。

./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module ${Nginx_With_Openssl} ${NginxMAOpt} ${Nginx_Modules_Options} --add-module=/opt/incubator-pagespeed-ngx-1.13.35.2-stable --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc

如果系统是 CentOS7,还是提示 “build_from_source=false checking for psol … not found”,可能是 libuuid-devel 没有安装,运行下面命令安装即可。

yum install -y libuuid-devel

配置 Nginx PageSpeed 为我们的 WordPress 加速

安装之后,ngx_pagespeed 已自动启用,通过 Nginx 配置文件启用 pagespeed 后,PageSpeed 就可以我们的网站服务了。下面是我使用的 ngx_pagespeed 配置文件,供大家参考。大家可以根据自己的需要启用或禁用某些模块,更多ngx_pagespeed配置青岛到 ngx_pagespeed 官方文档 查看。

# on 启用,off 关闭 pagespeed on;

# 重置 http Vary 头 pagespeed RespectVary on;

# html字符转小写 pagespeed LowercaseHtmlNames on;

# 压缩带 Cache-Control: no-transform 标记的资源 #pagespeed DisableRewriteOnNoTransform off;

# 相对URL pagespeed PreserveUrlRelativity on; pagespeed XHeaderValue "Powered By ngx_pagespeed";

# 开启 https pagespeed FetchHttps enable;

# 配置服务器缓存位置和自动清除触发条件(空间大小、时限) pagespeed FileCachePath "/var/ngx_pagespeed/"; pagespeed FileCacheSizeKb 2048000; pagespeed FileCacheCleanIntervalMs 43200000; pagespeed FileCacheInodeLimit 500000;

# 过滤规则 # pagespeed RewriteLevel PassThrough; pagespeed RewriteLevel OptimizeForBandwidth;

# 不需过滤的目录或文件 pagespeed Disallow "/wp-admin/"; pagespeed Disallow "/wp-login.php";

# 移除不必要的url前缀,开启可能会导致某些自动加载功能失效 #pagespeed EnableFilters trim_urls;

# 移除 html 空白 pagespeed EnableFilters collapse_whitespace;

# 移除 html 注释 pagespeed EnableFilters remove_comments;

# DNS 预加载 pagespeed EnableFilters insert_dns_prefetch;

# 延迟加载 JavaScript pagespeed EnableFilters defer_javascript;

# 合并CSS pagespeed EnableFilters combine_css;

# 压缩CSS pagespeed EnableFilters rewrite_css;

# 重写CSS,优化加载渲染页面的CSS规则 pagespeed EnableFilters prioritize_critical_css;

# google字体直接写入html 目的是减少浏览器请求和DNS查询 pagespeed EnableFilters inline_google_font_css;

# 压缩 js pagespeed EnableFilters rewrite_javascript;

# 合并 js pagespeed EnableFilters combine_javascript;

# 重写样式属性 pagespeed EnableFilters rewrite_style_attributes;

# 压缩图片 pagespeed EnableFilters rewrite_images;

# 不加载显示区域以外的图片 pagespeed LazyloadImagesAfterOnload off;

# 图片预加载 pagespeed EnableFilters inline_preview_images;

# 调整图片大小 pagespeed EnableFilters resize_images;

# 移动端图片自适应重置 pagespeed EnableFilters resize_mobile_images;

# 图片延迟加载 pagespeed EnableFilters lazyload_images;

# 雪碧图片,图标很多的时候很有用 #pagespeed EnableFilters sprite_images;

# 扩展缓存 改善页面资源的可缓存性 pagespeed EnableFilters extend_cache;

# 不将规则应用在 wp-admin目录 和 wplogin.php页面 pagespeed Disallow "/wp-admin/"; pagespeed Disallow "/wp-login.php"; # 风险指数高,不建议开启 #pagespeed EnableFilters local_storage_cache;

# 不能删 location ~ ".pagespeed.([a-z].)?[a-z]{2}..{10}..+" { add_header "" ""; }

location ~ "^/ngx_pagespeed_static/" { }

location ~ "^/ngx_pagespeed_beacon$" { }

location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }

location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }

location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }

location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; }

pagespeed StatisticsPath /ngx_pagespeed_statistics; pagespeed MessagesPath /ngx_pagespeed_message; pagespeed ConsolePath /pagespeed_console; pagespeed AdminPath /pagespeed_admin;

# 控制台 可通过 http://domain.com/ngx_pagespeed_admin 来查看控制台 pagespeed Statistics on; pagespeed StatisticsLogging on;

pagespeed LogDir /var/log/pagespeed;

location /pagespeed_console { allow 127.0.0.1; deny all; }

pagespeed AdminPath /ngx_pagespeed_admin;

location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; }

# 日志限制 pagespeed StatisticsLoggingIntervalMs 60000; pagespeed StatisticsLoggingMaxFileSizeKb 1024;

解决 PageSpeed Insights “未使用被动式监听器来提高滚动性能” 警告

在使用 PageSpeed Insights 测试我们的 WordPress 站点的使用,如果前端加载了 jQuery 库,我们往往会收到一条「未使用被动式监听器来提高滚动性能」的警告,谷歌建议我们将触摸和滚轮事件监听器标记为 passive,以提高页面的滚动性能

为什么出现未使用被动式监听器的警告

在浏览器渲染网页的过程中,默认情况下,浏览器会主动监听绑定到触摸和滚动事件,根据该事件的运行结果和是否阻止浏览器的默认行为来判断是否执行默认操作。比如我们可以在 touchstart 事件调用 preventDefault ,这时,浏览器会禁用该事件的默认操作,不会滚动或缩放。

而浏览器无法预先知道一个监听器会不会调用 preventDefault(),它需要等监听器执行完后,再去执行默认行为,而监听器执行是要耗时的,这样就会导致页面卡顿。更深入的解释参考:移动Web滚动性能优化: Passive event listeners。

让WordPress内置的jQuery使用被动式监听器的办法

如果我们把监听器的监听方式改为被动的,就可以消除掉这个延时,提高网页的触摸和滚动性能。虽然这个警告不会直接影响PageSpeed Insights的评分,解决掉这个延时后,对提高网页的用户体验还是有一些帮助的。

截止本文发布之日,WordPress内置的jQuery尚不支持这个操作。很幸运的是,我们可以通过一段简单的代码来为jQuery加上这个支持。

add_action('wp_enqueue_scripts', function ()
{
wp_add_inline_script('jquery', '
jQuery.event.special.touchstart = {
setup: function( _, ns, handle ) {
this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
}
};
jQuery.event.special.touchmove = {
setup: function( _, ns, handle ) {
this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
}
};
jQuery.event.special.wheel = {
setup: function( _, ns, handle ){
this.addEventListener("wheel", handle, { passive: true });
}
};
jQuery.event.special.mousewheel = {
setup: function( _, ns, handle ){
this.addEventListener("mousewheel", handle, { passive: true });
}
};'
);
}, 999);

如果您的网站中没有使用jQuery,依然出现了未使用被动式监听器来提高滚动性能的警告,可以参考以上代码中的this.addEventListener 部分修改您的代码,来实现被动式监听。

WordPress 加强安全

加强安全性,给 WordPress 后台登录添加验证码

之前分享过 「自定义 WordPress 后台登录地址,提高安全」,如果觉得安全性还不够,可以给后台登录添加验证码,可以屏蔽机器后台暴力破解密码,下面教大家如何添加:

加强安全性,给 WordPress 后台登录添加验证码 第1张-小羿

(WordPress 后台登录添加验证码)

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

//后台登陆数学验证码
function myplugin_add_login_fields() {
//获取两个随机数, 范围0~9
$num1=rand(0,9);
$num2=rand(0,9);
//最终网页中的具体内容
echo "<p><label for='math' class='small'>验证码</label><br /> $num1 + $num2 = ?<input type='text' name='sum' class='input' value='' size='25' tabindex='4'>"
."<input type='hidden' name='num1' value='$num1'>"
."<input type='hidden' name='num2' value='$num2'></p>";
}
add_action('login_form','myplugin_add_login_fields');
function login_val() {
$sum=$_POST['sum'];//用户提交的计算结果
switch($sum){
//得到正确的计算结果则直接跳出
case $_POST['num1']+$_POST['num2']:break;
//未填写结果时的错误讯息
case null:wp_die('错误: 请输入验证码.');break;
//计算错误时的错误讯息
default:wp_die('错误: 验证码错误,请重试.');
}
}
add_action('login_form_login','login_val');

预防 WordPress网站 被恶意镜像方法

现在很多垃圾站会恶意镜像网站,通过域名A记录直接解析别人IP地址,从而得到一个在访问者眼中完全相同网站的过程,就是别个的网站打开跟你的网站一摸一样!谷歌就爱收录这类垃圾站,百度反而没有。

下面教大家 预防 WordPress网站 被恶意镜像方法:「后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

/**
* WordPress 禁止UA为空或含有PHP的请求
**/

if(!is_admin()) {
add_action('init', 'deny_mirrored_request', 0);
}
function deny_mirrored_request()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(!$ua || preg_match('/PHP/i', $ua)) {
header("Content-type: text/html; charset=utf-8");
wp_die('请勿采集本站,因为采集的站长木有小JJ!');
}
}

屏蔽发帖机 给你的 WordPress 发垃圾评论

WordPress 全球最主流的博客系统,发垃圾广告的当然也少不了,大多数发垃圾广告的都是用 发帖机 批量发,虽然你可以用 「Akismet」插件 来屏蔽,但用 「.htaccess 」文件来的更直接(又可以少一个插件了,哦耶!)

原理:阻止垃圾评论机器人访问 wp-comments-post.php 文件

把下面的代码添加到你的 .htaccess 文件

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*yourdomainname.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
</IfModule>

如果你的博客不需要评论,就直接后台关闭评论功能吧。

提高安全性:WordPress 预防 CC攻击 代码

CC攻击(Challenge Collapsar)是DDOS(分布式拒绝服务)的一种,也是一种常见的网站攻击方法,攻击者通过代理服务器或者肉鸡向向受害主机不停地发大量数据包,造成对方服务器资源耗尽,一直到宕机崩溃。

简单的说,一直狂刷 F5,也会导致你的 服务器宕机,如果你用了「WP Super Cache」 插件生成静态的话,可以舒缓压力,但主要还是看攻击来的猛不猛!

下面分享 90blog 的WordPress 预防 CC攻击 代码,「后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

// 防止CC攻击
session_start(); //开启session
$timestamp = time();
$ll_nowtime = $timestamp ;
// 判断session是否存在 如果存在从session取值,如果不存在进行初始化赋值
if ($_SESSION){
$ll_lasttime = $_SESSION['ll_lasttime'];
$ll_times = $_SESSION['ll_times'] + 1;
$_SESSION['ll_times'] = $ll_times;
}else{
$ll_lasttime = $ll_nowtime;
$ll_times = 1;
$_SESSION['ll_times'] = $ll_times;
$_SESSION['ll_lasttime'] = $ll_lasttime;
}
// 现在时间-开始登录时间 来进行判断 如果登录频繁 跳转 否则对session进行赋值
if(($ll_nowtime - $ll_lasttime) < 3){
if ($ll_times>=5){
header("location:http://127.0.0.1");
exit;
}
}else{
$ll_times = 0;
$_SESSION['ll_lasttime'] = $ll_nowtime;
$_SESSION['ll_times'] = $ll_times;
}

最后再推荐一下「百度的免费CDN 」,带有 WAF 和 ADS,可以预防CC、SYN flood、UDP flood等所有DDoS攻击方式。

自定义 WordPress 后台登录地址,提高安全

WordPress 是全球最流行的免费PHP博客系统,用的人多,黑客就喜欢搞事情,WordPress 默认的后台地址是不能更改路径,所以如果你的密码简单,就容易被扫描暴力破解,所以为了提高安全性,我们需要修改 WordPress 后台登录地址,下面提供方法:

将下面代码添加到主题 functions.php 中:

//自定义 WordPress 后台登录地址
add_action('login_enqueue_scripts','login_protection');
function login_protection(){
if($_GET['gay'] != 'lao')header('Location: https://wlg.com/');
}

这里需要修改的位置有:gay,lao,https://wlg.com/

完整的后台地址是:https://wlg.com/wp-login.php?gay=lao

如果输入的后台地址 不是自定义的,那么就会直接跳转到主页。

隐藏 WordPress 管理员登录用户名,提高安全性

WordPress 提高后台安全的方法 发过「给 WordPress 后台登录添加验证码」和「自定义 WordPress 后台登录地址」,但是如果你的 管理员登录用户名 被暴露,同样也会有安全隐患,下面教大家如何隐藏 WordPress 管理员登录用户名。

网站右键查看源代码,无意间发现自己的管理员用户名被暴露了...

隐藏 WordPress 管理员登录用户名,提高安全性 第1张-小羿

(图1:评论中暴露登录用户名)

方法1:直接修改Wordpress程序

① 然后,查了下代码,查到了这个函数comment_class(),进一步发现是被这个函数get_comment_class()(大约在wp-includes\comment-template.php 的419行)暴露管理员的登录用户名... 该函数内容如下:

function get_comment_class( $class = '', $comment_id = null, $post_id = null ) {
global $comment_alt, $comment_depth, $comment_thread_alt;

$comment = get_comment($comment_id);

$classes = array();

// Get the comment type (comment, trackback),
$classes[] = ( empty( $comment->comment_type ) ) ? 'comment' : $comment->comment_type;

// Add classes for comment authors that are registered users.
if ( $comment->user_id > 0 && $user = get_userdata( $comment->user_id ) ) {
$classes[] = 'byuser';
$classes[] = 'comment-author-' . sanitize_html_class( $user->user_nicename, $comment->user_id );
// For comment authors who are the author of the post
if ( $post = get_post($post_id) ) {
if ( $comment->user_id === $post->post_author ) {
$classes[] = 'bypostauthor';
}
}
}

if ( empty($comment_alt) )
$comment_alt = 0;

我们的管理员用户名正是被其中的第14行暴露的... 在此,我们只需将这一行中的$user->user_nicename改为$user->user_id即可安全的隐藏管理员的登录名了~ 也隐藏了注册用户的登录用户名了!取而代之显示的是注册用户(包括管理员)的ID。从此再也不用担心网页中会暴露诸位站长的登录用户名了~

另外用户页面也有博主登录用户名,如下图:

隐藏 WordPress 管理员登录用户名,提高安全性 第2张-小羿

(图2:用户页面中也暴露登录用户名)

然后查到了这个函数body_class(),进一步发现是被这个函数get_body_class()(大约在wp-includes\post-template.php 的634行)暴露管理员的登录用户名... 该函数部分内容如下:

elseif ( is_author() ) {
$author = $wp_query->get_queried_object();
$classes[] = 'author';
if ( isset( $author->user_nicename ) ) {
$classes[] = 'author-' . sanitize_html_class( $author->user_nicename, $author->ID );
$classes[] = 'author-' . $author->ID;
}
}

其中该函数的第5行也暴露了博主的登录名,将这一行删掉或注释掉即可成功解决~

方法2:过滤掉 "Comment-Author-" 和 "Author-"

「后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

/**
* 说明:直接去掉函数 comment_class() 和 body_class() 中输出的 "comment-author-" 和 "author-"
*/
function lxtx_remove_comment_body_author_class($content){
$pattern = "/(.*?)([^>]*)author-([^>]*)(.*?)/i";
$replacement = '$1$4';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('comment_class', 'lxtx_remove_comment_body_author_class');
add_filter('body_class', 'lxtx_remove_comment_body_author_class');

comment_class()和body_class()过滤的结果分别是:

// comment_class()过滤后的结果如下,去掉了原有class里的comment-author-test10,请和上面的图1比较
class="comment byuser bypostauthor odd alt thread-odd thread-alt depth-1"

// body_class()过滤后的结果如下,去掉了原有class里的author-test10和author-1,请和上面的图2比较
class="archive author logged-in"

另外其实老外早在2010年就发现了这个漏洞...

/**
* 说明:直接去掉函数 comment_class() 和 body_class() 中输出的 "comment-author-" 和 "author-"
*/
function lxtx_remove_comment_body_author_class( $classes ) {
foreach( $classes as $key => $class ) {
if(strstr($class, "comment-author-")||strstr($class, "author-")) {
unset( $classes[$key] );
}
}
return $classes;
}
add_filter( 'comment_class' , 'lxtx_remove_comment_body_author_class' );
add_filter('body_class', 'lxtx_remove_comment_body_author_class');

方法3:改为输出用户ID或用户昵称

/**
* 说明:comment_class() 和 body_class() 中输出的 nicename改为 userid 或者 username
* 20170527:优化原Injov版的输出昵称方法
*/
function lxtx_change_comment_or_body_classes($classes, $comment_id){
global $wp_query;
$comment = get_comment( $comment_id );
$user = get_userdata( $comment->user_id );
$comment_author = 'comment-author-' . sanitize_html_class( $user->user_nicename, $comment->user_id );
$author = $wp_query->get_queried_object();
$archive_author = 'author-' . sanitize_html_class( $author->user_nicename, $author->ID );
$archive_author_id = 'author-' . $author->ID;
foreach( $classes as $key => $class ) {
switch( $class ) {
case $comment_author:
// $classes[$key] = 'comment-author-' . sanitize_html_class( $comment->comment_author, $comment->comment_author );
$classes[$key] = 'comment-author-' . sanitize_html_class( $comment->user_id );
break;
case $archive_author:
// $classes[$key] = 'author-' . sanitize_html_class( get_the_author_meta( 'display_name' ), get_the_author_meta( 'display_name' ) );
$classes[$key] = 'author-' . sanitize_html_class( $author->ID );
break;
case $archive_author_id:
$classes[$key] = '';
break;
}
}
return $classes;
}
add_filter( 'comment_class', 'lxtx_change_comment_or_body_classes', 10, 4 );
add_filter( 'body_class', 'lxtx_change_comment_or_body_classes', 10, 4 );

注:注释的两行代码为替换成昵称,不了解可以不理会~~

WordPress 禁止游客用站长的用户名回复内容

WordPress 的文章评论,默认可以用站长的名称和邮箱来回复内容,会造成恶意回复网友内容,或者乱发广告,这对网站影响可不小,所以我们需要禁止游客用站长的用户名回复内容。

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

// 防止冒充管理员,请修改下面的用户名和邮箱
function ym_usecheck($incoming_comment) {
$isSpam = 0;
if (trim($incoming_comment['comment_author']) == 'wlg')
$isSpam = 1;
if (trim($incoming_comment['comment_author_email']) == 'admin@wlg.com')
$isSpam = 1;
if(!$isSpam)
return $incoming_comment;
wp_err('不要做坏事哦!');
}
if(!is_user_logged_in())
add_filter( 'preprocess_comment', 'ym_usecheck' );

另外也你可以看看「隐藏 WordPress 管理员登录用户名,提高安全性」

去除 WordPress 各个地方的版本号

WordPress太过于主流了,所以经常会有攻击漏洞,官方也在不断的修复漏洞,如果你的WordPress版本太低,一些攻击工具可能会根据版本号来入侵你的网站,所以屏蔽WordPress的版本号还是有点必要的。

有很多方法可以移除WordPress添加的版本号信息,我们先看看几种常见的方式:

方法一(错误):修改WordPress源代码

修改wp-includes/defaults-filter.php,将其中的:

add_action('wp_head', 'wp_generator');

改成:

remove_action('wp_head', 'wp_generator');

相信现在已经没人还傻到去修改WordPress源文件来实现某种功能了吧?下次WordPress更新又得重新修改,实在是累!

方法二(错误):直接删除wp_head()

因为本文开头那段泄漏WordPress版本号的代码,一般是主题文件header.php中的wp_head()函数输出的,并且这个函数会输出一些无用的代码,所以有些人干脆来个痛快,直接把wp_head()函数删掉了事。只是他们没有想过,很多插件/主题会通过这个函数进行一些操作,删掉这个函数将使这些插件/主题无法工作。兴许,下次安装个插件,死活用不了还找不到原因呢!

方法三:remove_action

一个好的方法,也是绝大多数教程提供的方法,是在当前主题的functions.php中添加以下代码:

remove_action('wp_head', 'wp_generator');

这样就可以从网站的head中移除本文开头提到的那段含有版本号的代码。但是,这里我要打击一下各位,在我看见的WordPress的站长,几乎没有一个站点能够完全隐藏掉WordPress版本号。打开你们的feed源,如 http://example.com/feed,有没有看到这个:

<generator>http://wordpress.org/?v=3.8</generator>

啊啊!3.8不就是WordPress的版本号吗?再随便看看你的一篇文章的网页源代码,是否会看到下面的几段类似代码呢:

<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=3.8'></script>
<link rel='stylesheet' href='/wp-includes/css/admin-bar.css?ver=3.8' type='text/css' />
<link rel='stylesheet' href='//fonts.lug.ustc.edu.cn/css?family=Handlee&ver=3.8' type='text/css' />

呵呵,又见3.8,其实WordPress不仅会输出本文开头的那段代码,而且会在feed中输出版本号,另外,为了更新缓存,某些css和js结尾也会附上WordPress版本号(如以上第2-3行代码)。

方法四:正确方法

所以,我们还应该移除feed和js/css中的WordPress版本号,在当前主题的functions.php中添加以下代码:

// 同时删除head和feed中的WP版本号
function ludou_remove_wp_version() {
return '';
}
add_filter('the_generator', 'ludou_remove_wp_version');
// 隐藏js/css附加的WP版本号
function ludou_remove_wp_version_strings( $src ) {
global $wp_version;
parse_str(parse_url($src, PHP_URL_QUERY), $query);
if ( !empty($query['ver']) && $query['ver'] === $wp_version ) {
// 用WP版本号 + 12.8来替代js/css附加的版本号
// 既隐藏了WordPress版本号,也不会影响缓存
// 建议把下面的 12.8 替换成其他数字,以免被别人猜出
$src = str_replace($wp_version, $wp_version + 12.8, $src);
}
return $src;
}
add_filter( 'script_loader_src', 'ludou_remove_wp_version_strings' );
add_filter( 'style_loader_src', 'ludou_remove_wp_version_strings' );

去除WordPress后台右下角WordPress版本号:

在fuction.php中加入以下代码可消除:

add_filter('admin_footer_text', 'left_admin_footer_text');
function left_admin_footer_text($text) {
// 左边信息改成自己的站点
$text = '感谢访问XXXX';
return $text;
}
add_filter('update_footer', 'right_admin_footer_text', 11);
function right_admin_footer_text($text) {
// 隐藏右边版本信息
}

WordPress 功能技巧

wordpress如何获取网站的最新文章、热门文章、随机文章?

获取最新文章

<ul> <?php $post_query = new WP_Query('showposts=10'); while ($post_query->have_posts()) : $post_query->the_post(); $do_not_duplicate = $post->ID; ?> <li><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></li> <?php endwhile;?> </ul>

获取热门文章

<ul> <?php $post_num = 10; // 设置调用条数 $args = array( ‘post_password’ => ”, ‘post_status’ => ‘publish’, // 只选公开的文章. ‘post__not_in’ => array($post->ID),//排除当前文章 ‘caller_get_posts’ => 1, // 排除置顶文章. ‘orderby’ => ‘comment_count’, // 依评论数排序. ‘posts_per_page’ => $post_num); $query_posts = new WP_Query(); $query_posts->query($args); while( $query_posts->have_posts() ) { $query_posts->the_post(); ?> <li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></li> <?php } wp_reset_query();?> </ul>

获取随机文章

<ul> <?php global $post; $postid = $post->ID; $args = array( ‘orderby’ => ‘rand’, ‘post__not_in’ => array($post->ID), ‘showposts’ => 10); $query_posts = new WP_Query(); $query_posts->query($args); ?> <?php while ($query_posts->have_posts()) : $query_posts->the_post(); ?> <li><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></li> <?php endwhile; ?> </ul>

在 WordPress 文章列表任意位置插入广告代码

有时候需要在 WordPress 的文章列表(分类页、Search页,Tag页)中插入广告 或者 其它内容,例如想在第三篇文章,出现广告图片,如下面的效果:

在 WordPress 文章列表任意位置插入广告代码 第1张-小羿

(文章列表任意位置插入广告代码)

<?php if ($wp_query->current_post == 4) : ?>
<div>(广告代码)</div>
<?php endif; ?>
<?php if ($wp_query->found_posts < 5 and $wp_query->current_post == ($wp_query->found_posts - 1)): ?>
<div>(广告代码)</div>
<?php endif; ?>

$current_post 属性,必须用在 Loop 里面,表示当前显示的文章索引值;它是以 0 为起始值,如果想要在第5个文章后面,$wp_query->current_post 等于 4 即可。

$found_posts 属性,表示按 $wp_query 匹配的文章总数。

上面的代码只能放在 Loop 里面,比如 <?PHP if (have_posts()) : while (have_posts()) : the_post(); ?>后面,表示广告代码将在文章列表的第5个文章后面出现,如果列表匹配出来的文章总数不到5个,就在列表的最后位置出现广告代码。

利用 fetch_feed 函数,让 WordPress 调用其它网站最新文章

fetch_feed 函数 是用 RSS 功能调用其它支持 RSS 网站内容的功能(大多数网站都支持),下面教大家如何让 WordPress 调用其它网站最新文章:

1.在网站根目录新建一个名为 cache 的文件夹,并且设置权限为 777,作为 RSS 的缓存文件夹。

2.在 sidebar.php 或者 你想要显示 RSS 调用文章的地方插入以下代码:

<?php
require_once (ABSPATH . WPINC . '/class-feed.php');
$feed = new SimplePie();
$feed->set_feed_url(array('http://wlg.com/feed', 'https://www.wlg.com/feed')); //可以添加多个站点feed地址
$feed->enable_order_by_date(false);
$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/cache');//缓存文件夹
$feed->init();
$feed->handle_content_type();
?>
<ul>
<?php foreach ($feed->get_items(0,10) as$item)://10是文章篇数 ?>
<li>
<a href="<?php echo $item->get_permalink()?>" rel="bookmark" title="阅读> <?php echo $item->get_title()?>"><?php echo$item->get_title()?></a><!-- 文章标题 -->
<br/><?php echosubstr($item->get_description(),0,180);?><!-- 文章内容 -->
<?php endforeach; ?>
</li>
</ul>

附带CSS样式:

.rss ul li {
width:209px;
white-space:nowrap;
overflow:hidden;
line-height:23px;
}

这样就可以简单实现RSS抓取文章了,但是可能会出现乱码的情况,所以还需要加入识别中文字函数的函数cut_strr

function cut_strr($str,$len) {
if (strlen($str) <= $len) return $str;
$n = 0;
$tempstr = '';
for ($i=0; $i<$len; $i++) {
if (ord(substr($str,$n,1)) > 224) {
$tempstr .= substr($str,$n,3);
$n += 3;
$i++; //把一个中文按两个英文的长度计算
} elseif (ord(substr($str,$n,1)) > 192) {
$tempstr .= substr($str,$n,2);
$n += 2;
$i++; //把一个中文按两个英文的长度计算
} else {
$tempstr .= substr($str,$n,1);
$n ++;
}
}
//此处增加strip_tags(),去掉字串中包含 HTML 及 PHP 的标记,返回字符串形式的值,避免输出值中有分段现象造成各种难看
$tempstr = strip_tags($tempstr);
return $tempstr.'...';
}

利用 RSS 功能,还可以实现采集文章,这里是不推荐的哈。

fetch_feed函数官方说明:访问

让 WordPress 支持用 iframe 引用优酷和土豆视频

WordPress 中文版内置了「使用 WordPress 的 Embed 功能快速插入优酷视频」的功能,但是代码是用 embed 实现的,也就是说,只引用了一个 .swf 文件,这样不方便移动客户端以及高端主流浏览器的使用。

如今 HTML5 技术流行,国外的视频分享网站鼻祖 YouTube 早已使用 iframe 方式来站外引用视频,并支持 HTML5 + Flash ,基本兼容所有的客户端和浏览器。在国内最大的两只视频网站优酷和土豆也已经有类似的方法。

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

// add youku using iframe
function wp_iframe_handler_youku( $matches, $attr, $url, $rawattr ) {
// If the user supplied a fixed width AND height, use it
if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) {
$width = (int) $rawattr['width'];
$height = (int) $rawattr['height'];
} else {
list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );
}
$iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://player.youku.com/embed/'. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>';
return apply_filters( 'iframe_youku', $iframe, $matches, $attr, $url, $ramattr );
}
wp_embed_register_handler( 'youku_iframe', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_iframe_handler_youku' );
// add tudou using iframe
function wp_iframe_handler_tudou( $matches, $attr, $url, $rawattr ) {
// If the user supplied a fixed width AND height, use it
if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) {
$width = (int) $rawattr['width'];
$height = (int) $rawattr['height'];
} else {
list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );
}
$iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://www.tudou.com/programs/view/html5embed.action?code='. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>';
return apply_filters( 'iframe_tudou', $iframe, $matches, $attr, $url, $ramattr );
}
wp_embed_register_handler( 'tudou_iframe', '#http://www.tudou.com/programs/view/(.*?)/#i', 'wp_iframe_handler_tudou' );
wp_embed_unregister_handler('youku');
wp_embed_unregister_handler('tudou');

发文章的时候直接发视频链接即可。

3种方法 给 WordPress主题 添加背景图片

为了让 WordPress主题 更酷,有些人喜欢给主题添加背景图片,WordPress默认主题是有提供这个功能的,但有些主题没有,下面教大家如何给 WordPress主题 添加背景图片 。

方法1(推荐):用自带的 函数 添加自定义背景功能

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

add_custom_background();

然后在「后台」→「外观」→「自定义」,就会出现一个自定义背景功能。

3种方法 给 WordPress主题 添加背景图片 第1张-小羿

(WordPress 自定义背景)

方法2:在主题中添加背景模块

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

add_theme_support( ‘custom-background’);

然后,在「后台」→「外观」→「编辑」 →「header.php」中找到body标签,改成如下代码:

<body <?php body_class(); ?>>

添加好后,就可以在后台设置背景图片或背景颜色了。

方法3:直接自定义 CSS

后台」→「外观」→「编辑」 →「Style.css」,找到 body 的样式,添加背景图片

body {
background:#f2f2f2 url(images/body_bg.png) repeat-y 50% 0; //改成自己的图片就可以了
margin:0 auto;
}

修改 DW Question & Answer插件 固定链接结构为 id.html

DW Question & Answer插件」是 WordPress 的在线问答插件,可以支持投票,问题回复,可定制的邮件通知,通过状态管理问题,比如待回答、已回答、已关闭等等,可以说是比较强大的问答插件了。

但是 「DW Question & Answer插件」默认的 固定链接结构 是根据提问的标题来生成:如:“我想问小羿个问题.html”,这样对SEO来说很不友好,下面教大家修改 DW Question & Answer插件 固定链接结构为 id.html

后台」→「外观」→「编辑」 「functions.php」文件,把下面的代码添加进去:

//修改 DW Question & Answer插件 固定链接结构为 id.html
add_filter('post_type_link', 'custom_qa_link', 1, 3);
function custom_qa_link( $link, $post = 0 ){
if ( $post->post_type == 'dwqa-question' ){
return home_url( 'question/' . $post->ID .'.html' );
} else {
return $link;
}
}
add_action( 'init', 'custom_qa_rewrites_init' );
function custom_qa_rewrites_init(){
add_rewrite_rule(
'question/([0-9]+)?.html$',
'index.php?post_type=dwqa-question&p=$matches[1]',
'top' );
}

添加好后,如果出现 404 错误,请访问 「WP后台」→「设置」→「固定链接」,还不行的话,应该就是你的主机不支持伪静态

给 WordPress 添加自定义栏目 (Custom Fields)

WordPress 默认只是个博客系统,但由于强大的开发能力,可以做成 CMS 或者 产品网站,有时候在一个产品里面我们需要用到产品更多的参数,如:产品规格,产品价格,可以通过 WordPress 本身的自定义栏目(Custom Fields)即可解决该问题。

1.在 <?php while ( have_posts( ) ) : the_post( ) ; ?> 循环内添加以下代码

<?php echo get_post_meta( $post -> ID , “demoLink” , true ) ; ?>

其中”demoLink”是自定义栏目的名称。

2.在文章编辑后台加该参数,并赋值

如未开启自定义栏目模块,先点击右上角的显示选项,在自定义栏目前打勾就可以在编辑文章的下方看到自定义栏目模块。

此处的名称要和主题中的一致,方可被调用传至前端页面。

给 WordPress 添加自定义栏目 (Custom Fields) 第1张-小羿

(自定义栏目 (Custom Fields))

以上两点设置完毕即可在前端也可看到添加上的自定义参数。

让 WordPress 文章时间显示为“几分钟前”

WordPress 默认的时间显示只支持时分秒,对于文章内容更新频率比较高的网站来说,显示为“几分钟前” 就比较有必要了,类似 微博那种的发表于××分钟前的效果,代码如下:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

// 让 WordPress 文章时间显示为“几分钟前”
function timeago() {
global $post;
$date = $post->post_date;
$time = get_post_time('G', true, $post);
$time_diff = time() - $time;
if ( $time_diff > 0 && $time_diff < 24*60*60 )
$display = sprintf( __('%s ago'), human_time_diff( $time ) );
else
$display = date(get_option('date_format'), strtotime($date) );
return $display;
}
add_filter('the_time', 'timeago');

然后在需要调用时间的位置,添加 <?php the_time();?> ,就可以显示为 “几分钟前” 的效果了。

给 WordPress 的旧文章添加自定义提示

有时候我们的网站会发一些活动文章,软件下载什么的,随着时间活动可能会过期,这时候就需要一个提示,告诉读者这篇文章已经长期没有更新,可能活动已经过期 或者 下载已经失效等内容。

给 WordPress 的旧文章添加自定义提示 第1张-小羿

(旧文章提示)

下面教大家 给 WordPress 的旧文章添加自定义提示 方法:

1.「后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

//添加老文章提示信息 
function old_content_message($content) {
$modified = get_the_modified_time('U');
$current = current_time('timestamp');
$diffTime = ($current - $modified) / (60 * 60 * 24);
if ($diffTime > 365) {
$content = $content.'<div class="warn">本文最后更新于'.get_the_modified_time('Y年n月j日').
',已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!</div>';
}
return $content;
}
add_filter('the_content', 'old_content_message');

2.如果你想该提示框出现在文章的开头,则需要将代码改下(将$content放在提示后面)

//添加老文章提示信息
function old_content_message($content) {
$modified = get_the_modified_time('U');
$current = current_time('timestamp');
$diffTime = ($current - $modified) / (60 * 60 * 24);
if ($diffTime > 365) {
$content = '<div class="warn">本文最后更新于'.get_the_modified_time('Y年n月j日').
',已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!</div>'.$content;
}
return $content;
}
add_filter('the_content', 'old_content_message');

附带样式:

.warn {
color: #ad9948;
background: #fff4b9 url(img/warn.png) -1px -1px no-repeat;
border: 1px solid #eac946;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
font-size: 14px;
}

函数延伸介绍:

本功能使用了WordPress的get_the_modified_time函数,它可以获得文章的最后修改时间,包括你对内容、标签、置顶等信息的修改都会影响最后修改时间。第五行606024是将计时单位(秒)转化成(天),第六行>365即最后修改时间大于一年的文章将会出现提示,你可以根据具体情况进行修改。

另外我们还可以控制哪些文章显示提醒,例如你只想让ID为8的分类中的文章显示提示信息,只需要将第六行代码添加判断条件即可,如下:

if($diffTime > 365 && in_category(8) ){

多个分类的话用数组形式添加,如让ID为8、9、10的分类文章显示提示信息,则修改第六行为

if($diffTime > 365 && in_category(array(8,9,10)) ){

同理如果想排除某些分类,除了这些分类的文章都显示提示信息,只需要在in_category前添加半角“!”既可,如不想让ID为8、9、10的分类文章显示提示信息,则修改第六行为

if($diffTime > 365 && !in_category(array(8,9,10)) ){

彻底禁用 WordPress缩略图 自动裁剪功能

WordPress 默认会裁剪你上传的图片,生成多个缩略图文件,会占用磁盘空间,而且文件数量一多,你后台多媒体搜索图片的时候,就会卡得不行,所以我们需要禁止 WordPress缩略图自动裁剪功能,在旧版的 WordPress 我们可以在「后台」→「设置」→「多媒体」→「图像大小」 的 中等大小 和 大尺寸 全部设置为 0,如果你的模板有用到 特色图像(自动获取文章图片为缩略图),那么缩略图大小应该保留。

彻底禁用 WordPress缩略图 自动裁剪功能 第1张-小羿

(中等大小 和 大尺寸 全部设置为 0)

从 wordpress 4.4 以上的版本开始还会自动生成一个 768w 像素缩略图,这个时候,我们需要进入 WordPress的隐藏设置模式,来关闭。

输入 http://你的域名/wp-admin/options.php 开启WordPress的隐藏设置模式,Ctrl+F 搜索 medium_large_size_w,然后设置为 0,然后保存。

彻底禁用 WordPress缩略图 自动裁剪功能 第2张-小羿

(medium_large_size_w 设置)

如果你想彻底禁止 WordPress缩略图,还可以通过下面的代码,「后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

//彻底禁止WordPress缩略图
add_filter( 'add_image_size', create_function( '', 'return 1;' ) );

彻底删除 WordPress后台 的新闻模块

之前发布过的「屏蔽 WordPress后台 没用到的模块」文章里面就有提到 删除 WordPress后台 的新闻模块,但随着 WordPress 版本的更新,方法好像失效了?

彻底删除 WordPress后台 的新闻模块 第1张-小羿

下面教大家彻底删除 WordPress后台 的新闻模块方法,毕竟这些新闻内容没什么值得看的,加载影响速度。

登陆你的 FTP 或者用 SSH,找到 /wp-admin/includes/dashboard.php 文件,把下面的代码删除,就不会有WordPress新闻了。

// WordPress News
wp_add_dashboard_widget( 'dashboard_primary', __( 'WordPress News' ), 'wp_dashboard_primary' );

为避免删错,建议先备份dashboard.php 文件,对照上面的代码。

给 WordPress模板 添加 ”上一篇“ 和 ”下一篇“ 功能

现在的大多数 WordPress模板 都有 ”上一篇“ 和 ”下一篇“ 功能了,可以方便读者,看下一篇文章。如果刚好你用的 WordPress模板 没有这个功能,下面教你如何添加:

后台」→「外观」→「编辑」 「single.php」文件,通常在 <?php comments_template(); ?> 的上面添加以下代码,也可以根据自己的需求,找位置添加

<?php if (get_previous_post()) { previous_post_link('上一篇: %link');} else {echo "没有了,已经是最后文章";} ?>

<?php if (get_next_post()) { next_post_link('下一篇: %link');} else {echo "没有了,已经是最新文章";} ?>

CSS样式这里就不提供了,效果看本站!

下面深入了解 ”上一篇“ 和 ”下一篇“ 的函数格式:

<?php previous_post_link($format, $link, $in_same_cat = false, $excluded_categories = ""); ?>

<?php next_post_link($format, $in_same_cat = false, $excluded_categories = ""); ?>

参数说明:

$format:格式化被显示的字符串,上一篇函数缺省值是"'« %link",下一篇函数缺省值是"%link »"。

$link:被显示的字符串,缺省值是上一篇或下一篇的"$title",也可以设置为其它你想显示的字符串,就是设置瞄点文字的地方。

$in_same_cat :表示是显示是不是只显示同一分类下的文章,缺省值false表示显示所有分类下的文章,可以写true,表示只显示当前文章分类下的文章。

$excluded_categories:表示在显示上一篇或下一篇时是否排除掉某分类,缺省不排除,如果排除,把要排除的分类的ID列在此处,以英文逗号分隔.

直接给出只显示同分类下的上一篇和下一篇的链接代码

<?php previous_post_link("上一篇: %link","%title",true) ?>

<?php next_post_link("下一篇: %link","%title",true) ?>

判断是否为最新日志

判断上一篇或下一篇是否有日志

<?php?if?(get_previous_post())?{?previous_post_link("上一篇:?%link","%title",true);}?else?{?echo?"上一篇:没有了,已经是最后文章";}??>

<?php?if?(get_next_post())?{?next_post_link("下一篇:?%link","%title",true);}?else?{?echo?"下一篇:没有了,已经是最新文章";}??>

上面的代码我默认设置为同一分类下的上一篇和下一篇了,如果不需要,则把true改成false,或者直接删除true即可。

这里引申出一个问题,如果只显示同一分类下的上一篇和下一篇,当没文章时依然会显示空白,而不是输出代码中的“已经是最后文章“,解决办法是给特定的分类下指定ID

<?php
$categories = get_the_category();
$categoryIDS = array();
foreach ($categories as $category) {
array_push($categoryIDS, $category->term_id);
}
$categoryIDS = implode(",", $categoryIDS);
?>
<?php if (get_previous_post($categoryIDS)) { previous_post_link("上一篇: %link","%title",true);} else { echo "上一篇:没有了,已经是最后文章";} ?>
<?php if (get_next_post($categoryIDS)) { next_post_link("下一篇: %link","%title",true);} else { echo "下一篇:没有了,已经是最新文章";} ?>

喜欢折腾的还可以参考下WordPress官方的函数说明:「next post link 」「previous post link

给 WordPress 新发布的文章添加 “New”

有时候我们发布的文章比较多,需要添加「New」字样或 图标 让读者更好区分哪些是当天的新文章,下面教大家如何在 WordPress 给新文章添加「New」标记。

给 WordPress 新发布的文章添加 “New” 第1张-小羿

1.「后台」→「外观」→「编辑」→「 index.php」 文件,然后找到 <?php the_title(); ?> 代码,在后面加上

<?php
$t1=$post->post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff<24){echo "<img src='https://wlg.com/new.gif' alt='最新文章图标'>";}
?>

2.其中 https://wlg.com/new.gif 图标需要改成你自己的图标哦,不会做图标?→「这里有

如果不想用图标,直接用文字,可以用下面的代码

<?php
$t1=$post->post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff<24){echo "<span style='color:red;'>New</span>";}
?>

原理就是通过判断当前系统时间,并与日志发布时间进行比较,如果差值小于 24 小时,则紧随标题呈现 “New” 标记。

WordPress 的 wp-config.php 配置文件技巧

wp-config.php 是 WordPress 的配置文件,网站的安装设置都在里面,其中还有一些技巧代码,刚接触 WordPress 的用户可以参考:

保持站点数据库精简

在比较大型的 WordPress 站点中,保持数据库精简和干净是非常重要的,而 WordPress 数据库中保存了一些非必要的数据,比如缓存和文章版本。

我们可以非常简单的限制文章的版本数量,以免文章版本占用过多的数据库空间,拖慢数据库性能。在 wp-config.php 文件中加入下面一行代码,即可限制文章的历史版本数为 3,对于不经常修改文章的网站来说,3个文章历史版本足够用了。

define('WP_POST_REVISIONS', 3);

如果你觉得自己的站点不需要这个功能,可以使用下面的代码彻底禁用文章历史版本功能。

define( 'WP_POST_REVISIONS', false );

WordPress 在数据库中保存了移动到回收站中的文章、页面、附件和评论,默认情况下,30天后,WordPress 会自动清理回收站中的数据,我们可以自定义这些数据在回收站中保存的时间,下面的代码,设置了这个时间为1天,数据移动到回收站中一天之后,会被自动清理。

define( 'EMPTY_TRASH_DAYS', 1 );

在后台编辑图片时,WordPress会创建一个原图的副本,以便我们可以随时还原,我们可以通过设置改变这个行为,让 WordPress 在编辑图片时,直接覆盖原图,以节省服务器空间,直接定义常量IMAGE_EDIT_OVERWRITE 的值为 TRUE 即可。

define( 'IMAGE_EDIT_OVERWRITE', true );

提高安全性

如果你的主机支付 SSL,为了确保登录帐号密码不被泄露,我们应该为 WordPress 启用强制 SSL 登录,加密登录过程中的用户名和密码数据,在 wp-config.php文件中加入以下配置即可实现这个功能。

define('FORCE_SSL_LOGIN', true);

同时,我们也可以设置 WordPress 后台全部使用 SSL 协议。

define('FORCE_SSL_ADMIN', true);

防止不懂技术的客户不小心损坏程序

为不懂技术的客户开发 WordPress 站点的时候,经常会有客户不小心在后台修改坏了 WordPress 主题或插件的代码、甚至删除了主题或插件导致站点损坏。其实对于不懂技术的客户,允许他们在后台修改代码或者网站程序文件是没有必要的,同时也是非常危险的,万一不小心弄坏了网站,只会为双方带来不必要的麻烦。

为了解决这个问题,WordPress 为我们提供了一条配置,可以让我们禁用掉所有在后台修改程序文件的功能,包括主题插件安装、修改、升级等操作。

在wp-config.php文件中加入以下代码即可禁用所有后台程序文件修改操作,同时发布文章、上传文件也不会受到影响。

define('DISALLOW_FILE_EDIT', true);

define('DISALLOW_FILE_MODS',true);

另外一个导致 WordPress 站点不安全的错误是,客户往往不会主动升级 WordPress 内核、主题、插件,因为客户很可能不知道这到底是干什么用的,升级会不会破坏网站。这种情况下,保证 WordPress 随时更新到最新版本就是我们的责任了,设置以下代码可以让 WordPress 在有新版本可用时及时自动更新到最新版本。WordPress 主题和插件默认情况下会自动更新。

define('WP_AUTO_UPDATE_CORE', true);

FTP 设置

如果的WordPress站点在每次需要更新时都提示你填写FTP凭据,我们实际上可以通过使用wp-config.php 来记住FTP 登录信息来节省大量的时间。下面的三个常量会告诉WordPress你的FTP主机、用户名和密码是什么。这样,我们不必每次升级时都提交这些信息。

define('FTP_HOST', 'ftp.yoursite.com');

define('FTP_USER', 'Your_FTP_Username');

define('FTP_PASS', 'Your_FTP_password');

一些优质的主机托管公司会为我们提供SSL FTP, 如果我们的主机支持SSL FTP,请确保打开SSL FTP连接增加额外的安全性。

define('FTP_SSL', true);

程序调试

当我们的网站出现错误时,我们可以通过在wp-config.php中打开调试模式,查看错误的具体信息,以方便排除错误。

define('WP_DEBUG', true);

由于将错误将显示在网站上会影响访问者浏览,一种更优雅的调试方式是使用调试日志。在WordPress中,实现这个功能很容易:设置 WP_DEBUG 为 true 后,再设置 WP_DEBUG_LOG 为 true,这将使 WordPress 将所有 PHP 错误或警告信息保存到 wp-content 目录中。

define( 'WP_DEBUG_LOG', true );

如果网站的数据库损坏了,我们可以设置允许 WordPress 自行修复,WP_ALLOW_REPAIR 为true即可。

define( 'WP_ALLOW_REPAIR', true );

请注意,以上常量仅在调试站点时使用,一旦你找到并解决了问题,记得将上面的常量值设置为false!

提高性能

wp-config.php文件允许我们调整一些调整,以确保 WordPress 获得更好的性能。首先要增加允许 WordPress 使用的最大内存。请注意,如果您的主机服务商限制了内存,这个设置是没用的。

define('WP_MEMORY_LIMIT', '96M');

如果我们的服务器上同时运行的有其他程序,我们可以限制 WordPress 使用的内存量,以免 WordPress 使用过多内存而影响其他程序工作。

define( 'WP_MAX_MEMORY_LIMIT', '256M' );

以上的技巧功能可以根据自己的情况添加,其中最实用的应该是 define('WP_DEBUG', true); 程序调试,很多时候 WordPress 故障,都是靠它来排查故障问题。

给 WordPress 添加评论“回复可见”功能

有时候文章中的某些内容,如文件下载,不想让 “伸手党” 直接拿走,可以提供 “评论回复可见” 的功能,WordPress 默认是没有提供这个功能,下面教大家如何实现,效果「看这里

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

// WordPress评论回复可见
function reply_to_read($atts, $content=null) {
extract(shortcode_atts(array("notice" => '<p class="reply-to-read">温馨提示: 此处内容需要<a href="#respond" title="评论本文">评论本文</a>后才能查看.</p>'), $atts));
$email = null;
$user_ID = (int) wp_get_current_user()->ID;
if ($user_ID > 0) {
$email = get_userdata($user_ID)->user_email;
//对博主直接显示内容
$admin_email = "xxx@aaa.com"; //博主Email
if ($email == $admin_email) {
return $content;
}
} else if (isset($_COOKIE['comment_author_email_' . COOKIEHASH])) {
$email = str_replace('%40', '@', $_COOKIE['comment_author_email_' . COOKIEHASH]);
} else {
return $notice;
}
if (empty($email)) {
return $notice;
}
global $wpdb;
$post_id = get_the_ID();
$query = "SELECT `comment_ID` FROM {$wpdb->comments} WHERE `comment_post_ID`={$post_id} and `comment_approved`='1' and `comment_author_email`='{$email}' LIMIT 1";
if ($wpdb->get_results($query)) {
return do_shortcode($content);
} else {
return $notice;
}
}

add_shortcode('reply', 'reply_to_read');

然后写文章的时候插入下面的短代码:

[reply]评论可见的内容[/reply]

[reply notice="自定义的提示信息"]评论可见的内容[/reply]

自动给 WordPress 添加特色图像

WordPress 的特色图像可以给文章添加缩略图,但是每次手动添加对于懒人来说就很麻烦了,下面的代码可自动将文章中的第一张图片设置为特色图像。

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

function wpforce_featured() {
global $post;
$already_has_thumb = has_post_thumbnail($post->ID);
if (!$already_has_thumb) {
$attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
if ($attached_image) {
foreach ($attached_image as $attachment_id => $attachment) {
set_post_thumbnail($post->ID, $attachment_id);
}
}
}
} //end function
add_action('the_post', 'wpforce_featured');
add_action('save_post', 'wpforce_featured');
add_action('draft_to_publish', 'wpforce_featured');
add_action('new_to_publish', 'wpforce_featured');
add_action('pending_to_publish', 'wpforce_featured');
add_action('future_to_publish', 'wpforce_featured');

如果当前文章中没有图片,但又想显示一张默认的缩略图该怎么办,可以将上面的代码修改一下,调用媒体库中某个图片作为默认的缩略图:

function wpforce_featured() {
global $post;
$already_has_thumb = has_post_thumbnail($post->ID);
if (!$already_has_thumb) {
$attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
if ($attached_image) {
foreach ($attached_image as $attachment_id => $attachment) {
set_post_thumbnail($post->ID, $attachment_id);
}
} else {
set_post_thumbnail($post->ID, '414');
}
}
} //end function
add_action('the_post', 'wpforce_featured');
add_action('save_post', 'wpforce_featured');
add_action('draft_to_publish', 'wpforce_featured');
add_action('new_to_publish', 'wpforce_featured');
add_action('pending_to_publish', 'wpforce_featured');
add_action('future_to_publish', 'wpforce_featured');

其中的数字414,是媒体库中某个图片附件的ID号。

说明

上面的代码只是一篇技术文章,可能会影响到之前添加的特色图像,所以不要轻易在自己的网站上做试验。

特色图像只适合不在乎空间流量和大小的用户使用,因为每张图片都会裁剪成多张大小不同的缩略图方便在不同的位置调用,最主要的是不支持外链,很浪费空间....

让 WordPress 搜索内容关键字高亮

为了让 WordPress 搜索页面的搜索结果体验更佳,可以让 WordPress 搜索内容关键字高亮显示,方法如下:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

function highlight_search_keywords($text){
if ( is_search() ) {
$s = get_search_query();
$keys = explode(' ', $s);
$text = preg_replace('/(' . implode('|', $keys) . ')/iu', '<strong class="highlight">$1</strong>', $text);
}
return $text;
}
add_filter( 'the_title', 'highlight_search_keywords' );
add_filter( 'the_excerpt', 'highlight_search_keywords' );

高亮的效果,可以自己通过CSS样式来修改。

让 WordPress 实现发文章时自动添加tag标签

让 WordPress 实现发文章时自动添加tag标签,如果你文章中已经有添加过的标签,那么发文章自动添加tag可以省下点事,提高效率,可以提取标题 或者 文章内容的tag添加,方法如下:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

// 自动给文章添加tag
add_action('save_post', 'auto_add_tags');
function auto_add_tags(){
$tags = get_tags( array('hide_empty' => false) );
$post_id = get_the_ID();
$post_content = get_post($post_id)->post_content;
if ($tags) {
foreach ( $tags as $tag ) {
// 如果文章内容出现了已使用过的标签,自动添加这些标签
if ( strpos($post_content, $tag->name) !== false)
wp_set_post_tags( $post_id, $tag->name, true );
}
}
}

只需将上述代码中的 post_content 替换为 post_title,就可以变成提取标题tag了,代码如下:

//自动给文章添加tag(标题版)
add_action('save_post', 'auto_add_tags');
function auto_add_tags(){
$tags = get_tags( array('hide_empty' => false) );
$post_id = get_the_ID();
$post_content = get_post($post_id)->post_content;
if ($tags) {
foreach ( $tags as $tag ) {
// 如果文章内容出现了已使用过的标签,自动添加这些标签
if ( strpos($post_content, $tag->name) !== false)
wp_set_post_tags( $post_id, $tag->name, true );
}
}
}

WordPress 调用当天文章和文章数

我们最常用的是调用最新文章,如何调用当天发布的文章呢?或者调用当天发布的文章的数量,这种情况一般用于一天发布了很多很多篇文章,可是首页显示的数量有限,只好告知来访的人今天发不了多少多少篇文章啦!

<?php 
$start = strtotime(date('Y-m-d'), time());
$start_ti = strtotime(get_the_time('Y-m-j'), time());
if($start == $start_ti){
echo '<span class="ribbon"></span>';
}
?>

WordPress 获取文章的评论人数方法

有时候做个活动需要统计人数,或者想让大家知道你这文章有多火,那么就需要这个功能了“获取当前文章的评论人数”,下面教大家实现WordPress 获取当前文章的评论人数

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

/* 获取文章的评论人数 by zwwooooo  */
function zfunc_comments_users($postid=0,$which=0) {
$comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论
if ($comments) {
$i=0; $j=0; $commentusers=array();
foreach ($comments as $comment) {
++$i;
if ($i==1) { $commentusers[] = $comment->comment_author_email; ++$j; }
if ( !in_array($comment->comment_author_email, $commentusers) ) {
$commentusers[] = $comment->comment_author_email;
++$j;
}
}
$output = array($j,$i);
$which = ($which == 0) ? 0 : 1;
return $output[$which]; //返回评论人数
}
return 0; //没有评论返回0
}

调用方法:<?php echo zfunc_comments_users($postid); ?>

其中$postid是当前文章id。一般通过$post->ID来获取,最终调用代码就是:<?php echo zfunc_comments_users($post->ID); ?>

如何获取所有评论数呢?

<?php echo zfunc_comments_users($postid, 1); ?>

WordPress 新增文章评论表单字段,如电话、QQ

WordPress的强大已经到了只有你想不到,没有wordpress做不到的,wordpress默认文章评论表单分别是昵称、邮箱、网址以及评论内容,这只能够满足一般博客网站的需求,如何增加更多的评论字段?我们可以使用wordpress评论自定义字段实现,有点像文章的自定义字段功能,对应数据库表就是wp_commentmeta,和文章的postmeta数据表差不多。

说明:本教程不适合使用comment_form()函数的 WordPress 主题

1、找到主题的comments.php文件并对其进行编辑,在输入邮箱的字段代码下面添加以下代码:

<p>
<label for="tel">电话</label>
<input type="text" name="tel" class="text" id="tel" value="<?php echo get_comment_meta($comment->comment_ID,'tel',true); ?>" tabindex="3"/>
</p>
<p>
<label for="qq">QQ号</label>
<input type="text" name="qq" class="text" id="qq" value="<?php echo get_comment_meta($comment->comment_ID,'qq',true); ?>" tabindex="4"/>
</p>

2、在主题的functions.php文件的第一行<?php下面添加代码:

function wp_insert_tel($comment_ID,$commmentdata) {
$tel = isset($_POST['tel']) ? $_POST['tel'] : false;
$qq = isset($_POST['qq']) ? $_POST['qq'] : false;
update_comment_meta($comment_ID,'tel',$tel);//tel 是存储在数据库里的字段名字
update_comment_meta($comment_ID,'qq',$qq);//qq 是存储在数据库里的字段名字
}

add_action()参数中的10和2分别表示该函数执行的优先级是10(默认值,值越小优先级越高),该函数接受2个参数。

3、在后台——评论中的列表里显示添加的字段,接着第二步的代码继续添加以下代码:

add_filter( 'manage_edit-comments_columns', 'my_comments_columns' );
add_action( 'manage_comments_custom_column', 'output_my_comments_columns', 10, 2 );
function my_comments_columns( $columns ){
$columns[ 'tel' ] = __( '电话' ); //电话是代表列的名字
$columns[ 'qq' ] = __( 'QQ号' ); //QQ号是代表列的名字
return $columns;
}
function output_my_comments_columns( $column_name, $comment_id ){
switch( $column_name ) {
case "tel" :
echo get_comment_meta( $comment_id, 'tel', true );
break;
case "qq" :
echo get_comment_meta( $comment_id, 'qq', true );
break;
}
}

在 WordPress 导航栏 添加 “随便看看” 功能

有些网站在导航栏 添加 “随便看看” 功能,就是点击后随机出现一篇文章的效果,对于无聊不知道看什么的读者或许有点用吧,下面教大家实现方法:

后台」→「外观」→「编辑」 「functions.php」文件,把下面的代码添加进去:

//导航菜单添加手气不错按钮
function random_postlite() {
$loop = new WP_Query( array( 'post_type' => array(post),'orderby' => 'rand','posts_per_page' => 1 ) );
while ( $loop->have_posts() ) : $loop->the_post();
wp_redirect( get_permalink() );
endwhile;
}
if ( isset( $_GET['random'] ) )
add_action( 'template_redirect', 'random_postlite' );

然后在「后台」→「外观」→「菜单」中添加一个链接类型的菜单,在URL中输入:https://你的网站/?random,在链接文本中输入:随便看看。

WordPress 自动给文章 Tag 添加链接

我们写文章的时候会给相关的 Tag 添加链接,这样可以给读者提供相关的关键词链接文章,也可以优化网站的内链。每篇文章手动去添加的话,就很麻烦了,下面教大家 WordPress 自动给文章 Tag 添加链接的方法:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

//连接数量
$match_num_from = 1; //一个关键字少于多少不替换
$match_num_to = 10; //一个关键字最多替换

//连接到WordPress的模块
add_filter('the_content','tag_link',1);

//按长度排序
function tag_sort($a, $b){
if ( $a->name == $b->name ) return 0;
return ( strlen($a->name) > strlen($b->name) ) ? -1 : 1;
}

//改变标签关键字
function tag_link($content){
global $match_num_from,$match_num_to;
$posttags = get_the_tags();
if ($posttags) {
usort($posttags, "tag_sort");
foreach($posttags as $tag) {
$link = get_tag_link($tag->term_id);
$keyword = $tag->name;

//连接代码
$cleankeyword = stripslashes($keyword);
$url = "<a href=\"$link\" title=\"".str_replace('%s',addcslashes($cleankeyword, '$'),__('View all posts in %s'))."\"";
$url .= ' target="_blank"';
$url .= ">".addcslashes($cleankeyword, '$')."</a>";
$limit = rand($match_num_from,$match_num_to);

//不连接的代码
$content = preg_replace( '|(<a[^>]+>)(.*)('.$ex_word.')(.*)(</a[^>]*>)|U'.$case, '$1$2%&&&&&%$4$5', $content);
$content = preg_replace( '|(<img)(.*?)('.$ex_word.')(.*?)(>)|U'.$case, '$1$2%&&&&&%$4$5', $content);
$cleankeyword = preg_quote($cleankeyword,'\'');
$regEx = '\'(?!((<.*?)|(<a.*?)))('. $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))\'s' . $case;
$content = preg_replace($regEx,$url,$content,$limit);
$content = str_replace( '%&&&&&%', stripslashes($ex_word), $content);
}
}
return $content;
}

WordPress 调用置顶文章显示方法

WordPress 的 query_posts 函数可以实现WordPress 调用置顶文章,query_posts 函数作用就是对文章进行检索、挑选、排序,在其后的LOOP循环中使用经过挑选、排序的文章。

有时候我们需要置顶某篇热门文章 或者 广告文什么的,下面来一起看看WordPress 调用置顶文章显示方法:

<?php
query_posts('posts_per_page=10&ignore_sticky_posts=1&orderby=rand');
while(have_posts()):the_post();
echo '<li>';the_title();echo '</li>';
endwhile;
wp_reset_query();

上面代码将随机列出一条文章的标题。

接下来,我们就是要通过对query_posts的参数进行调整,挑选出置顶的文章列表了。

$query_post = array(
'posts_per_page' => 10,
'post__in' => get_option('sticky_posts'),
'caller_get_posts' => 1
);
query_posts($query_post);
?>
<ul style="display:none;">
<?php while(have_posts()):the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php
wp_reset_query();

参数用一个数组的形式放在$query_post中,关键的参数为'post__in' =>get_option('sticky_posts')和'caller_get_posts' => 0。

'post__in' => get_option('sticky_posts')确定了该LOOP调用的是置顶文章列表。

'caller_get_posts'的作用是排除非指定性文章,即除了置顶文章之外,不显示其他的文章。

'posts_per_page' => 10,控制文章的数量

不添加的情况下,如果置顶文章条目不足'posts_per_page'规定的值,会用最新文章替补完整。

禁用 WordPress 搜索功能

WordPress 搜索是 WordPress 比较弱的功能,如果你的文章数量太多,流量比较大,那么 WordPress 搜索 会加大数据库查询次数,对服务器压力很大,除了可以用「WP Super Cache」插件缓存外,还是建议用百度站内搜索替代,下面教大家禁用 WordPress 搜索功能方法:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

function fb_filter_query( $query, $error = true ) {
if ( is_search() ) {
$query->is_search = false;
$query->query_vars[s] = false;
$query->query[s] = false;
if ( $error == true )
$query->is_404 = true;
}
}
add_action( 'parse_query', 'fb_filter_query' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

在 WordPress 文章插入表格方法(代码版)

WordPress 默认是不支持插入表格,给大家推荐过 WordPress插件「TinyMCE Advanced」可以增强编辑器,其中就有插入表格功能,不过我们只需要表格功能,就没必要安装一个插件了,下面教大家如何在 WordPress 文章插入表格:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

//插入表格按钮
function appthemes_add_quicktags() {
?><script type="text/javascript">// <![CDATA[
QTags.addButton( 'tables', '表格按钮', '<div class="table-container"><table><tbody><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th><th>Header 6</th><th>Header 7</th><th>Header 8</th></tr><tr><td>row1_cell1</td><td>row1_cell2</td><td>row1_cell3</td><td>row1_cell4</td><td>row1_cell5</td><td>row1_cell6</td><td>row1_cell7</td><td>row1_cell8</td></tr><tr><td>row2_cell1</td><td>row2_cell2</td><td>row2_cell3</td><td>row2_cell4</td><td>row2_cell5</td><td>row2_cell6</td><td>row2_cell7</td><td>row2_cell8</td></tr><tr><td>row3_cell1</td><td>row3_cell2</td><td>row3_cell3</td><td>row3_cell4</td><td>row3_cell5</td><td>row3_cell6</td><td>row3_cell7</td><td>row3_cell8</td></tr></tbody></table></div>' );
// ]]></script><?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

然后需要插入表格时候,在编辑器点击「文本模式」,就会有一个「插入表格」的按钮了。

在 WordPress 文章插入表格方法(代码版) 第1张-小羿

(在 WordPress 文章插入表格)

然后再点击「可视化」,在表格里面添加内容就可以了。需要美化表格样式,自己写CSS咯!

去除 WordPress 链接 自动添加 Noopener Noreferrer

从 WordPress 4.7.4 版本开始,WordPress 默认就会给链接添加 "Noopener Noreferrer" 属性,主要就是用来防范新窗口打开链接时可能存在的钓鱼攻击, 因此 WordPress 是作为安全性内容自动添加的。

如果你想取消 "Noopener Noreferrer" 属性教程如下:(其实是不建议取消的,但如果你特别需求的话)

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

// 取消 "Noopener Noreferrer" 
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');
function tinymce_allow_unsafe_link_target( $mceInit ) {
$mceInit['allow_unsafe_link_target']=true;
return $mceInit;
}

之后新发布文章里面的链接,就不会带 "Noopener Noreferrer" 属性,旧文章还是有的,需要手动编辑或者通过数据库批量修改。

给 WordPress 添加复制文字自动加版权信息

有时候我们原创的文章不想轻易被别人复制粘贴走,或者采集走,可以添加复制文字自动加版权信息,虽然没多大卵用,但至少可以达到一点提醒的效果吧。

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

//复制文字自动添加版权信息
function v7v3_copyright() { ?>
<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br /><br /> 原文信息: <?php if(is_single()){ the_title();}?> 原文链接:<a href='"+document.location.href+"'>"+document.location.href+"</a>";
var copy_text = selection + pagelink;
var new_div = document.createElement('div');
new_div.style.left='-99999px';
new_div.style.position='absolute';
body_element.appendChild(new_div );
new_div.innerHTML = copy_text ;
selection.selectAllChildren(new_div );
window.setTimeout(function() {
body_element.removeChild(new_div );
},0);
}
document.oncopy = addLink;
</script>
<?php
}
add_action( 'wp_head', 'v7v3_copyright');

删除 WordPress 未用到的图片

我们删除 WordPress 文章,但是文章中的图片没有被删除,下面教大家如何清理未用到的图片,释放服务器空间。另外删除没用的缩略图尺寸图片,可以用「Delete not used image」插件。

后台」→「多媒体」→「媒体库」,选择 尚未附加 ,就会筛选出没有用到的图片了,注意哦,有些图片是用在模板上的图,如LOGO,所有选择性删除就可以了。

小技巧:删除 WordPress 未用到的图片 第1张-小羿

让 WordPress 文本小工具支持PHP代码

WordPress的小工具里面有一个文本小工具,默认只能支持 HTML 代码,如果能支持PHP代码,那么可以实现一些功能,下面教大家如何让 WordPress 文本小工具支持PHP代码:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

    add_filter('widget_text', 'php_text', 99);
function php_text($text) {
if (strpos($text, '<' . '?') !== false) {
ob_start();
eval('?' . '>' . $text);
$text = ob_get_contents();
ob_end_clean();
}
return $text;
}

把Bing图片作为 WordPress 登录页面的背景图

必应Bing搜索每天都会在搜索首页更新美图,如果想你的WordPress 登录页面也用上这些图片,可以看下面的方法:

//自定义登录页面背景
function custom_login_head(){
$str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?idx=0&n=1');
if(preg_match("/<url>(.+?)<\/url>/ies",$str,$matches)){
$imgurl='http://cn.bing.com'.$matches[1];
echo'<style type="text/css">body{background: url('.$imgurl.');background-attachment:fixed;width:100%;height:100%;background-image:url('.$imgurl.');background-attachment:fixed;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url('.$imgurl.') 0;background-attachment:fixed;background-repeat:no-repeat\9;background-image:none\9;}h1 a { background-image:url('.get_bloginfo('url').'/favicon.ico)!important;width:32px;height:32px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}#loginform {background-color:rgba(251,251,251,0.3)!important;}.login label,a{color:#000!important;}</style>';
}}
add_action('login_head', 'custom_login_head');
add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));
add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));

WordPress 限制内容只给会员或者登录用户浏览

有时候一些内容不想伸手党直接拿完就走,之前给大家分享过「给 WordPress 添加评论“回复可见”功能」,如果怕评论太水,还可以限制给会员或者登录用户浏览内容。

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

function member( $atts, $content = null ) {
if ( is_user_logged_in() && !is_null( $content ) && !is_feed() ) {
return $content;
return '';
} else {

$yonlendir = get_permalink();
$form = wp_login_form(array('echo' => false, 'redirect' => $yonlendir ));
return $form;
}
}
add_shortcode( 'mem', 'member' );

使用方法:[mem] ..已登录用户才可以看到的内容.. [/mem]

给 WordPress 文章添加点赞功能

点赞可以让读者对你文章的认可,目前大多数 WordPress 模板 都有点赞功能,如果你的模板还没有,手动来添加一个吧:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
add_action('wp_ajax_bigfa_like', 'bigfa_like');
function bigfa_like(){
global $wpdb,$post;
$id = $_POST["um_id"];
$action = $_POST["um_action"];
if ( $action == 'ding'){
$bigfa_raters = get_post_meta($id,'bigfa_ding',true);
$expire = time() + 99999999;
$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
update_post_meta($id, 'bigfa_ding', 1);
}
else {
update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
}

echo get_post_meta($id,'bigfa_ding',true);

}

die;
}

后台」→「外观」→「编辑」→ 「footer.php」文件,把下面的代码添加进去:

<script type="text/javascript">
$.fn.postLike = function() {
if ($(this).hasClass('done')) {
return false;
} else {
$(this).addClass('done');
var id = $(this).data("id"),
action = $(this).data('action'),
rateHolder = $(this).children('.count');
var ajax_data = {
action: "bigfa_like",
um_id: id,
um_action: action
};
$.post("/wp-admin/admin-ajax.php", ajax_data,
function(data) {
$(rateHolder).html(data);
});
return false;
}
};
$(document).on("click", ".favorite",
function() {
$(this).postLike();
});
</script>

后台」→「外观」→「编辑」→ 「single.php」文件,搜索这段代码 <?php the_content(); ?> ,在这段代码后面添加以下代码

<div class="post-like">
<a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>">喜欢 <span class="count">
<?php if( get_post_meta($post->ID,'bigfa_ding',true) ){
echo get_post_meta($post->ID,'bigfa_ding',true);
} else {
echo '0';
}?></span>
</a>
</div>

最后加上CSS样式就完成了:

.post-like{text-align:center;padding:10px}
.post-like a{ background-color:#21759B;border-radius: 3px;color: #FFFFFF;font-size: 12px;padding: 5px 10px;text-decoration: none;outline:none}
.post-like a.done, .post-like a:hover{background-color:#eee;color:#21759B;}
.post-like a.done{cursor:not-allowed}

WordPress 上传图片自动压缩图片大小

图片太大会影响用户体验,加载老半天不出来,所以需要适当的压缩图片体积,下面教大家WordPress 上传图片自动压缩图片大小,注意哦,仅支持jpg格式。

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

function ajx_sharpen_resized_files( $resized_file ) {

$image = wp_load_image( $resized_file );
if ( !is_resource( $image ) )
return new WP_Error( 'error_loading_image', $image, $file );

$size = @getimagesize( $resized_file );
if ( !$size )
return new WP_Error('invalid_image', __('Could not read image size'), $file);
list($orig_w, $orig_h, $orig_type) = $size;

switch ( $orig_type ) {
case IMAGETYPE_JPEG:
$matrix = array(
array(-1, -1, -1),
array(-1, 16, -1),
array(-1, -1, -1),
);

$divisor = array_sum(array_map('array_sum', $matrix));
$offset = 0;
imageconvolution($image, $matrix, $divisor, $offset);
imagejpeg($image, $resized_file,apply_filters( 'jpeg_quality', 90, 'edit_image' ));
break;
case IMAGETYPE_PNG:
return $resized_file;
case IMAGETYPE_GIF:
return $resized_file;
}

return $resized_file;
}

add_filter('image_make_intermediate_size', 'ajx_sharpen_resized_files',900);

给 WordPress 文章添加阅读次数统计

一般 WordPress 实现文章阅读次数,都是用 wp-postviews 插件,其实用代码也可以简单实现:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

//postviews
function get_post_views ($post_id) {
$count_key = 'views';
$count = get_post_meta($post_id, $count_key, true);
if ($count == '') {
delete_post_meta($post_id, $count_key);
add_post_meta($post_id, $count_key, '0');
$count = '0';
}
echo number_format_i18n($count);
}
function set_post_views () {
global $post;
$post_id = $post -> ID;
$count_key = 'views';
$count = get_post_meta($post_id, $count_key, true);
if (is_single() || is_page()) {
if ($count == '') {
delete_post_meta($post_id, $count_key);
add_post_meta($post_id, $count_key, '0');
} else {
update_post_meta($post_id, $count_key, $count + 1);
}
}
}
add_action('get_header', 'set_post_views');

然后在你需要显示的地方插入下面的代码,一般需要添加的文件有 index.php、single.php、archive.php

<?php get_post_views($post -> ID); ?> 次阅读

相关文章:[给 WordPress 文章添加点赞功能

实现 WordPress 主页排除某些分类文章

有时候 WordPress 某些分类的文章不想在主页显示,方法如下:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

function exclude_category_home( $query ) {
if ( $query->is_home ) {
$query->set( 'cat', '-1,-2' );
}
return $query;
}
add_filter( 'pre_get_posts', 'exclude_category_home' );

其中 'cat', '-1,-2' 的数字,写上分类ID就可以了。

给 WordPress 文章 添加展开/收缩功能

有时候 WordPress 文章里面一些不太重要的内容,想隐藏起来,免得文章太长影响用户体验,可以通过展开/收缩功能,下面教大家给 WordPress 文章 添加展开/收缩功能:

1.下面的 JS 代码加入到body之前

<script>jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});</script>

2.下面的代码加入到 functions.php 文件中

function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin: 0.5em 0;">
<div class="xControl">
<span class="xTitle">'.$title.'</span>
<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');

3.代码使用:

标题

4.CSS代码:

.xControl {
padding-left: 32px;
}

5.添加按钮到编辑器,下面的代码加入到 functions.php 文件中

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?><script type="text/javascript">// <![CDATA[
QTags.addButton( 'collapse', '展开/收缩按钮', '


说明文字' );
// ]]></script><?php } add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

按钮使用方法:先单击一次,然后输入你想要收缩的内容,再单击一次按钮,然后替换替换其中的说明文字

给 WordPress文章 添加输入密码后可见隐藏内容

早前给大家发过「给 WordPress 添加评论“回复可见”功能」和「WordPress 限制内容只给会员或者登录用户浏览」,除了这两种方法外,还有一种文章部分内容隐藏输入密码后可见,下面教大家如何实现:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

首先是建立短代码:

function e_secret($atts, $content=null){
extract(shortcode_atts(array('key'=>null), $atts));
if(isset($_POST['e_secret_key']) && $_POST['e_secret_key']==$key){
return '
<div class="e-secret">'.$content.'</div>
';
}
else{
return '
<form class="e-secret" action="'.get_permalink().'" method="post" name="e-secret"><label>输入密码查看加密内容:</label><input type="password" name="e_secret_key" class="euc-y-i" maxlength="50"><input type="submit" class="euc-y-s" value="确定">
<div class="euc-clear"></div>
</form>
';
}
}
add_shortcode('ssecret','e_secret');

然后就是加载样式啊,这里是云落自己写的代码,我在这里设定了一下,只有上面那个短代码的页面才加载样式,其他页面一律不加载,这个是比较不错的地方的

//加载密码可见的样式
function secret_css() {
global $post,$posts;
foreach ($posts as $post) {
if ( has_shortcode( $post->post_content, 'ssecret') ){
echo '<style type="text/css">.e-secret{margin:20px 0;padding:20px;height:60px;background:#f8f8f8}.e-secret input.euc-y-i[type=password]{float:left;background:#fff;width:100%;line-height:36px;margin-top:5px;border-radius:3px}.e-secret input.euc-y-s[type=submit]{float:right;margin-top:-47px;width:30%;margin-right:1px;border-radius:0 3px 3px 0}input.euc-y-s[type=submit]{background-color:#3498db;color:#fff;font-size:21px;box-shadow:none;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s;-webkit-backface-visibility:hidden;position:relative;cursor:pointer;padding:13px 20px;text-align:center;border-radius:50px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:0;height:auto;outline:medium;line-height:20px;margin:0}input.euc-y-s[type=submit]:hover{background-color:#5dade2}input.euc-y-i[type=password],input.euc-y-i[type=text]{border:1px solid #F2EFEF;color:#777;display:block;background:#FCFCFC;font-size:18px;transition:all .5s ease 0;outline:0;box-sizing:border-box;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;padding:5px 16px;margin:0;height:auto;line-height:30px}input.euc-y-i[type=password]:hover,input.euc-y-i[type=text]:hover{border:1px solid #56b4ef;box-shadow:0 0 4px #56b4ef}</style>';}}}
add_action('wp_head', 'secret_css');

最后就是给编辑器添加个按钮啦

//添加编辑器密码可见按钮
function mmkj_tags($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'mimakejian', '密码可见', '[ssecret key="输入密码"]', '[/ssecret]' );
function yunluo_shortcode() {
}
</script>
<?php
}
add_action('after_wp_tiny_mce', 'mmkj_tags');

给 WordPress 网站添加独立下载页面功能(纯代码)

首先简单介绍下下载单页,一般来说下载单页就是在当前文章页插入一个按钮或者一个面板,点击之后的下载文件是在一个单独的页面的,这样的好处就是可以增加很多的下载说明以及广告,另外这样也可以增加访客的浏览量。我上次看到有人用安装2个WordPress来实现这个功能也是醉醉的。

第一步,增加页面

首先第一步就是给主题增加一个页面,找到主题的默认页面文件,一般叫page.php,将他复制一份,重命名为download.php,然后就是对这个文件稍微改改了。

第二步,修改下载模板

首先打开download.php文件,将

<?php
get_header();
?>

替换为下面这段代码

<?php
/*
template name: 下载模板页面
description: template for WordPress theme
*/
get_header();
?>

然后在下面添加这短代码

<?php
$pid = isset( $_GET['pid'] ) ? trim(htmlspecialchars($_GET['pid'], ENT_QUOTES)) : '';
if( !$pid ) { wp_redirect( home_url() );}
$title = get_the_title($pid);
$values1 = get_post_custom_values('download_name',$pid);
empty($values1) ? Header('Location:/') : $theCode1 = $values1[0];
$values2 = get_post_custom_values('download_size',$pid);
empty($values2) ? Header('Location:/') : $theCode2 = $values2[0];
$values3 = get_post_custom_values('download_link',$pid);
empty($values3) ? Header('Location:/') : $theCode3 = $values3[0];
?>

其实上面这段代码才是下载单页的核心代码,看上去也是很简单吧。 然后在下面合适的地方放入以下代码,这里就是你用来显示下载文件信息的地方,具体地址你们自己看吧。

 <h2>资源信息</h2>
<div class="alert alert-success">
<ul class="infos clearfix">
<li>资源名称:<?php echo $theCode1; ?></li>
<li>文件大小:<?php echo $theCode2; ?></li>
<li>更新日期:<?php echo get_post($pid)->post_modified; ?></li>
</ul>
</div>
<h2>下载地址</h2>
<div id="filelink">
<center><?php echo $theCode3; ?></center>
</div>
<div class="clearfix"></div>
<h2>下载说明</h2>
<div class="alert alert-info" role="alert">
下载说明文字, 下载说明文字, 下载说明文字, 下载说明文字, 下载说明文字, 下载说明文字, 下载说明文字
</div>
<h2>免责声明</h2>
<div class="alert alert-warning" role="alert">
免责声明文字, 下载说明文字, 下载说明文字, 下载说明文字, 下载说明文字, 下载说明文字, 下载说明文字, 下载说明文字, 下载说明文字
</div>

经过上面的修改,这个文件就可以保存了,记住编码是utf-8的哦。

这里说下,理论上来说,这里其实就已经做好了下载单页的功能,只是在使用的时候不方便,不实用,所以为了方便使用还需要继续修改代码。

新建页面

打开后台,新建页面,选择模板,应该会有一个下载模板页面,选择那个,然后页面名字就叫下载中心吧,然后页面的别名就是download,其实如果你觉得页面名字英文的不太好,也可以写做其他名字,但是别名一定要是download,也就是说这个页面的URL应该是这样的http://localhost/download,做好之后发布就好了,别去访问页面哦,一般来说页面会自动回到首页的,这个页面是不可以直接访问的,这里就做的可以了,进入下一个步骤。

给 WordPress 网站添加独立下载页面功能(纯代码) 第1张-小羿

建立短代码

打开主题的functions.php文件,把下面代码放进去

//下载单页短代码
function page_download($atts, $content = null) {
return '<a class="lhb" href="'.site_url().'/download?pid='.get_the_ID().'" target="_blank" rel="nofollow">' . $content . '</a>';
}
add_shortcode('pdownload', 'page_download');

嗯,这样就可以了,这段代码为了建立download短代码的,但是还没有结束,接着看下一步。

添加编辑器按钮

这里说的按钮是WordPress默认编辑器,而且是文本编辑器,在functions.php添加下面代码就可以了。

//添加编辑器按钮
function download_tags($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'hy_download', '下载按钮', '[pdownload]', '[/pdownload]' );
function download_shortcode() {
}
</script>
<?php
}
add_action('after_wp_tiny_mce', 'download_tags');

给 WordPress 网站添加独立下载页面功能(纯代码) 第2张-小羿 使用这段代码可以在WordPress文本编辑器出来一个按钮,使用的时候先写几个字,比如点击下载,然后选择文字之后点击按钮,就好了。做到这里下载单页就做好了,下面说说具体怎么使用吧。

使用方法

做好了开始使用下载单页,我们需要用自定义栏目栏目,发布文章的时候先把自定义栏目打开,然后在自定义栏目那里有一个新建自定义栏目

给 WordPress 网站添加独立下载页面功能(纯代码) 第3张-小羿

输入download_name,然后右侧输入文件的名字,比如:苍老师的那些事.RMVB,继续输入自定义栏目 download_size,然后右侧输入文件的大小,比如:233MB,然后继续输入自定义栏目 download_link,然后右侧输入文件的下载链接,注意,这里需要输入的是A标签代码,比如:点击下载

给 WordPress 网站添加独立下载页面功能(纯代码) 第4张-小羿

这里做好之后,在WordPress文本编辑器输入立刻下载,然后点击按钮包围文字,然后发布文章吧,然后去看看文章,点击下载按钮是不是进入了一个单独的页面。

给 WordPress 网站添加独立下载页面功能(纯代码) 第5张-小羿

后语

问:这里有几个再说下,每次添加文件下载的时候都需要输入那些自定义栏目?答:其实只需要第一次使用的时候需要新建,从第二次开始就直接下拉就可以了,不需要重复输入的。

问:填写下载文件信息的时候可以不需要这样,像插件一样直接输入文件信息吗?

答:其实是可以的,但是这个不是本文的重点,所以没有写,如果想实现那种效果可以去看看云落之前分享的自定义栏目框架的文章。

问:可以使用多个下载地址吗?

答:完全可以的,在下载链接栏目输入多个A标签即可。

问:可以像插件一样分为百度网盘,360网盘,陈通网盘这样直接输入链接吗?

答:其实是可以的,但是这个不是本文重点,其实使用多个A标签一样可以实现类似的效果,如果像插件那样分网盘,只是多一些重复代码而已。

问:单页的那个download别名可以使用其他的吗?比如:xiazai?

答:不推荐修改别名,如果一定要修改别名,保持短代码里面的download和页面别名一样。

屏蔽 WordPress 自带的小工具

WordPress 自带的小工具功能比较弱,现在大多数第三方主题都有带有比较强大的小工具,WordPress 自带的小工具没用到我们可以来屏蔽掉,或许会适当加快点 WordPress 速度?

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

function unregister_rss_widget(){
unregister_widget('WP_Widget_RSS');
}
add_action('widgets_init','unregister_rss_widget');

对应参数:

WP_Widget_Pages = 您博客的 WordPress 页面 WP_Widget_Calendar = 您博客的文章日程表 WP_Widget_Archives = 您博客文章的月度存档 WP_Widget_Links = 您的链接表 WP_Widget_Meta = 登入/登出,管理,Feed 和 WordPress 链接 WP_Widget_Search = 您博客的搜索框 WP_Widget_Text = 任意的HTML文本 WP_Widget_Categories = 分类目录 WP_Widget_Recent_Posts = 近期文章 WP_Widget_Recent_Comments = 近期评论 WP_Widget_RSS = RSS订阅 WP_Widget_Tag_Cloud = 标签云 WP_Nav_Menu_Widget = 自定义菜单

禁用 WordPress 4.7 新增的PDF缩略图预览功能

PDF缩略图预览功能从 WordPress 4.7 才有的功能,但大多数 WordPress 都不需要用到PDF缩略图功能,所以我们可以屏蔽它。

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

// 禁用PDF缩略图
function wpb_disable_pdf_previews() {
$fallbacksizes = array();
return $fallbacksizes;
}
add_filter('fallback_intermediate_image_sizes', 'wpb_disable_pdf_previews');

WordPress 给文章添加评论关闭的时间

WordPress 是可以设置多少天后自动关闭文章评论,可以减少垃圾评论和数据库压力,接下来教大家给文章添加WordPress文章评论关闭的时间:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

add_action( 'comment_form_top', 'topic_closes_in' );
function topic_closes_in() {
global $post;
if ($post->comment_status == 'open') {
$close_comments_days_old = get_option( 'close_comments_days_old' );
$expires = strtotime( "{$post->post_date_gmt} GMT" ) + $close_comments_days_old * DAY_IN_SECONDS;
printf( '提示:本文评论将于%s后自动关闭!', human_time_diff( $expires ));
}
}

WordPress 上传文件自动重命名方法

有时候上传的图片(文件)名称是中文,这样就显得不是太友好了,教大家WordPress 上传文件自动重命名方法:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的内容添加进去:

方法1:按时间重命名

//wordpress上传文件重命名
function git_upload_filter($file) {
$time = date("YmdHis");
$file['name'] = $time . "" . mt_rand(1, 100) . "." . pathinfo($file['name'], PATHINFO_EXTENSION);
return $file;
}
add_filter('wp_handle_upload_prefilter', 'git_upload_filter');

上传文件时会以“年月日时分秒+千位毫秒整数”的格式重命名文件,如“20161023122221765.jpg”

方法2:MD5加密生成数字并重命名

function rename_filename($filename) {
$info = pathinfo($filename);
$ext = emptyempty($info['extension']) ? '' : '.' . $info['extension'];
$name = basename($filename, $ext);
return substr(md5($name), 0, 20) . $ext;
}
add_filter('sanitize_file_name', 'rename_filename', 10);

名称规则是由系统自动生成的一个32位的MD5加密文件名,由于默认生成的32位文件名有点长,所以使用substr(md5($name), 0, 20) 截断将其设置为20位。

让 WordPress 的搜索功能只搜索文章标题

WordPress 的搜索功能比较弱,默认是全文+标题搜索,这样会搜索的不那么精准,另外也会加大数据库查询压力,下面教大家让 WordPress 的搜索功能只搜索文章标题:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

// 只搜索文章标题
function wpse_11826_search_by_title( $search, $wp_query ) {
if ( ! empty( $search ) && ! empty( $wp_query->query_vars['search_terms'] ) ) {
global $wpdb;
$q = $wp_query->query_vars;
$n = ! empty( $q['exact'] ) ? '' : '%';
$search = array();
foreach ( ( array ) $q['search_terms'] as $term )
$search[] = $wpdb->prepare( "$wpdb->posts.post_title LIKE %s", $n . $wpdb->esc_like( $term ) . $n );
if ( ! is_user_logged_in() )
$search[] = "$wpdb->posts.post_password = ''";
$search = ' AND ' . implode( ' AND ', $search );
}
return $search;
}
add_filter( 'posts_search', 'wpse_11826_search_by_title', 10, 2 );

自定义 WordPress 回收站删除时间

从WordPress 2.9开始,我们可以把任意的内容,评论,附件都放入WordPress回收站。放入回收站之后,我们可以恢复回收站的内容,也可以彻底删除回收站的内容。

关于WordPress回收站功能,除了以上说明的,还需要知道一下内容。

一:自定义WordPress回收站删除时间

WordPress回收站里的内容,默认会在30天之后删除,逻辑非常简单,否则WordPress回收站会越来越臃肿。

当然,如果你觉得30天太长,我们也可以自定义内容存放的时间,我们需要把下面的代码加入到wp-config.php里。

define( 'EMPTY_TRASH_DAYS', num );

num=天数。默认的,这里应该是天数,可以根据自己的爱好,设置相应的天数。这样到期之后,内容会被自动删除。

二:把WordPress回收站设置成删除功能

但这并不意味着我们必须一直使用这个回收站功能,就像有些朋友知道这个功能之后评价,WordPress官方是越来越“不务正业”了。

有些人还是很喜欢立刻删除内容,不想在回收站中再操作一次,实现方法非常简单,只需要把:

define( 'EMPTY_TRASH_DAYS', num );

中的num改成0即可,之后移至回收站会变为永久删除,不会再放入回收站,直接删除。

解决 WordPress 英文引号变成中文

最近网站某篇技术文章,被网友吐槽分享的代码用中文引号,导致代码没有用,但文章真的是用英文引号啊😳,经过排查是WordPress 自动把英文引号变成中文。

在 WordPress 后台编辑撰写文章时英文引号(半角)标点符号不管是双引号还是单引号,前台网页中显示时转变成了中文编码形式下的全角字符。解决方法如下:

后台」→「外观」→「编辑」 「functions.php」文件,把以下的代码添加进去:

//修正英文单引号问题
remove_filter ('bloginfo', 'wptexturize');
remove_filter ('comment_text', 'wptexturize');
remove_filter ('the_title', 'wptexturize');
remove_filter ('the_content', 'wptexturize');
remove_filter ('the_excerpt', 'wptexturize');

给 WordPress 设定活动文章时间过期提示

对于类似发布各种活动通知或到期时间内容的wordpress站点,也许会需要这样一个功能:发布活动内容的时候设定活动的到期日期,当活动还没有过期,网页显示“进行中”;当活动已过了设定的日期,网页则显示“已到期”或者不再显示该文章。有了这个功能,wordpress站长就不需要每次在活动过期后再编辑文章,实现的方法可以通过wordpress内置的自定义字段。

首先:给 WordPress 添加自定义栏目 (Custom Fields) 这里用到的字段名称使用:expiration

设定日期的格式必须是:mm/dd/yyyy 00:00:00 如:01/01/2015 00:00:00

修改主题模板:

编辑当前使用的主题模板,修改文章主循环代码:

<?php
if (have_posts()) :
while (have_posts()) : the_post();
$expirationtime = get_post_custom_values('expiration');
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}
$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween > 0 ) {
?>
<div class="post" id="post-<?php the_ID();?>">
<h2><?php the_title();?></h2>
<div class="entry">
<?php the_excerpt();?>
</div>
</div>
<?php
}
endwhile;
endif;
?>

上面代码的作用是如果当前时间超过设定的时间,文章则不显示。

编辑当前使用的主题模板,修改文章主循环代码:

<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<div class="post" id="post-<?php the_ID();?>">
<h2><?php the_title();?></h2>
<div class="entry">
<?php the_excerpt();?>
<?php
$expirationtime = get_post_custom_values('expiration');
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}
$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween > 0 ) {
echo '进行中';
}else {
echo '已过期';
}
?>
</div>
</div>
<?php
endwhile;
endif;
?>

上面代码的作用是如果当前时尚没有超过设定的时间内容中就显示“进行中”,否则就显示“已过期”。

看效果:「点这里」里面的文章

在 WordPress 注册页面添加自定义内容

有时候我们想给注册 WordPress 的用户发个公告什么的,可以在WordPress 注册页面添加内容,方法如下:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

add_action('register_form', 'wpjam_register_message');
function wpjam_register_message() {
$custom_message = '
<div style="margin:10px 0;border:1px solid #e5e5e5;padding:10px">
<p style="margin:5px 0;">
请不要设置过于简单的密码,避免被盗取。
</p>
</div>';
echo $custom_message;
}

解决 WordPress 的 Gravatar 头像无法显示

Gravatar 是提供头像的服务网站,WordPress 就是用了 Gravatar ,不过 Gravatar 也被墙了,导致用 WordPress 的用户都不能正常显示头像,下面教大家解决方法:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

// Gravatar 用国内CDN公共库缓存链接
function mytheme_get_avatar( $avatar ) {
$avatar = str_replace(array("www.gravatar.com","0.gravatar.com","1.gravatar.com","2.gravatar.com","secure.gravatar.com","cn.gravatar.com/"),"gravatar.moefont.com",$avatar);
return $avatar;
}
add_filter( 'get_avatar', 'mytheme_get_avatar' );

另外如果你的网站是用 Https 也可以解决 Gravatar 头像被墙问题。

给你的 WordPress主题 添加 ICP备案号设置

WordPress 也考虑到中国的情况,给添加了 ICP备案号设置 功能,不过很多主题是没有这个功能,大多数主题是在 footer.php 手动插入备案内容,下面教大家给WordPress主题 添加 ICP备案号设置:

后台」→「外观」→「编辑」→ 「footer.php」文件,要显示备案号的位置添加以下代码:

<?php if(get_option('zh_cn_l10n_icp_num')){?>
<a href="http://www.miitbeian.gov.cn/" rel="external nofollow" target="_blank">
<?php echo get_option('zh_cn_l10n_icp_num');?>
</a>
<?php } ?>

在后台设置添加ICP备案号输入框:

在网站根目录的 wp-config.php 文件中,添加代码:

define('WP_ZH_CN_ICP_NUM', true);

然后WordPresa → 常规设置 中就会出现ICP备案号这项设置了。

WordPress 删除全部图片的高度和宽度属性

WordPress 文章插入图片 默认有 width / height 属性,有时候为了方便自定义CSS,可能需要移除本身图片的宽度和高度属性,下面教大家删除全部图片的高度和宽度属性方法:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

//删除图片高度和宽度属性
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}

禁止 WordPress 编辑文章自动添加< p >< br >标签

在 WordPress 编辑文章时,经常会自动添加<p><br>标签,导致段落与段落间的行距太大,每次需要手动编辑麻烦,其实这是 WordPress 好意啊!禁止 WordPress 文章自动添加<p><br>标签方法如下:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

remove_filter ( 'the_content' , 'wpautop' );

在编辑器按下[Enter]键,会自动帮你换行,这其实也是WordPress的一番好意。如果想要拿掉自动加上< br>的功能,可以通过 functions.php 这个文件添加如下代码实现:

remove_filter ( 'the_excerpt' , 'wpautop' );

恢复 WordPress 后台的链接管理功能

从 WordPress 3.5 开始,WordPress 就默认取消了后台的链接管理功能(友情链接),下面教大家恢复 WordPress 后台的链接管理功能。

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

add_filter('pre_option_link_manager_enabled','__return_true');

然后在你需要显示链接的位置(通常是 footer.php ),加上如下代码:

<div class="lists"><?php wp_list_bookmarks('orderby=rand&show_images=0'); ?></div>

或者在外观 → 小工具 → 链接,添加友情链接。

<?PHP wp_list_bookmarks( $args ); ?> 用法:

<?php $args = array(    
'orderby' => 'name',
'order' => 'ASC',
'limit' => -1,
'category' => ,
'exclude_category' => ,
'category_name' => ,
'hide_invisible' => 1,
'show_updated' => 0,
'echo' => 1,
'categorize' => 1,
'title_li' => __('Bookmarks'),
'title_before' => '<h2>',
'title_after' => '</h2>',
'category_orderby' => 'name',
'category_order' => 'ASC',
'class' => 'linkcat',
'category_before' => '<li id=/"%id/" class=/"%class/">',
'category_after' => '</li>' ); ?>

默认情况下的用法:

  • 链接被划分为不同类别,每个类别有一个名称
  • 包含所有链接,无论是链接的分类名称还是ID
  • 按名称排列链接列表
  • 如果有图片,包含图片
  • 图片和链接文本间应有空格
  • 显示链接的描述
  • 不显示链接等级
  • 无限制,显示所有链接
  • 显示所有链接

参数

categorize

(布尔型)是否所有链接都应该显示在相应的分类目录下。

  • 1 (true)——默认值
  • 0(false)

category

(字符串)将要显示的链接分类目录的ID,用逗号隔开。如果没有指定分类,显示所有含有链接的链接分类。

exclude_category

(字符串)将被排除的链接分类目录的ID,用逗号隔开。默认值为 (no categories excluded)(不排除任何链接分类)。

category_name

(字符串)将要显示的链接所属分类的名称。如果没有指定分类,显示所有含有链接的链接分类。默认值为 (all Categories)(所有链接)。

category_before

(字符串)放置在每个链接分类目录前的文本。默认值为'<li id="[category id]" class="linkcat">'

category_after

(字符串)放置在链接分类目录后的文本。默认值为'<'/li>'

class

(字符串)链接分类列表所在类。默认值为'linkcat'。(该参数引入于WP 2.2)

category_orderby

(字符串)用以排列链接分类的值。有效值包括:

  • 'name' ——默认值
  • 'id'
  • 'slug'
  • 'count'
  • 'term_group' (不再使用)

category_order

(字符串)排列的顺序,以升序或降序排列category_orderby参数值。有效值包括:

  • ASC ——默认值
  • DESC

title_li

(字符串)链接列表的标题。默认值为 __('Bookmarks'),显示标题为“Bookmarks”(the_(' ')用于本地化。)只有将categorize设为0(false)时,才可使用该参数(否则将使用分类名称)。若将title_li设为空(0),则不显示列表标题,且链接列表不会被 <ul>,</ul>标签围绕(要确保将categorize选项设为0,以使title_li生效)。

title_before

(字符串)'categorize'值为1(true)时显示在每个链接类别前的文本,或'categorize'值为0(false)时在'title_li'中定义的文本。 默认值为<h2>

title_after

'categorize'值为1(true)时显示在每个链接类别后的文本,或'categorize'值为0(false)时在'title_li'中定义的文本。 默认值为</h2>

show_private

(布尔型)是否应显示某个链接分类(即使该分类被认为是私密的)。忽略管理面板的设置,显示私密链接分类(TRUE),或者不显示私密链接分类(FALSE)。

  • 1 (true)
  • 0(false)——默认值

include

(字符串)在结果中包含的数值型链接ID列表,各ID用逗号隔开。例如, 'include=1,3,6' 表示返回或响应ID为1、3、6的链接。如果使用include字符串,那么categorycategory_nameexclude参数将被忽略。默认值为(all Bookmarks)(所有链接)。

exclude

(字符串)将要被排除的链接的ID,各ID用逗号隔开。如 'exclude=4,12'表示不返回ID为4和12的链接。默认值为(exclude nothing)(不排除任何链接)。

orderby

(字符串)以何顺序为链接排序。这可能是一份各个值的列表,各值由逗号隔开。默认值为'name',除非你传递' '(空)值给该参数,此时参数值为'id'。有效值包括:

  • 'id'
  • 'url'
  • 'name' ——默认值
  • 'target'
  • 'description'
  • 'owner' —— 通过连接管理器添加链接的用户
  • 'rating'
  • 'updated'
  • 'rel' —— 链接关系(XFN)
  • 'notes'
  • 'rss'
  • 'length' —— 链接名称的长度,范围从最短的名称到最长的名称
  • 'rand' —— 以任意顺序显示链接

order

(字符串)根据'orderby'参数中的设置为分类目录排序(升序或降序)。有效值包括:

  • ASC ——默认值
  • DESC

limit

(整数)可以显示的最大链接数。默认值为-1(所有链接)。

before

(字符串)放置在链接前的文本。默认值为<li>

after

(字符串)放置在链接后的文本。默认值为</li>

link_before

(字符串)超链接代码中链接文本前的文字。无默认值。(该参数引入于WP 2.7)

link_after

(字符串)超链接代码中链接文本后的文字。无默认值。(该参数引入于WP 2.7)

between

(字符串)链接/图片与其说明之间的文本。默认值为'/n'(换行)。

show_images

(布尔型)是(TRUE)否(FALSE)显示链接的图片

  • 1 (true)——默认值
  • 0(false)

show_description

(布尔型)是(TRUE)否(FALSE)显示链接说明。该参数用于show_images为FALSE时或未定义链接图片时。

  • 1 (true)
  • 0(false)——默认值

show_name

(布尔型)显示链接文本(TRUE)。该参数用于show_images为TRUE时。(该参数引入于WP 2.7)

  • 1 (true)
  • 0(false)——默认值

show_rating

(字符串)是(TRUE)否(FALSE)显示链接的级别。

  • 1 (true)
  • 0(false)——默认值

show_updated

(布尔型)是(TRUE)否(FALSE)显示最近更新的时间标记。

  • 1 (true)
  • 0(false)——默认值

hide_invisible

(布尔型)是否显示公开度为“不公开”的链接。是(TRUE)否(FALSE)遵循管理面板中的设置。

  • 1 (true)——默认值
  • 0(false)

echo

(布尔型)显示结果(TRUE),或将结果保留以供php使用(FALSE)。

  • 1 (true)——默认值
  • 0(false)

给 WordPress 添加 smtp 邮件发送功能

给 WordPress 添加 smtp 邮件发送功能,为什么要使用smtp邮件发送功能,WordPress自带的邮件发送功能是用mail()函数发送的邮件,那么就会存在以下几种问题:

  • 主机不支持mail()函数
  • 发送出去的邮件对方没收到,进入垃圾箱了

由于评论注册等功能都需要用到邮件发送功能,为了避免出现没收到,无法发送等问题,所以强烈推荐使用smtp邮件发送功能。下面教大家给 WordPress 添加 smtp 邮件发送功能:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

//smtp发送邮件功能
add_action('phpmailer_init', 'mail_smtp');
function mail_smtp( $phpmailer ) {
$phpmailer->FromName = '邮件群发名称'; //名字
$phpmailer->Host = 'smtp.mxhichina.com'; //smtp地址,可以到你使用的邮件设置里面找
$phpmailer->Port = 465; //端口,一般不用修改
$phpmailer->Username = 'system@wlg.com'; //邮件账号
$phpmailer->Password = 'wlg'; //邮件密码
$phpmailer->From = 'system@wlg.com';//邮件账号
$phpmailer->SMTPAuth = true;
$phpmailer->SMTPSecure = 'ssl'; //tls or ssl (port=25留空,465为ssl)一般不用修改
$phpmailer->IsSMTP();
}

WordPress 站点统计功能代码,显示文章、评论、分类总数

WordPress如何显示站点统计,包括网站文章数、评论数、建站天数等等!有些主题有提供类似的小工具,如果没有来看看下面的统计函数吧:

文章:

<?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish; ?> 篇

页面:

<?php $count_pages = wp_count_posts(‘page’); echo $page_posts = $count_pages->publish; ?> 个

草稿:

<?php $count_posts = wp_count_posts(); echo $draft_posts = $count_posts->draft; ?> 篇

分类:

<?php echo $count_categories = wp_count_terms(‘category’); ?> 个

标签:

<?php echo $count_tags = wp_count_terms(‘post_tag’); ?> 个

会员:

<?php $users = $wpdb->get_var(“SELECT COUNT(ID) FROM $wpdb->users”); echo $users; ?> 个

链接:

<?php $link = $wpdb->get_var(“SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = ‘Y’”); echo $link; ?> 个

评论:

<?php $total_comments = get_comment_count(); echo $total_comments['approved'];?> 条

浏览:

<?php get_totalviews(true, true, true); ?> 次

更新:

<?php $last = $wpdb->get_results(“SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = ‘post’ OR post_type = ‘page’) AND (post_status = ‘publish’ OR post_status = ‘private’)”);$last = date(‘Y年n月j日’, strtotime($last[0]->MAX_m));echo $last; ?>

WordPress 添加 Infinite Scroll 无限分页功能

什么是 Infinite Scroll?Infinite Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容。目前 WordPress 已经支持这个 Infinite Scroll 功能,下面教大家如何添加:

  1. 下载「infinite scroll」的zip压缩包,在根目录下找到jquery.infinitescroll.min.js这个文件,放到主题的js目录下。
  2. 挑一张「ajax loader」图片作为loading时显示的图片,放到主题的images目录下。
  3. 注册并加载infinite scroll所需要的脚本,将下面代码放在主题的functions.php中

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

/**
* Load javascripts used by the theme
*/
function custom_theme_js() {
wp_register_script('infinite_scroll', get_stylesheet_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'), null, true);
if (!is_singular()) {
wp_enqueue_script('infinite_scroll');
}
}

add_action('wp_enqueue_scripts', 'custom_theme_js');
  1. 初始化infinite scroll,这里需要你懂HTML了,这里我们要找一些相关的css selector,才能继续完成代码。
  • img: ajax loader gif图片的url
  • nextSelector: 能够选中下一页(Previous Post)链接元素的css selector
  • navSelector: 包含上一页/下一页链接的元素的css selector
  • itemSelector: 包含每篇post内容的元素的css selector
  • contentSelector: 包含所有文章的container元素的css selector
/**
* Infinite Scroll
*/
function custom_infinite_scroll_js() {
if (!is_singular() ) {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
/**
* Customize the previous navitation menu
*/
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e('Loading the next set of posts...', 'tt_child'); ?>",
finishedMsg: "<?php _e('All posts loaded.', 'tt_child'); ?>"
},
nextSelector:"#nav-below .nav-previous a",
navSelector:"#nav-below",
itemSelector:"article",
contentSelector:"#content"
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
});
</script>
<?php
}
}

add_action('wp_footer', 'custom_infinite_scroll_js', 100);

如果使用Infinite Scroll插件时总是出错,多半是这几个selector没找对,只有找对这些class才能让代码工作。

注意:上述代码使用get_stylesheet_directory_uri获取路径,如果你需要的资源在parent theme中,请替换成get_template_directory_uri。

现在一切都准备好了,到前台刷新一下页面,滚动页面,当滚动到底部时,应该会自动加载更多文章,加载文章的数量取决于后台设置->阅读中的“博客页面至多显示”选项的值。

禁用 WordPress 评论自动把链接转换URL

WordPress 评论中如果带有链接,会自动把链接转换成URL链接,正常来说这是不错的体验,但是避免有些人评论发广告链接(外链),所有就有必须禁用 WordPress 评论自动把链接转换URL。方法很简单:

后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

remove_filter( 'comment_text', 'make_clickable',  9 );

另外还可以看看「屏蔽发帖机 给你的 WordPress 发垃圾评论」

免插件设置 WordPress Gravatar 默认头像

如何修改 WordPress Gravatar 默认头像?WordPress评论用户的头像是获取内置的Gravatar头像,但是如果没有设置过Gravatar头像会直接显示默认头像。如果我们要显得网站高大上,且有特定的默认头像,可以在用户没有Gravatar头像时候,显示我们指定的Gravatar头像。

下面教大家免插件设置 WordPress Gravatar 默认头像方法:

「后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

add_filter( 'avatar_defaults', 'wpb_new_gravatar' );
function wpb_new_gravatar ($avatar_defaults) {
$myavatar = '我们的网站头像/default-gravatar.png';
$avatar_defaults[$myavatar] = "Default Gravatar";
return $avatar_defaults;
}

把 $myavatar = '我们的网站头像/default-gravatar.png'; 改成你的头像地址就可以了。

然后在 在网站后台"设置" → "讨论",就可以看到默认头像。

WordPress 用自定义页面输出所有文章列表(网站地图)

WordPress 如何输出所有文章列表?其实就是网站地图功能,只不过有人需要输出所有文章列表,并且以表格模式的需求,下面教大家如何实现:

  1. 复制一份所用主题的 page.php,改名为 page-allpost.php
the_content(); ?>
  1. 打开 page-allpost.php,找到类似下面这个文章内容输出函数,在其下面添加如下代码并保存
<div id="page-allpost">
<table>

<strong>All Post</strong>

<tr>

<td><strong>S.No</strong></td>

<td><strong>Published Date</strong></td>

<td><strong>Post Header</strong></td>

</tr>

<?php $count_posts = wp_count_posts(); $published_posts = $count_posts->publish; query_posts('posts_per_page=-1' );

while ( have_posts() ) : the_post();

echo '<tr>';

echo '<td>'.$published_posts.'</td>';

echo '<td width="120">'; the_time(get_option( 'date_format' ));

echo '</td><td><a href="'; the_permalink();

echo '" title="'.esc_attr( get_the_title() ).'">'; the_title();

echo '</a></td></tr>'; $published_posts--;

endwhile; wp_reset_query(); ?>

</table>

</div>
  1. 新建一个页面,别名(slug)为 allpost
  2. 木了,搞定了。(PS:可以用 page-allpost 这个 id 定义表格样式),如果如下图

WordPress 用自定义页面输出所有文章列表(网站地图) 第1张-小羿

WordPress 添加自定义上传头像功能

WordPress 注册用户默认都是 Gravatar 头像,因为 Gravatar 被和谐了,所有设置头像就很不方便,我们需要给WordPress 添加自定义上传头像。

1.下载 simple-local-avatars,解压到你的主题 /inc/ 目录里面(如果没有inc目录,就建立一个)

2.「后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

require get_template_directory() . '/inc/simple-local-avatars.php';

3.之后,WP后台 → 用户 → 我的个人资料,在个人资料设置页面,会发现下面多出本地头像设置功能。

WordPress 回复评论自动添加@评论者

WordPress 回复评论自动添加@评论者,这有点类似微博@的效果,实现方法很简单:

「后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

// 评论添加@
function ludou_comment_add_at( $commentdata ) {
if( $commentdata['comment_parent'] > 0) {
$commentdata['comment_content'] = '@<a href="#comment-' . $commentdata['comment_parent'] . '">'.get_comment_author( $commentdata['comment_parent'] ) . '</a> ' . $commentdata['comment_content'];
}

return $commentdata;
}
add_action( 'preprocess_comment' , 'ludou_comment_add_at', 20);

以上代码会直接将 @ 信息写入数据库。如果你不想将 @评论者 写入数据库,可以使用下面的代码:

// 评论添加@
function ludou_comment_add_at( $comment_text, $comment = '') {
if( $comment->comment_parent > 0) {
$comment_text = '@<a href="#comment-' . $comment->comment_parent . '">'.get_comment_author( $comment->comment_parent ) . '</a> ' . $comment_text;
}

return $comment_text;
}
add_filter( 'comment_text' , 'ludou_comment_add_at', 20, 2);

WordPress 通过 header 给页面发送原生 HTTP 头

WordPress 通过 header 给页面发送原生 HTTP 头:在PHP中,我们可以用 header 函数来发送原生 HTTP 头,但在WordPress中怎么发送HTTP 头呢?

「后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

/**
* 在用户登陆的情况下,给前台所有页面添加不缓存的 Cache-Control 头
*/

function ludou_http_headers() {
// 判断用户是否登陆,并且是在非后台(前台)页面
if(is_user_logged_in() && !is_admin()) {
// php的header函数发送HTTP 头
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
}
}

/* WordPress hook
* 第一个参数值 wp 是action动作名称,文档:https://codex.wordpress.org/Plugin_API/Action_Reference/wp
* 第二个参数值 ludou_http_headers 是上面的函数名称,自己取名
*/
add_action( 'wp', 'ludou_http_headers' );

WordPress 文章标题显示各种颜色(非主流效果)

如何让WordPress文章标题自动显示各种颜色效果呢?这其实有点非主流效果,但一些个人博客就喜欢这效果,下面教大家如何实现:

「后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

function hacklog_random_title_color($title, $id)
{
$id = (int) $id;
static $colors = array(
‘rgb(153,153,0);’,
‘rgb(68,153,102);’,
‘rgb(85,119,221);’,
‘rgb(187,102,34);’,
‘rgb(153,68,170);’,
‘rgb(119,136,255);’,
‘rgb(0, 104, 28);’,
‘rgb(121, 6, 25);’,
‘rgb(91, 16, 148);’,
‘rgb(200, 137, 0);’,
‘rgb(204, 0, 96);’,
‘rgb(0, 148, 134);’,
‘rgb(185, 0, 56);’,
‘rgb(132, 102, 0);’,
‘rgb(51, 0, 153);’,
‘rgb(0, 131, 145);’,
);
$index = $id % 16;
$style_color = ‘style=”color: ‘ . $colors[$index] . ‘” ‘;
return ‘<span ‘ . $style_color . ‘>’ . $title . ‘</span>’;
}
{
add_filter(‘the_title’, ‘hacklog_random_title_color’, 99, 2);
//&lt;span style=&quot;color: rgb(121, 6, 25);&quot; &gt;最近文章title属性去除HTML标签&lt;/span&gt;
function strip_all_attribute_tags($safe_text, $text)
{
$safe_text = str_replace(
array(‘&lt;span style=&quot;’, ‘&quot; &gt;’, ‘&lt;/span&gt;’), array(‘<span style=”‘, ‘” >’, ‘</span>’), $safe_text);
return strip_tags($safe_text);
}
add_filter(‘attribute_escape’, ‘strip_all_attribute_tags’, 99, 2);
}

WordPress 设置文章只允许特定用户阅读方法

现在WordPress已经不仅仅是一个博客了,更多时候很多人都把WordPress当功能强大的CMS使了,WordPress之所以越来越受欢迎,主要在于它强大的扩展性以及良好的社区支持,看看我博客里的WordPress教程就知道了。今天,我将给你介绍一个新的WordPress扩展功能,文章只允许特定用户阅读。如果你不喜欢此功能,可以忽略以下内容!

WordPress本身也提供了相应功能来实现这个目的,包括文章私有和文章加密等,但是这些功能都比较大一,如何限定授权用户和文章的范围呢?本文将给你介绍这方面的内容。

某个分类/标签的文章只允许登陆用户阅读

网站的访客最基本的可以分成两类,一类是非注册用户,另一类是登陆用户,很多论坛的就是这样区分用户,部分内容只能登陆后查看,之前我写了一个插件Login to view all来让WordPress来实现类似功能,但是只能对单篇文章起作用,如果想要实现某个分类/标签的文章只允许登陆用户阅读,可以用文本编辑器打开当前主题目录下的single.php,查找:the_content,可以找到类似代码:the_content(...),(注:...表示未知内容,不同主题不太一样),将其改成:

/**
* 名称:WordPress某个分类/标签的文章只允许登陆用户阅读
**/

if( in_category( array( 'music', 'news' ) ) ) {
if(is_user_logged_in())
// 注意把下面的...改成你的主题中代码,不要照抄
the_content(...);
else
echo '请登陆后阅读本文!';
}
else {
// 注意把下面的...改成你的主题中代码,不要照抄
the_content(...);
}

这样分类别名或名称为 music 和 post 的分类下的文章内容就只对登陆用户开放了,游客将会看到提示"请登陆后阅读本文!",如果你想再添加一个分类images,可以将 array( 'music', 'post' ) 改成 array( 'music', 'post', 'images' ),更多依次类推;如果只限定一个分类music可以写成 in_category( 'music' ) 。如果是限定含有某些标签的文章只对登陆用户开放,可以将以上代码第 8 行改成:

if( has_tag( array( 'music', 'news' ) ) ) {

music和news为标签的名称或别名,多个标签的写法跟分类相同!

某个分类/标签的文章只允许特定角色的注册用户阅读

WordPress站点的注册用户还可以分三六九等,包括订阅者、投稿者、管理员等等,对于已经登陆的注册用户,同样可以根据用户的角色来决定是否有权阅读文章,在第一部分内容的基础上再加个限制条件就可以了,将第一部分代码的第 9 行改成:

/**
* 名称:WordPress某个分类/标签的文章只允许特定角色的注册用户阅读
*/

global $current_user;
get_currentuserinfo();

if(is_user_logged_in() && $current_user->user_level > 3)

这样等级小于 3 的注册用户将无权阅读分类music和news下的文章,文章标签的限定类似,详见第一部分的说明。WordPress注册用户的等级参见以下说明:

  • 0 级对应 订阅者
  • 1 级对应 投稿者
  • 2 – 4 级对应 作者
  • 5 – 7 级对应 编辑
  • 8 – 10 级对应 管理员

某个分类/标签的文章只允许知道密码的用户阅读

如果你想给某个分类或标签下的文章全部添加密码,只有知道密码的用户才能阅读这些文章,你可以使用我写的WordPress插件:Post Encryption And Decryption,或者看这篇教程操作:WordPress加密某个分类的所有文章

搜索引擎收录说明

按照以上各方法修改后,搜索引擎将无法收录这些文章,如果你希望搜索引擎收录这些文章同时又限定用户范围,可以再添加一个限定条件,将第一部分代码的第 9 行改成:

function is_se() {
$u_agent = $_SERVER['HTTP_USER_AGENT'];
$spiders = '/(spider|bot|slurp|Mediapartners|crawl)/i';

if ( preg_match($spiders, $u_agent) )
return 1;
else
return 0;
}

if(is_user_logged_in() || is_se())

限制标签、用户等级等的修改方式一样!另外,如果你的Feed是全文输出的话,其他用户还是可以通过订阅看到相关的内容的!最后一点,以上所做的修改不是完全隐藏文章,所有用户都可以看到文章的标题,如果你想让未授权的用户连标题都看不到,请自行解决,或者可以参考下文:WordPress技巧: 对游客隐藏部分文章

回复或登录可见

如果你想隐藏文章的部分内容(如猜谜游戏的谜底),让读者登录后才可查看隐藏的内容,可以使用这款插件:Login to view all。如果你是想让读者回复后才可以阅读隐藏的内容,可以用这款插件:Easy2hide

自定义 WordPress 前台搜索文章类型

WordPress 前台搜索默认的搜索内容是文章或页面,还有自定义文章类型时定义的前台可搜索的文章,如果我们只想搜索某个文章类型怎么办?当然不能凉拌,其实只需要稍微修改一下WordPress 搜索功能的$query 对象就可以了,我们来看一下代码。

// 设置WooCommerce只搜索 'product' 文章类型下面的文章
if ( !is_admin() ) {
function searchfilter($query) {
//限定对搜索查询和非后台查询设置
if ($query->is_search && !is_admin() ) {
$query->set('post_type',array('product'));
}
return $query;
}
add_filter('pre_get_posts','searchfilter');
}

注意关键的地方product,我们在哪里找这个参数呢?在下图中。

自定义 WordPress 前台搜索文章类型 第1张-小羿

其实,如果你对 WordPress 自定义文章类型的方法比较熟悉,这个参数就是自定义文章类型的时候定义的文章类型的slug参数。

上面的代码限制了前台搜索只能搜索 “Product” 文章类型的文章,如果我们需要搜索 “Product” 和“文章”下面的文章(有点绕)?只需要稍微修改一下上面的代码就可以了。

$query->set('post_type',array('product','post'));

需要注意的是:这个代码的作用在前台是全局性的,在前台任何地方进行搜索都会受到这段代码的影响,但是不会影响到后台搜索功能,请放心使用。当然,如果你真想对后台也下手,把上面代码中的!is_admin()去掉就可以了。

WordPress 后台菜单使用 Dashicons 字体图标

WordPress 3.8 以后,后台的管理菜单就使用了 Dashicons 字体图标,作为主题或插件开发者,也应该与时俱进。

WordPress 后台菜单使用 Dashicons 字体图标 第1张-小羿

关于 Dashicons

Dashicons 是一个开源的字体图标项目,目前托管于 GitHub,目前主要用于 WordPress 后台,当然, 你也可以在自己的主题或插件中使用。

查看Dashicons 字体图标:https://developer.wordpress.org/resource/dashicons/

如何使用?

在自定义文章类型中使用 Dashicons

如果我们使用 ‘dashicons-images-alt2’ 作为菜单的图标,那么相关代码就应该如下:

register_post_type('slides',
array(
'labels' => array(
'name' => 'Slides',
'singular_name' => 'Slide'
),
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-images-alt2'
)
);

在插件顶级菜单中使用 Dashicons

你还可以在创建插件菜单时使用 Dashicons ,比如下面使用 add_menu_page() 函数添加一个顶级菜单:

add_menu_page( 
'Menu Page Title',
'Menu Title',
'manage_options',
'menu-slug',
'mytheme_menu_callback',
'dashicons-wordpress' // Dashicon 图标的CSS类
);

上面的两种代码应该算是比较常用的,其余的位置应该很少会用到了。

简化 WordPress 后台用户名称设置方法

默认情况下,WordPress 让用户可以在后台设置:姓,名,昵称,然后选择显示的名称。大概就是下图这个样子:

简化 WordPress 后台用户名称设置方法 第1张-小羿

其实只是用来写写博客,很少的编辑会填这么多的东西,所以最好的方法就是把他们隐藏起来,看了一下 WordPress 源代码,名称设置这里竟然没有 filter,没有filter 那就用 JS 来隐藏,然后提交的时候,把显示的名称强制设置为昵称就好了。

最后的代码如下,同样复制到当前主题的 functions.php 文件即可:

// 隐藏 姓,名 和 显示的名称,三个字段
add_action('show_user_profile','wpjam_edit_user_profile');
add_action('edit_user_profile','wpjam_edit_user_profile');
function wpjam_edit_user_profile($user){
?>
<script>
jQuery(document).ready(function($) {
$('#first_name').parent().parent().hide();
$('#last_name').parent().parent().hide();
$('#display_name').parent().parent().hide();
$('.show-admin-bar').hide();
});
</script>
<?php
}

//更新时候,强制设置显示名称为昵称
add_action('personal_options_update','wpjam_edit_user_profile_update');
add_action('edit_user_profile_update','wpjam_edit_user_profile_update');
function wpjam_edit_user_profile_update($user_id){
if (!current_user_can('edit_user', $user_id))
return false;

$user = get_userdata($user_id);

$_POST['nickname'] = ($_POST['nickname'])?:$user->user_login;
$_POST['display_name'] = $_POST['nickname'];

$_POST['first_name'] = '';
$_POST['last_name'] = '';
}

让 WordPress 后台文本框(分类描述)可以添加 Html 代码

WordPress 后台的文本框一般是不允许添加 html 代码的(也就是被过滤掉)。最近有用户需要在分类描述中添加 html 代码,下面分享一下实现方法。

直接将下面的代码添加到当前主题的 functions.php 文件即可:

/**
* 允许分类描述添加html代码
*/
remove_filter('pre_term_description', 'wp_filter_kses');
remove_filter('term_description', 'wp_kses_data');

如果你需要进一步了解实现原理,可以自己阅读以下文档:

http://codex.wordpress.org/Function_Reference/wp_filter_kses

http://codex.wordpress.org/Function_Reference/wp_kses_data

如果你还想让 链接描述和备注、用户描述 也一样支持 html 代码,可以试试下面的代码,同样是添加到functions.php:

// Disables Kses only for textarea saves
foreach (array('pre_term_description', 'pre_link_description', 'pre_link_notes', 'pre_user_description') as $filter) {
remove_filter($filter, 'wp_filter_kses');
}

// Disables Kses only for textarea admin displays
foreach (array('term_description', 'link_description', 'link_notes', 'user_description') as $filter) {
remove_filter($filter, 'wp_kses_data');

WordPress 后台文章列表按更新时间排序

WordPress 后台文章列表按更新时间排序的方法,「后台」→「外观」→「编辑」→ 「functions.php」文件,把下面的代码添加进去:

function ludou_set_post_order_in_admin( $wp_query ) {
if ( is_admin() ) {
$wp_query->set( 'orderby', 'modified' );

// 此处是将最新修改的文章排在前面
// 如果要将最新修改的文章排在后面,可将DESC改成ASC
$wp_query->set( 'order', 'DESC' );
}
}
add_filter('pre_get_posts', 'ludou_set_post_order_in_admin' );

WordPress前端文章列表按照最后编辑更新时间排序

WordPress 默认的文章显示是按照发表的时间排序的,而有些时候,博主需要对以前的文章做一些修改,这样就需要将修改的文章显示到第一个位置,就需要文章按照修改的时间排序。

修改方法也很简单,不过这次不是在functions.php文件添加代码了,而是在你的主题首页文件index.php中修改。

在index.php中类似以下代码之前:

<?php while (have_posts()) : the_post(); ?>

添加:

<?php $posts = query_posts($query_string . '&orderby=modified');?>

这样在首页的排序就已经达到效果啦,如果你其它页面也需要这样安装修改排序,那么同理即可,修改其它页面就行了。

至于有时候我们可能也会需要显示修改时间,所以大家可以看看这个吧!

最后更新: <?php the_modified_time('Y-m-d'); ?>

分开显示最后修改的时间:

<?php $u_time = get_the_modified_time('U'); echo date("y-m",$u_time); echo date("d",$u_time); echo date("D",$u_time); ?>

WordPress 两种方法 检查一篇文章是否存在

WordPress 两种方法 检查一篇文章是否存在,两个方法都需要先获取文章的id:

方法一:通过 get_permalink() 检测文章是否存在

if(get_permalink($post_id) === false){
// 文章不存在后执行操作
}

方法二:通过 get_post_status() 检测

if(get_post_status($post_id) === false){
// 文章不存在后执行操作
}

get_post_status() 函数可用于检测当前文章或指定文章的状态,如果检测不到状态(即文章不存在)就返回false,也就实现了检查文章是否存在。

扩展:你也可以使用get_post_status() 函数来检测文章的状态来实现一些操作,可以返回的状态为:

你也可以使用它来检测文章的状态来实现一些操作,可以返回的状态为:

‘publish’ – 公开发布的文章或页面 ‘pending’ – 待审文章 ‘draft’ – 草稿 ‘auto-draft’ – 最新自动保存的草稿,没有文章内容 ‘future’ – 定时发布 ‘private’ – 私密文章 ‘inherit’ – 修订版本 ‘trash’ – 在回收站中的

WordPress 搜索指定分类下的文章方法

用过WordPress的朋友都知道,默认搜索是所有分类文章、包括页面标签等,前些天有个客户有需求,只搜索指定分类下的文章,这个如何实现呢?

WordPress搜索单个指定分类下的文章

<form action="<?php bloginfo('home'); ?>" method="get">
<div>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="hidden" name="cat" value="22" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

如上述代码所示:name="cat"即代表搜索分类下文章,value="22" 即为分类的id

WordPress搜索多个指定分类下的文章

<form action="<?php bloginfo('home'); ?>" method="get">
<div>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<select name="cat" class="search-option">
<option value="11" selected="selected">WordPress基础教程</option>
<option value="22">WordPress快速建站教程</option>
</select>
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

上述只是示例了两个分类的 多个分类的按格式填写就好了,selected="selected"代表搜索的默认分类

WordPress 用户更改电子邮箱验证方法

WordPress 4.9 中增加了用户电子邮件更改的邮件验证功能,这些帐号的安全增强功能目的是让攻击者更改用户或站点相关联的电子邮件地址更加困难,并且减少错误或错误更改导致您被锁定的可能。

WordPress 用户更改电子邮箱验证方法 第1张-小羿

在 WordPress 4.9 以后的版本中,如果需要在网站后台的【 用户 ~ 我的个人资料 】中修改个人的【 电子邮件 】,或者【 设置 ~ 常规 】中的【 常规选项 】下修改【 电子邮件地址 】,都不能直接修改了,而是提示“您的电子邮件地址还未被更新,请在mailname@domain.com的收件箱中检查确认邮件。” 类似的操作信息。

比如我们之前的邮箱是 info@wpyou.com ,需要修改为新的邮箱 wpyou@qq.com ,则填写新的邮箱提交更新后,会提示“您的电子邮件地址还未被更新,请在 wpyou@qq.com 的收件箱中检查确认邮件。” 的操作信息。提示我们需要在修改的新邮箱中查收一个确认邮件,在邮件中点击一个链接确认才可以正式修改为新的邮箱地址。

当然,你也可以点击【取消】,取消邮箱更改,重新恢复到之前旧的邮箱地址。

这种更改邮箱的邮件验证功能已经在多站点网络中使用多年了,现在这个功能已经被移植到了单站点的帐号安全中。

简化后台 WordPress 个人信息设置内容

WordPress 个人信息设置有点不符合国情,需要设置:姓,名,昵称,然后选择显示的名称。简直神烦有木有?搞的跟个外国佬一样,中国哪那么复杂,顶多也就姓名、昵称、显示三项。后面一想,一般人总不会显示姓名吧,那显示的选项也就没有必要了,为什么不直接留个昵称就好了呢?

其实只是用来写写博客,很少的编辑会填这么多的东西,但是如果删掉的话,又怕某些字段需要引用,所以最好的方法就是把他们隐藏起来,看了一下 WordPress 源代码,名称设置这里竟然没有 filter,没有filter 那就用 JS 来隐藏,然后提交的时候,把显示的名称强制设置为昵称就好了。

最后的代码如下,同样复制到当前主题的 functions.php 文件即可:

/** 
* 四合一简化 WordPress 后台用户个人信息姓名昵称设置
* https://www.dujin.org/fenxiang/wp/10138.html
*/
add_action('show_user_profile','wpjam_edit_user_profile');
add_action('edit_user_profile','wpjam_edit_user_profile');
function wpjam_edit_user_profile($user){
?>
<script>
jQuery(document).ready(function($) {
$('#first_name').parent().parent().hide();
$('#last_name').parent().parent().hide();
$('#display_name').parent().parent().hide();
$('.show-admin-bar').hide();
});
</script>
<?php
}

//更新时候,强制设置显示名称为昵称
add_action('personal_options_update','wpjam_edit_user_profile_update');
add_action('edit_user_profile_update','wpjam_edit_user_profile_update');
function wpjam_edit_user_profile_update($user_id){
if (!current_user_can('edit_user', $user_id))
return false;
$user = get_userdata($user_id);
$_POST['nickname'] = ($_POST['nickname'])?:$user->user_login;
$_POST['display_name'] = $_POST['nickname'];
$_POST['first_name'] = '';
$_POST['last_name'] = '';
}

效果如下图,是不是简洁多了呢:

简化后台 WordPress 个人信息设置内容 第1张-小羿

ordPress 技巧:管理员快速登录其他用户账户

有时候,客户说他的 WordPress 后台有问题,你登陆又没问题,客户又解释不清楚,怎么办?问他要账号密码,登录上去看看。但是每次都要账号密码,多少有点麻烦和不智能,下面这段代码可已让管理员快速登录其他用户的账户。

WordPress 技巧:管理员快速登录其他用户账户 第1张-小羿

add_filter('user_row_actions', function($actions, $user){
$capability = (is_multisite())?'manage_site':'manage_options';
if(current_user_can($capability)){
$actions['login_as'] = '<a title="以此身份登陆" href="'.wp_nonce_url("users.php?action=login_as&users=$user->ID", 'bulk-users').'">以此身份登陆</a>';
}
return $actions;
}, 10, 2);

add_filter('handle_bulk_actions-users', function($sendback, $action, $user_ids){
if($action == 'login_as'){
wp_set_auth_cookie($user_ids, true);
wp_set_current_user($user_ids);
}
return admin_url();
},10,3);

WordPress 技巧:强制设置二级分类

如果你博客的分类只有两级,为了防止设置错误,可以在 WordPress 后台分类设置页面,设置父级分类下拉菜单只显示第一层,代码很简单:

add_filter('taxonomy_parent_dropdown_args', function($args){
if(is_admin()){
$args['depth'] = 1;
return $args;
}
});

彻底关闭 WordPress 全高度编辑器和免打扰功能

我们知道 WordPress 后台有个全高度编辑器和免打扰功能的功能选项:

彻底关闭 WordPress 全高度编辑器和免打扰功能 第1张-小羿

这个功能在写文章的时候特别有帮助,但是如果面对的是在 WordPress 后台编辑页面创建了很多 Meta_Box,每次修改选项都要往下拉一大截,确实不方便。下面的代码可以彻底关闭全高度编辑器和免打扰功能:

add_action('admin_init', function(){
wp_deregister_script('editor-expand');
});

add_filter('tiny_mce_before_init', function($init){
unset($init['wp_autoresize_on']);
return $init;
});

增强 WordPress 的搜索,让搜索结果更加精准

wordpress自带的搜索功能其实比较简单,搜索的结果就是包含搜索词的文章、页面,按照时间发布顺序排序,下面,我们将介绍如何增强wordpress的搜索,让搜索结果更加精准。

增加wordpress搜索的关联性

WordPress本身的搜索结果是按照发布时间排序的,这样的搜索结果的相关性并不强,应该让搜索结果按照内容相关性排序,而不是按照时间或者 ID,所以我们可以在当前主题的 functions.php 添加如下代码来增强 WordPress 搜索的相关性:

if(is_search()){
add_filter('posts_orderby_request', 'search_orderby_filter');
}
function search_orderby_filter($orderby = ''){
global $wpdb;
$keyword = $wpdb->prepare($_REQUEST['s']);
return "((CASE WHEN {$wpdb->posts}.post_title LIKE '%{$keyword}%' THEN 2 ELSE 0 END) + (CASE WHEN {$wpdb->posts}.post_content LIKE '%{$keyword}%' THEN 1 ELSE 0 END)) DESC,
{$wpdb->posts}.post_modified DESC, {$wpdb->posts}.ID ASC";
}

只搜索文章

只搜索文章的标题,将下面的代码添加到主题的 functions.php 文件即可:

/**
* 让 WordPress 只搜索文章的标题
* http://www.wpdaxue.com/search-by-title-only.html
*/
function __search_by_title_only( $search, &$wp_query )
{
global $wpdb;

if ( empty( $search ) )
return $search; // skip processing - no search term in query

$q = $wp_query->query_vars;
$n = ! empty( $q['exact'] ) ? '' : '%';

$search =
$searchand = '';

foreach ( (array) $q['search_terms'] as $term ) {
$term = esc_sql( like_escape( $term ) );
$search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
$searchand = ' AND ';
}

if ( ! empty( $search ) ) {
$search = " AND ({$search}) ";
if ( ! is_user_logged_in() )
$search .= " AND ($wpdb->posts.post_password = '') ";
}

return $search;
}
add_filter( 'posts_search', '__search_by_title_only', 500, 2 );

选择分类搜索文章:

将默认的searchform.php修改为以下代码:

<form id=”searchform” name=”searchform” method=”get” action=”<?php bloginfo(‘home’); ?>/” >
<ul>
<li>
<p>
<?php $select = wp_dropdown_categories(‘class=search_select&show_option_all=全站搜索& amp;orderby=name&hierarchical=0&selected=-1&depth=1′);?>
</p>
</li>
<li>
<input type=”text” name=”s” id=”s” maxlength=”34″ value=””/>
</li>
<li>
<input type=”image” value=”” src=”<?php bloginfo(‘template_url’); ?>/img/search.gif”/>
</li>
</ul>
</form>

显示出的效果为下图样式,可选择全站搜索,或者具体的分类搜索,搜索的结果更加精准!

增强 WordPress 的搜索,让搜索结果更加精准 第1张-小羿

多重选项框搜索:

这种方法更加强大,可以选择多个分类,并搜索分类中的文章,精确度更好,不过使用这种方法有一定的固定性,你需要自己写好选项框中的分类id:

增强 WordPress 的搜索,让搜索结果更加精准 第2张-小羿

将你的默认的searchform.php修改为以下代码:

<div>
<form id=”index_search” name=”index_search” method=”get” action=”<?php bloginfo(‘home’); ?>/”>
<p><input type=”text” name=”s” id=”s” value=””/> <input type=”submit” value=” 搜 索 ” /></p>
<p>
<label for=”s_type5″ style=”width:50px”><input type=”radio” name=”cat” id=”cat” value=”all” checked>全站</label>
<label for=”s_type1″ style=”width:50px”><input type=”radio” name=”cat” id=”cat” value=”4″ checked>主题</label>
<label for=”s_type2″ style=”width:50px”><input type=”radio” name=”cat” id=”cat” value=”6″>插件</label>
<label for=”s_type3″ style=”width:50px”><input type=”radio” name=”cat” id=”cat” value=”3″>主机</label>
<label for=”s_type4″ style=”width:50px”><input type=”radio” name=”cat” id=”cat” value=”10″>经验</label>
</p>
</form>
</div>

在 WordPress 注册框下面添加自定义提示内容

有时候WordPress注册页面需要设置一些提醒的内容,例如关注微信号,就可以获取更多内容之类的,下面教大家在 WordPress 注册框下面添加自定义提示内容方法,打开 functions.php 文件,添加下面的内容:

add_action('register_form', 'register_message');
function register_message() {
$html = '
<div style="margin:10px 0;border:1px solid #e5e5e5;padding:10px">
<p style="margin:5px 0;">
注册成会员,查看更多资讯.
</p>
</div>';
echo $html;
}

WordPress 屏蔽垃圾评论方法(禁止全英文/中文字符占比/评论过滤)

WordPress用的人太多了,所以会出现很多垃圾评论灌水,打广告,特别是国外的垃圾评论。下面教大家彻底屏蔽这些垃圾评论。打开 function.php 文件,根据需要添加下面的内容:

//防灌水
function scp_comment_post( $incoming_comment ) {

// 禁止全英文评论
$pattern = '/[\x7f-\xff]/';
if(!preg_match($pattern, $incoming_comment['comment_content'])) {
wp_die( "您的评论中必须包含汉字! <br /> You should type some Chinese word (like \"你好\") in your comment to pass the spam-check, thanks for your patience! " );
}
//禁止 A 链接
if(strstr($incoming_comment['comment_content'], "<a")){
wp_die( "您的评论中不能有A链接,请直接填写URL地址" );

}
// 判断 中文字符占比
$len_all = strlen($incoming_comment['comment_content']);
$len_st = mb_strlen($incoming_comment['comment_content'], 'UTF-8');
if(($len_all-$len_st)/(2*$len_st) < 0.5){
wp_die( "中文字符少于百分之五十" );
}

// 禁止日文评论
if(preg_match($pattern, $incoming_comment['comment_content'])) {
wp_die( "禁止日文评论!日本のコメントを禁止!" );
}

return( $incoming_comment );
}
add_filter('preprocess_comment', 'scp_comment_post');

另外还可以根据评论黑名单中的关键词来直接阻止评论,这样垃圾评论就不会写入数据库了。

在WordPress后台“设置” > “讨论” > 评论黑名单中添加相应的垃圾评论关键词即可。如在黑名单中添加“信用卡”,那么当评论的内容、评论者名称、URL、电子邮件或IP地址中包含其中任何关键字(如信用卡)时,系统将会禁止提交到数据库。

//屏蔽关键词,email,url,ip
function Shield_fuckspam($comment) {
if (wp_blacklist_check($comment['comment_author'], $comment['comment_author_email'], $comment['comment_author_url'], $comment['comment_content'], $comment['comment_author_IP'], $comment['comment_agent'])) {
header("Content-type: text/html; charset=utf-8");
err(__('不好意思,您的评论违反评论规则'));
} else {
return $comment;
}
}
add_filter('preprocess_comment', 'Shield_fuckspam');

代码解析:

$pattern的值是正则表达式,前者是汉字编码范围,后者是日文编码范围,也就是评论必须包含中文,并且不能包含日文,否则拒绝提交。

以上的代码采用wp_die输出错误信息!如果贵站使用comments-ajax.php处理提交,请将wp_die换成err!否则会出现500错误!

最后终极大招网站屏蔽机器人垃圾评论:

function antiEmptyUA(){
//获取UA信息
$ua = $_SERVER['HTTP_USER_AGENT'];
//将恶意USER_AGENT存入数组
$now_ua = array('FeedDemon ','BOT/0.1 (BOT for JCE)','CrawlDaddy ','Java','Feedly','UniversalFeedParser','ApacheBench','Swiftbot','ZmEu','Indy Library','oBot','jaunty','YandexBot','AhrefsBot','YisouSpider','jikeSpider','MJ12bot','WinHttp','EasouSpider','HttpClient','Microsoft URL Control','YYSpider','jaunty','Python-urllib','lightDeckReports Bot');//禁止空USER_AGENT,dedecms等主流采集程序都是空USER_AGENT,部分sql注入工具也是空USER_AGENT
if(!$ua) {
header("Content-type: text/html; charset=utf-8");
wp_die('机器人,滚粗!');
}else{
foreach($now_ua as $value )
//判断是否是数组中存在的UA
if(eregi($value,$ua)) {
header("Content-type: text/html; charset=utf-8");
wp_die('机器人,滚粗!');
}
}
}

防止访问者或机器人恶意频繁刷新、大流量访问:

function antiEmptyUA(){
//获取UA信息
$ua = $_SERVER['HTTP_USER_AGENT'];
//将恶意USER_AGENT存入数组
$now_ua = array('FeedDemon ','BOT/0.1 (BOT for JCE)','CrawlDaddy ','Java','Feedly','UniversalFeedParser','ApacheBench','Swiftbot','ZmEu','Indy Library','oBot','jaunty','YandexBot','AhrefsBot','YisouSpider','jikeSpider','MJ12bot','WinHttp','EasouSpider','HttpClient','Microsoft URL Control','YYSpider','jaunty','Python-urllib','lightDeckReports Bot');//禁止空USER_AGENT,dedecms等主流采集程序都是空USER_AGENT,部分sql注入工具也是空USER_AGENT
if(!$ua) {
header("Content-type: text/html; charset=utf-8");
wp_die('请勿采集本站!');
}else{
foreach($now_ua as $value )
//判断是否是数组中存在的UA
if(eregi($value,$ua)) {
header("Content-type: text/html; charset=utf-8");
wp_die('请勿采集本站!');
}
}
}

以上代码中function anticc($time_sep)的“$time_sep”是控制$time_sep秒中内允许用户访问一次,比如$time_sep=3时,如果用户在3秒内访问超过一次,系统则会提示“警告:请求过于频繁”,并且只有等待三秒后才能访问本网站。

利用Htaccess屏蔽机器人垃圾评论:

# BEGIN 屏蔽垃圾留言:屏蔽空referrer留言
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*wangbaiyuan.cn.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
</IfModule>
# END 屏蔽垃圾留言:屏蔽空referrer留言

以上就是WordPress 屏蔽垃圾评论方法一些汇总了,附上大量敏感词库下载地址: https://share.weiyun.com/5tCPCeb (密码:ueHM)

让注册用户登陆 WordPress 后不显示广告

网站为了盈利都会投放广告,如「Google adsense」,但投放的广告太多,会影响用户体验,所以可以设置让注册用户登陆WordPress后不显示广告。方法如下:

在 WordPress 插入广告代码的时候加上判断.通过 get_current_user_id() 返回当前的用户,如果没有登陆用户,那么就是 0.

$ad_code = '广告代码放这里..';
if (get_current_user_id()) {
$ad_code = '';
}

echo $ad_code;

或者是:

<php
if (!get_current_user_id()) {
?>

// 广告代码HTML

<php
}
?>

这样,只要平时登陆 WordPress, 页面就不会显示广告.一般来说是不会和缓存插件冲突的,因为一般缓存只有在不是 WordPress 用户登陆的时候才会生成缓存.当然,如果你只想你登陆的时候不显示广告(比如有多个 wordpress 用户),那么只要知道你用户的 user id 就可以.假设是 1 的话:

$ad_code = 'Ads code put here.';
if (get_current_user_id() == 1) {
$ad_code = '';
}

echo $ad_code;

或者,也许长这样:

<php
if (get_current_user_id() != 1) {
?>

// HTML code of the ads

<php
}
?>

WordPress主题给分类目录添加缩略图/图像的方法

因WordPress强大的二次开发,不少站长把WordPress开发成CMS了,为了功能显得更加丰富,可以给分类目录添加缩略图,下面一起来看看如何给 wordpress 分类目录添加缩略图功能吧。

第一步在主题 functions.php 文件中添加如下代码:

/**
* Plugin Name: 分类图像
*/
define('Z_IMAGE_PLACEHOLDER', T_PATH."/img/random/5.jpg"); //默认缩略图

add_action('admin_init', 'z_init');
function z_init() {
$z_taxonomies = get_taxonomies();
if (is_array($z_taxonomies)) {
$zci_options = get_option('zci_options');
if (empty($zci_options['excluded_taxonomies']))
$zci_options['excluded_taxonomies'] = array();

foreach ($z_taxonomies as $z_taxonomy) {
if (in_array($z_taxonomy, $zci_options['excluded_taxonomies']))
continue;
add_action($z_taxonomy.'_add_form_fields', 'z_add_texonomy_field');
add_action($z_taxonomy.'_edit_form_fields', 'z_edit_texonomy_field');
add_filter( 'manage_edit-' . $z_taxonomy . '_columns', 'z_taxonomy_columns' );
add_filter( 'manage_' . $z_taxonomy . '_custom_column', 'z_taxonomy_column', 10, 3 );
}
}
}

// add image field in add form
function z_add_texonomy_field() {
if (get_bloginfo('version') >= 3.5)
wp_enqueue_media();
else {
wp_enqueue_style('thickbox');
wp_enqueue_script('thickbox');
}

}

// 在编辑表单中添加图像字段
function z_edit_texonomy_field($taxonomy) {
if (get_bloginfo('version') >= 3.5)
wp_enqueue_media();
else {
wp_enqueue_style('thickbox');
wp_enqueue_script('thickbox');
}

if (z_taxonomy_image_url( $taxonomy->term_id, NULL, TRUE ) == Z_IMAGE_PLACEHOLDER)
$image_text = "";
else
$image_text = z_taxonomy_image_url( $taxonomy->term_id, NULL, TRUE );
echo '<tr class="form-field">
<th scope="row" valign="top"><label for="taxonomy_image">图像</label></th>
<td><input type="text" name="taxonomy_image" id="taxonomy_image" value="'.$image_text.'" />
<button class="z_upload_image_button button">上传/添加图像</button>
<button class="z_remove_image_button button">删除图像</button>
<img class="taxonomy-image" src="' . $image_text . '" width="150" height="auto"/>
</td>
</tr>'.z_script();
}
// 图片上传函数
function z_script() {
return '<script type="text/javascript">
jQuery(document).ready(function($) {
var wordpress_ver = "'.get_bloginfo("version").'", upload_button;
$(".z_upload_image_button").click(function(event) {
upload_button = $(this);
var frame;
if (wordpress_ver >= "3.5") {
event.preventDefault();
if (frame) {
frame.open();
return;
}
frame = wp.media();
frame.on( "select", function() {
// Grab the selected attachment.
var attachment = frame.state().get("selection").first();
frame.close();
if (upload_button.parent().prev().children().hasClass("tax_list")) {
upload_button.parent().prev().children().val(attachment.attributes.url);
upload_button.parent().prev().prev().children().attr("src", attachment.attributes.url);
}
else
$("#taxonomy_image").val(attachment.attributes.url);
});
frame.open();
}
else {
tb_show("", "media-upload.php?type=image&amp;TB_iframe=true");
return false;
}
});

$(".z_remove_image_button").click(function() {
$("#taxonomy_image").val("");
$(this).parent().siblings(".title").children("img").attr("src","' . Z_IMAGE_PLACEHOLDER . '");
$(".inline-edit-col :input[name=\'taxonomy_image\']").val("");
return false;
});

if (wordpress_ver < "3.5") {
window.send_to_editor = function(html) {
imgurl = $("img",html).attr("src");
if (upload_button.parent().prev().children().hasClass("tax_list")) {
upload_button.parent().prev().children().val(imgurl);
upload_button.parent().prev().prev().children().attr("src", imgurl);
}
else
$("#taxonomy_image").val(imgurl);
tb_remove();
}
}

$(".editinline").live("click", function(){
var tax_id = $(this).parents("tr").attr("id").substr(4);
var thumb = $("#tag-"+tax_id+" .thumb img").attr("src");
if (thumb != "' . Z_IMAGE_PLACEHOLDER . '") {
$(".inline-edit-col :input[name=\'taxonomy_image\']").val(thumb);
} else {
$(".inline-edit-col :input[name=\'taxonomy_image\']").val("");
}
$(".inline-edit-col .title img").attr("src",thumb);
return false;
});
});
</script>';
}

// 保存分类图像,同时编辑或保存期限
add_action('edit_term','z_save_taxonomy_image');
add_action('create_term','z_save_taxonomy_image');
function z_save_taxonomy_image($term_id) {
if(isset($_POST['taxonomy_image']))
update_option('z_taxonomy_image'.$term_id, $_POST['taxonomy_image']);
}

// 通过图片网址获取附件
function z_get_attachment_id_by_url($image_src) {
global $wpdb;
$query = "SELECT ID FROM {$wpdb->posts} WHERE guid = '$image_src'";
$id = $wpdb->get_var($query);
return (!empty($id)) ? $id : NULL;
}

// 对于给定的term_id得到分类图像的URL(默认占位符图像)
function z_taxonomy_image_url($term_id = NULL, $size = NULL, $return_placeholder = FALSE) {
if (!$term_id) {
if (is_category())
$term_id = get_query_var('cat');
elseif (is_tax()) {
$current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
$term_id = $current_term->term_id;
}
}

$taxonomy_image_url = get_option('z_taxonomy_image'.$term_id);
if(!empty($taxonomy_image_url)) {
$attachment_id = z_get_attachment_id_by_url($taxonomy_image_url);
if(!empty($attachment_id)) {
if (empty($size))
$size = 'full';
$taxonomy_image_url = wp_get_attachment_image_src($attachment_id, $size);
$taxonomy_image_url = $taxonomy_image_url[0];
}
}

if ($return_placeholder)
return ($taxonomy_image_url != '') ? $taxonomy_image_url : Z_IMAGE_PLACEHOLDER;
else
return $taxonomy_image_url;
}

function z_quick_edit_custom_box($column_name, $screen, $name) {
if ($column_name == 'thumb')
echo '<fieldset>
<div class="thumb inline-edit-col">
<label>
<span class="title"><img src="" alt="Thumbnail"/></span>
<span class="input-text-wrap"><input type="text" name="taxonomy_image" value="" class="tax_list" /></span>
<span class="input-text-wrap">
<button class="z_upload_image_button button">上传/添加图像</button>
<button class="z_remove_image_button button">删除图像</button>
</span>
</label>
</div>
</fieldset>';
}

// 缩略图列添加到类别管理
function z_taxonomy_columns( $columns ) {
$new_columns = array();
$new_columns['cb'] = $columns['cb'];
$new_columns['thumb'] = '图像';
unset( $columns['cb'] );
return array_merge( $new_columns, $columns );
}

// 缩略图列值添加到类别管理。
function z_taxonomy_column( $columns, $column, $id ) {
if ( $column == 'thumb' )
$columns = '<span><img src="' . z_taxonomy_image_url($id, NULL, TRUE) . '" alt="Thumbnail" class="wp-post-image"/></span>';
return $columns;
}

// “更改”插入“使用该图像”
function z_change_insert_button_text($safe_text, $text) {
return str_replace("Insert into Post", "Use this image", $text);
}

// 在类别列表中的图像
if ( strpos( $_SERVER['SCRIPT_NAME'], 'edit-tags.php' ) > 0 ) {
add_action( 'admin_head', 'z_add_style' );
add_action('quick_edit_custom_box', 'z_quick_edit_custom_box', 10, 3);
add_filter("attribute_escape", "z_change_insert_button_text", 10, 2);
}

// 注册插件设置
function z_register_settings() {
register_setting('zci_options', 'zci_options', 'z_options_validate');
add_settings_section('zci_settings', '', 'z_section_text', 'zci-options');
add_settings_field('z_excluded_taxonomies', '排除的分类','z_excluded_taxonomies', 'zci-options', 'zci_settings');
}
function z_add_style() {
echo '<style type="text/css" media="screen">
th.column-thumb {width:60px;}
.form-field #taxonomy_image {border:1px solid #eee;width:200px; margin-left:30px;}
.inline-edit-row fieldset .thumb label span.title {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
.column-thumb span {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
.inline-edit-row fieldset .thumb img,.column-thumb img {width:48px;height:48px;}
label{ font-weight:800; font-size:16px;}
.taxonomy-image {border:1px solid #eee;width:auto !important;height:60px; margin-bottom:-40px; }
#taxonomy_image{ margin-left:180px; }
#taxonomy_image,.z_upload_image_button,.z_remove_image_button{vertical-align:bottom !important;}
</style>';
}

第二步:在前台页面模板中调用这个分类缩略图:

<img src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>">
或者
<?php if (function_exists('z_taxonomy_image_url')&&(z_taxonomy_image_url()!="")){ ?>
<img src="<?php echo z_taxonomy_image_url(); ?>">
<?php } ?>

在其它页面调用代码:这里需要我添加一个分类目录ID号

<img src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(栏目ID号); ?>">
或者
<?php
if(function_exists('z_taxonomy_image_url')&&(z_taxonomy_image_url(栏目ID号)!='')){
$img_url = z_taxonomy_image_url(栏目ID号);
}else{
$img_url = T_PATH.'/img/banner/catt.jpg'; //默认图片
}
?>
<img src="<?php echo $img_url; ?>" alt=""/>

这样就可以给WordPress主题分类目录添加缩略图了,特别是一些企业站会用到这个功能哦。

WordPress添加「列表模式」和「摘要模式」切换

通常WordPress主题首页的文章列表,有两种模式,一般分为显示摘要和图片,另一种就是简单的列表模式,只显示文章和阅读等相关信息,那么能不能让两者自动切换呢?

让首页文章添加列表模式和摘要模式切换

这里我们来给WordPress添加一个功能按钮,使它支持首页文章下的文章模式:列表模式和图文摘要模式相互切换的功能。

WordPress添加「列表模式」和「摘要模式」切换 第1张-小羿

效果图如上,这里我们开始代码教程吧。

实现原理

简单的说,这个功能就是通过点击事件来改变CSS,那么一般都是通过JS来实现的。点击一个变换到另外一个,改变CSS,这个就是思路。

js代码

<script>
$(document).ready(function(){
$("#lb").click(function(){ //定义代码的id,如果这里要修改,下面的调用代码也要对应修改
$(".excerpt .focus").addClass("displaynone"); //对应的类名添加额外类,类为.excerpt .focus,添加的CSS类名为displaynone
$(".excerpt .note").addClass("displaynone"); //同上
$(".ratings").addClass("displaynone"); //同上
$(".excerpt").css("padding","10px 10px 10px 25px"); //修改类名为excerpt的padding属性
$("#zy").show(); //显示id为zy的标签
$("#lb").hide(); //隐藏id为lb的标签
});
});
$(document).ready(function(){
$("#zy").click(function(){
$(".excerpt .focus").removeClass("displaynone"); //对应的类名添加额外类,类为.excerpt .focus,添加的CSS类名为displaynone
$(".excerpt .note").removeClass("displaynone"); //同上
$(".ratings").removeClass("displaynone"); //同上
$(".excerpt").css("padding","20px 20px 20px 255px"); //修改类名为excerpt的padding属性
$("#lb").show(); //显示id为lb的标签
$("#zy").hide(); //隐藏id为zy的标签
});
});
</script>

css代码

.displaynone
{
display:none;
}
#zy{
display:none;
}

上面的js和css代码大家加入到全站通用的公共文件就好了,至于dux 的话就直接加入到主题后台的代码栏目里面也行,这里测试的也是dux主题。

调用代码

<span class="list"><span id="lb"><i class="fa fa-list"></i> 列表模式</span><span id="zy"><i class="fa fa-list"></i> 摘要模式</span></span>

将调用代码加到想要添加按钮的地方即可,通常是在index.php文件里面添加。

WordPress 根据标签别名获取标签链接的方法

WordPress根据标签别名获取标签链接的方法,某个文章列表需要调用某标签下的文章,然后要加个此标签的 More 链接,那么就要“根据标签别名获取标签链接”了。打开 functions.php 文件,添加下面的代码:

//根据标签别名获取标签链接地址 
function get_tag_link_by_slug($tag_slug) {
$tag=get_term_by( 'slug', $tag_slug, 'post_tag' ); //用 get_term_by函数获取别名对应的标签数组
if ($tag) return get_tag_link($tag->term_id); //用 get_tag_link 函数获取标签别名的链接
return 0;
}

调用及使用方法:

<?php echo get_tag_link_by_slug('标签别名'); ?>

定时清理 WordPress 回收站的方法

在WordPress中,有一个功能是「回收站」,当有垃圾留言或是删除的文章,会先移到这个「回收站」,跟Windows系统的资源回收站其实功能差不多,只是日积月累之下,垃圾桶可能都会有一大堆的垃圾,占据的网站的资源,对于使用免费虚拟主机的人,更是一个负担,还好,只要在根目录的「wp-config.php」中加入以下的语法,便能让系统自行清理回收桶的垃圾喔。

打开 wp-config.php 添加如下内容

 define( 'EMPTY_TR-ASH_DAYS' , 7 );

注意看一下,不是有数字7吗?那就是垃圾放在回收桶几日,就自行删除的时间喔。(单位为日)

WordPress技巧:移除后台隐私相关的页面

WordPress 4.9.6 版本更新主要是为了兼容欧洲即将生效的通用数据保护条例,即 General Data Protection Regulation ,简称 GDPR。

由于欧洲的 GDPR 条例将于2018年5月25日生效,违反此规定的网站将受到最高占全球总收入的 4 %的处罚。因此,Google,Facebook,,阿里等已经根据此条例更新了隐私条款,该条例影响十分广泛。

但是我们的博客,只是在国内运营,这些页面暂时没有必要,所以可以把后台隐私相关的屏蔽掉。

add_action('admin_menu', function (){
global $menu, $submenu;

// 移除设置菜单下的隐私子菜单。
unset($submenu['options-general.php'][45]);

// 移除工具彩带下的相关页面
remove_action( 'admin_menu', '_wp_privacy_hook_requests_page' );

remove_filter( 'wp_privacy_personal_data_erasure_page', 'wp_privacy_process_personal_data_erasure_page', 10, 5 );
remove_filter( 'wp_privacy_personal_data_export_page', 'wp_privacy_process_personal_data_export_page', 10, 7 );
remove_filter( 'wp_privacy_personal_data_export_file', 'wp_privacy_generate_personal_data_export_file', 10 );
remove_filter( 'wp_privacy_personal_data_erased', '_wp_privacy_send_erasure_fulfillment_notification', 10 );

// Privacy policy text changes check.
remove_action( 'admin_init', array( 'WP_Privacy_Policy_Content', 'text_change_check' ), 100 );

// Show a "postbox" with the text suggestions for a privacy policy.
remove_action( 'edit_form_after_title', array( 'WP_Privacy_Policy_Content', 'notice' ) );

// Add the suggested policy text from WordPress.
remove_action( 'admin_init', array( 'WP_Privacy_Policy_Content', 'add_suggested_content' ), 1 );

// Update the cached policy info when the policy page is updated.
remove_action( 'post_updated', array( 'WP_Privacy_Policy_Content', '_policy_page_updated' ) );
},9);

给WordPress添加类似微博/说说的功能(代码版)

有些人没有时间写长篇大论,也希望用WordPress发布类似于微博/说说的内容,今天就给大家分享给WordPress添加类似微博/说说的功能,无需要插件。

1.打开你主题的「functions.php」文件,添加下面的内容:

//说说
add_action('init', 'my_custom_init'); function my_custom_init() { $labels = array( 'name' => '说说', 'singular_name' => 'singularname', 'add_new' => '发表说说', 'add_new_item' => '发表说说', 'edit_item' => '编辑说说', 'new_item' => '新说说', 'view_item' => '查看说说', 'search_items' => '搜索说说', 'not_found' => '暂无说说', 'not_found_in_trash' => '没有已遗弃的说说', 'parent_item_colon' => '', 'menu_name' => '说说' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array('title','editor','author') ); register_post_type('shuoshuo',$args); }

2.新建立一个php文件,命名为shuoshuo.php,复制下面的内容进去,保存后,把shuoshuo.php放到主题目录里面。

<?php /*
Template Name: 说说
author: 你的名字
*/
get_header(); ?>
<style type="text/css">
#shuoshuo_content {
background-color: #fff;
padding: 10px;
min-height: 500px;
}
/* shuo */
body.theme-dark .cbp_tmtimeline::before {
background: RGBA(255, 255, 255, 0.06);
}
ul.cbp_tmtimeline {
padding: 0;
}
div class.cdp_tmlabel > li .cbp_tmlabel {
margin-bottom: 0;
}
.cbp_tmtimeline {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
position: relative;
}
/* The line */
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: RGBA(0, 0, 0, 0.02);
left: 80px;
margin-left: 10px;
}
/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
display: block;
/* width: 29%; */
/* padding-right: 110px; */
max-width: 70px;
position: absolute;
}
.cbp_tmtimeline > li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
color: #9BCD9B;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
color: RGBA(255, 125, 73, 0.75);
}
div.cbp_tmlabel > p {
margin-bottom: 0;
}
/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 45px 65px;
background: #9BCD9B;
color: #fff;
padding: .8em 1.2em .4em 1.2em;
/* font-size: 1.2em; */
font-weight: 300;
line-height: 1.4;
position: relative;
border-radius: 5px;
transition: all 0.3s ease 0s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
cursor: pointer;
display: block;
}
.cbp_tmlabel:hover {
/* transform:scale(1.05); */
transform: translateY(-3px);
z-index: 1;
-webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
background: RGBA(255, 125, 73, 0.75);
}
/* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #9BCD9B;
border-width: 10px;
top: 4px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: RGBA(255, 125, 73, 0.75);
}
p.shuoshuo_time {
margin-top: 10px;
border-top: 1px dashed #fff;
padding-top: 5px;
}
/* Media */
@media screen and (max-width: 65.375em) {
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
}
}
.shuoshuo_author_img img {
border: 1px solid #ddd;
padding: 2px;
float: left;
border-radius: 64px;
transition: all 1.0s;
}
.avatar {
-webkit-border-radius: 100% !important;
-moz-border-radius: 100% !important;
box-shadow: inset 0 -1px 0 #3333sf;
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
}
.zhuan {
transform: rotateZ(720deg);
-webkit-transform: rotateZ(720deg);
-moz-transform: rotateZ(720deg);
}
/* end */
</style>
</head>
<body>
<div id="primary" class="content-area" style="">
<main id="main" class="site-main" role="main">
<div id="shuoshuo_content">
<ul class="cbp_tmtimeline">
<?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
<li> <span class="shuoshuo_author_img"><img src="http://media.liuyanzhao.com/wp-content/uploads/2017/02/zhitianjiahui-e1489667385398.png" class="avatar avatar-48" width="48" height="48"></span>
<a class="cbp_tmlabel" href="javascript:void(0)">
<p></p>
<p><?php the_content(); ?></p>
<p></p>
<p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
<?php the_time('Y年n月j日G:i'); ?>
</p>
</a>
<?php endwhile;endif; ?>
</li>
</ul>
</div>
</main>
<!-- .site-main -->
</div>
<script type="text/javascript">
$(function () {
var oldClass = "";
var Obj = "";
$(".cbp_tmtimeline li").hover(function () {
Obj = $(this).children(".shuoshuo_author_img");
Obj = Obj.children("img");
oldClass = Obj.attr("class");
var newClass = oldClass + " zhuan";
Obj.attr("class", newClass);
}, function () {
Obj.attr("class", oldClass);
})
})
</script>
<?php get_sidebar(); ?>
<?php get_footer();?>

需要注意的是,如果想要单纯地写文字的话,可以把最后一段代码中的<?php the_content(); ?>改成<?php the_title(); ?>

WordPress在首页文章列表中显示评论方法

有些用户需要在WordPress首页文章列表直接显示文章的评论内容,如果直接添加<?php comments_template(); ?>是不能的,下面教大家正确方法,可以用到分类页、标签页、日期归档页等文章列表页!

在WordPress主题的index.php文件的文章调用循环内,即 while (have_posts()) : the_post(); 和 endwhile; 之间适当位置,添加以下代码:

<?php
global $withcomments;
$withcomments = true;

// 包含评论模板文件,
comments_template("/inline-comments.php");
?>

实现原理很简单,我在以上代码的第2行声明我将使用全局变量$withcomments,并将其值改成true。接着第6行包含用于在首页显示评论的模板inline-comments.php,为什么不使用默认的评论模板comments.php呢?

其实不管什么东西都有其适用范围,一般WordPress主题中的comments.php都是专门为文章single和页面page定制的,如果把它硬套到主页上,似乎会觉得很别扭,如果你想在首页显示各文章的评论,就给首页定制个显示评论的模板吧!如想使用默认评论模板comments.php,第6行改成comments_template();

禁用 WordPress 5.0 的 Gutenberg(古腾堡) 编辑器方法

WordPress 5.0 使用新的编辑器Gutenberg(古腾堡) 代替了旧版本的编辑器,Gutenberg 编辑器虽然适合新手使用,但对于一些老用户来说真TM蛋疼啊,不习惯,所以下面就教大家禁用 WordPress 5.0 的 Gutenberg(古腾堡) 编辑器方法。

在主题的 functions.php 文件添加下面的代码:

//Wordpress 5.0+ 禁用 Gutenberg 编辑器
add_filter('use_block_editor_for_post', '__return_false');
remove_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );

WordPress中英文数字之间自动加空格排版方法

常来说中文与英文、中文和数字之间加上空格的排版会更加好看,但是如果让我们在编辑文章的时候人工添加,感觉非常繁琐和让人厌烦,下面跟大家介绍一下 WordPress 如何实现中英文数字之间自动加空格的排版技巧。

第一步:html或body标签中加入han-la类

在html标签中添加 class=”han-la”(一般在 header.php 文件中)。但是并不是硬性规定,现在很多博客都是通过功能函数动态加载class类,那么同样的,你也可以将这个han-la类动态加载到body中去。 将类加载到html标签中的方法就不说了,这里说下怎么加载到body标签中,当然在这里,你的主题应该是使用了body_class()这个标准函数的。

/**
* WordPress实现中英文数字之间自动加空格排版
* 在body标签中加入han-la类
*/
function lxtx_add_hanla_to_body_class( $classes ) {
$classes[] = 'han-la';
return $classes;
}
add_filter('body_class', 'lxtx_add_hanla_to_body_class');

第二步:引入js文件

在jquery文件后面引入text-autospace.min.js或text-autospace.js,下载地址为:https://github.com/mastermay/text-autospace.js

/**
* WordPress实现中英文数字之间自动加空格排版
* 加入text-autospace.min.js文件
*/
function lxtx_styles_scripts() {
//全局加载js脚本
wp_enqueue_script( 'han-la-js', get_template_directory_uri() . '/includes/js/text-autospace.min.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'lxtx_styles_scripts' );

注意修改代码中文件引用路径哦~

最后一步:添加CSS代码

将以下代码加入你的style.css文件中。

/* han-la xtx */
body.han-la hanla:after {
content:" ";
display:inline;
font-family:Arial;
font-size:0.89em;
}
body.han-la code hanla,body.han-la pre hanla,body.han-la kbd hanla,body.han-la samp hanla {
display:none;
}
body.han-la ol > hanla,body.han-la ul > hanla {
display:none;
}

当然,如果在第一步中,你是将han-la类class加到html标签中的话,在这一步中你需要将以上CSS代码中的body全改为html

DIY WordPress后台登陆样式代码分享

有时候用WordPress给客户搭建网站,但是后台登录界面可能需要修改成客户需求的界面,所以你需要DIY WordPress后台登陆,下面小羿给大家分享代码:

//去登录界面的默认图片
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/logo.png) !important;background-size: 265px !important;width:265px !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');
// 修改默认登录界面的 LOGO 的链接地址为自己网站的地址
function custom_loginlogo_url($url) {
return'https://dedewp.com/'; //在此输入你需要链接到的 URL 地址
}
add_filter( 'login_headerurl', 'custom_loginlogo_url');
function custom_register_url($url) {
return'https://dedewp.com/'; //在此输入你需要链接到的 URL 地址
}
add_filter( 'login_registerurl', 'custom_register_url');
// 去 LOGO 的 title 文字
function custom_headertitle ( $title ) {
return __( 'WordPress 一站式建站服务平台' );
}
add_filter('login_headertitle','custom_headertitle');
// 添加登录注册界面的背景图片,修改登录,注册框的样式及按钮样式
function custom_loginbg() {
echo '<style type="text/css">body{background: url('.get_bloginfo('template_directory').'/images/bg2.jpg) center center no-repeat;background-size: cover;}#login{position:absolute;bottom:10%;right:5%;}.login #nav{font-size:16px;}.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large {height: 35px;width: 100%;margin: 10px auto;line-height: 32px;padding: 0 12px 2px;}#backtoblog{display:none;}</style>';
}
add_action('login_head', 'custom_loginbg');

WordPress的媒体库默认加载所有图片,修改只显示上传目前文章中的图片

文章经常会插入图片的用户,当你点击媒体库的时候WordPress默认会加载所有图片出来,很显然会影响 WordPress 的速度,那么问题来了,如何设置只显示上传到本文章中的图片呢?

打开你主题的functions.php文件,添加下面的代码:

add_action( 'wp_footer', 'fanly_mediapanel_lock_uploaded' );
add_action( 'admin_footer-post-new.php', 'fanly_mediapanel_lock_uploaded' );
add_action( 'admin_footer-post.php', 'fanly_mediapanel_lock_uploaded' );
function fanly_mediapanel_lock_uploaded() {
echo '<script type="text/javascript">var $i=0;jQuery(document).on("DOMNodeInserted", function(){if(jQuery("#media-attachment-filters").length>0&&$i==0){jQuery(\'select.attachment-filters [value="uploaded"]\').attr(\'selected\',true).parent().trigger(\'change\');$i++;}});</script>';
}

免操作数据库,批量替换WordPress文章中文字方法

有时候文章中某些关键词需要批量替换,但是文章太多一篇一篇去修改就太麻烦了,虽然可以通过用数据库来批量替换,但是如果你只是临时修改,那么小羿教大家一个很简单的方法:

打开你主题的functions.php文件,然后添加下面的代码:

function replace_text_wps($text){  
$replace = array(
// '关键词' => '替换的关键词'
'wordpress' => '<a href="#">wordpress</a>',
'excerpt' => '<a href="#">excerpt</a>',
'function' => '<a href="#">function</a>'
);
$text = str_replace(array_keys($replace), $replace, $text);
return $text;
}

add_filter('the_content', 'replace_text_wps');
add_filter('the_excerpt', 'replace_text_wps');

通过这种方法不会影响到数据库,还可以批量替换关键词的链接地址哦!

WordPress获取文章所有图片和数量方法

如果想用WordPress做成图片站或者CMS,主页可能需要获取文章所有图片,那么如何实现呢?下面教大家WordPress获取文章所有图片和数量方法:

wordpress主题获取文章中的所有图片

function hui_get_thumbnail( $single=true, $must=true ) {
global $post;
$html = '';
if ( has_post_thumbnail() ) {
$domsxe = simplexml_load_string(get_the_post_thumbnail());
$src = $domsxe->attributes()->src;
$src_array = wp_get_attachment_image_src(hui_get_attachment_id_from_src($src), 'thumbnail');
$html = sprintf('<li><img src="%s" /></li>', $src_array[0]);
} else {
$content = $post->post_content;
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
$images = $strResult[1];
$counter = count($strResult[1]);
$i = 0;
foreach($images as $src){
$i++;
$src2 = wp_get_attachment_image_src(hui_get_attachment_id_from_src($src), 'thumbnail');
$src2 = $src2[0];
if( !$src2 && true ){
$src = $src;
}else{
$src = $src2;
}
$item = sprintf('<li><img src="%s" /></li>', $src);
if( $single){
return $item;
break;
}
$html .= $item;
if(
($counter >= 4 && $counter < 8 && $i >= 4) ||
($counter >= 8 && $i >= 8) ||
($counter > 0 && $counter < 4 && $i >= $counter)
){
break;
}
}
}
return $html;
}
function hui_get_attachment_id_from_src ($link) {
global $wpdb;
$link = preg_replace('/-\d+x\d+(?=\.(jpg|jpeg|png|gif)$)/i', '', $link);
return $wpdb->get_var("SELECT ID FROM {$wpdb->posts} WHERE guid='$link'");
}

wordpress主题前台调用代码放在需要显示的位置上

<?php echo hui_get_thumbnail(false,true);?>

获取wordpress文章内容中的图片数量值

if( !function_exists('get_post_images_number') ){  
function get_post_images_number(){
global $post;
$content = $post->post_content;
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $result, PREG_PATTERN_ORDER);
return count($result[1]);
}
}

wordpress前台显示代码

<?php echo get_post_images_number().'张图片' ?>

让WordPress给登录用户/游客显示不同菜单

有时候WordPress一些内容不想提供给白嫖用户,只允许注册用户后可以看见,我们可以通过设置WordPress给登录用户/游客显示不同菜单,方法如下:

打开主题文件「functions.php」添加下面的内容:

/**
*WordPress 用户登录和没登录的时候显示不同的菜单
*/
function Bing_wp_nav_menu_args( $args = '' ){
if( is_user_logged_in() ) $args['menu'] = '登录';
else $args['menu'] = '未登录';
return $args;
}
add_filter( 'wp_nav_menu_args', 'Bing_wp_nav_menu_args' );

其中 '登录' 和 '未登录' 自己修改成你的菜单名称就可以了。

代码版:自定义修改 WordPress 文章排序方法

「WordPress」 我们发布文章虽然可以通过修改日期或者置顶的方式来排序,但是有些网站有特殊需求,需要自定义修改文章排序,之前给大家分享过插件「Simple Custom Post Order」现在给大家分享代码版的方法,只支持文章类型哦。

在「WordPress」写文章页面 → 自定义字段,添加新栏目:post_order,数值输入0。

代码版:自定义修改 WordPress 文章排序方法 第1张-小羿

接着打开你的主题模板 index.php 文件,找到下面的代码:

$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1; $args=array

从这里开始下面的代码

‘caller_get_posts’ => 1, ‘paged’ => $paged

替换成

‘meta_key’ => ‘post_order’, ‘orderby’ => ‘meta_value’, ‘paged’ => $paged, ‘order’ => ‘DESC’

接着就可以修改文章里面刚才新增加的 post_order 数值,自行修改数值来排序。

让 WordPress 支持自动切换暗黑模式/正常模式

随着暗黑模式的流行,现在主流的浏览器也支持了暗黑模式,在浏览器开启暗黑模式的情况下,如果你的网站已经支持暗黑模式,会自动切换到暗黑效果。

想让网站支持自动切换暗黑模式/正常模式,可以通过在 CSS 样式文件中添加下面的代码:

@media (prefers-color-scheme: dark) {
body {
background-color: #444;
color: #e4e4e4;
}
a {
color: #e39777;
}
img {
filter: grayscale(30%);
}
}

大家可以根据自己网站的风格修改暗黑模式下的CSS样式,支持Firefox, Safari, Chrome浏览器。

WordPress 获取网站总访问量方法

相信大多数人都会在网站上添加流量统计功能,例如百度统计、CNZZ统计、谷歌统计,如果你不想用流量统计,只希望统计网站总访问量,可以通过下面的代码。

打开你「WordPress」主题的 functions 文件,在里面添加下面的内容:

//WordPress获取站点总浏览量
function all_view() /*注意这个函数名,调用的就是用它了*/
{
global $wpdb;
$count=0;
$views= $wpdb->get_results("SELECT * FROM $wpdb->postmeta WHERE meta_key='views'");
foreach($views as $key=>$value)
{
$meta_value=$value->meta_value;
if($meta_value!=' ')
{
$count+=(int)$meta_value;}
}
return $count;}

然后在你希望显示总访问量的地方,例如页脚,添加下面的代码:

<?php echo all_view(); ?>

如果你的站点遇到了致命错误请自查 all_view() 这个函数是否被别的代码占用了。如果是的,请将 all_view() 改为其他函数名。

利用 Share.js 给 WordPress 文章添加分享链接功能

Share.js 是一个免费开源的项目,支持给你的文章添加一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站,使用字体图标。如果你是用 Wordpress 程序,也是支持的,方法如下。

1.Share.js

https://overtrue.me/share.js/

2.安装

在主题文件的 header.php 文件的 </head> 标签前加入下面代码:

<link href="<?php echo get_template_directory_uri(); ?>/dist/css/share.min.css" rel="stylesheet">
<script src="<?php echo get_template_directory_uri(); ?>/dist/js/social-share.min.js"></script>

3.调用

在需要显示分享功能的位置添加下面的代码:

<div class="social-share"></div>

4.自定义功能

使用: data-initialized="true" 标签或者 initialized 配置项来禁用自动生成icon功能。

<div class="social-share" data-initialized="true">
<a href="#" class="social-share-icon icon-weibo"></a>
<a href="#" class="social-share-icon icon-qq"></a>
<a href="#" class="social-share-icon icon-qzone"></a>
</div>