免插件打造wordpress投稿页面

一、新建投稿页面模板 

把主题的 page.php 另存为 tougao.php，并且在第一行的 <?php 之后添加模板的标识注释：

/* Template Name: tougao */

紧接着把下面的函数插入上面的标识注释下面 

if( isset($_POST['tougao_form']) && $_POST['tougao_form'] == 'send'){ 
if ( isset($_COOKIE["tougao"]) && ( time() - $_COOKIE["tougao"] ) < 120 ){ 
wp_die('您投稿也太勤快了吧，先歇会儿！'); 
} 
//表单变量初始化 
$name = isset( $_POST['tougao_authorname'] ) ? $_POST['tougao_authorname'] : ''; 
$email = isset( $_POST['tougao_authoremail'] ) ? $_POST['tougao_authoremail'] : ''; 
$blog = isset( $_POST['tougao_authorblog'] ) ? $_POST['tougao_authorblog'] : ''; 
$title = isset( $_POST['tougao_title'] ) ? $_POST['tougao_title'] : ''; 
$tags = isset( $_POST['tougao_tags'] ) ? $_POST['tougao_tags'] : ''; 
$category = isset( $_POST['cat'] ) ? (int)$_POST['cat'] : 0; 
$content = isset( $_POST['tougao_content'] ) ? $_POST['tougao_content'] : ''; 
//表单项数据验证 
if ( empty($name) || strlen($name) > 20 ){ 
wp_die('昵称必须填写，且不得超过20个长度'); 
} 
if ( empty($email) || strlen($email) > 60 || !preg_match("/^([a-z0-9+_-]+)(.[a-z0-9+_-]+)*@([a-z0-9-]+.)+[a-z]{2,6}$/ix", $email)){ 
wp_die('邮箱必须填写，且不得超过60个长度，必须符合 Email 格式'); 
} 
if ( empty($title) || strlen($title) > 100 ){ 
wp_die('文章标题必须填写，且不得超过100个长度'); 
} 
if ( empty($content) || strlen($content) < 100){ 
wp_die('内容必须填写，且不得少于100个长度'); 
} 
$tougao = array( 
'post_title' => $title, //标题 
'post_content' => $content, //内容 
'post_status' => 'pending', //待审 
'tags_input' => $tags, //标签 
'post_category' => array($category)    //分类 
); 
//将文章插入数据库 
$status = wp_insert_post( $tougao ); 
if ($status != 0){ 
/* 
//将自定义域写入最新待审文章 
global $wpdb; 
$myposts = $wpdb->get_results(" 
SELECT ID 
FROM $wpdb->posts 
WHERE post_status = 'pending' 
AND post_type = 'post' 
ORDER BY post_date DESC 
"); 
add_post_meta($myposts[0]->ID, 'cbs_postauthor', $name);    //插入投稿人昵称的自定义域 
if ( !empty($blog)) add_post_meta($myposts[0]->ID, 'cbs_posturl', $blog);    //插入投稿人网址的自定义域 
*/ 
setcookie("tougao", time(), time()+180); 
wp_die('投稿成功！','投稿成功！'); 
} else { 
wp_die('投稿失败！','投稿失败！'); 
} 
}

上面用到了wordpress的自定义域功能（已经注释掉了）如果需要可以自行打开，这样就可以方便设置投稿人昵称和投稿人网址。 
二.接着找到tougao.php文件中的the_content();函数，在其后插入下面的代码 

<form id="tougaoform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>"> 
<p><input id="author" type="text" size="40" value="" name="tougao_authorname" /><label>昵称（*必填）</label></p> 
<p><input id="email" type="text" size="40" value="" name="tougao_authoremail" /><label>邮箱（*必填）</label></p> 
<p><input id="url" type="text" size="40" value="" name="tougao_authorblog" /><label>您的博客/文章来源</label></p> 
<p><input id="tougao_title" type="text" size="40" value="" name="tougao_title" /><label>文章标题（*必填）</label></p> 
<p><input id="tags" type="text" size="40" value="" name="tougao_tags" /><label>文章标签（多个标签请用英文逗号 , 分开）</label></p> 
<p><?php wp_dropdown_categories('show_option_none=请选择文章分类&show_count=1& hierarchical=1&hide_empty=0'); ?><label>文章分类（*必填）</label></p> 
<textarea rows="15" cols="55" id="tougao" name="tougao_content"></textarea> 
<p> 
<input type="hidden" value="send" name="tougao_form" /> 
<input id="submit" type="submit" value="提交" /> 
<input id="reset" type="reset" value="重填" /> 
</p> 
</form>

到这里就已经完成了投稿页面模板的制作，你现在要做的就是在wordpress后台，新建文章页面，选择tougao这个模板文件就可以实现投稿功能了。 
不过，个人发现按上述方法建立的  投稿页面 ，其投稿时的编辑功能非常薄弱，除了可以投文字稿外啥都不行，图片没有，链接没有，表情没有，这明显不是我们想要的，想要更完美的投稿页面吗？想实现更完美的投稿页面就往下看。 
开始我通过绑定TinyMCE 文本编辑器来实现丰富编辑功能，虽然绑定的是wordpress自带TinyMCE 文本编辑器（WP后台文章编辑就是使用的该编辑器），没有想到模板绑定TinyMCE后的，显示出来的竟然是英文界面，甚至Chrome 下也无法显示编辑界面，操作性也不是很好，特别不爽的是竟然要加载一个200K大小的tiny_mce.js，200K的js文件，这可不是一个小数目 啊！放弃之。 
再在网上继续找，终于找到还算小巧的基于JQ的开源HTML编辑器：xhEditor，看介绍非常不错，于是折腾了一下，竟然完美和投稿页面整合。 

xhEditor开源HTML编辑器介绍

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 

精简迷你

编辑器初始加载4个文件，包括：1个js(50k)+2个css(10k)+1个图片(5k)，总共65k。若js和css文件进行gzip压缩传输，可以进一步缩减为24k左右。 

使用简单

简单的调用方式，加一个class属性就能将您的textarea立马变成一个功能丰富的可视化HTML编辑器。 

无障碍访问

提供WAI-ARIA全面支持，全键盘精细操作，全程语音向导，提供完美无障碍访问体验，让残疾人也能够谱写精彩人生。 

强大Ajax上传

内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，剪切板上传及远程抓取上传，追求完美的用户上传体验。 

Word完美支持

实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化精简，但是却不丢失任何细节效果。 

安全的UBB

提供完美的UBB可视化编辑器解决方案，在您获得安全高效代码存储的同时，又能享受可视化编辑的便捷。 

那要如何把xhEditor与wordpress博客的投稿页面整合呢？

1.首先下载  xhEditor 软件包， 
2. 解压压缩文件，将其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录 
注：如果您网站中没有使用jQuery框架，也请一并上传jquery文件夹中的jquery-1.4.4.min.js 
3. 在相应html文件的</head>之前添加 
<script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script> 
<script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script> 
注：如果jQuery之前已经在项目页面中使用，请勿重复添加引用代码 
4.然后把你刚才的tougao.php模板文件中的 

<textarea rows="15" cols="55" id="tougao" name="tougao_content"></textarea>

改成下面的代码，再上传到网站覆盖即可。 

<textarea id="tougao" name="tougao_content" rows="15" cols="55" style="100%"></textarea>

注意文中那个class参数，这个就是整合xhEditor的重点（关于这个参数的详细资料请自己上xhEditor官网查询）