WordPress网站如何添加在线投稿功能

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

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

• 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；将tougao.php上传到主题文件夹下；
• 在tougao.php开头，找到< ?php get_header(); ? >，在它的上面加上以下的代码：

  
  <?php include( TEMPLATEPATH . '/fabu.php' ); ?>
  
  

• 5、最后以UTF-8编码保存tougao.php，否则中文可能会乱码。然后进入WordPress管理后台 – 页面 – 创建页面，标题为投稿（可以自己起名），内容填上投稿说明等，右侧可以选择模板，选择 “发布模板”即可。
• 6、如果你觉得本文提供的文章编辑框太过单调，需要一个富文本编辑，你可以看看这篇文章（包含图片上传功能）。
  
  • 一、下载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’ 即可。