如何創建 WordPress 小部件插件

已發表: 2022-10-02

如果您是 WordPress 的粉絲,那麼您可能對小部件很熟悉。 小部件是您可以添加到側邊欄或主題的其他小部件就緒區域的那些小框。 它們通常包含您博客的最新帖子、Twitter 提要或日曆等信息。 但是您知道您可以創建自己的小部件嗎? 這實際上很容易做到。 在本文中,我們將向您展示如何創建 WordPress 小部件插件。 我們將從創建一個基本插件文件開始,然後添加一個小部件類。 然後我們將註冊我們的小部件,以便它出現在 WordPress 管理員中。 最後,我們將添加一些代碼來在我們網站的前端顯示我們的小部件。 讓我們開始吧!

我最近開發了一個名為 Freelancer Widgets Bundle 的插件。 當有人問我應該為插件寫什麼時,我認為是時候寫這篇文章了,因為人們已經詢問過它。 當您安裝 WordPress 插件時,您需要為其添加額外的代碼。 您需要像 Coda (Mac) 或 Dreamweaver (PC) 這樣的編輯器來開發您的插件。 構造函數是定義小部件名稱和主要參數的函數; 這是它的外觀示例。 更改表單字段時,請確保使用 esc_attr(),因為這是出於安全原因。 參數“customize_selective_refresh”允許在外觀下以及在編輯時刷新小部件。

換句話說,對小部件的更改不需要刷新就可以顯示在列表中。 使用 WP_strip_all_tags 刪除除基本文本外的所有標籤。 WP_kses_post_string() 與帖子內容字符串的功能相同。 此函數將使用 widget() 函數為網站生成內容。 可以自定義此功能以包含特定標籤或類。 GitHub 是查看整個代碼的理想場所。

當您想要將小部件添加到網站時,請轉到您想要執行此操作的頁面並在 HTML“/body”標籤關閉之前粘貼代碼。 有必要在您希望顯示小部件的每個網頁中包含代碼。 檢查您的防火牆以查看是否啟用了Web Widget (Classic)。

它們都是視覺生物,但兩者俱有明顯的特徵,例如可見性和交互性。 如果您的頁面在後台運行順暢且正常,則這是一個插件。 為了讓用戶在頁面上與之交互,它必須對用戶可見。

如何為 WordPress 創建自定義小部件插件?

為了為 WordPress 創建自定義小部件插件,您需要使用以下代碼創建一個 PHP 文件: /* 插件名稱:[插件名稱] 描述:[插件描述] */ // 註冊並加載小部件功能 [name_of_plugin]_load_widget() { register_widget( '[name_of_plugin]' ); } add_action('widgets_init', '[name_of_plugin]_load_widget'); // 創建小部件類 [name_of_plugin] extends WP_Widget { function __construct() { parent::__construct( // 小部件的基本 ID '[name_of_plugin]', // 小部件名稱將出現在 UI 中 __('[Name of plugin ]', '[name_of_plugin]'), // 小部件描述數組('description' => __('[Description of plugin]', '[name_of_plugin]' ), ) ); } // 創建小部件前端 // 這是動作發生的地方 public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); // 小部件參數之前和之後由主題定義 echo $args['before_widget']; if ( !empty( $title ) ) echo $args['before_title'] 。 $標題。 $args['after_title']; // 這是你運行代碼並顯示輸出的地方 echo __( '[Name of plugin]', '[name_of_plugin]' ); 迴聲 $args['after_widget']; } // Widget 後端 public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( '[插件名稱]', '[name_of_plugin]' ); } // 小部件管理表單 ? > 當 WordPress 用戶創建小部件區域時,他們會向該區域添加小塊內容。 根據安裝的小部件區域,小部件可能會在所有頁面上顯示各種類型的信息,也可能只顯示某些信息。 默認情況下提供一些小部件,而其他小部件則通過使用插件或主題提供。 必須將上面提到的四種方法添加到您的類中才能創建基本的自定義小部件。 您必須使用 register_widget() 函數註冊小部件才能在儀表板中使用它。 在研究本文中介紹的示例之前,我們將快速回顧一下代碼的每個部分的用途。 Custom_Widget 類中使用的方法之一是分配字符的方法。我們使用 __construct() 方法使用構造方法創建了以 custom_widget 作為其 ID 的小部件。 使用 register_widget() 方法,在現有的小部件註冊後創建一個新的小部件。 我們用 if...* 語句包裝了每個部分,以確保只有那些包含在小部件選項中的部分才會顯示。 widget() 方法包含 nl2br() 函數,以確保正確顯示所有多段文本。 sanitize_text_field() 消除了參數中不必要的空格、製表符和換行符。 此外,選擇字段中的 Yes 值設置為默認值,表示在前兩種情況下鏈接目標設置為 _blank。 標題、文本、標題下方的鏈接以及鏈接是否應在新選項卡中打開都​​應指定。請立即單擊“保存”按鈕保存您選擇的選項。 當您選擇默認主題時,小部件將產生不同的輸出。 在這種情況下,如果您使用 Lekker WordPress 主題,您的小部件可能看起來與下面顯示的非常相似。如何在 WordPress 中創建自定義圖像小部件?要將圖像添加到 WordPress 側邊欄,請選擇“圖像”小部件。 您可以前往外觀更改您的外觀。 如果您有一個包含小部件的頁面,請將“圖像”小部件添加到側邊欄。自定義小部件插件信用:octobercms.com自定義小部件插件是一個允許您創建自己的自定義小部件的插件。 這個插件非常適合那些想要為他們的網站或博客創建自定義小部件的人。 使用此插件,您可以輕鬆創建自定義小部件,而無需自己編寫代碼。要提供可與 Qt Designer 一起使用的自定義小部件,我們需要提供自包含的實現以及插件接口。 此示例的自定義小部件與其模擬時鐘對應物一樣,沒有任何自定義信號或插槽。 必須使用 Q_PLUGIN_METADATA() 宏來確保通過從中導出數據將小部件正確識別為插件。 AnalogClock 類可用作小部件框內的自定義小部件,並且是自包含類的示例。 AnalogClock 類的插件類包含在 Qt Designer 中。 QObject 類的構造函數簡單地調用 QObject 基類構造函數,它將初始化變量設置為 false。 isInitialized() 函數通過允許 Qt Designer 識別插件來檢查插件是否準備好使用。 createWidget() 函數可以生成自定義小部件的實例。 小部件插件將在 Qt 設計器的小部件插件部分的組名稱中可見。 工具提示和這是什麼? 在小部件框中,您可以為自定義小部件提供幫助。 isContainer() 函數檢查一個小部件是否應該用作其他小部件圖像的容器。 這可以防止用戶在其中創建小部件。自定義小部件 WordPress 代碼信用:www.hostpapa.in 自定義小部件是向 WordPress 網站添加功能的好方法。 將自定義小部件代碼添加到您的站點時,需要記住一些事項。 首先,您需要在主題目錄中創建一個名為“widget.php”的文件。 接下來,您需要將以下代碼添加到您的 widget.php 文件中: class Custom_Widget extends WP_Widget { function __construct() { parent::__construct( 'custom_widget', __('Custom Widget', 'text_domain'), array ( 'description' => __( 'WordPress 網站的自定義小部件。', ' text_domain' ), ) ); } 公共函數小部件($args,$instance){ $title = apply_filters('widget_title',$instance['title']); 迴聲 $args['before_widget']; if ( !empty( $title ) ) echo $args['before_title'] 。 $標題。 $args['after_title']; echo __( 'Hello, World!', 'text_domain' ); 迴聲 $args['after_widget']; } 公共函數形式( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( '新標題', 'text_domain' ); } ? > } 公共函數更新($new_instance, $old_instance) { $instance = array(); $instance['title'] = ( !empty( $new_instance['title']Wordpress 將小部件添加到模板將小部件添加到 WordPress 模板是一個簡單的過程。您需要通過您的託管帳戶訪問您的 WordPress 文件並編輯適當的文件。在大多數情況下,這將是 header.php 文件。查找控制要添加小部件的區域的代碼。然後,複製要添加的小部件的代碼並將其粘貼到適當的在文件中找到。保存文件並將其上傳到您的服務器。就是這樣!小部件現在將出現在您的 WordPress 網站上。在 WordPress 中,有一個名為 the_widget() 的模板標籤,允許您將小部件直接添加到您的模板文件。一個小部件可以放在一個文件中,該文件包含您要使用的小部件的類名以及您希望它出現的位置。換句話說,如果您想列出最近的評論,您可以這樣寫:每個小部件的 $instance。使用內置函數,您可以添加許多默認值將 WordPress 小部件添加到您的模板文件中,而不是使用它們。 可以在整個模板中使用 the_widget() 方法插入自定義小部件。 自定義小部件可以在與側邊欄不同的平台上使用,可在許多插件中使用。如何將小部件添加到我的 WordPress 主題?訪問 WordPress 管理屏幕以查看外觀頁面。 通過將小部件拖動到特定側邊欄或單擊添加小部件鏈接來選擇小部件(如果您的主題有多個側邊欄,請選擇目標側邊欄)。如何從 WordPress 頁面模板調用小部件?第一步是找到並在您的小部件應出現的位置插入文件。 第二步是確定要使用哪個小部件。 在本節中,我們將介紹默認 WordPress 小部件的類名稱:WP_Widget_Archives。如何在 WordPress 中創建自定義圖像小部件為了在 WordPress 中創建自定義圖像小部件,您需要首先創建自定義插件或子主題。 完成後,您可以在插件或子主題中創建一個名為“image-widget.php”的新文件。 在此文件中,您需要包含以下代碼: class WP_Widget_Custom_Image extends WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'widget_custom_image', 'description' => __(上傳自定義圖像。', 'text_domain' ), ); parent::__construct('custom_image', __('Custom Image', 'text_domain'), $widget_ops); } 功能小部件($args,$instance){ echo $args['before_widget']; if ( !empty( $instance['title'] ) ) { echo $args['before_title'] 。 apply_filters('widget_title', $instance['title'])。 $args['after_title']; } if ( !empty( $instance['image'] ) ) { echo ”; } 迴聲 $args['after_widget']; } 函數更新($new_instance,$old_instance){ $instance = $old_instance; $instance['title'] = sanitize_text_field($new_instance['title']); $instance['image'] = esc_url_raw($new_instance['image']); 返回$實例; } 函數形式( $instance ) { $title = ! 空($instance['title'])? $instance['title'] : __( '自定義圖像', 'text_domain' ); $圖像=! 空($instance['image'])? $instance['image'] : ”; ?Image Widget 插件是一個簡單的插件,可用於使用 WordPress 媒體管理器將圖像小部件添加到您的站點。 小部件輸出模板通常包含默認模板,但這可以通過模板中的文件進行修改。 在 3.2 中,還添加了 sh_template_image_widget_php 過濾器,允許您覆蓋默認模板行為。 要了解有關特定小部件實例的更多信息,您還必須添加兩個參數 $args 和 $instance。 如果您覆蓋它,您可以在響應式設計中使用它。 如何為隨機圖像添加滑塊? 是的,您可以選擇這樣做。通常,這是通過 Image Widget 插件的側邊欄顯示直接處理的; 側邊欄顯示必須設置為特定頁面。 如果您對此頁面有任何問題或意見,請告訴我們。 Image Widget 是一個開源軟件項目。 該插件已由各種貢獻者向公眾提供。 如果要包含圖像,可以添加一個字段,如果要包含鏈接,可以添加一個類。 您將花費大約 15 分鐘的時間,因此這是一項值得投資。如何在 WordPress 中創建新小部件?要么將小部件拖到相關的小部件區域,要么將其從頁面左側拖到左側. 單擊要添加的小部件後,您將看到一個方法列表。 要將新小部件添加到現有區域,請單擊添加小部件按鈕。