构建WordPress主题函数

前言

我们已经创建了一个文件结构,那么现在就让我们开始一个主题把。

我们需要添加一些主题函数到我们的主题之中,这些函数将会完成下面的任务:

  • 为WordPress主题特征添加一些支持,比如自定义的背景,页首,博文格式等
  • 设置主题的默认值
  • 对于主题的代码复用

编辑文件

首先,让我们创建以及编辑这些文件

  • functions.php
  • inc/template-tags.php
  • inc/tweaks.php
    如果你是PHP新人的话,那么PHP的函数的保留字为function,比如这样:
    1
    2
    3
    function my_function() {
    ...contents of the function
    }

当我们创建这个函数之后,我们就可以在主题之中调用这个函数了。函数能够被调用:

1
2
3
<div>
<?php my_function(); ?>
</div>

其他的函数调用方法就可能有些复杂了:

1
2
3
<div>
<?php my_second_function( 'parameter 1', 'parameter 2' ); ?>
</div>

在上面的例子之中,我们都会向函数之中传递参数,这个函数将会使用其并将其作为最终的输出结果。

Functions.php

事不宜迟,我们就开始把。

在上节课创建的主题目录之中,打开functions.php文件,在文件最上面,粘贴下面的值:

1
2
3
4
5
6
7
<?php
/**
* Shape functions and definitions
*
* @package Shape
* @since Shape 1.0
*/

如果你是PHP新手的话,我们就从<?php开始编辑文件吧。

接下来,我们就有描述内联信息的块注释:一个文件的简短的介绍,接着就是PHP文档的标签:@package和@since。你能够在WordPress Codex的内联文档之中找到更多的信息。

php的注释和C语言的注释是很像的。/* ... */就是多行注释,而// 则是单行注释。

$content_width

$content_width 是一个设置内容(比如图片)最大宽度的全局变量。其能够防止超大图片溢出主要的内容区域。我们应该设置这个值来限制我们主要内容区域的宽度。想想我们之前的HTML结构,这个区域其实就是#content div。我们将会使用CSS来设置div的宽度。然而,我们还没有CSS文件。所以在这里,我会告诉你div将会是654px宽。

functions.php之中,无视最后的一个*/,粘贴下面的代码:

1
2
3
4
5
6
7
/**
* Set the content width based on the theme's design and stylesheet.
*
* @since Shape 1.0
*/
if ( ! isset( $content_width ) )
$content_width = 654; /* pixels */

所以$content_width就被设置好了,PHP变量有一个美元符$置于名称之前,在分配值之后,会有一个半角的;

shape_setup()

接下来,我们将会创建一个函数来新建一个默认主题并且添加一个对于众多WordPress特性支持的函数,跳过在$content_width之后的那一行,添加这个:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
if ( ! function_exists( 'shape_setup' ) ):
/**
* Sets up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which runs
* before the init hook. The init hook is too late for some features, such as indicating
* support post thumbnails.
*
* @since Shape 1.0
*/
function shape_setup() {
/**
* Custom template tags for this theme.
*/
require( get_template_directory() . '/inc/template-tags.php' );
/**
* Custom functions that act independently of the theme templates
*/
require( get_template_directory() . '/inc/tweaks.php' );
/**
* Make theme available for translation
* Translations can be filed in the /languages/ directory
* If you're building a theme based on Shape, use a find and replace
* to change 'shape' to the name of your theme in all the template files
*/
load_theme_textdomain( 'shape', get_template_directory() . '/languages' );
/**
* Add default posts and comments RSS feed links to head
*/
add_theme_support( 'automatic-feed-links' );
/**
* Enable support for the Aside Post Format
*/
add_theme_support( 'post-formats', array( 'aside' ) );
/**
* This theme uses wp_nav_menu() in one location.
*/
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'shape' ),
) );
}
endif; // shape_setup
add_action( 'after_setup_theme', 'shape_setup' );

代码都是很好注释过的,所以你能很好的了解他们正在做什么。

那么我们就一一说明把:

我们将会引用在inc/文件夹下的两个文件template-tags.php和tweak.php。我们将会在稍后创建这两个文件。

接下来,我们调用了load_theme_textdomain()这个函数,这个函数会告诉我们WordPress将会使用我们文件夹下的languages这个来作为翻译的标准。如果你正要创建一个WordPress主题,你一个穷尽你的可能来保证所有字符串都是可翻译的。你永远不知道在啥时候其他人是否需要在其他语言中硬编码。下面有些好的方法来翻译文章,我也会说一些出来,I18n for WordPress Developers将会是一个非常好的入门。

接着,下面的两个函数为RSS反馈以及侧边博文格式提供了支持链接。最后一个函数注册了一个导航菜单位置,我们将会在我们的主要菜单中用到。

接下来,我们会用}来闭合这个函数,并且使用钩子(hook)的方法将其加到我们的主题函数之中。

1
add_action( 'after_setup_theme', 'shape_setup' );

简而言之,我们将会告诉WordPress在运行after_setup_theme()之后运行shape_setup()函数。

我们将会在functions.php之中加入更多东西。

你可能注意到functions.php文件没有任何PHP的闭合符号?>,这是因为这个文件绝大多数都是PHP代码,所以吞掉闭合符号也是非常安全的。至于我们为什么要这么做的原因,自然是因为其能帮助我们免于闭合PHP代码之后引入的空白符。

Template-tags.php和Tweak.php

还记得下面的代码吗?

1
2
3
4
5
6
7
8
9
/**
* Custom template tags for this theme.
*/
require( get_template_directory() . '/inc/template-tags.php' );
/**
* Custom functions that act independently of the theme templates
*/
require( get_template_directory() . '/inc/tweaks.php' );

在inc文件夹中创建template-tags.php和tweak.php文件。为什么我们要把自定义的函数分散在众多的文件之中呢?大多数情况下,我们像保持functions.php代码中的干净整洁,但更多的是保证我们主题的模块化,如果你并不需要这些函数的话,你只需要移除这一行就可以了。

template-tags.php

首先,什么是模板标签?自然是一个函数了。特殊而言,他们是你可以插入到你主题之中来显示动态页面的WordPress函数。你可以在 everything you want to know about template tags找到一些关于模板标签的信息。

在大多数情况下,我们会在任何我们想要的时候将模板标签添加到我们的主题之中。然而,还是有时候我们需要将多个模板标签输出到一起。把所有的标签放到一起自然是一个很好的主意,所以想想我们要添加的模板函数,我们把他们视为一个乐符,最终我们把他们组成到一起成为一个交响乐,就像这样:一句描述博文何时发表,被谁,或者一个上一个和下一个博文的链接,或者是一个评论列表,你就能知道了。我们首先写下了乐符,然后播放多次。或者,从专业的角度上来说,写了一个函数,把他调用多次。

为了保证这个教程不会过于冗长,我们将返回到template-tags.php之中来添加一些我们需要的函数。对现在而言,让我们在文件首添加一些基本的文档信息把。

1
2
3
4
5
6
7
8
9
<?php
/**
* Custom template tags for this theme.
*
* Eventually, some of the functionality here could be replaced by core features
*
* @package Shape
* @since Shape 1.0
*/

最后需要提到一点:“一些在template-tags.php之中的函数功能也许会被核心特性所替代”。这些我们添加的函数将会和WordPress核心特征一样有用。当我们添加了这些函数之后,这回变得更加有意义。

现在,我们就能够正常的闭合PHP标签了。

tweak.php

这些我们放在文件中的函数并不会影响到模板标签,而相反的是他们将会提升我们主题的品质。他们提供了一个很好的后台任务,这样使得我们的主题更好。

在文件的页首,粘贴一些寻常的文档信息到里面。

1
2
3
4
5
6
7
8
9
<?php
/**
* Custom functions that act independently of the theme templates
*
* Eventually, some of the functionality here could be replaced by core features
*
* @package Shape
* @since Shape 1.0
*/

接下来,我们要粘贴下面的函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
* Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
*
* @since Shape 1.0
*/
function shape_page_menu_args( $args ) {
$args['show_home'] = true;
return $args;
}
add_filter( 'wp_page_menu_args', 'shape_page_menu_args' );
/**
* Adds custom classes to the array of body classes.
*
* @since Shape 1.0
*/
function shape_body_classes( $classes ) {
// Adds a class of group-blog to blogs with more than 1 published author
if ( is_multi_author() ) {
$classes[] = 'group-blog';
}
return $classes;
}
add_filter( 'body_class', 'shape_body_classes' );
/**
* Filter in a link to a content ID attribute for the next/previous image links on image attachment pages
*
* @since Shape 1.0
*/
function shape_enhanced_image_navigation( $url, $id ) {
if ( ! is_attachment() && ! wp_attachment_is_image( $id ) )
return $url;
$image = get_post( $id );
if ( ! empty( $image->post_parent ) && $image->post_parent != $id )
$url .= '#main';
return $url;
}
add_filter( 'attachment_link', 'shape_enhanced_image_navigation', 10, 2 );

第一个函数shape_page_menu_args,将会影响到我们主要的导航菜单。我们在之前就已经为导航菜单申请了支持,在shape_setup()之中。如果导航菜单并没有被配置,WordPress将会显示一连串的页面(由wp_page_menu()所决定)

在第二个函数shape_body_classes(),我们将会添加一个新的CSS类,group-blog,到我们的主题标签之中。我们将会在WordPress Header 模板之中提及到body class。但是现在,你只需要理解body classes使得我们能够在不同的情况下装饰我们的主题的一些部分(比如我们正在访问的页面类型或者是我们作者的数目)。

最终,第三个函数shape_enhanced_image_navigation(),把#main这个id添加到上一个/下一个图像连接之中。回想一下,“#main”是包装我们的内容和小部件区域的div的ID名称。 ID也是页面内的锚点。 当用户点击您的下一个/上一个图片链接时,他们不必从页面顶部向下滚动来查看每个图片。

这就是tweak.php。记着,我们不需要PHP的闭合标签。

后记

Woo,这里有好多函数,我们已经在这个教程之中做出了大量的工作。但是不要太高兴,这只是万里长征的第一步路罢了。

敬请关注