如何為WordPress創建一個簡單的FAQ插件

文章撰寫者:
  • WordPress
  • 更新:2月09,2017

我們之前見過很多 博客提示和工具。 那麼,今天我們將學習如何為您的博客創建一個好的工具 - 一個FAQ頁面插件。 但最重要的不僅僅是插件本身,而是你可以用這個原理做什麼。 您將學習如何在WP站點中存儲任何類型的數據,以及如何將其與外部庫(如jQuery UI)集成,從而為您的站點創建自定義組件。 讓我們開始吧!

想法,演示和下載

演示

我們的目標是創建一個可用於很多事情的插件,但非常適合FAQ頁面。

但除此之外,我們的主要成就將是 理解WordPress 自定義帖子類型,短代碼,與外部JS / jQuery插件的交互。 有了這個想法,你可以根據你可能發現的其他瘋狂插件創建很多東西,這只是你的起點,親愛的Padawan。

So 在這裡你可以找到jQuery API演示 對於我們將要使用的組件 - 但真正酷的東西是用於生成該組件(PHP)的代碼。

哦,當然你可以找到 插件文件可在此處下載 以及您可以在WP站點中安裝。

預熱 - 插件文件和自定義帖子類型

首先,我們需要創建一個自定義帖子類型來存儲我們的數據。

自定義帖子類型是WP魔術的重要組成部分,它允許您創建一種新的數據類型(有點像帖子,頁面,附件......),因此可以使用WP的功能調用和操作它。 這對初學者來說似乎很簡單,但只有舊時代的PHP程序員(還是那件事?)知道在數據庫中連接和存儲數據有多難。 更別說動態創建新數據類型了,這很微妙,但允許我們的代碼具有很大的靈活性。

對於我們來說,我們需要一個插件,但您可能已經熟悉了這個概念。 插件就像WordPress的Lego塊一樣,他們使用一些可以輕鬆插入的代碼(duh!)添加或轉換當前功能,或者如果你想要的話也可以拔掉插頭。

要以WP識別它的方式創建插件,您需要2:

  1. 在你的wp-content / plugins /中創建一個文件
  2. 在該文件的開頭添加元數據,以便WP可以理解其中的內容

請記住,文件名必須是唯一的,因此當有人安裝您的插件(甚至是您自己)時,將不會與當前插件衝突。 在我們的情況下,為了更好的組織,我們將添加一個名為faq-whsr的新文件夾,並在其中添加一個名為faq-whsr.php的文件。

現在對於metada,只需在插件文件的開頭添加這樣的東西(在<?php之後):

meta_01

意思是:

  • 插件名稱:將在wp-admin> plugins界面中顯示的好名稱
  • 插件URI:如果要添加鏈接到插件的頁面(文檔,示例,銷售頁面)
  • 說明:這是wp-admin> plugins界面中顯示的小段落。 保持簡單,以便用戶記住它的用途
  • 作者/作者URI:創建插件的人/公司和信用的鏈接
  • 許可證:因此用戶將知道他們可以/不能對您的插件做什麼

01  - 插件創建

好的,現在我們已經創建了我們的插件,添加了一些相關的元數據。 保存插件文件後,您應該可以在wp-admin界面中看到它

讓我們激活它,看看會發生什麼。

等等,沒什麼? 嗯,這是一件好事,如果現在出現任何問題,你會發現錯誤。 現在讓我們繼續我們的自定義帖子類型創建。

在我們的案例中,CPT是FAQ項目,但您可以創建書籍,視頻,推薦書等。 這裡要記住的重要一點是:函數名稱應該是唯一的。 現在重複一遍:函數名稱應該是唯一的,函數名稱應該是唯一的。 得到它了? 好,這將為您節省很多麻煩,直到我們可以使用OOP(可能在下一個教程中)。

這個代碼完成了魔法:

cpt

這就是相關部分的含義:

  • $ labels - 是一個數組,其中包含wp-admin區域不同部分的標籤和文本。 所以WP會知道調用我們項目的正確方法
  • 支持 - 這個告訴您在wp-admin> FAQ>新屏幕中可以看到的內容。 在我們的例子中,我們將擁有標題,編輯器(主要內容框),作者,修訂版和自定義字段(如果您需要它們)。
  • 分類法 - 在這裡你告訴WP哪些分類法是允許的(類別,標籤或自定義分類法)
  • register_post_type('faq_whsr',$ args) - 告訴WP “嘿,使用$ args中的參數創建一個ID為faq_whsr的新自定義帖子類型”.

管理員-FAQ

保存它並屏住呼吸。 您現在應該在主wp-admin菜單中看到一個新部分

等等,就是這樣嗎? 是啊。 該片段創建了整個CPT功能。 如果你沒有找到這個酷,請等待下一節它會變冷。

在我們離開wp-admin之前,添加一些虛擬數據(一些至少包含2類別的常見問題解答)。

前端 - WP x jQuery交互

現在終於有時間看到一些動作,我們將使用它 jQuery UI Accordion元素 這一點。

jQuery UI與jQuery本身俱有幾乎相同的優點:

  • 很多開發人員正在研究它
  • 跨瀏覽器和移動就緒代碼
  • 有據可查
  • WP很好玩(WP本身使用它們)

現在的問題是:我們如何稱呼它?

有2方法:

  1. wp_head中錯誤的純<script> / <style>標記
  2. 好的wp_enqueue

今天我們不會用錯誤的方法浪費太多時間,但好的方法基本上是告訴WP “嘿哥們,我們在代碼中的某個時刻需要jQuery UI,請將它包含在頁面中”。 這樣WP可以檢查是否有其他人已經包含它或包含它的不同版本,並避免重複庫的很多麻煩。 好的,如何將這個好聊天翻譯成代碼?

使用enqueue函數:

enqueue_02

短代碼

現在我們又回到了wp-admin。 我們有FAQ項目,我們有圖書館可以根據需要設置項目樣式,還缺少什麼? 好吧,我們需要調用這些物品!

我們有很多選擇,但最簡單的方法是創建一個短代碼。 短代碼是您在內容字段中添加的內容(對於頁面,帖子,CPT ......),WP實際上會搜索要在其上運行的函數。 有2類型的短代碼:

  1. [自封] - 像標籤<hr />或<br />這種短代碼只是在某個時刻調用一個函數 - 這是我們的傢伙
  2. [wrapped]內容[/ wrapped] - 這個像標籤<p> </ p>或<div> </ div>,實際上可以轉換其內容,或者使用內容作為參數。

讓我們看看它是如何工作的。 在wp-admin中創建一個新頁面並在其中添加以下代碼:

[FAQ-whsr]

保存並訪問該頁面,看看會發生什麼......

開個玩笑,它不會做對嗎? 嗯,那是因為我們還沒有為它創建一個函數。

在插件文件中添加:

shortcode_02

現在刷新你的頁面,我保證會發生很酷的事情。

很酷,對吧? 現在你可以看到它正在運行,現在天空是你的極限。 該代碼所做的只是告訴WP,有一個名為[faq-whsr]的短代碼,如果WP找到它,WP應該在頁面的這一點運行一個函數。

在我們的例子中,我們需要為要創建的jQuery UI面板實現此結構:

api_02

為此,我們將創建一個 WP查詢,加載我們的常見問題項目及其內容。 用以下代碼替換短代碼功能:

短碼,basic_02

好的,現在您的FAQ項目將被調用。 我們所做的是調用wp_query來調用我們的自定義帖子類型,然後將其傳遞給短代碼返回,這樣WP將按照所需的結構顯示所有這些。

這很好,但缺少一些東西,對吧? 那裡有一些選擇呢? 好吧,我們可以為短代碼添加選項,讓我們看看如何在我們的短代碼中創建一些WP_Query參數:

短碼,final_02

這樣您就可以使用以下參數調用項目(您可以根據需要組合使用):

  • cat - 類別ID(多個添加為數組)[faq-whsr cat = 1]
  • category_name - 類別名稱[faq-whsr category_name =“food”]
  • order - ASC或DESC(默認為DESC)[faq-whsr order =“ASC”]
  • orderby - 更改訂購商品的條件[faq-whsr orderby =“title”]
  • posts_per_page - 更改加載的項目數[faq-whsr posts_per_page = 5]

但就像我說的那樣,天空是我朋友的極限。 以下是您可以實現和使用的WP_Query的一些選項:

  • 作者
  • 類別(使用not_in添加排除選項)
  • 搜索(很酷,如果你想讓用戶能夠搜索它們)
  • 自定義字段(因為FAQ項目具有它們,您可以使用它們來加載具有特定自定義字段和值的項目)

現在輪到你了

正如您所看到的,這只是您的起點。 我們都可以學習很多其他很酷的東西來改進這個簡單的插件,這裡有一些建議供你深入挖掘:

  • 響應式設計
  • 小部件創建
  • 插件激活/取消激活掛鉤
  • 國際化
  • OOP
  • 僅在需要時排隊(對於某些頁面)

不要忘記在評論中留下您的想法! 以下是我們對您的挑戰:是否可以為短代碼應用“默認項目”選項(因此當頁面加載時,另一項將打開,這不是第一項)? 你會怎麼做?

關於羅切斯特奧利維拉

我是來自巴西Itajubá(MG)的網頁設計師和企業家。 我喜歡寫一些關於模糊主題和做一些很酷的東西。

連接: