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中使用的最常見的鉤子型別的資訊，以及如何呼叫它們。

這裡只是簡單的介紹鉤子，後面我們還會有專門一整門介紹鉤子的課程。