• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress CMS主题用户中心开发 6:给author_write.php添加静态代码

    wordpress CMS主题用户中心开发 6:给author_write.php添加静态代码

    作者: 分类:wordpress CMS主题制作 点击: 629 次
    wordpress CMS主题:ssmay主题

      在上一章中,我们为author.php这个wordpress主题用户中心页面调用了后台的数据:积分、关注数、粉丝数、文章数、文章总浏览量以及用户发表的文章列表等。本章,我们再来实现author_write.php的写博客功能。一般wordpress默认是在后台写文章的,而我们的wordpress主题用户中心需要前台用户可以在前台写博客文章。下面,一起来看看如何实现。

      第一步:修改author.php文件:

      给author.php文件添加如下代码来获取当前作者的信息:

      <?php

      global $wp_query;
      $curauth = $wp_query->get_queried_object(); //获取作者信息

      $uid = $curauth->ID;

      ?>

      第二步:创建author_post_list.php文件:

      这个文件是作者发表的文章列表。把原main.php文件中的代码剪切到author_post_list.php文件中。

      第三步:修改main.php文件:

      给main.php文件添加一个判断,如果act=list时,右侧主体显示文章列表;如果act=author_write时,右侧主体显示 写博客 页面。把main.php文件必成如下:

      <?php
      if($act == 'list'){
      require_once("author_post_list.php");
      }else{
      require_once("author_write.php");
      }
      ?>
      这样,在我们点击左边栏上的“文章”链接时,右侧主体会显示作者发表的文章列表;而点击“写博客”按钮时,就会在右侧显示“发表文章”页面。

      第四步:添加author_write.php文件静态代码:

      本章只给author_write.php文件添加静态代码,因为实现这个页面的所有功能,需要比较麻烦的,所以,我们分2步来实现这个页面,在下一章我们再来实现这个页面的所有功能。前台发表文章,我们一般只需要以下几个字段:文章标题、文章分类目录、文章标签、文章内容,所以我们制作author_write.php页面时,只需要针对这几个字段添加表单元素即可。代码如下:

      <div class="authors">
      <h1>发表文章</h1>
      <!-- 关于表单样式,请自行调整-->
      <form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" >
         <div class="write_title">
         <label for="tougao_title">文章标题<span>*</span></label>
             <input type="text" size="40" value="" id="tougao_title" name="tougao_title" />
         </div>
         <div class="write_cat">
              <label for="tougaocategorg">文章分类<span>*</span></label>
             <?php
                      //调用网站的分类列表,以下拉列表形式展示
                      wp_dropdown_categories('show_option_none=请选择文章分类&id=tougao-cat&show_count=1&hierarchical=1&hide_empty=0');
                  ?>
         </div>
              <div class="write_tags">
                  <label >文章标签</label>
                  <input type="text" name="post_tags" />
                  <em>多个标签用 英文逗号 隔开</em>
              </div>
         <div class="write_con">
         <label>文章内容<span>*</span></label>
                  <?php wp_editor( '', 'myeditor', array() );  //调用wordpress自带的编辑器   ?>
         </div>
         <div class="write_submit">
             <input type="hidden" value="send" name="tougao_form" />
                  <input type="hidden" name="user_id" value="<?php echo $current_user->ID; ?>">
             <input type="submit" id="tougao_buttom" value="提交" />
         </div>
      </form>
      </div>

      给这些代码元素添加CSS样式:

      /*用户写博客*/
      .authors h1{ width:100%; font-size:0.2rem; margin-bottom: 0.3rem; padding-bottom: 0.1rem; border-bottom:1px dashed #ccc; }
      .authors h1 a{ float:right; font-size:0.16rem; color:#FF7256; }
      .authors form{ width:100%; float:left; font-size:0.16rem; margin-bottom:0.3rem; }
      .authors form label{ width:1rem; display:inline-block; }
      .authors form span{ color:red; }
      .authors form .write_title,.authors form .write_cat,.authors form .write_con{ width:100%; float:left; margin-bottom:0.2rem; }
      .authors form .write_title input{ width:80%; line-height: 0.3rem; }
      .authors form .write_cat select{ width:40%; height: 0.3rem; line-height: 0.3rem; }
      .authors form .write_con textarea{ width:80%; height: 3rem; line-height: 0.3rem; vertical-align:top; }
      .authors form .write_submit{ margin-left:1.1rem; float:left; }
      .authors form .write_submit input{ width:1.5rem;height: 0.4rem; line-height: 0.4rem; text-align:center; font-size:0.2rem; }
      #wp-myeditor-wrap{ margin-top:0.15rem; }
      .authors form .write_tags{ width:100%; float:left; margin-bottom:0.2rem; }
      .authors form .write_tags input{ width:50%; }
      .authors form .write_tags em{ font-size:0.13rem; }

      这样,我们就把author_write.php写博客文章页面的静态代码就写好了。实现的效果如下图:

      wordpress CMS主题用户中心开发 6:给author_write.php添加静态代码

      在下一章中,我们再为这个页面添加提交功能。

       



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201808096521.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

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

    This site uses Akismet to reduce spam. Learn how your comment data is processed.