WordPress主题教程

介绍

WordPress 主题制作之前,应该先了解下主题结构

HTML 基本规则

  1. 以正确的姿势使用 HTML 标签Tag
    虽然 HTML5不像 XHTML 那样对标签的关闭有严格的要求,但是HTML5的规范上已经删除了不少在 HTML4和 XHTML 中的标签。如果不考虑兼容 IE6的话应该遵循 HTML5规范
  2. 保证主题的完整
    要确保主题中至少要有style.cssindex.php这两个文件
    而一个完整的主题含有以下文件列表:
    • style.css
    • index.php
    • home.php
    • single.php
    • page.php
    • archive.php
    • category.php
    • search.php
    • 404.php
    • comments.php
    • comments-popup.php
    • author.php
    • date.php

      WordPress 术语

    • Template(模板) — 其实就是一个代码集,主题中很多地方会利用到这个代码集,所以把它们整合成一个模板,这样就就不必一遍遍输入这些重复代码。
    • Template file(模板文件) — 一个包含一个或者多个代码集(模板)文件。每个主题是由多个模板文件组成的,比如:index.php,style.css,sidebar.php 等等。
    • Theme(主题)或者 WordPress theme(WordPress 主题) — 所有你正在使用的文件:文本,图像,代码等等。注意: WordPress theme(主题)和 WordPress template(s)(模板)是两个不同的东西,尽管有些人认为他们一样。
    • Post(日志或者文章) — 现在你读的就是一篇日志。此外,它是你 blog 的一个简单的条目,如:一个页面或者一篇日记。
    • Page(静态页面) — 一种特殊的 post,它不是以分类组织的。它有别于你其他的日志。注意:在 WordPress,page(页面)和 Page(静态页面)是两种不同的东西。

      WordPress 主题中的层次结构

      一般情况下,index.php 下有13个模板文件,而下面6个相对更重要,优先度从上往下更优先

    • 404.php
    • search.php
    • archive.php
    • page.php
    • single.php
      相对应的,如果archive.php 丢失,那么 WordPress 就会使用 index.php 来控制存档页面的显示

模板文件和模板

WordPress 的每个页面都是由多个模板组成的此处输入图片的描述
在这里看出,index.php是由header.phpindex.phpsidebar.phpfooter.php组成

Header.php

通常在这个文件中包含博客的标题(title)和描述(description)。而且它们通常在一个网站内是一样的

index.php

这个模板文件包含你的日志的标题,日志的内容(就是每篇日志的文本和图片)和日志的元数据 (元数据是每篇日志的额外信息,如作者是谁,日志发布的时间,在哪个分类下,有多少留言等等)。

sidebar.php

这个模板文件主要用于控制博客的页面列表,类别列表,存档列表,友情链接列表和其他一些列表。

footer.php

像 header.php 模板文件一样,footer.php 通常不会因为页面的改变而改变,你可以在这里放置任何东西,但是通常是版权信息。

模板常用函数

  • bloginfo('name') 调用博客的标题信息
  • bloginfo('url') 链接到首页
  • bloginfo(‘description’) 调用博客信息描述

主循环

调用博客日志的主循环(The Loop)是 WordPress 中最重要的 PHP 代码集,几乎所有的页面都会用到它

创建 container DIV

<div id="container"></div>
创建 container 的目的是将博客的主要内容与其他东西都区分开

输入主循环代码

在 container 中输入一下代码

<?php if(have_posts()) : ?><?php while(have_posts() : the_post(); ?>
// TODO
<?php endwhile; ?>
<?php endif; ?>

其中

  • have_posts() 函数检查是否有日志
  • while 为当 if 判定为 true 时调用日志显示

    调用日志标题

    在上面的代码中的 //TODO 中输入以下代码
    <?php the_title() ?>
    这个函数式调用博客的标题

    显示日志内容

    在标题代码下输入以下代码
    <?php the_content() ?>
    这个函数式调用了对应日志的内容,排版可以在 css 里设置以及限制字数等
    注:可以在调用函数外面套用带 class 的 div 或语义化标签以达到便于 css 设置 style 的效果

    日志元数据

    在主循环代码中输入以下代码可以调用元数据,例如显示作者、时间等

  • <?php _e(‘Filed under:’); ?> : 是调用冒号“:”的代码;
    把Filed under:放入<?php _e(”); ?>中不是必须的,这样主要为了使得 Filed under: 可翻译,如果你的主题不需要支持多语言,可以简单输入 Filed under:;
    <?php the_category(‘,’) ?> the_category() 是用来调用日志的在的所有类别的 PHP 函数。如果你把 Filed under: 和 the_category() 放在一起,你可以得到:Filed under: Name of category 1, Name of category 2。the_category() 中的逗号是用来区分类别名。
  • <?php _e(‘by’); ?> 和 Filed under:一样。如果你创建的是私人用的的主题, _e() 不是必须的。_e() 是用来创建可以翻译的主题,如果主题被来自不同国家的上百人使用的话,这是非常重要的。如果你是创建公共使用的主题,最后加上 _e() 以便你的主题可翻译化。
  • <?php the_author(); ?> 它是输出当前日志作者的名字。
  • <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?> 当弹出留言的功能激活的话,comments_popup_link() 调用一个弹出的留言窗口,如果没有激活,comments_popup_link() 则只是简单的显示留言列表。No Comments » 是在没有留言的时候显示的。1 Comment » 是用于当刚好只有1条留言时候。% Comments 是用于当有多于一条留言的时候。比如:8 Comments »。百分号 % 用来显示数字。» 是用来显示一个双层箭头 »。
  • <?php edit_post_link(‘Edit’, ‘ | ‘, ”); ?> 这个只有当我们以管理员或者作者身份登录的的时候才可见。 edit_post_link() 只是简单显示一个可以用来编辑当前日志的编辑链接,这样就可以让我们不必去管理界面搜寻该日志就能直接编辑。edit_post_link() 有三个参数Parameter。第一个是用来确定哪个词你将用在编辑链接的链接标题。如果你使用 Edit post,那么将显示 Edit post 而不是 Edit。第二个参数是用来显示在链接前面的字符,在这里是竖线 |,代码就是&124;。第三个参数是用于显示在编辑链接后面的字符,在这里没有使用。登录 WordPress 之后,再返回到首页就可以看到“Edit”的链接和一条竖线。

    Else

    if语句,有 if 的话就会有 else 语句,虽然 else 不是必须的,但是在这种情况下,else 语句还是有必要的,因为要考虑到新开站点或清空站点时没有任何日志的情况
    <?php endwhile; ?>下面输入以下代码:

    <?php else : ?>
    <div>
    <h2><?php _e('Not Found'); ?></h2>
    </div>

    即可在判断出没有日志的情况时输出没有日志。而 div 内也可以设置各种 style 以自定义效果

    日志 ID

    增加 id=”post-<?php the_ID(); ?>”<div class=”post”>
    这样就能定制出个别日志的面貌,可选

    链接标题

    增加 title=”<?php the_title(); ?>” 到日志的标题链接。
    这样就能在a标签中出现一个 title 属性的值。当鼠标移动到对应的链接上时,描述信息将会弹出

    日志导航链接

    在绝大多数的博客底部都有个下一页或者上一页这样的导航链接
    在 while 和 else 之间添加以下语句即可添加导航链接,而在管理界面的设置 - 阅读处可以自定义显示数目
    <?php posts_nav_link(); ?>

    侧边栏

    添加分类链接列表

    使用<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>可以调用分类列表,建议将该代码塞进 ul 无序列表标签内

参数解释:

  • sort_column=name – 把分类按字符顺序排列
  • optioncount=1 – 显示每个分类含有的日志数
  • hierarchial=0 – 不按照层式结构显示子分类,这就解释了为什么子分类链接是列在列表中第一级。
  • & – 每次增加另一个参数的时候,需在它之前要输入 & 用来把和现有的参数区分开。如 & – 在 sort_column 和 optioncount之间。
    而不适用 li 标签的原因是在使用wp_list_cats()函数时,会自动附加上一组 li 标签

页面链接列表

在分类链接上面添加以下代码可以显示目前博客里的页面
<?php wp_list_pages() ?>
wp_list_pages()中添加参数可以自定义 Pages 的CSS 结构,例如:
wp_list_pages('depth=3&title_li=<h2>Pages</h2>')
即可设置 Pages 的标签为 h2,depth 设置为3即可限制列表的层级数

存档链接列表

<?php _e('Archives'); ?>为子文本标题
<?php wp_get_archives('type=monthly'); ?>可以调用存档链接。其中 type 可参数可以设置调用的方式,monthly 即为按月调用

友情链接列表

使用<?php get_links_list(); ?>可以调用友情链接

搜索框

新建一个文件保存为searchform.php,将下面代码拷贝进去

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">

<div>

    <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" /><br />

    <input type="submit" id="searchsubmit" value="Search" />

</div>

</form>

在你想要产生搜索框的地方,调用以下链接可以产生一个搜索框

<li id="search">
<?php include(TEMPLATEPATH . '/searchform.php'); ?>
</li>
  • <li id=”search”> – 开始一个名字为 search 的列表元素,给它一个 ID,这样就能够以后样式Style化它。
  • include() – 导入任何你想导入的文件。这和使用 WordPress 模板函数去调用模板文件是不同的,因为 include() 只是简单导入已经存在的文件。这里是调用在 searhform.php 文件中的代码。被导入的信息应该在一个博客上基本不会被改变的。

  • TEMPLATEPATH – 主题文件夹的位置,这里是:wp-content/themes/tutorial
  • ‘/searchform.php’ – 文件名:/searchform.php
  • 在 TEMPLATEPATH 和 “/searchform.php” 中间的点把它们连接起来,所以最终得到:
    wp-content/themes/tutorial/searchform.php

增加日历

使用<?php get_calendar(); ?>可以调用日历

增加元数据

<li>
<h2><?php _e('Meta'); ?></h2>
<ul>
<?php wp_register(); ?>

<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

以上代码可以在登录和未登录时出现

窗体化侧边栏

创建 functions.php,并复制下面代码注册侧边栏

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

然后在 index.php 下输入:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

并在 ul 标签下闭合 if 语句
<?php endif; ?>
就可以在后台处以小工具的形式调用侧边栏

底部

底部可以新建 footer.php,也可以在 index.php 下增加标签

版权信息

Copyright © 2007 <?php bloginfo(’name’); ?>在 footer 的 div 中输入这段代码即可在对应的底部添加版权信息

Style.css

在 style.css 中可以设置你的 CSS,也可以在开头输入一些版权信息注释:

/*  

Theme Name: Your Style Name

Theme URI: Your Theme Site

Description: Your Description

Version: 1.0

Author: Your Name

Author URI: Your Site

*/

拆分 index.php

header.php

可以将 index.php 中有关顶部的设置全部新建到 header.php 中。
在 index.php 下可以使用<?php get_header(); ?>导入

sidebar.php

将 index.php 中有关边栏的设置新建到 sidebar.php 中
在 index.php 下可以使用<?php get_sidebar(); ?>导入

footer.php

将 index.php 中有关底部的设置新建到 footer.php 中
在 index.php 下可以使用<?php get_footer(); ?>导入

子模板文件

archive.php

在做这步之前,查看你的侧边栏,点击其中的一个存档链接,结果的页面是不是和首页没有什么不同?
创建一个新文件:archive.php
把 index.php 中所有东西复制到 archive.php
保存 archive.php
在 archive.php 文件,把 the_content 改成 the_excerpt。
再次保存 archive.php 文件
通过创建一个 archive.php 文件并把它改成和 index.php 不一样,这就是定制化存档页面的外观。

现在如果你刷新你的存档页面,它将只显示摘要而不是全文的日志。

为什么你想这么做呢? — 防止 Google 以为重复内容惩罚你的博客,如果一个存档页面和首页显示相同的内容,那就是重复的内容。

如果是私人的博客呢?那么就没有必要去区分首页和存档页面。但这并不是说摘要对私人博客没有用。

同样 — 默认你的类别页面将使用 archive.php 显示内容,如果你没有 archive.php 文件,类别页面将使用 index.php 显示内容。

如果你想类别页面和首页和存档页面看起来不一样,那么创佳一个 category.php 文件并定制化它。

search.php

创建一个新文件:search.php
把 archive.php 中所有东西复制到 search.php
保存就完成了。
现在所有的,所有的搜索结果将会返回摘要。如果没有 search.php 这个模板文件,搜索选项将会使用index.php 去显示搜索结果。

page.php 和 single.php

创建两个新文件:page.php 和 single.php
把 index.php 中所有内容拷贝到 page.php 和 single.php。(从现在开始,页面和单篇日志应该是一样的。)
保存页面和单篇日志文件,关闭它们。
第4步:定制 page.php
还记得静态页面和页面之间的不同吗?page.php 模板文件是用来定制化这些特殊静态静态页面。

第一,在 page.php 中的 <?php the_content(); ?> 下输入以下代码:

<?php link_pages('

<strong>Pages:</strong>', '

', 'number'); ?>

<?php edit_post_link('Edit', '

', '

'); ?>

第二,从 page.php 中移除 postmetadata 代码。
第三,在 page.php 中移除 posts_nav_link() 或者导航模块。

第一行代码是用于显示页面的分页链接。

当你想把一个非常长的页面分成几个页面的时候,这是非常有用的。

第二行代码是用于显示可以用来编辑静态页面的编辑链接。

通常页面是没有分类,并且通常不想给他们显示创建时间,所以需要去移除 postmetadata。同样要移除 posts_nav_link() 代码因为静态页面不会显示后一页和前一页的链接。

保存 page.php 文件并关闭它。

定制 single.php

点击一个日志的标题去阅读日志其余部分就会带你到单篇日志查看模式。single.php 模板就是用于处理查看单篇日志时的外观。

在 single.php 中的 <?php the_content() ?> 下输入:

<?php link_pages('

<strong>Pages:</strong>', '

', 'number'); ?>

这是相同的用于编码页面的分页链接的代码。同样我们也可以把日志分成多篇子日志。

第二,在 postmetadata 区域,移除 <?php comments_popup_link(); ?> 函数和前面的 <br > 标签。不要移除整个 postmetadata。

移除了留言链接函数是因为在单篇日志查看模式下留言链接函数是不起作用,所以要在 singel.php 文件中移除它。只有管理员可见的编辑链接,在 BR 标签的左边。你不想跳过一行才能看到这个本来你可以在右边看到链接?这就是移除 BR 标签的原因。

第三,用以下代码取代 <?php posts_nav_link(); ?>

<?php previous_post_link('%link') ?> <?php next_post_link('%link') ?>
在前面,存档,分类和搜索页面,我们使用 posts_nav_link() 函数去调用后一页和前一页的链接。对于查看单一日志的页面,它是没有后一页和前一页链接的,我们可以使用 previous_post_link() 和 next_post_link() 函数去调用前一篇日志和后一篇日志的链接。

保存 single.php 文件,到某篇日志下查看在导航区域的不同。

Last modification:September 13th, 2018 at 08:43 pm

Leave a Comment