零基础学做网站培训介绍

当前位置:

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开头,将第一个 <?php (一般为:< ?php get_header(); ? >)替换成下面的代码:
    
    
    <?php
    /*
    ** Template Name: 发布模板
    * 来源:学做网站论坛
    * 网址:https://www.xuewangzhan.net/
    */

    if( isset($_POST['tougao_form']) && $_POST['tougao_form'] == 'send') {
    global $wpdb;
    $current_url = '/'; // 注意修改此处的链接地址
    $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、如果你觉得本文提供的文章编辑框太过单调,需要一个富文本编辑,你可以看看这篇文章(包含图片上传功能)。
    带WP富文本编辑框的在线投稿发布功能页面,

    • 一、下载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' 即可。

相关阅读:

WordPress投稿页面添加插入自定义栏目参数

WordPress投稿功能制作方法

WordPress 用户投稿插件(支持游客和会员投稿)

4条回应:“WordPress网站如何添加在线投稿功能”

  1. 学做网站论坛讲师 学做网站讲师说道:

    如果你想让投稿的文章立即发布,而不需要审核再编辑,请将以下代码:
    ‘post_content’ => $post_content,
    替换为
    ‘post_content’ => $post_content,
    ‘post_status’ => ‘publish’,

  2. 学习建网站学员 阳光虫草说道:

    有个投稿可以前台发布就好了,比如授权用户发布多少条

  3. 学习建网站学员 好货值得买说道:

    这个可以有,不错~

  4. 学习建网站学员 ory说道:

    老师,分类目录那个,调用不出来分类目录??
    不知道怎么回事

发表评论

电子邮件地址不会被公开。 必填项已用*标注