WordPress 是目前最受欢迎的博客平台之一,其强大的功能和灵活的扩展性吸引了大量用户。在 WordPress 中,编辑器是用户进行内容创作的重要工具。本文将深入解析 WordPress 编辑器的调用方式,并提供一些实用的实战技巧,帮助您更好地利用 WordPress 编辑器。
一、WordPress 编辑器简介
WordPress 编辑器,也称为 TinyMCE 编辑器,是一款基于网页的富文本编辑器。它允许用户在网页上直接进行文本编辑,包括插入图片、链接、表格等元素。WordPress 编辑器调用方式主要有以下几种:
1. 原生编辑器:这是 WordPress 默认的编辑器,通过调用 `wp_editor()` 函数实现。
2. 自定义编辑器:通过创建自定义插件或主题,可以自定义编辑器的功能和样式。
3. 第三方编辑器:如 CKEditor、TinyMCE Advanced 等,通过集成这些编辑器可以丰富编辑器的功能。
二、原生 WordPress 编辑器调用
原生 WordPress 编辑器调用主要通过 `wp_editor()` 函数实现。以下是一个简单的示例:
“`php
wp_editor( ‘Hello, World!’, ‘content’, array(
‘textarea_rows’ => 10,
‘media_buttons’ => true,
‘teeny’ => false,
) );
>
“`
在上面的代码中,`’content’` 是编辑器内容的 ID,`’textarea_rows’` 是文本框的行数,`’media_buttons’` 是是否显示媒体按钮,`’teeny’` 是是否使用迷你版编辑器。
三、自定义编辑器
自定义编辑器可以通过创建自定义插件或主题实现。以下是一个简单的自定义编辑器示例:
1. 创建一个名为 `custom-editor` 的插件。
2. 在插件中添加以下代码:
“`php
/
* Plugin Name: Custom Editor
* Description: Custom editor for WordPress
*/
function custom_editor_enqueue_scripts() {
wp_enqueue_script( ‘custom-editor’, plugins_url( ‘/custom-editor.js’, __FILE__ ), array( ‘wp-editor’ ), ”, true );
}
add_action( ‘admin_enqueue_scripts’, ‘custom_editor_enqueue_scripts’ );
function custom_editor_js() {
?>
// 自定义编辑器脚本
}
add_action( ‘admin_footer’, ‘custom_editor_js’ );
>
“`
3. 在 `custom-editor.js` 文件中添加自定义脚本:
“`javascript
// 自定义编辑器脚本
“`
四、第三方编辑器集成
集成第三方编辑器可以通过以下步骤实现:
1. 在 WordPress 插件目录中搜索并安装所需的第三方编辑器插件。
2. 在插件设置中配置编辑器选项。
3. 在需要使用编辑器的页面或文章中,使用 `wp_editor()` 函数调用编辑器。
五、实战技巧
1. 使用快捷键:熟悉编辑器的快捷键可以大大提高工作效率。
2. 插入自定义按钮:通过自定义按钮可以快速插入常用的元素,如图片、链接等。
3. 使用插件扩展功能:使用各种插件可以扩展编辑器的功能,如插入表格、图表等。
4. 备份编辑器内容:在编辑内容之前,建议先备份原始内容,以防意外丢失。
5. 使用可视化编辑模式:可视化编辑模式可以更直观地编辑内容。
WordPress 编辑器调用方式多样,通过了解和掌握这些调用方式,可以更好地利用 WordPress 编辑器进行内容创作。本文介绍了原生 WordPress 编辑器调用、自定义编辑器、第三方编辑器集成以及一些实战技巧,希望对您有所帮助。
| 实战技巧 | 描述 |
|---|---|
| 使用快捷键 | 熟悉编辑器的快捷键可以大大提高工作效率。 |
| 插入自定义按钮 | 通过自定义按钮可以快速插入常用的元素,如图片、链接等。 |
| 使用插件扩展功能 | 使用各种插件可以扩展编辑器的功能,如插入表格、图表等。 |
| 备份编辑器内容 | 在编辑内容之前,建议先备份原始内容,以防意外丢失。 |
| 使用可视化编辑模式 | 可视化编辑模式可以更直观地编辑内容。 |
通过本文的学习,相信您已经对 WordPress 编辑器调用有了更深入的了解。在实际应用中,不断实践和相信您会成为一名优秀的 WordPress 内容创作者。
如何开发一个WordPress插件
在开始之前,需要注意三件事情
I、给插件取一个个性化的名字,越个性化越好,以防和其他插件重名冲突。
II、代码里面,一定要包含注释,不为自己,也要为想修改你代码的别人想想。
III、尽量用最新版的 WordPress进行开发和测试。
插件名称和插件结构
一般来说,都是在 wp-content\plugins目录下建立一个文件夹,文件夹名就是插件的名称,我们插件名字为”copyright_plugin”,文件结构如下。
\wp-content\plugins\copyright_plugin下有copyright_plugin.php和readme.txt
这里的 readme.txt文件中包含了一些插件的介绍,使用说明等信息,主要是提交到 WordPress官方网站时候用到的,可以参考他们给的模板,另外还有插件截图预览的功能,需要另外添加图片,但是我们现在是练习,不需要提交到官网,所以暂时先不涉及这些。
插件的核心
总的来说,插件的核心是两个 function,用来添加 Hooks(中文译为钩子)
add_action($hookname,$callbackfunction)
add_filter($hookname,$callbackfunction)
这两个方法相当重要,几乎所有的插件都要用到他们。
Actions,我理解就是 wordpress核心代码预留的一些特殊的切入点,或者说是在执行一些特定事件时候发生,例如文章发布时,或者访客留言时触发。
Filters,应该就是 wordpress执行时,对数据传输过程的一种过滤机制,例如当文章保存到数据库的过程,或者文章从事数据库中取出,展现到浏览器中的这个过程。
我们今天要制作的插件,应该是用 Filters,因为我们要在文章显示在浏览器之前,在最后面加上一段字符窜,用来显示版权信息,后面添加菜单项的时候,也要用到 Actions。
插件概要信息
用文本编辑器打开 copyright-plugin.php文件,输入如下信息:
<?php
/*
Plugin Name: Copyright plugin
Plugin URI:
Description:此插件将在文章正文最下面,显示一行版权信息
Version: 1.0.0
Author: xcxc
Author URI:
License: GPL
*/
?>
保存好文件,然后登录 WordPress后台,打开插件菜单,应该就可以看到这个插件,已经显示在插件列表里面了,并且可以启用这个插件试试,不过没有任何效果,因为到目前为止,这个插件还没有实现任何功能。
为插件实现功能
修改copyright_plugin.php
<?php
/*
Plugin Name: Copyright plugin
Plugin URI:
Description:此插件将在文章正文最下面,显示一行版权信息
Version: 1.0.0
Author: xcxc
Author URI:
License: GPL
*/
/*此插件将在文章正文最下面,显示一行版权信息*/
function display_copyright(){
return”<p style='color:red'>本站点所有文章均为原创,转载请注明出处!</p>”;
}
?>
保存好这个文件,然后打开正在用的主题文件夹,打开index.php文件夹,找到 get_template_part('content', get_post_format());并在下面添加如下代码
if(function_exists('display_copyright')){
echo display_copyright();
}
function_exists是判断 display_copyright函数是否存在,因为当插件停用的时候,主题代码里面是找不到这个函数的,所以要判断一下,防止出错。
然后在 wordpress后台启用该插件,再打开首页看看效果吧!
至此,这段代码,应该可以勉强算是一个插件了。之所以说勉强,是因为这个插件存在一个问题,需要手工去修改主题代码,如果用户换了主题的话,需要在新主题里面再次修改代码,这个不好。
改良插件
还记得我们前面说过的 Hooks(钩子)吗,我们要开始用 Filter钩子了!
代码修改copyright_plugin.php如下:
<?php
/*
Plugin Name: Copyright plugin
Plugin URI:
Description:此插件将在文章正文最下面,显示一行版权信息
Version: 1.0.0
Author: xcxc
Author URI:
License: GPL
*/
add_filter('the_content','display_copyright');
/*这个函数在日志正文结尾处添加一段版权信息,并且只在首页页面才添加*/
function display_copyright($content){
if( is_home())
$content=$content.”<p style='color:red'>本站点所有文章均为原创,转载请指明出处!</p>”;
return$content;
}
?>
参看以上代码,其中 the_content是钩子的名字,display_copyright是回调函数名称。这样一来,只要启用插件就可以实现功能,无需去修改主题了,请把刚才在index.php文件中添加的代码删掉,然后启用插件,看看效果吧,显示效果应该是一样的,无论怎么换主题,还是会自动显示版权信息。
is_home是判断是不是主页
更进一步
至此一个真正的插件算是完成了。但是此插件将版权信息直接写在代码里,如果用户想自定义版权信息的话,需要修改插件的源代码,仍然不方便,所以此插件仍需改进。其实,我们可以在 WordPress后台中为插件单独添加一个菜单和页面,用户可以在这里来自定义设置设置版权信息,信息可以保存在数据库里面。
先附上完整代码,后面会做说明
<?php
/*
Plugin Name: Copyright plugin
Plugin URI:
Description:此插件将在文章正文最下面,显示一行版权信息
Version: 1.0.0
Author: xcxc
Author URI:
License: GPL
*/
/*注册激活插件时要调用的函数*/
register_activation_hook( __FILE__,'display_copyright_install');
/*注册停用插件时要调用的函数*/
register_deactivation_hook( __FILE__,'display_copyright_remove');
function display_copyright_install(){
/*在数据库的 wp_options表中添加一条记录,第二个参数为默认值*/
add_option(“display_copyright_text”,”<p style='color:red'>本站点所有文章均为原创,转载请注明出处!</p>”,'','yes');
}
function display_copyright_remove(){
/*删除 wp_options表中的对应记录*/
delete_option('display_copyright_text');
}
if( is_admin()){
/*利用 admin_menu钩子,添加菜单*/
add_action('admin_menu','display_copyright_menu');
}
function display_copyright_menu(){
/* add_options_page($page_title,$menu_title,$capability,$menu_slug,$function);*/
/*页名称,菜单名称,访问级别,菜单别名,点击该菜单时的回调函数(用以显示设置页面)*/
add_options_page('Set Copyright','Copyright Menu','administrator','display_copyright','display_copyright_html_page');
}
function display_copyright_html_page(){
?>
<div>
<h2>Set Copyright</h2>
<form method=”post” action=”options.php”>
<?php/*下面这行代码用来保存表单中内容到数据库*/?>
<?php wp_nonce_field('update-options');?>
<p>
<textarea
name=”display_copyright_text”
id=”display_copyright_text”
cols=”40″
rows=”6″><?php echo get_option('display_copyright_text');?></textarea>
</p>
<p>
<input type=”hidden” name=”action” value=”update”/>
<input type=”hidden” name=”page_options” value=”display_copyright_text”/>
<input type=”submit” value=”Save” class=”button-primary”/>
</p>
</form>
</div>
<?php
}
add_filter('the_content','display_copyright');
/*这个函数在日志正文结尾处添加一段版权信息,并且只在首页页面才添加*/
function display_copyright($content){
if( is_home())
$content=$content. get_option('display_copyright_text');
return$content;
}
?>
说明:
以下代码自己要是在启用插件时和停用插件时调用,注释中已经写得很详细了。
/*注册激活插件时要调用的函数*/
register_activation_hook( __FILE__,'display_copyright_install');
/*注册停用插件时要调用的函数*/
register_deactivation_hook( __FILE__,'display_copyright_remove');
function display_copyright_install(){
/*在数据库的 wp_options表中添加一条记录,第二个参数为默认值*/
add_option(“display_copyright_text”,”<p style='color:red'>本站点所有文章均为原创,转载请注明出处!</p>”,'','yes');
}
function display_copyright_remove(){
/*删除 wp_options表中的对应记录*/
delete_option('display_copyright_text');
}
添加菜单和页面的代码如下:
if( is_admin()){
/*利用 admin_menu钩子,添加菜单*/
add_action('admin_menu','display_copyright_menu');
}
function display_copyright_menu(){
/* add_options_page($page_title,$menu_title,$capability,$menu_slug,$function);*/
/*页名称,菜单名称,访问级别,菜单别名,点击该菜单时的回调函数(用以显示设置页面)*/
add_options_page('Set Copyright','Copyright Menu','administrator','display_copyright','display_copyright_html_page');
}
至此,已经可以在后台看到菜单项了,但是点击的话,还会出错,因为还没有添加对应的页面(如何自定义添加后台菜单位置)
下面开始添加页面,主要代码如下:
function display_copyright_html_page(){
?>
<div>
<h2>Set Copyright</h2>
<form method=”post” action=”options.php”>
<?php/*下面这行代码用来保存表单中内容到数据库*/?>
<?php wp_nonce_field('update-options');?>
<p>
<textarea
name=”display_copyright_text”
id=”display_copyright_text”
cols=”40″
rows=”6″><?php echo get_option('display_copyright_text');?></textarea>
</p>
<p>
<input type=”hidden” name=”action” value=”update”/>
<input type=”hidden” name=”page_options” value=”display_copyright_text”/>
<input type=”submit” value=”Save” class=”button-primary”/>
</p>
</form>
</div>
<?php
}
现在再去点击刚才新加的菜单,可以显示出来一个页面了,我们可以在这里设置版权信息文本。
另外还有如下代码要修改
/*这个函数在日志正文结尾处添加一段版权信息,并且只在首页页面才添加*/
function display_copyright($content){
if( is_home())
$content=$content. get_option('display_copyright_text');
return$content;
}
将原来的静态化文本,改成动态的,之所以要这么改,是因为我们已经将数据存到数据库里面了,这里要从数据库里面取出数据。
wordpress主题,修改头部代码加入JS
第一步:新建header.php
在做主题文件夹wp-content\themes\goodblog下面新建一个头部文件header.php,然后将index.php中的头部代码提取(剪切)出来,写入这个文件:
第二步:修改index.php
保存好头部文件,在index.php的前面加上代码:
get_header()函数会自动载入主题文件夹中的header.php文件,所以头部文件的文件名命名为header.php然后使用get_deader()函数即可;
现在头部文件已经制作好了,接下来的工作就是编辑头部文件header.php将里面的静态html代码换成动态的php代码。
第三步:修改title
需要更改信息,一般我们将title信息改成这样的:文章页面标题|网站名称,当然用户也可以根据自己的seo只是更改,比如有的人在标题中加入网站描述。将header.php中的<title>index</title>改成下面的代码:
上面的代码通过判断将首页、文章页、分类页、404页面的<title>信息设置成不一样的形式,这样是很有必要的。
几个判断函数的解释如下:
第四步:修改css文件的路径
在header.php文件中找到下面代码:
这个样式表的路径./style.css是网站根目录。
如果用户不想让别人轻易看出用户网站是使用 wordprss程序,那么可以改变图片、样式表等文件的路径,比如本工作室,将图片、样式表都移到了网站根目录,在网页代码中就不会出现 wordprss站才有的wp-content/themes之类的路径。好了,将上面的代码改成:
bloginfo('stylesheet_url')会自动输出网站主题文件夹下style.css文件的绝对网址,如
说到这里,顺便修改一下图片路径,在index.php里有张图片路径需要修改,不过现在可改可不改,后期会自动调用文章图片;
用文本编辑器打开index.php给这些图片加上正确的URL,搜索代码,将所有的:src=”images/,批量替换成src=”<?php bloginfo('template_url');?>/images/。现在再刷新你的主页,看文章的缩略图是否可以正常显示。
第五步:关于wp_head()
wp_head函数对于要使用插件的主题来说比较重要,一般如果插件需要加载css文件和js文件,都是通过wp_head()函数输出的。在header.php文件的</head>前面添加:
在去看自己的网站,查看网页源代码,会发现<head></head>标签中多了如下代码:
WordPress:如何为特定页面使用特定样式表_建站经验教程
WordPress2.5已经正式发布,最近看了不少关于新版本的介绍与评价,感觉这个版本与原来相比有较大的变动,因此我没有急于升级。而是在先在我的本地wordpress中进行了测试,看看新版本与现在主题和插件的兼容性。不过在把本地wordpress升级到2.5后(我使用了一件升级插
1.样式表简介样式表(Stylesheet)是一个WordPress主题的重要组成部分之一,它负责控制整个主题的所有样式,包括:字体,颜色,图片,链接,模块的位置等等.一般来说一个WordPress主题拥有一个样式表文件(style.css),你可以在后台的主题编辑器中查看现在使用主题的所有组成文件。(1)应用实例<a比如你撰写了一个contact me的页面,想要为这个页面自定义另外一个样式,让它与主题中的其他页面不同样式表(Stylesheet)的使用一般是在主题的 header.php文件中定义的,打开你的header.php找到以下的语句:<link rel=stylesheet href=<?php bloginfo(’stylesheet_url’);? type=text/css media=screen/以上语句说明了主题调用主题文件夹中的stlye.css文件。如果想要为特定的一个分类定义一个另一个样式表的话只需要将代码改成:以下为引用的内容:<?




