学做网站培训课程介绍

当前位置:

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、如果你觉得本文提供的文章编辑框太过单调,需要一个富文本编辑,你可以看看这篇文章(包含图片上传功能)。
    带WP富文本编辑框的在线投稿发布功能页面,

    • 一、下载KindEditor (下载地址:http://kindeditor.net/down.php )这里我们将使用KindEditor来作为我们的编辑器,点此下载KindEditor。下载后解压,将文件夹重命名为kindeditor,放到你当前主题文件夹下。(kindeditor官网如果无法下载,可在此处下载:https://pan.baidu.com/s/1dF89Dwl)
    • 二、 将代码一中第41行的</form>改成:(注意修改#tougao_content为自己的ID名)
      
      
      </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>
      KindEditor.ready(function(K) {
      K.create('#tougao_content', {
      autoHeightMode : true,
      afterCreate : function() {
      this.loadPlugin('autoheight');
      }
      });
      });
      </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网站如何添加在线投稿功能”》 有 4 条评论

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

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

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

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

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

    这个可以有,不错~

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

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

发表评论

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

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (111025 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • 网页如何添加背景音乐 视频教程附件下载 (1116827 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • 现在很多网站,都有这样的设置,将网站的客服QQ发布在互联网上;点击 ,任意人都可以与她聊天;寻找商机,广交朋友,这是如何做到的呢?我们如何也在自己
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 我们自己建网站过程中,使用的很多程序是没有自带的投稿,发布页面,需要我们自己去做这样的页面,其实并不复杂,按照下面的步骤,你就可以在学做网站
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功