• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > WP主题开发09:wordpress主题trans首页左侧主体的修改

    WP主题开发09:wordpress主题trans首页左侧主体的修改

    作者: 分类:wordpress CMS主题制作 点击: 1,115 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      在上一节中,我们修改好了wordpress主题trans的首页的状况。本节,我们再来介绍如何修改trans主题首页模板的左侧主体代码。trans主题首页左侧主要展现的是最新文章列表以及分页(如下图)。

      WP主题开发09:wordpress主题trans首页左侧主体的修改

      目前,这个首页的内容还是死的,是一个静态的文件,wordpress后台发表新的文章,这里也不会发生变化。我们需要实现的是:在我们发表文章后,这里就要发生相应的变化——我们新发表的文章会展示在这个列表中。还有,我们要实现点击分页按钮时,也能跳到对应的页面。下面,我们就来一步一步地操作。

      第一步:左侧删除掉所有的文章列表,只保留一条。

      原index.html静态模板的左侧列表中有5个文章,代码如下图:

      WP主题开发09:wordpress主题trans首页左侧主体的修改

      可以看出,他们的代码都是一样的。这里,我们留下第一条,其余4条全部删除掉。它的代码如下:

      < div class="left_bottom">
      < div class="list">
      < ul class="list_h">
      < a href="/">网站索引量一直在下降是什么原因</a>
      < /ul>
      < ul class="list_con">
      < ul class="list_con_left">
      < a href="/">< img src="./images/index_17.jpg" alt=""></a>
      < /ul>
      < ul class="list_con_right">
      < li>所谓网站索引量,就是指搜索引擎把你的网页内容索取到数据库中。… </li>
      < li>
      < span class="dashicons-before dashicons-admin-users">木易</span>
      < span class="dashicons-before dashicons-calendar-alt">2020年5月21日</span>
      < span class="dashicons-before dashicons-visibility">274</span>
      < /li>
      < /ul>
      < /ul>
      < /div>
      < /div>

      第二步:添加wordpress循环语句。

      因为,在首页左侧文章列表中,每一个模块的布局是一样的,只是每个模块中的数据不一样而已,所以,我们只需要保留一个模块,然后,循环调用wordpress的文章数据添加到这个模块中。这里,我们先调用wordpress循环语句,让这个模块循环输出。wordpress网站有多少篇文章,它就会循环多少次,当然,这个循环会受到分页的限制,这个分页我们在后面再说。

      在< div class="left_bottom">这个标签前添加如下代码:

      < ?php
      if ( have_posts() ): //如果有文章
      while ( have_posts() ) : //就循环所有文章
      the_post(); //循环一次,就调用一次数据
      ?>

      在< div class="left_bottom">的结束标签</div>后面,添加结束循环和结束如果的语句,代码如下:

      < ?php
      endwhile;
      endif;
      ?>

      一定要结束循环,也要结束如果,否则会报错。

      第三步:给循环体里的模块添加数据。

      循环体里包含的是< div class="list">这个标签,我们需要把每次循环获取到的数据,放到这个< div class="list">里的对应的子孙标签里。代码如下:

      < div class="list">
      < ul class="list_h">
      < a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a>
      < /ul>
      < ul class="list_con">
      < ul class="list_con_left">
      < a href="< ?php the_permalink(); ?>">
      < ?php
      if(has_post_thumbnail()) { //如果有特色图片,就调用特色图片
      the_post_thumbnail(
      'thumbnail' ,
      array(
      'alt' => trim(strip_tags( $post->post_title )),
      'title' => trim(strip_tags( $post->post_title )),
      'class' => 'home-thumb'
      )
      );
      }else { //否则调用文章第一张图片
      echo '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';
      }
      ?>
      < /a>
      < /ul>
      < ul class="list_con_right">
      < li>
      < ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ...
      < /li>
      < li>
      < span class="dashicons-before dashicons-admin-users">
      < ?php the_author(); ?>
      < /span>
      < span class="dashicons-before dashicons-calendar-alt">
      < ?php the_time("Y年m月d日"); ?>
      < /span>
      < span class="dashicons-before dashicons-visibility">
      < ?php echo get_post_meta($post->ID, 'views', true); ?>
      < /span>
      < /li>
      < /ul>
      < /ul>
      < /div>

      代码解释:

      the_permalink() => 文章链接
      the_title() => 文章标题
      the_post_thumbnail() => 文章特色图片
      the_author() => 文章作者
      the_time() => 文章发表的时间
      get_post_meta() => 获取文章自定义字段
      $post->post_title => 文章标题
      $post->post_content => 文章内容

      上面这些函数与变量,都是wordpress自带的,我们只需直接拿来用就可以了。

      当然,上面的代码中,我们也用到一些PHP语言的原生函数,如:trim()去除空白函数、strip_tags()去除html标签函数、mb_substr()截取中文字符串函数。

      另外,上面的代码中,我们还调用了一个在trans主题的functions.php文件中创建的一个函数——catch_first_image(),这个函数的功能是获取文章的第一张图片。因为,有时候,我们的文章可能没有添加特色图片,这时,我们可以调用文章第一张图片来作为文章的缩略图。这个函数的代码如下:

      // 获取文章第一张图片
      function catch_first_image() {
      global $post, $posts;$first_img = '';
      ob_start(); ob_end_clean();
      $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
      if(empty($first_img)){
      $random = mt_rand(1, 10);
      $first_img = get_bloginfo("template_url").'/images/random/'.$random.'.jpg'; //默认多张图片,随机显示
      //$first_img = "/images/default.jpg"; //默认图片
      }
      return $first_img;
      };

      好了,到这里,我们就完成了wordpress主题trans首页左侧文章列表的循环调用数据,这样,trans主题的首页左侧就不会再是死代码了,而是动起来的代码,只要wordpress网站的后台文章有变化,这里就会相应的变化,这也就是wordpress动态模板的魔性所在。嗯,分页部分,我们将在下一节介绍。



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:码不停蹄
    本文地址:http://wanlimm.com/77202006178226.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

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

    或许你会感兴趣的文章:

    发表评论

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

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据