如何在 WordPress 中創建設置頁面

如果您正在創建 WordPress 插件，您可能想知道如何為其創建設置頁面。 WordPress 是否為此提供了某種“標準”機制？ 是否有任何新工具或框架可用於創建現代設置頁面？ 創建設置頁面是個好主意嗎？ 好吧，今天我們將討論所有這些，我將回答您的問題。

決定，而不是選擇

WordPress是一個旨在使網絡民主化的平台。 這句話聽起來很不錯，但同時又很抽象，是一種表達“我們希望任何人都能夠使用 WordPress”的方式。 而且，不管你信不信，設置頁面可能是，事實上在許多情況下，這是一個障礙。 不相信我？ 嗯，WordPress 自己說：

在做出決定時，這些是我們首先考慮的用戶。 這種考慮的一個很好的例子是軟件選項。 每次您給用戶一個選項時，您都是在要求他們做出決定。 當用戶不關心或不理解該選項時，這最終會導致挫敗感。 作為開發人員，我們有時會覺得為所有事情提供選項是一件好事，你永遠不會有太多的選擇，對吧？ 最終，這些選擇最終成為技術選擇，普通最終用戶不感興趣的選擇。作為開發人員，我們有責任做出明智的設計決策，避免將技術選擇的重心放在我們的最終用戶身上。

WordPress哲學

因此，在創建設置頁面之前，請仔細考慮您希望為用戶提供的選項、為什麼希望他們能夠訪問這些選項以及這樣做是否必要或有用。

過濾器作為替代品

即使我知道我不應該為我的用戶提供太多選擇，我也不得不承認，作為一名開發人員，我並不總是很容易做出決定而不是提供一個選項。 有時我希望我的用戶能夠選擇，儘管我知道我公開的選項很複雜。 那麼在這些情況下我該怎麼辦？ 我是否遵循 WordPress 的建議並限制我的高級用戶？

幸運的是，WordPress 為這個困境提供了一個完美的解決方案：過濾器。 當您設計一個插件並希望您的（高級）用戶能夠調整其行為時，不要創建設置頁面或類似的東西。 相反，通過 WordPress 的過濾機制使您的插件可定制。

如果您使用過濾器，您的大多數用戶將享受默認行為（“決定”，還記得嗎？），因為他們將使用在您的過濾器中設置的默認值的插件，而高級用戶將能夠修改這些通過鉤子做出決定（因此您也有“選擇”）。 兩全其美的！

WordPress 設置

好的，既然我們已經意識到為我們的用戶做出決定的重要性，並且已經了解瞭如何通過過濾器繞過這個限制（如果有必要），那麼是時候看看我們如何在 WordPress 中創建一個設置頁面了。 因為，是的：有時候我們真的需要讓我們的用戶選擇根據他們的喜好做出決定。

WordPress 中的設置 API

設置 API 是在 WordPress 版本 2.7 中添加的。 這是一組標準化設置頁面創建的功能，允許您定義可用的選項、編輯每個選項的用戶界面（本質上是表單上的字段）以及如何驗證、保存，並檢索它們的值。

我認為最好的學習方式是通過示例，所以讓我們一步一步地使用設置 API 創建我們的第一個設置頁面。

創建新的設置頁面

創建設置頁面需要做的第一件事是（驚喜，驚喜！）創建一個頁面來顯示設置。 為此，只需在admin_menu操作期間使用add_options_page函數並註冊頁面：

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

如您所見，我們使用此功能唯一要做的就是註冊一個新頁面，該頁面將出現在 WordPress設置菜單下，包括其標題、菜單中的名稱、用戶必須具備的訪問權限, 和操作系統。 最後一個參數nelio_render_settings_page是負責渲染所述頁面的函數的名稱：

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

設置頁面本身相對容易創建。 我們只需要添加一個form ，其內容將由 WordPress 半自動生成。 一方面，我們調用settings_fields函數，它基本上在表單中添加了一個隨機數以使其“安全”。 接下來，我們要求 WordPress 使用do_settings_sections函數呈現我們為插件創建的所有設置。 最後，我們只需將按鈕添加到提交表單。

我們設置頁面中的實際設置

接下來，我們必須註冊將成為設置頁面一部分的每個選項。 為此，我們將使用兩個函數： register_setting ，它允許我們指示我們將在數據庫中保存設置的名稱，以及add_settings_field ，它添加每個單獨的選項：

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

前面的代碼片段有幾件事值得特別注意。 一方面，請注意register_setting函數的第三個參數： nelio_validate_example_plugin_settings 。 這是將被調用以驗證用戶選擇的值的回調函數的名稱（請記住，您始終必須驗證和清理表單字段）。 這個函數是這樣的：

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

我們從$input中檢索每個提交的字段並將其清理為$output以便我們確定，無論我們最終保存在數據庫中的是什麼，都是有效且正確的。

我想關注的第二件事是，我們定義的每個字段還包含一個函數引用，它告訴 WordPress 每個字段應該如何呈現。 例如，我們示例中的字段回調可能是這樣的：

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

本質上，所有這些回調所做的只是檢索它們應該呈現的字段的當前值（使用get_option ）並呈現允許用戶設置一個值或另一個值的 HTML（在本例中， input字段為輸入text或number ）。

你問最後的結果是什麼？ 這：

最後的想法

如您所見，創建設置頁面相對簡單。 我個人不太喜歡整個過程，因為它非常重複，我們必須一遍又一遍地編寫相同的樣板代碼……但它仍然很容易。

但是，為了進一步簡化此過程，有一些在線代碼生成器，通過簡單的用戶界面，您可以在設置頁面上定義所需的不同字段。 幾個例子是：

• WP 設置 API
• WordPress選項頁面生成器

而且，當然，總是有可能使用 React 等技術創建設置頁面……但這是另一個時代的故事，你不覺得嗎？

Rima Kruciene 在 Unsplash 上的特色圖片。