WordPress 后台TinyMCE 编辑器增强技巧大全

今天再补充一些 TinyMCE 编辑器增强技巧,希望能尽可能满足你自己的折腾需求。

更改编辑器默认视图为HTML

大家都知道,在后台新建文章后,编辑器就自动跳转到“可视化”视图,对于一些经常要插入代码或者WEB设计者们来说,可能更习惯使用HTML视图手动编辑。 设置方法:将以下代码添加到主题的functions.php文件里即可:
add_filter('wp_default_editor', create_function('', 'return "html";'));

添加编辑器默认内容(编辑器内可见)

新 建文章后编辑器里的内容默认是空的,有些朋友做的是WordPress主题站、插件站或单纯的下载站,一些标准的格式化的文章每次都会输入“主题名称”、 “主题作者”、“下载地址”等内容,添加默认内容之后,这些重复性的工作以后再也不用了,一切都预定义好了。而且如果发表文章不需要这些预定义的内容,只 需要全选-Delete就ok了,并不会很麻烦。 设置方法:在主题functions.php文件添加以下代码即可:
function insertPreContent($content) {
        if(!is_feed() && !is_home()) {
 $content.= "这里的预定义内容在编辑器可见";
        }
        return $content;
}
add_filter ('default_content', 'insertPreContent');

添加编辑器默认内容(编辑时不可见)

此方法添加的内容在发布文章时自动添加在内容的最后,在编辑的时候是看不见的,用于添加订阅、文章版权信息等等。 设置方法:在主题functions.php文件添加以下代码即可:
function insertFootNote($content) {
        if(!is_feed() && !is_home()) {
 $content.= "这里的预定义内容在编辑器不可见";
        }
        return $content;
}
add_filter ('the_content', 'insertFootNote');

添加更多的HTML标签

此功能请慎用,因为WordPress自带的TinyMCE编辑器会默认过滤掉不符合XHTML 1.0中的html标签,如<br />、<iframe>等。但不排除某些情况下也可能会用到这些标签,所以把方法放出来供大家参考吧。 添加方法:将以下代码粘贴到主题的functions.php文件里即可:
function fb_change_mce_options($initArray) {
$ext = 'pre[id|name|class|style],iframe[align|longdesc|
name|width|height|frameborder|scrolling|marginheight|
marginwidth|src]';  //注意:格式为“标签一[属性一|属性二],标签二[属性一|属性二|属性三]”
if ( isset( $initArray['extended_valid_elements'] ) ) {
$initArray['extended_valid_elements'] .= ',' . $ext;
} else {
$initArray['extended_valid_elements'] = $ext;
}
return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');
WordPress自带编辑器的强大往往被人忽略,很大程度上就是其隐藏的编辑按钮默认情况下没有被显示出来而已。 完整的编辑器其实包含这些功能:
加 粗(bold)、斜体(italic)、下划线(underline)、删除线(strikethrough)、左对齐(justifyleft)、居中 (justifycenter)、右对齐(justfyright)、两端对齐(justfyfull)、无序列表(bullist)、编号列表 (numlist)、减少缩进(outdent)、缩进(indent)、剪切(cut)、复制(copy)、粘贴(paste)、撤销(undo)、重 做(redo)、插入超链接(link)、取消超链接(unlink)、插入图片(image)、清除格式(removeformat)、帮助 (wp_help)、打开HTML代码编辑器(code)、水平线(hr)、清除冗余代码(cleanup)、格式选择(formmatselect)、 字体选择(fontselect)、字号选择(fontsizeselect)、样式选择(styleselect)、上标(sub)、下标(sup)、 字体颜色(forecolor)、字体背景色(backcolor)、特殊符号(charmap)、隐藏按钮显示开关(wp_adv)、隐藏按钮区起始部 分(wp_adv_start)、隐藏按钮区结束部分(wp_adv_end)、锚文本(anchor)、新建文本(类似于清空文本) (newdocument)、插入more标签(wp_more)、插入分页标签(wp_page)、拼写检查(spellchecker)。
下面就把这些功能调出来吧!效果图: wpdaxue.com-201301317 调用方式:将以下代码添加到主题functions.php文件里即可:
function enable_more_buttons($buttons) {
$buttons[] = 'hr';
$buttons[] = 'fontselect';
$buttons[] = 'sup';
$buttons[] = 'del';
$buttons[] = 'fontselect';
$buttons[] = 'cleanup';
$buttons[] = 'styleselect';

// 更多按钮自行添加吧...

return $buttons;
}
add_filter("mce_buttons", "enable_more_buttons"); //默认将新添加的按钮追加在工具栏的第一行
//add_filter("mce_buttons_2", "enable_more_buttons");  //添加到工具栏的第二行
//add_filter("mce_buttons_3", "enable_more_buttons");  //添加到工具栏的第三行

让编辑器支持中文拼写检查

WordPress自带TinyMCE编辑器默认对英文拼写进行检查,怎么样才能让其支持中文拼写检查呢? 设置方法:在主题的functions.php文件里添加如下代码即可:
function fb_mce_external_languages($initArray){
$initArray['spellchecker_languages'] = '+Chinese=zh,
English=en';

return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

简单添加自定义按钮

如果你使用了 WordPress3.0以上的版本,可以用以下方法快捷方便的在后台HTML编辑器中加入自定义按钮。 步骤一:首先创建一个js文件,粘贴如下代码并保存为my_quicktags.js文件:
QTags.addButton( 'hr', 'hr', 'n<hr />n', '' ); //快捷输入一个hr横线,点一下即可
QTags.addButton( 'h1', 'h1', 'n<h1>', '</h1>n' ); //快捷输入h1标签
//QTags.addButton( 'my_id', 'my button', 'n', 'n' );
//这儿共有四对引号,分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),n表示换行。
步骤二:把刚才写好的my_quicktags.js放在主题文件夹,再在主题 functions.php 中加入代码:
add_action('admin_print_scripts', 'my_quicktags');
function my_quicktags() {
    wp_enqueue_script(
        'my_quicktags',
        get_stylesheet_directory_uri().'/my_quicktags.js',
        array('quicktags')
    );
    }
关于quicktags的更多参数(比如 按钮的提示),你可以查看 http://codex.wordpress.org/Quicktags_API

如何自定义WordPress的 后台登录页面(Logo/链接/文本)

出于个性化要求,你可能需要自定义WordPress的登录页面的显示效果。貌似有不少这方面的WordPress插件,但是我们完全没有必要安装插件,只需要简单的添加一些代码即可。

方法概要

通过WordPress内置的挂钩(Hook),在主题的 functions.php 添加一些简单的代码,即可完成自定义修改,所有的操作都不需要修改WordPress核心文件,即使升级WordPress版本,也不会丢失效果。
注:下文提到的所有代码,都是添加到主题的 funshions.php 文件的最后一个 ?> 的前面。

自定义Logo图片

制作一个名为 login_logo.png 的图片,放在主题下的images文件夹里(也可以根据自己的实际修改,只要下面的代码引用的Logo地址正确即可)。
//自定义登录页面的LOGO图片
function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo.png) !important; }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');

自定义Logo链接

将Logo的链接改为网站首页链接:
//自定义登录页面的LOGO链接为首页链接
add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));
将Logo的链接改为任意链接:
//自定义登录界面LOGO链接为任意链接
function custom_loginlogo_url($url) {
	return 'http://www.frankway.net'; //修改URL地址
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

自定义Logo提示信息(tltle)

自定义为网站名称:
//自定义登录页面的LOGO提示为网站名称
add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));
自定义为其他任何文本:
//自定义登录页面LOGO提示为任意文本
function custom_loginlogo_desc($url) {
    return 'WordPress大学'; //修改文本信息
}
add_filter( 'login_headertitle', 'custom_loginlogo_desc' );

自定义登录框内容

//在登录框添加额外的信息
function custom_login_message() {
    echo '<p>欢迎来到'.get_bloginfo('name').',请登录后下载本站资源</p><br />';
}
add_action('login_form', 'custom_login_message');

自定义底部内容

//自定义底部信息
function custom_html() {
    echo '<p style="text-align:center">© ' . get_bloginfo(url).'</p>';
}
add_action('login_footer', 'custom_html');

自定义CSS

要更加灵活地修改登录页面的显示样式,建议添加一个自定义的CSS文件,然后查看登录页面的源代码的html结构,撰写自己的CSS样式。你可以使用下面的代码引入自己的CSS,注意修改代码中的css地址,以下调用的是主题根目录下的login_style.css:
//添加自定义CSS
function custom_login() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/login_style.css" />';
}
add_action('login_head', 'custom_login');

本文小结

通过WordPress的挂钩(hook),可以做很多自定义修改,不仅仅是登录页面哦。对于WordPress主题或插件开发者来说,掌握WordPress的各种挂钩,你就可以很自由地自定义WordPress啦!

自定义 WordPress 后台底部的版权和版本信息

WordPress 后台底部默认会显示WordPress版本信息和版本号,如果你运维一个多用户网站,并且其他用户可以访问后台,那么你可以自定义这些信息,隐藏版本号等。只要将下面的代码添加到主题的 functions.php 即可:
/**
 * 自定义 WordPress 后台底部的版权和版本信息
 * http://www.wpdaxue.com/change-admin-footer-text.html
 */
add_filter('admin_footer_text', 'left_admin_footer_text'); 
function left_admin_footer_text($text) {
	// 左边信息
	$text = '<span id="footer-thankyou">感谢使用<a href="http://cn.wordpress.org/">WordPress</a>进行创作</span>'; 
	return $text;
}
add_filter('update_footer', 'right_admin_footer_text', 11); 
function right_admin_footer_text($text) {
	// 右边信息
	$text = "3.6.1版本";
	return $text;
}
请根据自己的实际需要,修改代码中的文本内容。

精简WordPress后台

详细的level在wp-admin/menu.php中可以看到 下面的实例是去掉评论菜单,编辑主题function.php加入代码就可以实现。
function remove_menu() {
global $menu;
//移除评论主菜单
unset($menu[25]);
}
add_action('admin_head', 'remove_menu');

function remove_submenu() {
global $submenu;
//移除主题二级菜单
unset($submenu['themes.php'][10]);
}
add_action('admin_head', 'remove_submenu');

精简WordPress工具条

下面这段代码写入function.php之后,你会发现工具条变成了空的,只剩下黑条,删除其中要保留的代码即可。
function my_edit_toolbar($wp_toolbar) {
	$wp_toolbar->remove_node('wp-logo'); //去掉Wordpress LOGO
	$wp_toolbar->remove_node('site-name'); //去掉网站名称
	$wp_toolbar->remove_node('updates'); //去掉更新提醒
	$wp_toolbar->remove_node('comments'); //去掉评论提醒
	$wp_toolbar->remove_node('new-content'); //去掉新建文件
	$wp_toolbar->remove_node('top-secondary'); //用户信息
}

add_action('admin_bar_menu', 'my_edit_toolbar', 999);
修改底部文字 在wordpress管理后台中底部,有一块空白的地方,在这里其实可以使用函数添加一些你想要的文字。 比如可以做一个功能强大的通知区域。 把下面的代码复制到主题functions.php文件中,
<?php
function example_footer_admin () {
echo '<p style="color:red;">这就是我想要显示的文字</p>';
}
add_filter('admin_footer_text', 'example_footer_admin');
?>
参考资料:http://www.catswhocode.com/blog/snippets/custom-footer-text-in-wordpress-dashboard

WordPress 删除后台仪表盘无用模块

 

一、无需代码,后台隐藏不必要的模块

因为不同的用户有不同的喜好,这种情况下,我们不需要通过代码彻底删除模块,只需要将不需要的模块隐藏即可,其实方法很简单,在控制板页面右上角有个“显示选项”按钮,点击可以弹出如下图所示的选项,你可以根据需要去除不需要的模块,当然也可以根据需要设定页面分栏数目。 123
注:以上后台设置只对当前用户有效,也就是说“控制面板”的模块在不同的注册用户之间不会相互影响。

二、增加代码,彻底删除后台不必要的模块

本教程讲解的是企业网站定制,应该根据企业网站的性质来去掉WordPress的特性,因此,在这里,我们需要彻底删除一些“控制面板”中的模块,这样子任何注册用户都无法看到该模块。彻底删除后台不必要模块的操作也很简单,你只需要在主题的functions.php中添加以下代码即可(请根据代码注释,自行修改): <pre>
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' );
</pre>
WordPress企业网站定制教程的第四篇文章到此为止,此前几篇文章均是教给大家如何删除WordPress后台不需要的模块或菜单,希望大家通过练习已经掌握了相应的技巧并实现需要的功能。至于如何添加自定义模块或菜单,偶米工作室将在接下来的教程中给大家一一讲述。