• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > WP主题开发08:wordpress主题首页头部模板的修改

    WP主题开发08:wordpress主题首页头部模板的修改

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

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

      测试数据库导入到wordpress本地网站后,我们就可以正式开始wordpress主题动态模板的编写了。在前面的章节中,我们已写好了wordpress主题的静态模板trans,那只是给wordpress主题创建了一个架子,给别人看一个第一印象,但它是没有灵魂的,它是一个死的,没有任何动态。所以,在开发wordpress动态模板时,我们会给trans添加上灵魂,让它拥有让人着魔的动态效果,也就是让trans可以从wordpress数据库中调用到相关的数据,在wordpress前端网站上展示。今天,我们首页来修改wordpress主题的首页的头部文件。

      我们先来看一下trans首页头部的静态代码,如下:

      < !DOCTYPE html>
      < html lang="en">
      < head>
      < meta charset="UTF-8">
      < title>Document</title>
      < link rel="stylesheet" href="style.css">
      < /head>
      < body>
      <!-- 头部 -->
      < header>
      < div class="header">
      < div class="head">
      < ul class="logo">
      < a href="/"><img src="./images/index_02.jpg" alt=""></a>
      < /ul>
      < ul>
      < a href="index.html">首页</a >
      < a href="list.html">列表页</a >
      < a href="page.html">单页面</a >
      < a href="single.html">文章页</a >
      < a href="search.html">搜索页</a >

      < /ul>
      < /div>
      < /div>
      < div class="search">
      < div class="search_head">
      < ul>
      < li>< span class="dashicons-before dashicons-arrow-left-alt">< /span>< /li>
      < li>< span class="dashicons-before dashicons-arrow-right-alt">< /span>< /li>
      < li>< span class="dashicons-before dashicons-image-rotate">< /span>< /li>
      < /ul>
      < ul>
      < form action="/" method="get">
      < input type="text" name="search" id="">
      < input type="submit" value="搜索">
      < /form>
      < /ul>
      < /div>
      < /div>
      < /header>

      对于头部这部分代码,现在我们需要修改的部分主要有3部分,如下图所示:

      WP主题开发08:wordpress主题首页头部模板的修改

      好,我们就来对这几个部分的代码做出相应的动态代码修改。wordpress主题静态代码变成动态代码,主要是通过wordpress程序提供的功能函数来实现。

      第一部分:网页标题。

      也就是< title >标签中的内容,这个网页标题是在浏览器的头部显示的,也是整个网页的标题。修改后的代码如下:

      < title>< ?php bloginfo("name"); ?> < /title>

      这里调用了bloginfo()函数,这个函数可以调用网站的常规选项,如:标题、副标题、网站URL、wordpress的URL路径、主题路径等等。在后面trans主题修改中,我们会经常用到。这里的bloginfo()函数的参数"name",是代码网站标题。

      第二部分:CSS样式调用。

      如果不修改CSS样式的路径地址,按照上面静态代码中的CSS路径,会直接调用网站根目录下的style.css样式表文件。可是,此时的根目录下,是wordpress程序的所有PHP文件,而不是trans主题的文件了。而我们要调用的是trans主题目录下的style.css。所以,我们这里把代码修改成如下:

      < link rel="stylesheet" href="< ?php bloginfo("stylesheet_url"); ?>">

      这里的参数stylesheet_url,表示调用的是trans主题的style.css样式表文件。

      第三部分:修改logo图片地址。

      在trans静态模板中,logo图片地址,也是网站根目录下,这里,我们同样要修改它的路径到trans主题目录下,代码如下:

      < img src="< ?php bloginfo("template_url")."/images/logo.png"; ?>" alt="" >

      这里bloginfo()函数的参数是 template_url ,表示当前主题trans的路径,而logo.png图片在这个trans主题目录下的images目录下。

      第四部分:调用顶部导航菜单。

      在trans静态代码中,顶部导航菜单是写死的。我们这里要调用wordpress本地网站后台创建的顶部菜单数据。这时,我们也要分2步走。

      1、给wordpress主题添加菜单功能。

      在trans主题目录下创建一个functions.php文件,这个是主题函数文件。在这个functions.php文件中添加如下代码来添加菜单功能模板:

      //菜单
      register_nav_menus( array(
      'menu_top' => '头部导航',
      'menu_bottom' => '底部导航',
      ) );

      这时,我们在后台创建菜单时,就会有“头部导航”和“底部导航”的选项。如下图:

      WP主题开发08:wordpress主题首页头部模板的修改

      2、调用wordpress后台创建的菜单。

      原trans静态模板的头部菜单的代码如下:

      < a href="index.html">首页</a>
      < a href="list.html">列表页</a>
      < a href="page.html">单页面</a>
      < a href="single.html">文章页</a>
      < a href="search.html">搜索页</a>

      现在我们通过wp_nav_menu()这个菜单函数来调用我们在后台创建的菜单,代码如下:

      < ?php
      $menu = array(
      'container' => false, //最外层标签名
      'echo' => false, //不让直接输出,而是以一个变量
      'theme_location' => 'menu_top', //菜单名
      'depth' => 0, //菜单深度
      );
      echo strip_tags(wp_nav_menu( $menu ), '<a>' );
      ? >

      添加好trans主题的顶部导航菜单功能后,我们再在wordpress网站后台创建菜单时,勾选“顶部导航”,就可以给wordpress本地网站添加顶部的菜单了。

      通过上面的几步,我们为trans主题首页的头部做出了相应的修改,它们不再是死的了,不再是一成不变了。它们会随着wordpress网站后台的修改而做出相应的变化。这就是我们所需要的前后台互动的效果,后台不动,前台就不动。后台一动,前台就立马行动。



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

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

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

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

    或许你会感兴趣的文章:

    发表评论

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

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