【基础篇】4、安装主题文件

在前面的几个教程中,我们已经设计出了主题的模板、样式,同时也添加了模拟数据,现在我们要做的就是把现有模板文件安装到 WordPress 中,这样有两个好处

  1. 添加函数调用之后,刷新即可显示相应数据,方便对数据的规划。
  2. 还有其他各种好处。
    到了这个步骤,你就会发现 远程调试 和 本地调试 的区别了。远程调试,需要不断的在远程服务器上修改文件,然后刷新速度还要看网速等;本地调试直接复制,然后使用文本编辑器直接打开编辑即可,刷新加载速度也非常快。所以推荐在本地进行调试。

安装主题

WordPress 主题安装相信大家都不陌生,我们只需要把上节课只做好的 “myTheme” 文件夹复制到 “wp-contentthemes” 文件目录下面,然后把 Html 文件后缀修改成 PHP 即 index.php,一个文件夹有了 index.php 和 style.css 这两个文件,才能被系统识别。之后我们登录后台,找到 “外观-》主题” 就可以看到我们的 “myTheme” 主题了。

你会发现你制作的这个主题显示和其他下载的主题显示的不同,标准主题中,需要在 style.css 文件中添加一些信息,同时还要生成缩略图。关于这一部分,将会在 【中级篇】 中进行讲解。

启用主题

点击启用之后,我们再访问我们博客的首页,就可以发现,已经显示出来我们之前的模拟数据了。但是完全没有 CSS 的样式效果。

原因很简单,我们之前的模板中,引用 style.css 文件的时候,直接用的相对目录

<link rel="stylesheet" type="text/css" href="style.css" />

href 属性直接指向了 style.css 文件,指向的是 主题 文件下面的 style.css 文件,当我们访问博客首页的时候,就无法加载到这个 style.css 文件了。

正确的做法是,使用 绝对链接 到你的 style.css 。这里,我们需要将原来模板中的 <link>标签的 href 属性改成 http://localhost/cms/wp/wp-content/themes/myTheme/style.css 。这里包含你的网址和 CSS 文件的绝对地址。这样就正常了,但是这样做有很多问题:

  • 使用你的模板的时候,需要修改这个属性的值,把前面的网址改成你的博客网址。
  • 修改模板名称的时候,我们同样需要修改这个属性的值。
  • 以及其他麻烦。
    你懂这种代码,修改起来还比较容易,但是面对不懂的用户呢?你让他们如何修改?所以我们就需要想出解决方法。

如果说,我可以使用某种东西,然后它就自动得到当前网站的地址,加上当前主题的目录名,自动的生成这个地址,那么这些问题都会迎刃而解。

WordPress 的主题机制以及为我们准备好了这样的东西,那就是 WordPress 主题函数。WordPress 以及帮我们准备好了大量的函数,来调用这些数据。我们只需要插入主题文件中即可。

style.css 文件调用函数

我们只需要在原来模板的 href 属性中,将原来的 “style.css” 换成 “<?php bloginfo( ‘stylesheet_url’ ); ?>” 就可以了。

下面,潜行者 m 带着你简单分析一下这个函数

<?php bloginfo( 'stylesheet_url' ); ?>

首先,WordPress 是 PHP 开发的,所以执行函数的时候,都需要用 PHP 标签括起来,例如:

<?php ........ ?>

其次,这里面的函数名是 bloginfo(); 这是 WordPress 内置的函数,其功能就是调用各种博客相关数据的,这些数据通常在 “WordPress 后台 》 设置 》 常规” 里面进行设置。这个函数有很多参数,例如上面的那个参数 “stylesheet_url” ,就是调用了 style.css 的绝对地址。所以我们插入这个函数之后,WordPress 的主题机制会运行这些函数,将博客数据替换出来。

这是我们学习的第一个函数,我这里只是简单的讲解一下,在后面的教程中,我将会更加详细的对参数以及用法进行解析。如果你想超前学习,可以看一下本人之前的关于 bloginfo(); 函数的常用参数文章:wordpress 中 bloginfo()函数详解

添加修改之后,我们可以看到,页面已经恢复正常了

学习重点

经过这一个小事情之后,我们可以明确一下学习重点。那就是各种常用 WordPress 函数的参数以及使用方法,之后插入模板文件中,就可以显示 WordPress 的数据了,也就达到了制作主题的目的了。

本节课相关资源下载

myTheme 主题下载地址 : >>点击这里

之前的系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件