一、新建投稿页面模板

把主题的 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="width:100%"></textarea>

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




免插件打造wordpress投稿页面的更多相关文章

  1. 免插件为WordPress文章中标签添加内链

    给文章标签添加内链,意思就是说,如果你文章中出现了和标签一样的文字,那么这个文字就会自动成为标签链接,你点击这个链接就会查看到所有含有该标签的文章,这个能方便用户浏览,据说还利于SEO.下面说说方法: ...

  2. 通过修改源码,免插件实现wordpress去除链接中的category

    将以下代码加在主题目录的functions.php /** * 去除category */ add_action('load-themes.php', 'no_category_base_refres ...

  3. 免插件,简单实现上拉加载loading

    上拉加载是前端经常遇到的问题,采用插件往往能够轻松解决,这里介绍一种免插件简单实现上拉加载的方法,参考一下,下面分享一下代码. html <body> <ul> <li& ...

  4. 这两个基础seo插件,wordpress网站必装

    WordPress对搜索引擎非常友好,这一点很多人都知道.不过我们在制作完成WordPress主题后,还可以在原来的良好基础上,添加两个队seo非常有利的WordPress插件. 第一个插件:Baid ...

  5. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  6. 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

  7. 【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页

    1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...

  8. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  9. WordPress免插件生成完整站点地图(sitemap.xml)的php代码

    让这个代码更加完善,可以同时生成首页.文章.单页面.分类和标签的 sitemap! 一.PHP 代码 <?php require('./wp-blog-header.php'); header( ...

随机推荐

  1. cocos2d-x游戏开发系列教程-超级玛丽03-main函数

    代码下载链接 http://download.csdn.net/detail/yincheng01/6864893 解压密码:c.itcast.cn main函数内容 #include "m ...

  2. 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(六)媒体查询

    响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...

  3. for循环语句之棋盘放粮食、百鸡百钱、纸张的折叠问题

    1.棋盘放粮食 ; ; i < ; i++) { ; ; j <= i; j++) { x = x * ; } lszl = lszl + x; } double zl = lszl * ...

  4. js默认行为(也称默认事件)

    对应于智能社21课, 在浏览器的空白页面右击时会出现一个提示框,实际上这是用的document.oncontextmenu属性,如果用下面的代码就能够阻止这样的默认行为: <!DOCTYPE h ...

  5. 使用apache benchmark(ab) 测试报错汇总

    1.socket: Too many open files (24) 解决方法: [root@zabbix ~]# ulimit -a core file size (blocks, -c) 0 da ...

  6. Codeforces 484A - Bits 二进制找1

    这题可以根据l, r 在二进制下的长度进行分类. l  的长度小于 r 的时候,有两种可能,一种是r 在二进制下是 1* 这种样子,故答案取 r : 一种是取答案为  (1LL << (r ...

  7. (Problem 21)Amicable numbers

    Let d(n) be defined as the sum of proper divisors of n (numbers less than n which divide evenly into ...

  8. Base64编码的java实现

    Java本身是提供了Base64编码的工具包的,做项目的时候自己实现了个,在这里记录一下: /** Base64编码数组 */ private static final String base64En ...

  9. 纪念一下第一次写的django代码

    @csrf_exemptdef new_project_detail(request):    if 'project_name' not in request.POST or 'project_po ...

  10. MVC中Controller里写alert的问题

    controller: Viewbag.a=true; 页面中 @if(Viewbag.a!=null) { <script> alert('XXX'); </script> ...