北极寒流 » 网络资源 » 免插件打造wordpress超完美投稿页面 - 2011.09.23

免插件打造wordpress超完美投稿页面

免插件打造wordpress超完美投稿页面。虽然说让用户为博客投稿是要博客有一定名气之后才有可能,但是只要我们有把博客做好的决心,相信凡事都是有可能的。折腾过很多wordpress投稿插件,效果都不尽人意,要么功能单一,要么投稿的编辑功能不丰富。而且很多投稿插件还是英文的,对于只认识26个英文字母的童鞋来说,伤不起啊!

在网络google过一些关于打造wordpress投稿页面的文章,发现一段免插件实现投稿的代码看起来非常不错,应该是露兜原创,但是经过本人实际测试,其他方面都很满意,就是投稿时的编辑功能不丰富(最后经过本人整合,就非常完美了,臭美一下)废话少说,先上代码吧。

要免插件打造wordpress投稿页面:

一、新建投稿页面模板

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

/*
Template Name: tougao
*/

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

if( isset($_POST['tougao_form']) && $_POST['tougao_form'] == 'send') {
global $wpdb;
$current_url = 'http://你的投稿页面地址'; // 注意修改此处的链接地址
$last_post = $wpdb->get_var("SELECT `post_date` FROM `$wpdb->posts` ORDER BY `post_date` DESC LIMIT 1");
// 博客当前最新文章发布时间与要投稿的文章至少间隔120秒.
// 可自行修改时间间隔,修改下面代码中的120即可
// 相比Cookie来验证两次投稿的时间差,读数据库的方式更加安全
if ( current_time('timestamp') - strtotime($last_post) < 120 ) {
wp_die('您投稿也太勤快了吧,先歇会儿!<a href="'.$current_url.'">点此返回</a>');
}
// 表单变量初始化
$name = isset( $_POST['tougao_authorname'] ) ? trim(htmlspecialchars($_POST['tougao_authorname'], ENT_QUOTES)) : '';
$email = isset( $_POST['tougao_authoremail'] ) ? trim(htmlspecialchars($_POST['tougao_authoremail'], ENT_QUOTES)) : '';
$blog = isset( $_POST['tougao_authorblog'] ) ? trim(htmlspecialchars($_POST['tougao_authorblog'], ENT_QUOTES)) : '';
$title = isset( $_POST['tougao_title'] ) ? trim(htmlspecialchars($_POST['tougao_title'], ENT_QUOTES)) : '';
$category = isset( $_POST['cat'] ) ? (int)$_POST['cat'] : 0;
$content = isset( $_POST['tougao_content'] ) ? trim(htmlspecialchars($_POST['tougao_content'], ENT_QUOTES)) : '';
// 表单项数据验证
if ( empty($name) || mb_strlen($name) > 20 ) {
wp_die('昵称必须填写,且长度不得超过20字.<a href="'.$current_url.'">点此返回</a>');
}
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('Email必须填写,且长度不得超过60字,必须符合Email格式.<a href="'.$current_url.'">点此返回</a>');
}
if ( empty($title) || mb_strlen($title) > 100 ) {
wp_die('标题必须填写,且长度不得超过100字.<a href="'.$current_url.'">点此返回</a>');
}
if ( empty($content) || mb_strlen($content) > 3000 || mb_strlen($content) < 100) {
wp_die('内容必须填写,且长度不得超过3000字,不得少于100字.<a href="'.$current_url.'">点此返回</a>');
}
$post_content = '昵称: '.$name.'<br />Email: '.$email.'<br />blog: '.$blog.'<br />内容:<br />'.$content;
$tougao = array(
'post_title' => $title,
'post_content' => $post_content,
'post_category' => array($category)
);
// 将文章插入数据库
$status = wp_insert_post( $tougao );
if ($status != 0) {
// 投稿成功给博主发送邮件
// somebody#example.com替换博主邮箱
// My subject替换为邮件标题,content替换为邮件内容
wp_mail("somebody#example.com","My subject","content");
wp_die('投稿成功!感谢投稿!<a href="'.$current_url.'">点此返回</a>', '投稿成功');
}
else {
wp_die('投稿失败!<a href="'.$current_url.'">点此返回</a>');
}
}

注:如果你想让投稿的文章立即发布,而不需要审核再编辑,那么请将以上代码的

'post_content' => $post_content,

改成:

'post_content' => $post_content, 'post_status' => 'publish',

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

<form class="ludou-tougao" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; $current_user = wp_get_current_user(); ?>">
<div style="text-align: left; padding-top: 10px;">
<label for="tougao_authorname">昵称:*</label>
<input type="text" size="40" value="<?php if ( 0 != $current_user->ID ) echo $current_user->user_login; ?>" id="tougao_authorname" name="tougao_authorname" />
</div>
<div style="text-align: left; padding-top: 10px;">
<label for="tougao_authoremail">E-Mail:*</label>
<input type="text" size="40" value="<?php if ( 0 != $current_user->ID ) echo $current_user->user_email; ?>" id="tougao_authoremail" name="tougao_authoremail" />
</div>
<div style="text-align: left; padding-top: 10px;">
<label for="tougao_authorblog">您的博客:</label>
<input type="text" size="40" value="<?php if ( 0 != $current_user->ID ) echo $current_user->user_url; ?>" id="tougao_authorblog" name="tougao_authorblog" />
</div>
<div style="text-align: left; padding-top: 10px;">
<label for="tougao_title">文章标题:*</label>
<input type="text" size="40" value="" id="tougao_title" name="tougao_title" />
</div>
<div style="text-align: left; padding-top: 10px;">
<label for="tougaocategorg">分类:*</label>
<?php wp_dropdown_categories('hide_empty=0&id=tougaocategorg&show_count=1&hierarchical=1'); ?>
</div>
<div style="text-align: left; padding-top: 10px;">
<label style="vertical-align:top" for="tougao_content">文章内容:*</label>
<textarea rows="15" cols="55" id="tougao_content" name="tougao_content"></textarea>
</div>
<br clear="all">
<div style="text-align: center; padding-top: 10px;">
<input type="hidden" value="send" name="tougao_form" />
<input type="submit" value="提交" />
<input type="reset" value="重填" />
</div>
</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" class="xheditor-mfull {height:'380',urlType:'abs',upImgUrl:'upload.php?immediate=1',upImgExt:'jpg,jpeg,gif,png'}" style="width:100%"></textarea>

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

到这里,应该就可以看到编辑器了,但是还不能正常使用图片上传功能,接下往下折腾。

在你下载的xhEditor的 demos 文件夹下找到 upload.php ,打开,按照你的要求修改下面的参数

$inputName='filedata';//表单文件域name
$attachDir='upload';//上传文件保存路径,结尾不要带/
$dirType=1;//1:按天存入目录 2:按月存入目录 3:按扩展名存目录  建议使用按天存
$maxAttachSize=2097152;//最大上传大小,默认是2M
$upExt='txt,rar,zip,jpg,jpeg,gif,png,swf,wmv,avi,wma,mp3,mid';//上传扩展名
$msgType=2;//返回上传参数的格式:1,只返回url,2,返回参数数组
$immediate=isset($_GET['immediate'])?$_GET['immediate']:0;//立即上传模式,仅为演示用
ini_set('date.timezone','Asia/Shanghai');//时区

建议将第二行的路径修改为wordpress默认的上传目录:

$attachDir='wp-content/uploads';

当然了,你也可以按照自己的需要更改,但是要注意一点,该目录必须存在,并可写入!!

最重要的一步:将这个upload.php 文件上传到你wordpress的根目录,到此应该就可以正常上传图片了!

投稿页面

这个就是亿品元素整合投稿功能后的效果,编辑功能够强了吧?一般的投稿插件都绝对靠边闪。

投稿页面在线演示地址:http://www.epinv.com/toudi

评论关闭