10条技巧帮你精简WordPress网站后台

WordPress网站打开速度太慢的问题,最近困扰了许多中文用户。我们及时撰写了几篇文章,可以给你的 Word…

WordPress网站打开速度太慢的问题,最近困扰了许多中文用户。我们及时撰写了几篇文章,可以给你的 WordPress 网站大幅提速。这两天我们继续研究 WordPress 的后台,发现控制台(仪表盘)过于复杂,仍然是导致网站后台慢的重要原因。于是,我们收集了10条可以精简 WordPress 后台的小窍门,可以提高进入WordPress网站后台的速度。

WordPress 的功能强大,简单易用,所以我们都很喜欢 WordPress 。随着 WordPress 的不断发展,功能不断增加,后台的速度也受到了一些影响,尤其是在网络不好的时候,进入 WordPress 后台会十分缓慢。

我们下面用10个例子,来精简 WordPress 的后台。这些代码,可以添加到你所使用主题的 funcitons.php 文件或者 custom.php 文件中,不会弄乱 WordPress 程序的核心代码

技巧1,移除控制台中的【帮助】和【屏幕选项】

我们许多 WordPress 王牌主机用户第一次登录他们的 WordPress 网站的时候,会觉得 WordPress 控制台(又译作仪表盘)东西太多,看起来会觉得有点眼花缭乱。虽然 WordPress 很容易使用,但是 WordPress 控制台可以更简洁一些,减少一些不必要的内容。

首先,我们要移除 WordPress 控制台右上角的【帮助】和【屏幕选项】。大部分 WordPress 用户其实根本用不到这些,尽量保持后台的简洁。

以下代码来自 WordPress StackExchange 上网友的回复:

/* ------------------------------------------------------ */
// Remove help and screen context & Options
// http://wordpress.stackexchange.com/questions/73561/how-to-remove-all-widgets-from-dashboard
add_filter( 'contextual_help', 'wpse_25034_remove_dashboard_help_tab', 999, 3 );
add_filter( 'screen_options_show_screen', 'wpse_25034_remove_help_tab' );

function wpse_25034_remove_dashboard_help_tab( $old_help, $screen_id, $screen )
{
	if( 'dashboard' != $screen->base )
	return $old_help;
	$screen->remove_help_tabs();
	return $old_help;
}

function wpse_25034_remove_help_tab( $visible )
{
	global $current_screen;
	if( 'dashboard' == $current_screen->base )
	return false;
	return $visible;
}
/* ------------------------------------------------------ */

技巧2,移除【管理工具条】

WordPress 顶部的管理工具条,也可以去除掉。每个人的看法不一样,有的人喜欢,不过有的人觉得过于笨重,希望去掉这个工具条。我们这一条技巧,教会你移除管理工具条,之前我们一篇文章也介绍过一次;下一条技巧将会告诉你,如何在网站的左下角创建一个简单的管理按钮。

这段代码可以移除 WordPress 网站的管理工具条,代码来自 Yoast 的文章:

/* ------------------------------------------------------ */
// Disable the Admin Bar.
// From: http://yoast.com/disable-wp-admin-bar/
add_filter( 'show_admin_bar', '__return_false' );

function sp_hide_admin_bar_settings()
{
	?><style type="text/css">.show-admin-bar {display: none;}</style><?php
}

function sp_disable_admin_bar()
{
	add_filter( 'show_admin_bar', '__return_false' );
	add_action( 'admin_print_scripts-profile.php', 'sp_hide_admin_bar_settings' );
}
add_action( 'init', 'sp_disable_admin_bar' , 9 );
/* ------------------------------------------------------ */

技巧3,创建简单的管理按钮

我们已经把 WordPress 的【管理工具条】移走了,现在我们来创建一个简单管理按钮。这个管理按钮,将会在你登录 WordPress 后台之后,出现在你的网站前台的左下角,并不太明显。根据你使用主题的不同,或许你需要对这段代码进行适当的微调。我使用 WordPress Twenty Fourteen 主题测试,效果很好,鼠标划到左下角的时候才能看到这个管理按钮,只有三个链接:退出登录、控制台(仪表盘)、编辑页面。

/* ------------------------------------------------------ */
// Select Performers Admin Button
// This function creates a subtle button on the bottom left of the screen when logged in
// When you click on the button a simple WP admin bar appears
// Note, you should hide the standard WP bar
// You need Font Awesome installed to show the button
function sp_custom_login()
{
	$current_user = wp_get_current_user();
	$displayName = $current_user->display_name;
	$logout = wp_logout_url("/");

	if(is_user_logged_in())
	{
		echo '<style>
		.adminEdit {position:fixed;bottom:20px;left:10px; z-index:9999; display:none;}
		.adminEdit p { background:#dedede; opacity:0.8; padding:10px; border:#ababab 1px solid; font-size:0.9em; border-radius:5px;}
		#admin-menu-show { position:fixed; bottom:-50px; left:-50px; border-radius:50px;width:100px; height:100px; background-color:#333; opacity:0.2; z-index:9999;}
		#admin-menu-show:hover {opacity:0.7;}
		#admin-menu-show:active {opacity:1; background-color:#900;}
		#admin-menu-show i { color:#fff; font-size: 90px;padding-left: 10px;display: block;margin-top: 10px;}
		#admin-menu-show:hover {cursor:pointer;}
		</style>';
		echo "<script>jQuery(document).ready(function ($) { $('#admin-menu-show').click(function() { $('.adminEdit').toggle('fast');});});</script>";
	}

	if ( current_user_can('edit_post'))
	{
		edit_post_link("<i class="icon-edit"></i> Edit Page","<div class="adminEdit"><p><i class="icon-user"></i> $displayName logged in | <a href="$logout" title="Log Out"><i class="icon-signout"></i> Log Out</a> | <a href="/wp-admin/" title="Go to Dashboard"><i class="icon-cog"></i> Dashboard</a> | ","</p></div>");
		?><div id="admin-menu-show" title="Show Admin Bar"><i class="icon-cog"></i></div><?php
	}
	elseif(is_user_logged_in())
	{
		echo "<div class="adminEdit"><p><i class="icon-user"></i> $displayName logged in | <a href="$logout" title="Log Out"><i class="icon-signout"></i> Log Out</a>";
		?><div id="admin-menu-show" title="Show Admin Bar"><i class="icon-cog"></i></div><?php
	}
}
add_action('wp_footer', 'sp_custom_login');
/* ------------------------------------------------------ */

技巧4,移除控制台中讨厌的挂件

有的网友不希望 WordPress 控制台显示自带的或者插件添加的挂件。比如不希望在控制台中显示网站的『当前状况』、『最新评论』、『进入链接』、『最新草稿』、『WordPress官方博客』、『WordPress其他新闻』、『快速发布』等内容。

以下代码可以帮你移除WordPress控制台中的这些讨厌的挂件。这些代码来自DigWP网站:

/* ------------------------------------------------------ */
// Remove Dashboard Widgets
// http://digwp.com/2010/10/customize-wordpress-dashboard/

function disable_default_dashboard_widgets()
{
	// disable default dashboard widgets
	remove_meta_box('dashboard_right_now', 'dashboard', 'core');
	remove_meta_box('dashboard_recent_comments', 'dashboard', 'core');
	remove_meta_box('dashboard_incoming_links', 'dashboard', 'core');
	remove_meta_box('dashboard_plugins', 'dashboard', 'core');
	remove_meta_box('dashboard_recent_drafts', 'dashboard', 'core');
	remove_meta_box('dashboard_quick_press', 'dashboard', 'core');
	remove_meta_box('dashboard_recent_drafts', 'dashboard', 'core');
	remove_meta_box('dashboard_primary', 'dashboard', 'core');
	remove_meta_box('dashboard_secondary', 'dashboard', 'core');
	remove_meta_box('rg_forms_dashboard', 'dashboard', 'normal;');
	remove_meta_box('blc_dashboard_widget', 'dashboard', 'normal;');
	remove_meta_box('powerpress_dashboard_news', 'dashboard', 'normal;');
	// disable Simple:Press dashboard widget
	remove_meta_box('sf_announce', 'dashboard', 'normal');
}
add_action('admin_menu', 'disable_default_dashboard_widgets');

技巧5,在WordPress 3.x+版本中防止TinyMCE编辑器弄乱代码

如果你喜欢更精确地控制WordPress网站中文文章和页面,那么你可能已经发现,WordPress自带的TinyMCE编辑器常常会清理一些代码;如果你经常在可视化编辑模式和文本编辑模式之间切换的话,这种情况尤为明显。这种状况有点令人恼火。

下面这段来自 Leighton 的代码可以解决这个问题:

/* ------------------------------------------------------ */
// Stop TinyMCE in WordPress 3.x messing up your HTML code
// http://www.leighton.com/blog/stop-tinymce-in-wordpress-3-x-messing-up-your-html-code
function override_mce_options($initArray)
{
	$opts = '*[*]';
	$initArray['valid_elements'] = $opts;
	$initArray['extended_valid_elements'] = $opts;
	return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
/* ------------------------------------------------------ */

技巧6,从挂件和菜单中移除插件

我们已经移除了WordPress控制台中大部分平时用不到的内容,但是仍然有一些插件,会在WordPress的控制台或者菜单中插入一些东西。要移除这些代码有点困难,需要你查看一下这些插件生成内容的代码,然后自定义CSS代码来隐藏这些内容。

下面这段代码,是用来移除 W3 Totacl Cache 插件(WordPress缓存插件),Better WP Security插件(WordPress安全插件),以及 Yoast WordPress SEO 插件(SEO著名插件)所生成的无用内容的:

/* ------------------------------------------------------ */
// Remove Clutter by hiding widgets using CSS
add_action('admin_head', 'wp_remove_clutter');

function wp_remove_clutter()
{
	echo '<style>
	.toplevel_page_better-wp-security .side, #w3tc-dashboard-widgets, #wpseo_content_top + .postbox-container {display:none;}
	</style>';
}
/* ------------------------------------------------------ */

技巧7,将网站内容的绝对网址换成相对网址

使用绝对网址还是使用相对网址,是开发者之间永久的争论。WordPress网站使用都是绝对网址,但有许多用户希望能改成使用相对网址;不过目前看不到 WordPress 会在这方面有任何改动。

比如说,前面有一篇介绍5月份Top 5 WordPress免费主题的文章,它的网址是 https://wpchina.org/top-5-free-wordpress-theme-may-2014-1534/ ,这就是绝对网址,在数据库里保存的也是绝对网址。如果使用相对网址,那么就是 /top-5-free-wordpress-theme-may-2014-1534/ 。

很显然,绝对网址太长,而且要修改网站域名的时候很麻烦,必须适当操作才能完美更换WordPress网站域名。

下面的代码,可以将你的WordPress网站中的文章和页面的域名,从绝对网址转换为相对网址,代码来自Thisismyurl.com:

/* ------------------------------------------------------ */
/* Convert absolute URLs in content to site relative ones
Inspired by http://thisismyurl.com/6166/replace-wordpress-static-urls-dynamic-urls/
*/
function sp_clean_static_url($content) {
	$thisURL = get_bloginfo('url');
	$stuff = str_replace(' src="'.$thisURL, ' src="', $content );
	$stuff = str_replace(' href="'.$thisURL, ' href="', $stuff );
	return $stuff;
}
add_filter('content_save_pre','sp_clean_static_url','99');
/* ------------------------------------------------------ */

技巧8,发布文章和页面时,添加确认框

或许你也遇到过这样的情况,在文章还没有完全写好的情况下,不小心碰到了发布文章的按钮。我们WordPress主机的用户,给我们反映过类似的问题。下面这段简单的代码,可以解决这个问题,本应该成为 WordPress 核心代码。加上这段代码之后,当你点击到发布文章按钮后,会弹出一个对话框,要求你确认。

这段代码来自 GitHub Gist 网站:

/* ------------------------------------------------------ */
// Add confirmation dialogue box when publishing posts/pages
// https://gist.github.com/plasticmind/4337952
/* = Add a "molly guard" to the publish button */

add_action( 'admin_print_footer_scripts', 'sr_publish_molly_guard' );
function sr_publish_molly_guard() {
	echo "
	<script>
		jQuery(document).ready(function($){
			$('#publishing-action input[name="publish"]').click(function() {
				if(confirm('Are you sure you want to publish this?')) {
					return true;
				} else {
					$('#publishing-action .spinner').hide();
					$('#publishing-action img').hide();
					$(this).removeClass('button-primary-disabled');
					return false;
				}
				});
			});
	</script>
	";
}
/* ------------------------------------------------------ */

技巧9,添加特色图片,并在RSS feed中链接回原文

特色图片是WordPress一个非常实用的功能,刚开始推出的时候叫做缩略图,而后又改名叫做特色图片、推荐图片,目前绝大部分 WordPress 主题都支持这个特色图片功能,通常出现在网站首页或者单篇文章中文章的顶部;现在的问题是,特色图片没办法出现在Rss Feed中。

下面这段代码,可以将特色图片添加到 Rss Feed 中,并给特色图片添加一个链接,指向文章的源地址。如果你希望添加上一段版权代码,可以自己进行修改,很简单的。这段代码来自 Paul Und 的网站:

// ------------------------------------------------------------------------------
// Include Featured Image &amp; Add Link Back To Original Post
// http://www.paulund.co.uk/7-tips-to-improve-your-wordpress-rss-feed
// ------------------------------------------------------------------------------
function feed_copyright_disclaimer($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$featuredImage = '<p style="text-align:center;"><a href="' . get_permalink() . '">' . get_the_post_thumbnail($post->ID,"medium-large").'</a></p>';
	}
	$content = $featuredImage."<p>".get_the_excerpt()."</p>".'<p><a href="' . get_permalink() . '">Read all of this article</a> on the website.</p>';
	return $content;
}

add_filter('the_excerpt_rss','feed_copyright_disclaimer');
add_filter('the_content_feed','feed_copyright_disclaimer');
// ------------------------------------------------------------------------------

技巧10,让WordPress中的图片说明支持HTML5和响应式设计

这个小技巧有点极客范儿,不过也挺有用的。如果你在 WordPress 网站中插入图片的时候,曾经添加过图片说明,那么你的体验一定很失望。WordPress 核心代码中有这个功能,但如果你使用的是响应式设计的主题,宽度可能会处理不好,在用户使用手机,平板等移动设备浏览时,可能会出现影响版面的问题。

下面这段代码,可以让图片说明文字兼容HTML5和响应式设计的主题。可能在具体应用的时候,你需要对CSS样式代码进行适当美化,但基本上功能是这样的。这段代码来自 WordPress 官方文档,我还没有用过:

/* ------------------------------------------------------ */
// Filter to replace the shortcode text with HTML5 compliant code
// http://codex.wordpress.org/Function_Reference/add_filter
function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
	extract(shortcode_atts(array(
	'id' => '',
	'align' => '',
	'width' => '',
	'caption' => ''
	), $attr));

	if ( 1 > (int) $width || empty($caption) )
		return $val;

	$capid = '';
	if ( $id ) {
		$id = esc_attr($id);
		$capid = 'id="figcaption_'. $id . '" ';
		$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
	}

	return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >'
	. do_shortcode( $content ) . '<figcaption ' . $capid
	. 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}

add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);
/* ------------------------------------------------------ */

结束语

我们总结了这些实用的WordPress使用技巧,希望能够对你有所帮助。你是怎么想的呢?哪些技巧对你有所帮助呢?欢迎跟帖留言,发表您的观点。

类别:WordPress经验

本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。

评论 (0)COMMENT