wordpress主题制作教程:制作网站文章article

2017年12月10日15:39:36 发表评论 41

wordpress制作主题的首页是肯定要动态的加载文章的,我们要把静态的文章内容全部换成动态的WP调用函数,然后再用WP的主循环把网站所有文章给加载出来。

我们只需要留一个文章模板,也就是一篇文章内容:

  1. <div class="card active">
  2.     <!-- 作者 -->
  3.     <div class="author">
  4.         <a href="#" class="pic"><img src="img/author.jpg" alt=""></a>
  5.         <a href="#" class="name">猿梦</a>
  6.         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  7.     </div>
  8.     <!-- 文章内容 -->
  9.     <div class="content">
  10.         <div class="box">
  11.             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  12.             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  13.         </div>
  14.         <a class="pic" href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  15.     </div>
  16.     <!-- 文章组件 -->
  17.     <div class="module">
  18.         <a class="btn" href="#">web前端</a>
  19.         <span><i class="iconfont icon-kanguo"></i>999</span>
  20.         <span><i class="iconfont icon-pinglun"></i>111</span>
  21.         <span><i class="iconfont icon-zan"></i>666</span>
  22.     </div>
  23. </div>

首先我们来理顺一下思路,我们想要把上面静态的内容替换掉,上面有什么内容,我们就要找WP什么的调用函数:

  1. 作者头像、名称、文章发布时间
  2. 文章标题、内容、图片
  3. 文章分类目录、阅读人数、评论数、点赞数
    1. /* 作者头像 */
    2. <?php echo get_avatar( get_the_author_email(), '60' );?>
    3. /* 作者名称 */
    4. <?php the_author_nickname(); ?>
    5. /* 发布时间 */
    6. <?php the_time(); ?>
    7. /* 文章标题和链接 */
    8. <?php the_title();?>
    9. <?php the_permalink() ?>
    10. /* 文章内容 */
    11. <?php the_excerpt(); ?>
    12. /* 文章分类名称和链接 */
    13. get_the_category()
    14. /* 评论数 */
    15. <?php comments_number() ?>
    16. /* 以下功能不自带,需要在functions.php下加代码 */
    17. /* 文章图片 */
    18. <?php catch_that_image() ; ?>
    19. /* 阅读数 */
    20. <?php post_views(' ', ' 次'); ?>
    21. /* 点赞数 */
    22. <script type="text/javascript">$(document).ready(function() {
    23.     $.fn.postLike = function() {
    24.         if ($(this).hasClass('done')) {
    25.             alert('您已赞过本博客');
    26.             return false;
    27.         } else {
    28.             $(this).addClass('done');
    29.             var id = $(this).data("id"),
    30.             action = $(this).data('action'),
    31.             rateHolder = $(this).children('.count');
    32.             var ajax_data = {
    33.                 action: "bigfa_like",
    34.                 um_id: id,
    35.                 um_action: action           };
    36.             $.post("<?php bloginfo('url');?>/wp-admin/admin-ajax.php", ajax_data, function(data) {
    37.                 $(rateHolder).html(data);
    38.             });
    39.             return false;
    40.         }
    41.     };
    42.     $(document).on("click"".favorite"function() {
    43.         $(this).postLike();
    44.     });}); </script>
  1.  /* 文章图片调用功能 */
  2.  function catch_that_image() {
  3.       global $post$posts;
  4.       $first_img = '';
  5.       ob_start();
  6.       ob_end_clean();
  7.       $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  8.       $first_img = $matches [1] [0];
  9.       if(empty($first_img)){ //Defines a default image
  10.         $first_img = "/images/default.jpg";
  11.       }
  12.       return $first_img;
  13.     }
  14.  /* 点赞功能 */
  15.  
  16.  add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');add_action('wp_ajax_bigfa_like', 'bigfa_like');function bigfa_like(){
  17.     global $wpdb,$post;
  18.     $id = $_POST["um_id"];
  19.     $action = $_POST["um_action"];
  20.     if ( $action == 'ding'){
  21.         $bigfa_raters = get_post_meta($id,'bigfa_ding',true);
  22.         $expire = time() + 99999999;
  23.         $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
  24.         setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
  25.         if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
  26.             update_post_meta($id, 'bigfa_ding', 1);
  27.         }else {
  28.             update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
  29.         }
  30.         echo get_post_meta($id,'bigfa_ding',true);
  31.     }
  32.     die;}
  33.  /* 阅读功能 */
  34.  function record_visitors(){
  35.     if (is_singular())
  36.     {
  37.       global $post;
  38.       $post_ID = $post->ID;
  39.       if($post_ID)
  40.       {
  41.           $post_views = (int)get_post_meta($post_ID, 'views', true);
  42.           if(!update_post_meta($post_ID, 'views', ($post_views+1)))
  43.           {
  44.             add_post_meta($post_ID, 'views', 1, true);
  45.           }
  46.       }
  47.     }}add_action('wp_head', 'record_visitors'); /// 函数名称:post_views/// 函数作用:取得文章的阅读次数function post_views($before = '(点击 ', $after = ' 次)', $echo = 1){
  48.   global $post;
  49.   $post_ID = $post->ID;
  50.   $views = (int)get_post_meta($post_ID, 'views', true);
  51.   if ($echoecho $before, number_format($views), $after;
  52.   else return $views;}
  53. /* 主循环文章信息 */
  54. <?php if (hav_posts()) : ?>
  55. //检查是否有文章,如果有就执行,没有就跳到 else
  56.    <?php while (have_posts()) : the_post(); ?>
  57.    // 这里输出文章内容
  58.    <?php endwhile ; ?>
  59. <?php else : ?>
  60. <?php endif ; ?>

wordpress主题制作教程:制作网站文章article

 

 

至此文章基本的信息算是调用完毕,还有一些细节上的可以处理,比如说时间调用函数参数的处理,文章内容概要的处理等

如果不懂还可以参照:

wordpress文章显示固定或随机缩略图

三种方法修改wordpress默认摘要字数

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: