用xhEditor打造完美的投稿页面

免插件打造wordpress超完美投稿页面。虽然说让用户为博客投稿是要博客有一定名气之后才有可能，但是只要我们有把博客做好的决心，相信凡事都是有可能的。试过一些wordpress投稿插件，效果都不尽人意，要么功能单一，要么投稿的编辑功能不丰富，而且有很多都是英文插件，要么对中文支持不是很好。于是折腾了下，看下面如下。

在网络google过一些关于打造wordpress投稿页面的文章，发现一段免插件实现投稿的代码看起来非常不错，由于文章经过多次转载，来源已经不可考（不过分析文章的原创性，可能属露兜的可能性比较大，说错勿喷！）但是经过本人实际测试，其他方面都很满意，但是投稿及编辑，投稿通知就不是很顺人意，于是折腾了下。虽然上传功能还是没有搞定，但是其它应该算得上完美了。

首页要建立投稿的页面

页面的基础版本可以从自己的page页面的基础上演变，但是基础上的东西不要变。

一、新建投稿页面模板
把主题的 page.php 另存为 submit.php，并且在第一行的
[php]/*
Template Name: submit
*/[/php]
然后，继续添加代码:
[php]
/* 爱趣网 http://www.qukanxia.com */
if( isset($_POST['submit_form']) && $_POST['submit_form'] == ‘send’){
if ( isset($_COOKIE["submit"]) && ( time() – $_COOKIE["submit"] ) < 120 ){
wp_die(‘您投稿也太勤快了吧，先歇会儿！’);
}
//表单变量初始化
$name = isset( $_POST['submit_authorname'] ) ? $_POST['submit_authorname'] : ”;
$email = isset( $_POST['submit_authoremail'] ) ? $_POST['submit_authoremail'] : ”;
$blog = isset( $_POST['submit_authorblog'] ) ? $_POST['submit_authorblog'] : ”;
$title = isset( $_POST['submit_title'] ) ? $_POST['submit_title'] : ”;
$tags = isset( $_POST['submit_tags'] ) ? $_POST['submit_tags'] : ”;
$category = isset( $_POST['cat'] ) ? (int)$_POST['cat'] : 0;
$content = isset( $_POST['submit_content'] ) ? $_POST['submit_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个长度’);
}
$submit = array(
‘post_title’ => $title, //标题
‘post_content’ => $content, //内容
‘post_status’ => ‘pending’, //待审
‘tags_input’ => $tags, //标签
‘post_category’ => array($category)    //分类
    );
//将文章插入数据库
$status = wp_insert_post( $submit );
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("submit", time(), time()+180);
wp_die(‘投稿成功！’,'投稿成功！’);
} else {
wp_die(‘投稿失败！’,'投稿失败！’);
}
}[/php]
上面用到了wordpress的自定义域功能（已经注释掉了）如果需要可以自行打开，我后面添加了增加稿件发布向投搞人发送成功的邮件，所以这里的post-meta信息最好能开启。

二.接着找到submit.php文件中的the_content();函数，在其后插入下面的代码

[php]
<form id="submitform" action="&lt;?php echo $_SERVER[" method="post"><input id="author" type="text" name="submit_authorname" value="" size="40" /><label>昵称（*必填）</label>
<input id="email" type="text" name="submit_authoremail" value="" size="40" /><label>邮箱（*必填）</label>
<input id="url" type="text" name="submit_authorblog" value="" size="40" /><label>您的博客/文章来源</label>
<input id="submit_title" type="text" name="submit_title" value="" size="40" /><label>文章标题（*必填）</label>
<input id="tags" type="text" name="submit_tags" value="" size="40" /><label>文章标签（多个标签请用英文逗号 , 分开）</label> <!--?php wp_dropdown_categories('show_option_none=请选择文章分类&#038;show_count=1&#038;hierarchical=1&#038;hide_empty=0'); ?--><label>文章分类（*必填）</label> <textarea id="submit" name="submit_content" rows="15" cols="55"></textarea>
<input type="hidden" name="submit_form" value="send" /> <input id="submit" type="submit" value="提交" /> <input id="reset" type="reset" value="重填" /></form>
[/php]
到这里就已经完成了投稿页面模板的制作，你现在要做的就是在wordpress后台，新建文章页面，选择submit这个模板文件就可以实现投稿功能了。

不过，个人发现按上述方法建立的投稿页面，其投稿时的编辑功能非常薄弱，除了可以投文字稿外啥都不行，图片没有，链接没有，表情没有，这明显不是我们想要的，想要更完美的投稿页面吗？想实现更完美的投稿页面就往下看。

再在网上继续找，终于找到还算小巧的基于JQ的开源HTML编辑器：xhEditor，看介绍非常不错，于是折腾了一下，竟然完美和投稿页面整合。

xhEditor开源HTML编辑器介绍

具体关于xhEditeor，可以点 这儿 查看具体的介绍，下面的文章是引用此网站内容的。

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上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，剪切板上传及远程抓取上传，追求完美的用户上传体验。
  • Word完美支持，实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化精简，但是却不丢失任何细节效果。
  • 安全的UBB提供完美的UBB可视化编辑器解决方案，在您获得安全高效代码存储的同时，又能享受可视化编辑的便捷。

完美投搞发表通知

一般来讲，投完稿后，发表后要让对方知道他的稿件已经被发表了，这是一个人性化设置。那可以在functions.php添加以下代码。
[php]
/*当有新文章变动时通知对方 爱趣网 http://www.qukanxia.com */
function new_post_notify() {
global $wpdb;
$admin_email = get_bloginfo (‘admin_email’); // $admin_email 可改為你指定的 e-mail.
$latest_post_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_status=’publish’ AND post_type=’post’ AND post_password=” ORDER BY post_date DESC LIMIT 1");
$tougao_email = get_post_meta($latest_post_id, ‘aiqu_postemail’, true);
$tougao_author = get_post_meta($latest_post_id, ‘aiqu_postauthor’, true);
//以下是开始投搞过程
if($tougao_email){
$wp_email = ‘no-reply@’ . preg_replace(‘#^www\.#’, ”, strtolower($_SERVER['SERVER_NAME'])); // e-mail 發出點, no-reply 可改為可用的 e-mail.
$to = $tougao_email;
$subject = ‘您在 [' . get_option("blogname") . '] 投递的物品已经发布’;
$message = ‘
<div style="background-color:#eef2fa; border:1px solid #d8e3e8; color:#111; padding:0 15px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;">
<p>’ . $tougao_author. ‘, 您好!</p>
<p>您曾在《’ . get_option("blogname") . ‘》投递的有趣物品已经通过审核并已经发布！非常感谢你的投递！
<p>您可以点击 <a href="’ . htmlspecialchars(get_comment_link($parent_id)) . ‘">查看最新内容</a></p>
<p>欢迎再度光临 <a href="’ . get_option(‘home’) . ‘">’ . get_option(‘blogname’) . ‘</a></p>
<p>(此邮件由系统自动发出，请勿回复.)</p>
</div>’;
$from = "From: \"" . get_option(‘blogname’) . "\" <$wp_email>";
$headers = "$from\nContent-Type: text/html; charset=" . get_option(‘blog_charset’) . "\n";
wp_mail( $to, $subject, $message, $headers );
//echo ‘mail to ‘, $to, ‘<br/> ‘ , $subject, $message; // for testing
}
}
add_action(‘save_post’, ‘new_post_notify’); // 新发表文章/修改文章时触发更新
//END———————————–
[/php]
至此，全部完成，一些CSS我就不写了，因为我对CSS也不熟，上面的代码也是东拼西凑的，但是好在能工作。哈哈
具体效果可以：



无觅相关文章插件，快速提升流量