• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > WP主题开发13:拆分trans主题首页模板,创建公共模板

    WP主题开发13:拆分trans主题首页模板,创建公共模板

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

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

      通过前面几节课的操作,我们为wordpress主题trans的首页模板实现了动态代码的调用,网站前端的数据与wordpress数据库的数据正式挂勾上。在接下来的课程中,我们还要修改trans主题的文章列表页、文章详情页、搜索页等等。这个时候,如果你够细心的话,会发现一个问题:trans主题的这些模板页面的头部、右侧边栏、底部的数据都是一样的。也就是说,我们每创建一个动态模板之时,都要重新修改一下这几个部分的代码。这时,我们可能会想到,既然代码都是一样的,为什么不能把这几部分的代码做成几个公共的模板,供其它模板直接调用?这就是我们今天所要探讨的问题——拆分wordpress主题trans的首页动态模板,做成几个公共模板:头部模板、右侧边栏模板、底部模板。下面,我们就一个一个地来实现。

      一、头部模板——header.php。

      trans主题首页模板的头部,从所有前端页面展示效果看,从最上端到搜索框那里就是首页的头部,发下图:

      WP主题开发13:拆分trans主题首页模板,创建公共模板

      我们在trans主题目录下创建一个header.php,然后在trans主题首页动态模板中找到头部的所有代码。首页头部的可视化代码是包含在< header></header>标签里的,这个找起来不难。我们还要把网页代码的头部< head></head>里的代码也要找出来。简单地说,就是从网页代码的最顶部,一直到</header>这个结束标签,把这段代码剪切下来,粘贴到header.php文件中。代码如下:

      <!DOCTYPE html>
      < html lang="en">
      < head>
      < meta charset="UTF-8">
      < title><?php echo get_bloginfo("name"); ?></title>
      < link rel="stylesheet" href="<?php bloginfo("wpurl"); ?>/wp-includes/css/dashicons.css">
      < link rel="stylesheet" href="<?php echo get_bloginfo("stylesheet_url"); ?>">
      < /head>
      < body>
      <!-- 头部 -->
      < header>
      < div class="header">
      < div class="head">
      < ul class="logo">
      < a href="<?php bloginfo("siteurl"); ?>">
      < img src="<?php echo get_option("logo_img") ?: bloginfo("template_url")."/images/logo.png"; ?>" alt="">
      </a>
      </ul>
      < ul>
      <?php
      $menu = array(
      'container' => false, //最外层标签名
      'echo' => false, //不让直接输出,而是以一个变量
      'theme_location' => 'menu_top', //菜单名
      'depth' => 0, //菜单深度
      );
      echo strip_tags(wp_nav_menu( $menu ), '<a>' );
      ?>
      </ul>
      </div>
      </div>
      < div class="search">
      < div class="search_head">
      < ul>
      < li id="prev">< span class="dashicons-before dashicons-arrow-left-alt"></span></li>
      < li id="next">< span class="dashicons-before dashicons-arrow-right-alt"></span></li>
      < li id="brush">< span class="dashicons-before dashicons-image-rotate"></span></li>
      </ul>
      < ul>
      < form action="<?php bloginfo("siteurl"); ?>" method="get">
      < input type="search" name="s" placeholder="搜索...">
      < input type="submit" value="搜索">
      </form>
      </ul>
      </div>
      </div>
      </header>

      二、右侧边栏模板——sidebar.php

      trans主题首页模板的右侧边栏,如下图所示:

      WP主题开发13:拆分trans主题首页模板,创建公共模板

      在trans主题目录下创建一个sidebar.php文件,然后,从首页模板index.php的代码中找到右侧边栏的代码。右侧边栏的所有代码包含在< div class="c_right"></div>这对div中,我们把整个< div class="c_right">的所有代码剪切下来,粘贴到sidebar.php文件中,代码如下:

      <!-- 侧边栏 -->
      < div class="c_right">
      < div class="c_right_0 right_con">
      < ul class="c_right_t">
      < span class="dashicons-before dashicons-admin-post"></span>最新文章
      </ul>
      < ul class="c_right_article">
      <?php
      query_posts('posts_per_page=10&caller_get_posts=1&orderby=new');
      while (have_posts()) : the_post();
      echo '<a href="'.get_the_permalink().'" title="'.get_the_title().'">';
      echo get_the_title();
      echo '</a>';
      endwhile;
      wp_reset_query();
      ?>
      </ul>
      </div>
      < div class="c_right_1 right_con">
      < ul class="c_right_t">
      < span class="dashicons-before dashicons-admin-post"></span>热门文章
      </ul>
      <?php
      query_posts('posts_per_page=8&caller_get_posts=1&orderby=comment_count');
      while (have_posts()) : the_post();
      ?>
      < ul class="c_right_con">
      < div class="hot_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>
      </div>
      < div class="hot_right">
      < li>< a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
      < li>
      < span class="dashicons-before dashicons-calendar-alt">
      <?php the_time("Y年m月d日"); ?>
      </span>
      < span class="dashicons-before dashicons-visibility">
      <?php get_post_meta($post->ID,"views",true); ?>
      </span>
      </li>
      </div>
      </ul>
      <?php endwhile; wp_reset_query(); ?>
      </div>
      < div class="c_right_2 right_con">
      < ul class="c_right_t">
      < span class="dashicons-before dashicons-welcome-widgets-menus"></span>热门标签
      </ul>
      < ul class="c_right_tag">
      <?php wp_tag_cloud('number=40&orderby=count&order=DESC&smallest=13&largest=13&unit=px'); ?>
      </ul>
      </div>
      </div>

      三、底部模板——footer.php

      trans主题首页模板的底部效果如下图:

      WP主题开发13:拆分trans主题首页模板,创建公共模板

      在trans主题目录下创建一个footer.php文件,然后在首页index.php找到底部的代码,底部是包含在< footer></footer>这个标签里的。我们从< footer>开始,一直剪切到index.php模板的代码结尾,粘贴到footer.php文件中,代码如下:

      <!-- 底部 -->
      < footer>
      < div class="foot_menu">
      < ul class="foot_menu_list">
      <?php
      if(is_home()){ //如果是首页,就调用友情链接
      wp_list_bookmarks('title_li=&before=&after=');
      }else{ //否则就调用底部导航
      $menu = array(
      'container' => false, //最外层标签名
      'echo' => false, //不让直接输出,而是以一个变量
      'theme_location' => 'menu_bottom', //菜单名
      'depth' => 0, //菜单深度
      );
      echo strip_tags(wp_nav_menu( $menu ), '<a>' );
      }
      ?>
      </ul>
      </div>
      < div class="foot">
      < ul class="foot_list">
      < li>© <?php echo date("Y"); ?> <?php bloginfo("name"); ?> | <?php echo get_option("beian"); ?> | < a href="<?php echo get_option("map"); ?>">网站地图</a></li>
      < li>Power by WordPress | Theme <?php echo wp_get_theme(); ?></li>
      </ul>
      </div>
      </footer>
      </body>
      </html>

      四、引入公共模板。

      通过上面三步的操作,我们就把index.php模板的头部代码、右侧边栏代码、底部代码给独立出来了,做成了公共的模板:header.php、sidebar.php、footer.php 。在index.php模板中,我们剪切掉了这几部分,只剩下了左侧边主体列表的。这时,我们要做的就是,在index.php模板中引入这几个公共模板。

      方法一:使用wordpress提供的函数来引入。

      wordpress已经为我们提供了这几个公共模板的引入方法:

      头部模板引入:<?php get_header(); ?>
      侧边栏模板引入:<?php get_sidebar(); ?>
      底部模板引入:<?php get_footer(); ?>

      方法二:通过include()这个PHP原生函数来引入。

      头部模板引入:<?php include("header.php"); ?>
      侧边栏模板引入:<?php include("sidebar.php"); ?>
      底部模板引入:<?php include("footer.php"); ?>

      include()方法可以用来引入任何php文件,而wordpress提供的这几个函数就有所限制,只能引入指定名字的PHP文件。

      能过上面的操作,我们就完成了wordpress主题trans首页模板的切割,把它切割成4个模板:index.php首页、header.php头部模板、sidebar.php侧边栏模板、footer.php底部模板。这样的好处是,以后,我们创建其它trans主题模板时,就不需要再写头部、侧边栏、底部的代码了,后期代码修改和维护也更加方便。



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

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

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

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

    或许你会感兴趣的文章:

    发表评论

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

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