WordPress开发入门08：自定义函数和WordPress钩子

当我们创建自定义主题或插件时，通常必须编写自己的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中使用的最常见的钩子类型的信息，以及如何调用它们。

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