当我们创建自定义主题或插件时,通常必须编写自己的PHP代码。这些代码通常存储在自定义函数中。我们知道函数是可复用的代码块,只要你需要就可以重复调用。

现在来看看几个WordPress常见的使用自定义函数的地方,以便大家了解自定义函数的工作原理。

function.php中的自定义函数

我们可以打开functions.php文件:

You must be ​​logged in​​ to view the hidden contents.

首先看到它打开一个PHP块,然后,在下面,可以看到function关键字,函数的名称,括号,然后一对大括号。这就是我们正在使用的函数(代码中添加了详细解释)。

/***此函数用于主题的设置***/
function twentyfifteen_setup() /***function关键字-函数的名称-括号***/
{ /***一对大括号***/

/*
* Make theme available for translation.
* Translations can be filed at WordPress.org. See: https://translate.wordpress.org/projects/wp-themes/twentyfifteen
* If you're building a theme based on twentyfifteen, use a find and replace
* to change 'twentyfifteen' to the name of your theme in all the template files
*/
load_theme_textdomain( 'twentyfifteen' );

// Add default posts and comments RSS feed links to head.
add_theme_support( 'automatic-feed-links' );

/*
* Let WordPress manage the document title.
* By adding theme support, we declare that this theme does not use a
* hard-coded <title> tag in the document head, and expect WordPress to
* provide it for us.
*/
add_theme_support( 'title-tag' );/***添加主题对标题标签支持***/

/*
* Enable support for Post Thumbnails on posts and pages.
*
* See: https://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
*/
add_theme_support( 'post-thumbnails' );/***添加主题对缩略图支持***/
set_post_thumbnail_size( 825, 510, true );/***设置缩略图大小***/

// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(/***注册导航菜单***/
'primary' => __( 'Primary Menu', 'twentyfifteen' ),
'social' => __( 'Social Links Menu', 'twentyfifteen' ),
) );

/*
* Switch default core markup for search form, comment form, and comments
* to output valid HTML5.
*/
add_theme_support( 'html5', array(/***添加主题对html5支持***/
'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
) );

/*
* Enable support for Post Formats.
*
* See: https://codex.wordpress.org/Post_Formats
*/
add_theme_support( 'post-formats', array(
'aside', 'image', 'video', 'quote', 'link', 'gallery', 'status', 'audio', 'chat'
) );

/*
* Enable support for custom logo.
*
* @since Twenty Fifteen 1.5
*/
add_theme_support( 'custom-logo', array(
'height' => 248,
'width' => 248,
'flex-height' => true,
) );

$color_scheme = twentyfifteen_get_color_scheme();
$default_color = trim( $color_scheme[0], '#' );/***添加主题颜色设置***/

// Setup the WordPress core custom background feature.

/**
* Filter Twenty Fifteen custom-header support arguments.
*
* @since Twenty Fifteen 1.0
*
* @param array $args {
* An array of custom-header support arguments.
*
* @type string $default-color Default color of the header.
* @type string $default-attachment Default attachment of the header.
* }
*/
add_theme_support( 'custom-background', apply_filters( 'twentyfifteen_custom_background_args', array(
'default-color' => $default_color,
'default-attachment' => 'fixed',
) ) );

/*
* This theme styles the visual editor to resemble the theme style,
* specifically font, colors, icons, and column width.
*/
add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) );

// Indicate widget sidebars can use selective refresh in the Customizer.
add_theme_support( 'customize-selective-refresh-widgets' );
}
endif; // twentyfifteen_setup
add_action( 'after_setup_theme', 'twentyfifteen_setup' );/***添加这个主题设置函数的钩子***/

You must be ​​logged in​​ to view the hidden contents.

function twentyfifteen_widgets_init() {/***设置侧边栏区域,允许我们向其添加小部件***/
register_sidebar( array(
'name' => __( 'Widget Area', 'twentyfifteen' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'twentyfifteen_widgets_init' );

接下来 twentyfifteen_fonts_url() 是字体处理函数

然后,twentyfifteen_scripts()是一个非常常见的函数,它的功能是链接CSS和JS。在后面的主题开发实战课程,会深入了解它。在这里,它在调用其他函数来添加css样式表以及不同类型的JavaScript脚本。

function twentyfifteen_scripts() {/***调用其他函数来添加css样式表以及不同类型的JavaScript脚本***/
// Add custom fonts, used in the main stylesheet.
wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

// Add Genericons, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

// Load our main stylesheet.
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

// Load the Internet Explorer 7 specific stylesheet.
wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );

继续浏览下去,还可以看到有许多不同的函数。

在function.php文件的末尾,还可以看到使用require get_template_directroy() 来包含一些其他文件,后面跟的是包含的文件的名称

/**
* Implement the Custom Header feature.
*
* @since Twenty Fifteen 1.0
*/
require get_template_directory() . '/inc/custom-header.php';/***包含其他文件***/

实际上,自己编写一个函数在WordPress中并没有太多的作用,我们需要做的是把所谓的钩子绑在一起。

WordPress钩子

钩子是让WordPress功能如此强大的原因。当WordPress官方的编程人员设计WordPress时,他们定义了数百个其他开发人员可以添加自己的自定义函数的钩子。我们将有专门的一整门课程针对钩子进行讲解。

那么,为了实现大量的WordPress定制功能,我们需要在一定程度上与钩子进行交互。

WordPress中存在两种类型的钩子,action和filter。

action钩子

action,可以在不同的时间节点运行运行自己的代码。例如,当保存文章时,运行你的代码。或者在加载菜单时,运行你的代码。你可以把它理解为对WordPress某个事件的响应

filter钩子

filter,则可以让你修改WordPress中的内容。例如,将自定义页脚添加到文章的主要内容的末尾,或将文章的摘录限制为一定数量的字符。

钩子的常见使用实例

我们来看WordPress中几个常见的使用钩子的例子。如果回到functions.php文件,就在我们的主题设置函数 twentyfifteen_setup() 的末尾,我们可以看到add_action,也就是说,在安装主题之后,触发对这个函数的响应。

You must be ​​logged in​​ to view the hidden contents.

这实际上就是一个action钩子,这个钩子就是在after_setup_theme这个动作发生时执行的。它将告诉WordPress,当我们在设置这个主题后,执行我们的设置函数。

接着,看下面这个小工具初始化函数 twentyfifteen_widgets_init() ,我们可以看到,twentyfifteen_widgets_init被挂接到widgets_init这个action钩子中。

add_action( 'widgets_init', 'twentyfifteen_widgets_init' );

再次,我们来到加载所有的CSS和JS函数 twentyfifteen_scripts() ,它将和wp_enqueue_scripts钩子绑定。

add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );

再往下,我们看到一个叫做 twentyfifteen_search_form_modify 的自定义函数,它是一个 filter 钩子,而不是 action,这个函数实现的是字符串替换。当WordPress去获取搜索表单时,它将改变WordPress的默认搜索方式。

add_filter( 'get_search_form', 'twentyfifteen_search_form_modify' );

WordPress钩子官方文档介绍

在WordPress的codex上,我们有一个特别的页面列出了WordPress提供的所有钩子。分为两种类型:filter和action。

You must be ​​logged in​​ to view the hidden contents.

基本上,所有的WordPress的filter钩子都在这里。打开链接可以看到WordPress已经列出了所有可能的filter的列表,包括文章,页面,评论,类别,链接,日期,作者,博客信息等。

You must be ​​logged in​​ to view the hidden contents.

Action钩子也一样,它被分为这些不同的类别,并给出了每个钩子的一些基本介绍。

You must be ​​logged in​​ to view the hidden contents.

熟悉了之后,你应该能够找到WordPress中使用的最常见的钩子类型的信息,以及如何调用它们。

这里只是简单的介绍钩子,后面我们还会有专门一整门介绍钩子的课程。