構建 WordPress 插件的終極指南

已發表: 2022-03-11

插件是需要特定功能的 WordPress 網站的重要組成部分。

雖然官方 WordPress 存儲庫有超過 45,000 個插件可供您選擇，但其中許多插件都沒有達到目標。

僅僅因為插件在存儲庫中並不意味著它不會影響其性能或損害其安全性。

所以，你可以做什麼？ 好吧，你可以建立自己的。

構建 WordPress 插件的終極指南

構建一個偉大的 WordPress 插件始於仔細的計劃。

無論您是從頭開始構建，還是基於樣板，遵循有據可查的最佳實踐是絕對必要的。

在本教程中，您將學習如何以正確的方式構建簡單的 WordPress 插件。

如果您想在閱讀時查看最終源代碼，可以在此處找到。

從一個計劃開始。

首先，讓我們列出我們的插件將具有的功能並準確概述它需要做什麼。

我們正在構建的插件將允許網站訪問者保存內容以供以後閱讀。

對於註冊用戶，我們將列表存儲在數據庫中，對於匿名用戶，我們將使用 cookie 保存列表。

以下是我們插件將提供的特性和功能的概述。

設定畫面

  • 管理員能夠將“保存項目”按鈕添加到內容的末尾。
  • 能夠選擇我們希望添加此按鈕的帖子類型。
  • 為用戶提供選項來決定他們是否要使用我們預定義的樣式
  • 提供僅對登錄用戶啟用該功能的選項。
  • 提供一個選項來更改插件面向訪問者的部分上顯示的消息。

保存內容

  • 如果用戶已登錄，將內容保存到自定義用戶字段
  • 如果用戶未登錄，將內容保存到 cookie

留言

以下消息將響應訪問者與插件的交互或作為可操作項目的標籤出現在屏幕上：

  • “保存項目。”
  • “取消保存項目。”
  • “得救了。 查看已保存的項目。”
  • “您沒有任何已保存的項目。”

保存的屏幕

這是訪問者查看他們保存的帖子列表的地方。

  • 顯示已保存項目的列表
  • 在激活插件時創建一個保存的頁面
  • 停用插件時刪除已保存的頁面

短代碼

使用簡碼，可以在添加的任何位置呈現已保存的頁面。

使用樣板。

這是我找到的最好的樣板。 它結構良好、面向對象且高效。 它遵循每一個最佳實踐。 而且它又快又輕。

您可以使用此頁面生成基於此 WordPress 插件樣板的插件代碼庫：

WordPress 樣板

您應該得到一個.zip文件。

提取它，並將其放在您的 WordPress 安裝文件夾中： wp-content/plugins/ 。

如果您打開 WordPress 儀表板並轉到插件，您會看到您的插件列在那裡。 暫時不要激活它。

處理激活和停用。

我們的插件正確處理激活和停用非常重要。

當我們的插件被激活時，我們將創建一個名為“已保存”的頁面，該頁面將保存用戶保存的項目。

在創建該頁面時，我們將為我們保存的項目添加一個短代碼到該頁面的內容中。

最後，我們將保存頁面； 獲取其 ID； 並將其存儲在數據庫中，以便我們稍後在停用插件時訪問它。

當我們的插件被停用時，我們將從數據庫中獲取“已保存”頁面 ID，然後刪除“已保存”頁面，刪除插件本身的任何痕跡。

我們可以在includes/class-toptal-save-activator.php和includes/class-toptal-save-deactivator.php中完成所有這些。

讓我們從激活過程開始：

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

激活插件時調用activate()函數。

它使用wp_insert_post()函數創建一個新頁面，並使用add_option()將頁面 ID 保存到數據庫中。

現在，讓我們繼續停用插件。

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

deactivate()函數在插件停用時調用，使用get_option()函數檢索頁面，使用 wp_delete_post() 從數據庫中刪除相應頁面，並使用wp_delete_post() delete_option()選項表中刪除保存的 ID .

如果我們激活我們的插件並轉到頁面，我們應該會看到一個名為“已保存”的頁面，其中包含一個短代碼。

Wordpress 模塊激活

如果我們要停用插件，該頁面將被刪除。

由於我們在wp_delete_post()方法中使用true作為參數，因此該頁面不會進入垃圾箱，而是會被完全刪除。

創建插件設置頁面。

我們可以在admin/class-toptal-save-admin.php文件中創建我們的設置頁面，我們需要在該文件中做的第一件事是刪除或註釋掉wp_enqueue_style() enqueue_styles()函數中對 wp_enqueue_style() 的調用和如果我們不向管理屏幕添加任何 CSS/JS，則在enqueue_scripts()函數中調用wp_enqueue_script() 。

但是，如果我們要添加一些樣式，那麼我建議我們僅在插件的設置頁面中加載這些文件，而不是在所有 WordPress 管理頁面上。 我們可以通過將以下代碼直接放在我們將註釋的行上方來做到這一點：

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );
 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

如果您想知道我從哪裡得到'tools_page_toptal-save'部分。

好吧，事情就是這樣，我知道我要創建一個帶有 slug toptal-save 的設置頁面，並且我也知道我要將它添加到工具 ( tools.php ) 屏幕中。 因此，將這兩者放在一起，我們可以看出變量$hook的值將是'tools_page_toptal-save' ——這兩個值的串聯。

如果我們不在插件設置頁面，我們使用return立即終止我們所在功能的執行。

由於我不會向我的管理屏幕添加任何自定義樣式——因為我希望我的插件屏幕看起來像原生 WordPress 屏幕——我不會添加該代碼。

現在，我們可以繼續創建我們的設置頁面。

我們將首先向Toptal_Save_Admin類添加一個簡單的方法，該方法將調用add_submenu_page()函數。

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

這是我們傳遞給add_submenu_page()函數的大量參數。 以下是他們每個人的意思。

  • Parent slug：父菜單的 slug 名稱（或標準 WordPress 管理頁面的文件名）。 您可以在此處查看父蛞蝓的完整列表。

  • 頁面標題：選擇菜單時在頁面標題標籤中顯示的文本。

  • 菜單標題：用於菜單標題的文本。

  • 能力：用戶為向他們顯示此菜單所需的能力。 我們使用了“manage_options”，它允許訪問管理面板選項。 您可以在此處閱讀有關角色和能力的更多信息。

  • Menu slug：引用此菜單的 slug 名稱。

  • 可調用函數：為輸出此頁面的內容而調用的函數。 由於我們已經定義了可調用函數的名稱，我們需要創建它，但在此之前，我們使用$this從自身內部引用一個類的實例。 以下是 PHP 文檔對此的說明：

當從對像上下文中調用方法時，偽變量 $this 可用。 $this 是對調用對象的引用（通常是方法所屬的對象，但也可能是另一個對象，如果該方法是從輔助對象的上下文中靜態調用的）。

接下來，我們將向該類添加另一個方法：

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

這個可調用函數包括我們的模板，它將顯示我們的設置頁面。 您可以看到我們正在引用位於admin/partials中的名為toptal-save-admin-display.php的文件。

現在，如果您轉到工具，您將看不到該屏幕。 為什麼？ 因為我們還沒有將register_admin_page()方法掛鉤到admin_menu掛鉤。

我們可以通過打開我們的includes/class-toptal-save.php文件並在define_admin_hooks()方法中添加這段代碼來做到這一點，就在$plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); 部分是。

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

不要擔心對add_action()的調用，因為這是我們稍後將介紹的內容。

現在，只需打開工具頁面，您就可以看到 Toptal 保存頁面。 如果我們打開它，它可以工作，但是我們看到一個空白屏幕，因為上面什麼都沒有。

WordPress 工具頁面

我們正在取得一些進展，但是，嘿，我們需要在這裡顯示一些設置，所以讓我們這樣做。

我們將開始創建字段，這將在 WordPress 設置 API 的幫助下完成。

如果您不熟悉它，它允許我們創建可用於保存數據的表單字段。

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

在register_settings()函數中，我們可以添加和配置所有字段。 您可以在此處找到該功能的完整實現。 我們在上面顯示的函數中使用了以下內容：

  • register_setting() ：註冊設置及其清理回調。
  • add_settings_section() ：將新部分添加到設置頁面。
  • add_settings_field() ：將新字段添加到設置頁面的一部分。

每當我們使用這三個函數之一時，都會提供一個清理回調。 這允許對數據進行清理，如果它是一個字段，則可以顯示適當的 HTML 元素（複選框、單選框、輸入等）。

此外，我們還向這些​​回調傳遞了一個數據數組，如必要時的 label_for、description 或 default。

現在，我們可以創建這些清理回調。 您可以在此處找到這些回調的代碼。

這一切都很好，但是，我們需要將字段掛鉤到admin_init鉤子中，然後顯示它們。

我們將使用add_action ，它是 WordPress 核心在執行期間的特定點或特定事件發生時啟動的鉤子。 當用戶訪問管理區域時， admin_init在任何其他鉤子之前觸發。

首先，我們需要在includes/class-toptal-save.php文件中添加一個動作。

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

接下來，在admin/partials/topal-save-admin-display.php中，我們需要為插件的管理區域提供一個視圖：

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

settings_fields()函數用於輸出設置頁面的 nonce、action 和 option_page 字段。

其後是do_settings_sections() ，它打印出添加到特定設置頁面的所有設置部分。

最後，使用submit_button()函數使用提供的文本和適當的類添加提交按鈕。

現在，如果我們看一下我們的頁面，它將如下所示：

Wordpress 頁面完整示例

這就是我們在管理區域中要做的所有事情。 讓我們開始處理插件的公共部分。

創建插件功能。

有趣的部分來了。 我們需要創建多個函數來分離我們的功能：

  • 將顯示“保存項目”按鈕的功能。 這需要檢查當前用戶是否已經保存了該項目，根據它，我們將顯示不同的文本和顏色。
  • 將保存/取消保存項目的功能 (AJAX)。
  • 將顯示所有已保存項目的功能。
  • 一個將生成我們的簡碼的函數。

因此，讓我們開始顯示按鈕。 我們將在public/class-toptal-save-public.php中完成所有這些工作。

在執行此操作時，我們需要創建一些額外的輔助函數來處理某些事情，例如：

  • 為網站創建唯一的 cookie 名稱
  • 創建 cookie
  • 獲取 cookie 值
  • 從設置中獲取會員狀態

這些輔助函數的代碼可以在這裡找到。

get_unique_cookie_name()函數將幫助我們根據網站 URL、網站名稱和我們自定義的後綴生成唯一的 cookie 名稱。 這樣生成的 cookie 名稱在同一域下的多個 WordPress 站點中使用時不會發生衝突。

toptal_set_cookie()和toptal_get_cookie()函數將分別創建和獲取我們的 cookie 的值。

get_user_status()函數將在設置中獲取我們的會員複選框的狀態（選中時返回 1，否則返回 0）。

現在，多汁的部分，創建將負責顯示保存按鈕的函數。 我們的show_save_button()函數的實現可以在這裡找到。 我們在這裡使用了來自 WordPress API 的一些新功能：

  • get_queried_object_id() ：獲取當前查詢對象的 ID。
  • is_user_logged_in() ：檢查當前訪問者是否是登錄用戶。
  • get_user_meta() ：檢索用戶的用戶元數據字段。
  • wp_create_nonce() ：創建與特定操作、用戶、用戶會話和時間窗口相關聯的加密令牌。

現在，讓我們創建一個函數，將我們的按鈕附加到內容的末尾。 在這裡，我們有兩個關鍵要求。

  1. 確保該按鈕僅顯示在設置中選擇的帖子類型上。
  2. 確保選中附加按鈕的複選框。
 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

現在，我們需要將此函數掛鉤到the_content掛鉤。

為什麼？ 因為the_content用於在從數據庫檢索到帖子後，在將其打印到屏幕之前過濾帖子的內容。

有了這個，我們可以在內容的任何地方添加我們的保存按鈕。 我們可以在define_public_hooks()方法的includes/class-toptal-save.php中做到這一點，如下所示：

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

現在，如果轉到插件設置，檢查帖子和頁面，以及附加按鈕，我們將在任何博客文章中看到顯示按鈕。

Wordpress 插件設置屏幕

從這裡開始，我們應該繼續設置該按鈕的樣式。

我們可以在public/css/toptal-save-public.css中做到這一點。 在此處找到更新的 CSS 文件。

現在，讓我們創建一個實際保存項目的函數。

我們將在我們的公共課程中執行此操作，並且我們將使用 AJAX 執行此操作。 代碼在這裡。

讓我們將這個函數掛接到 WordPress AJAX 中。

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

您可以在此處閱讀有關插件中 AJAX 的更多信息。

在我們完成這部分之前，我們還需要做兩件事。

  1. 本地化腳本。
  2. 在 public/js/toptal-save-public.js 中創建我們的 AJAX 調用

本地化腳本將通過我們的public/class-toptal-save-public.php文件中的wp_localize_script()函數完成。

此外，當我們這樣做時，我們還將確保根據“使用我們的樣式”複選框的狀態來實現顯示 CSS 和 JS 文件。

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

現在，我們可以繼續我們的 AJAX 調用了。

我們的前端腳本將查找類為“toptal-save-button”的元素。

點擊處理程序將註冊到所有匹配的元素，這將執行 API 調用並相應地更新 UI。

您可以在此處找到代碼，並在此處找到必要的 CSS。

我還添加了一個函數，該函數將在添加項目時處理通知。

這就是它的工作原理。

Wordpress 插件演示完成

接下來，我們需要為用戶創建一個簡碼，以便在他們想要的任何地方插入。

我們可以在public/class-toptal-save-public.php中做到這一點：

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

我們還需要註冊它，因為函數本身不會做任何事情。

在include/class-toptal-save.php中，在我們附加按鈕的那一行之後添加此代碼。

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

現在，這不起作用，因為我們還沒有在加載器類中加載add_shortcode()方法。

這是包含/class-toptal-save-loader.php文件的完整代碼。

我添加了一個名為shortcodes的新受保護變量，然後在類的構造函數方法中，我將它變成了一個數組。

在第 104 行，我添加了一個負責創建短代碼的函數； 您可以看到它與上面的函數（ add_filter() ）幾乎相同，除了我將“過濾器”更改為“簡碼”並將“過濾器”更改為“簡碼”。

此外，在run()方法中，我添加了另一個foreach ，它將通過我們的短代碼數組，並將它們註冊到 WordPress。

那很簡單。

請記住，一開始，我們使用了一個短[toptal-saved] ，所以讓我們創建一個方法來顯示我們所有保存的項目。

在此處找到此方法的完整代碼。

現在，和往常一樣，我們需要在includes/class-toptal-save.php中註冊短代碼：

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

我們在這裡還有兩件事要做。

  1. 為我們保存的項目頁面設置樣式。
  2. 確保當用戶刪除已保存的項目時，它會從已保存的項目頁面中消失。

對於第一個任務，您可以在此處找到必要的 CSS 代碼。

對於第二個，它涉及一些前端腳本。

可以在這裡找到完整的 JavaScript 代碼。

正如您將在第 52 行看到的那樣，我搜索了具有“toptal-saved-item”類的 div。

然後，在第 70-75 行，我們檢查父 div 是否有一個類 toptal-saved-item。

如果是這樣，我們使用 fadeOut 隱藏我們的項目，然後在動畫結束後，我們將項目從屏幕上完全移除。

現在，讓我們繼續進行更困難的部分——使其模塊化。

使插件模塊化。

模塊化插件的基本定義是：

可擴展或模塊化代碼是可以修改、與之交互、添加或操作的代碼——所有這些都無需修改核心代碼庫。

現在，當談到這個插件時，我會確保用戶可以在已保存項目頁面上更改已保存項目內的 HTML。

因此，我們需要對register_saved_shortcode()方法進行一些更改：

  • 在我們希望用戶能夠更改 HTML 的任何地方，將inner_html_to_return html_to_return 確保我們的inner_html_to_return變量的第一個聲明有“=”，前面沒有一個點。
  • 使用apply_filters()方法註冊我們的過濾器。

通過這兩個更改，您最終應該得到這樣的結果。

現在，如果用戶想要與我們的代碼進行交互，他們可以在他們的functions.php文件中添加類似這樣的內容：

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

生成翻譯文件。

翻譯非常重要，因為它允許 WordPress 社區成員和多語言者翻譯您的插件，使其可供非英語網站訪問。

話雖如此，讓我們深入了解一些有關 WordPress 如何處理翻譯的技術細節。

WordPress 使用 GNU gettext本地化框架進行翻譯。 在這個框架中，有三種類型的文件：

  • 可移植對像模板 (POT)
  • 便攜式對象 (PO)
  • 機器對象 (MO)

這些文件中的每一個都代表翻譯過程中的一個步驟。

要生成 POT 文件，我們需要一個程序來搜索 WordPress 代碼，並獲取傳遞給我們的翻譯函數的所有文本，例如__e()和_e() 。 您可以在此處閱讀有關翻譯功能的更多信息。

這裡我們翻譯 POT 文件中的文本，將英語和我們的翻譯保存在 PO 文件中，然後我們將 PO 文件轉換為 MO 文件。

手動執行此操作將花費大量時間，因為您必須為插件中的每個可翻譯文件編寫幾行代碼。 幸運的是，有一個更好的方法，使用一個名為 Loco Translate 的方便的小插件。

安裝並激活它後，轉到 Loco Translate > Plugins > Toptal Save。

從那裡，單擊編輯模板，然後單擊同步並保存。 這將編輯我們的語言文件夾中的toptal-save.pot文件。

現在，該插件可用於翻譯。

立即構建您的 WordPress 插件。

我們在本文中構建了一個相當簡單的插件，但在此過程中，我們遵循了允許我們輕鬆維護和擴展此插件的實踐和標準。

我們以不會影響平台整體性能的方式使用 WordPress 功能。

無論是簡單的插件還是複雜的插件，無論您是個人開發者還是 WordPress 開發公司，規劃和遵循最佳實踐都是構建強大插件的關鍵。