首页 > 站长百科 > 建站经验

WordPress网站添加在线投稿发布功能，带WP富文本编辑框

2018-11-01 来源：学做网站论坛

我们自己建网站过程中，使用的很多程序是没有自带的投稿，发布页面，需要我们自己去做这样的页面，其实并不复杂，按照下面的步骤，你就可以在学做网站过程中做出类似的投稿页面和发布页面了。

以下是学做网站论坛讲解的网站如何添加在线投稿发布功能视频教程

1、首先在当前主题的目录下新建一个php文件，命名为tougao.php，然后将page.php中的所有代码复制到tougao.php中；【相关教程：wordpress模板制作教程】
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: 发布模板
* 作者：学做网站论坛
* 博客：https://www.xuewangzhan.com/
*/if( isset($_POST['tougao_form']) && $_POST['tougao_form'] == 'send') {
global $wpdb;
$current_url = 'https://www.xuewangzhan.com/'; // 注意修改此处的链接地址$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）你可以看看这篇文章（包含图片上传功能）。
- 一、下载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('?>', '?>', $content);
$content = str_ireplace('<?', '<?', $content);
$content = str_ireplace('<script', '<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' 即可。

标签： isp 代码建网站数据库搜索

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:网站空间DB、LOG、WEB三个文件夹作用各是什么

下一篇:网站动态favicon.ico图标如何制作

最新资讯

热门推荐