绿
0

wordpress网站如何添加一个简单的投稿页面?

1、首先在当前主题的目录下新建一个php文件,命名为tougao.php,然后将page.php中的所有代码复制到tougao.php中

2、删除tougao.php开头的所有注释,即 /* 与 */ ,以及它们之间的所有内容;

3、搜索:the_content,可以查找到类似代码<?php the_content(); ?>,将其替换为下面的代码:

<?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_title”>标题:*</label><br/>
 <input style=”width:80%;height:30px;line-height:30px” type=”text” size=”40″ value=”” id=”tougao_title” name=”tougao_title” />
 </div>
 <div style=”text-align: left; padding-top: 10px;”>
 <label style=”vertical-align:top” for=”tougao_content”>内容:*</label><br/>
 <textarea style=”width:80%;height:300px” rows=”15″ cols=”55″ id=”tougao_content” name=”tougao_content”></textarea>
 </div>
 
 <div class=”feilei” style=”text-align: left; padding-top: 10px;”>
 <label for=”tougaocategorg”>分类:*</label><br/>
 <?php wp_dropdown_categories(‘hide_empty=0&id=tougaocategorg&show_count=1&hierarchical=1&include=84’); ?>
 </div>
 
 <div style=”text-align: left; padding-top: 10px;”>
 <label for=”tougao_authorname”>昵称:*</label><br/>
 <input style=”width:80%;height:30px;line-height:30px” 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”>邮箱:*</label><br/>
 <input style=”width:80%;height:30px;line-height:30px” type=”text” size=”40″ value=”<?php if ( 0 != $current_user->ID ) echo $current_user->user_email; ?>” id=”tougao_authoremail” name=”tougao_authoremail” />
 </div>
 
 
 <br clear=”all”>
 <div style=”text-align: center; padding-top: 10px;”>
 <input type=”hidden” value=”send” name=”tougao_form” />
 <input style=”width:100px;height:30px;line-height:30px;background:#39F;color:#FFF” type=”submit” value=”提交” />
 <input style=”width:100px;height:30px;line-height:30px;background:#39F;color:#FFF” type=”reset” value=”重填” />
 </div>
 </form>

4、在tougao.php开头,将第一个 <?php (一般为:< ?php get_header(); ? >)替换成下面的代码:

<?php
/**
* Template Name: 发布模板
* 作者:绿树江
* 博客:http://www.lvshujiang.com/
*/if( isset($_POST[‘tougao_form’]) && $_POST[‘tougao_form’] == ‘send’) {
global $wpdb;
$current_url = ‘http://www.xuewangzhan.net/’; // 注意修改此处的链接地址$last_post = $wpdb->get_var(“SELECT `post_date` FROM `$wpdb->posts` ORDER BY `post_date` DESC LIMIT 1”);// 表单变量初始化
$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>’);
}
} get_header();?>

5、最后以UTF-8编码保存tougao.php,否则中文可能会乱码。然后进入WordPress管理后台 – 页面 – 创建页面,标题为投稿(可以自己起名),内容填上投稿说明等,右侧可以选择模板,选择 “发布模板”即可。

6、如果你觉得本文提供的文章编辑框太过单调,需要一个富文本编辑,(相关问题:网站编辑器到底用百度编辑器还是kindeditor)你可以看看下面这个投稿编辑框(包含图片上传功能)。

tougao64557

一、下载KindEditor (下载地址:http://kindeditor.net/down.php )这里我们将使用KindEditor来作为我们的编辑器,点此下载KindEditor。下载后解压,将文件夹重命名为kindeditor,放到你当前主题文件夹下。(kindeditor官网如果无法下载,可在此处下载:https://pan.baidu.com/s/1dF89Dwl

二、 将代码一中第41行的</form>改成:

</form>
<script charset=”utf-8″ src=”<?php bloginfo(‘template_url’); ?>/kindeditor/kindeditor-min.js”></script>
<script charset=”utf-8″ src=”<?php bloginfo(‘template_url’); ?>/kindeditor/lang/zh_CN.js”></script>
<script>
/* 编辑器初始化代码 start */
var editor;
KindEditor.ready(function(K) {
editor = K.create(‘#tougao_content’, {
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : true, /* 开启图片上传功能,不需要就将true改成false */
items : [
‘fontname’, ‘fontsize’, ‘|’, ‘forecolor’, ‘hilitecolor’, ‘bold’, ‘italic’, ‘underline’,
‘removeformat’, ‘|’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’, ‘insertorderedlist’,
‘insertunorderedlist’, ‘|’, ’emoticons’, ‘image’, ‘link’]
});
});
/* 编辑器初始化代码 end */
</script>

三、继续对tougao.php代码进行修改。 将代码一中第41行的:

$content = isset( $_POST[‘tougao_content’] ) ? trim(htmlspecialchars($_POST[‘tougao_content’], ENT_QUOTES)) : ”;

改成下面代码:

$content = isset( $_POST[‘tougao_content’] ) ? trim($_POST[‘tougao_content’]) : ”;
$content = str_ireplace(‘?>’, ‘?&gt;’, $content);
$content = str_ireplace(‘<?’, ‘&lt;?’, $content);
$content = str_ireplace(‘<script’, ‘&lt;script’, $content);
$content = str_ireplace(‘<a ‘, ‘<a rel=”external nofollow” ‘, $content);

四、修改富文本编辑框样式: 如果你觉得以上自己做的编辑框不符合自己的要求,那就换其它的样式。我们下载的kindeditor目录下有个examples文件夹,这里是部分演示,双击打开index.html可以看到所有演示。你是否看中某个演示呢?那就用文本编辑器打开它的html文件,查看里面的代码。这些html文件的代码中都可以看到类似代码:

<script charset=”utf-8″ src=”../kindeditor-min.js”></script>
<script charset=”utf-8″ src=”../lang/zh_CN.js”></script>
<script>
… 编辑器初始化代码
</script>

将以上代码中 编辑器初始化代码 那部分代码替换第三步中的编辑器初始化代码,然后将 ‘textarea[name=”content”]’ ,改成 ‘#tougao_content’ 即可。

更多细节修改可以参考以下视频文件:

打赏
期待你一针见血的评论,Come on!