如何在WordPress中創建動態滑塊

[ad_1]

如果您正在編製網站功能列表,這將使您的WordPress網站脫穎而出,則滑塊將在列表中居高不下。 但是,如果您真的想要一個令人印象深刻的自定義網站,則需要一個具有動態內容功能的滑塊。

什麼是動態內容?

動態內容是根據網站上的數據或用戶行為在網頁上更改的內容。

動態內容的對立面是靜態內容。 使用靜態內容,該網頁將保持完全相同,而不考慮用戶或時間。

登陸頁面上通常可以找到靜態內容的一個很好的例子,無論誰點擊它,通常都會顯示完全相同的標題,描述和號召性用語。

您可以在下面看到一個下載WordPress的登錄頁面。 無論您以何種方式到達該頁面,您都將看到完全相同的信息,因為它是靜態的。

WordPress靜態頁面

但是,有時靜態內容將不起作用。 例如,如果您運行一個博客,則您很可能希望最新的帖子出現在頂部。 如果內容是靜態的,那麼您的博客將始終在頂部顯示相同的帖子。 但是,如果它是動態的,那麼每次您發布新帖子時,訂單都會自動(或動態)更改。

以下是WPExplorer博客。 每次WPExplorer張貼新的博客文章時,它都會自動顯示為左上角的最新文章。

WordPress動態頁面

還有其他一些示例,說明何時可能需要動態內容。 如果您經營一個出售旅遊套票的旅遊網站,您將需要一個 自定義帖子類型 您的旅行,每個旅行都顯示在自己的帖子中。

現在,您可以單獨設計每個遊覽站,但這將需要花費時間和精力。 如果您想更改遊覽布局會怎樣? 您將必須分別編輯每個導覽,以便它們具有相同的結構。 同樣,您將為自己創建不必要的工作。

動態自定義帖子類型

最好的解決方案是創建一個 顯示自定義帖子的模板。 在此模板上,您可以為帖子標題,圖像,價格等添加動態內容。 這意味著,當您單擊每個不同的遊覽帖子時,內容將會更改。 例如,有關Semuc Champey的旅遊信息將包含有關Semuc Champey的內容,而有關國王谷的旅遊信息將……讓您明白。

有哪些類型的動態滑塊?

有兩種類型的動態滑塊可增強您的自定義網站。

1.動態圖像滑塊

動態圖像滑塊

動態圖像滑塊是一個圖像滑塊,您可以將其添加到模板一次,並將根據您單擊的帖子顯示資料庫中的不同圖像。

例如,在體育館網站上,您可能具有自己的體育館自定義帖子類型,其中將包含許多體育館帖子。 在每個體育館帖子上,您將要顯示帶有該體育館的圖像的圖像滑塊。 因此,對於您單擊的每個體育館帖子,圖像將有所不同。

最簡單的方法是創建動態圖像滑塊。 無論您單擊「 Downtown Fitness Center」還是「 Balance Gym」,靜態圖像滑塊都會顯示相同的圖像,而動態圖像滑塊則顯示您添加到後端每個帖子中的圖像。

2.動態帖子內容滑塊

動態帖子內容滑塊

有時,滑塊將不僅包含圖像。 實際上,您在首頁上可能會遇到的許多滑塊將保存與圖像有關的更多信息。

例如,在體育館網站上,您可能要創建一個包含三個圖像的滑塊,每個圖像顯示一個不同的體育館。 問題是,如果僅顯示圖像,用戶將如何知道健身房的名稱,會員價格和可用的設施? 最簡單的解決方案是添加一個基於自定義欄位的帶有動態帖子內容的滑塊。

您可能想知道為什麼此內容需要動態? 將滑塊上的每張幻燈片都視為一頁。 當您旋轉每個滑塊的「頁面」時,您希望更改內容以顯示有關其他健身房的信息。

當然,如果此內容是靜態的,則它不會改變,您只需顯示相同的背景圖像,帖子標題,號召性用語等。但是對於動態內容,您將確保每個幻燈片都顯示來自每個體育館的信息。

什麼是創建動態滑塊的最佳插件?

有許多出色的滑塊插件,可確保無論您的編碼能力如何,都可以同時包含兩種類型的動態滑塊。

1.工具集

工具集

信息與下載查看演示

第一個插件是用於構建自定義網站Toolset的最通用的資源之一。

工具集已創建 工具集塊, 一個 古騰堡擴展,該工具專門用於使所有經驗水平的WordPress用戶都可以輕鬆顯示自定義內容,例如滑塊,還可以顯示自定義欄位,設計模板,檔案等,而無需進行編碼。

代替PHP,可以使用Toolset的一組獨特的塊,這些塊可隨時提供動態內容。 Toolset的一大優點是其功能。 除了滑塊之外,您還可以創建許多其他重要功能,例如搜索,前端表單和地圖。

2.滑塊革命

滑塊革命

信息與下載查看演示

如果您想要儘可能多的選項來自定義滑塊,那麼Slider Revolution是一個出色的插件。 這些選項之一是動態滑塊。

但是,雖然您可以構建動態滑塊,但不能創建可能要從中繪製內容的自定義欄位。 您將需要選擇一個包含內置自定義欄位的主題,或者自己編寫代碼。

Slider Revolution確實提供了200多個模板,因此您可以立即構建包含滑塊的網站。

3.智能滑塊3

SmartSlider3

信息與下載查看演示

Smart Slider 3允許您創建動態滑塊,其內容來自包括WordPress帖子和頁面,WooCommerce產品和社交媒體渠道(包括Facebook)在內的多種來源。

使用Smart Slider 3的專業版,您可以導入預定義的滑塊示例,還可以從WordPress中的20個來源中進行繪製。

如何創建動態圖像滑塊

現在,您已經知道了哪些動態滑塊可以添加到您的網站中,以及最佳插件,現在我將向您展示如何創建它們。 對於此示例,我將使用Toolset及其Gutenberg塊。

有關詳細的分步視頻教程,您可以查看Toolset的 模板動態滑塊指南

我將使用Toolset的免費版本 體育館參考網站 並將我的動態圖像滑塊添加到其體育館發布類型。 我的每個體育館都將包含一個動態圖像滑塊,以顯示其圖像。

1.使用自定義欄位創建自定義帖子類型

在添加滑塊本身之前,我們需要添加將在滑塊內顯示的信息,並構建將在其上顯示的結構。

我們需要創建兩個定製內容–定製帖子類型和定製欄位。

在下面,您可以看到如何通過簡單添加名稱來使用Toolset創建自定義帖子類型。

具有自定義欄位的自定義帖子類型

擁有體育館類型後,接下來需要添加內容。 為此,您需要通過創建自定義欄位來設置每個帖子的結構。

對於動態圖像滑塊,您將需要一個用於圖像的自定義欄位。 當然,圖像滑塊將包含多個圖像,但是自定義欄位通常僅存儲一個數據。 那麼,您如何添加更多呢?

使用工具集,您可以創建重複的自定義欄位來存儲多個數據。 在這種情況下,我們將能夠存儲多張圖像並將其全部顯示在動態圖像滑塊上。

為了使自定義欄位重複,您需要做的就是在創建欄位時選擇相關的框。 您可以在下面看到我如何重複「健身房圖片庫」。

自定義欄位重複

如您所見,我的體育館帖子已經有許多自定義欄位,包括評分,地址和開放時間。

健身房定製領域

2.將媒體添加到帖子中

現在我們有了滑塊的自定義欄位,我們需要添加要以圖像形式顯示的媒體。 為此,我們轉到每個帖子,然後單擊添加圖像,就像選擇特色圖像一樣。

只需單擊「 +」按鈕即可上傳圖像。

將媒體添加到帖子

這些圖像現在將用作動態滑塊的「源」。 這意味著每個體育館帖子都會顯示前端添加到其「健身房照片庫」的所有圖像。

3.添加滑塊

準備好自定義欄位並添加內容後,您現在可以使用它們來創建動態滑塊。 在創建動態滑塊之前,您需要已經為帖子創建了模板。

首先,我將Toolset的Image Slider塊插入模板。 因為我們已經將圖像上傳到了「健身房照片庫」,所以我們可以選擇「動態源」並選擇我們要從中提取圖像的自定義欄位。

添加滑塊並選擇動態源

滑塊將顯示您上傳到自定義欄位的圖像。

動態源滑塊

您可以使用編輯器頂部的下拉菜單在帖子之間切換,以檢查滑塊是否真正顯示了動態內容。 選擇新帖子後,它將載入該帖子的內容-包括動態圖像滑塊。

儘管上面的示例使用了工具集,但是大多數帶有動態內容選項的WordPress滑塊都以相同的方式工作。 在大多數情況下,您需要先創建內容,然後在將滑塊添加到帖子,頁面或模板時選擇「動態」源。

如何使用動態帖子內容創建滑塊

除了圖像之外,您還可以向滑塊添加多個欄位(包括自定義欄位,例如價格,評分,按鈕,摘錄等)。 Toolset還提供了完整的分步視頻,用於 創建自定義滑塊

1.使用自定義欄位創建自定義帖子類型

就像使用動態圖像滑塊一樣,您需要首先使用自定義欄位創建自定義帖子類型。 我將重複使用體育館的職位類型。

2.將動態源添加到滑塊

但是,與動態圖像滑塊不同,您將使用Toolset的Views塊。 這使您可以從資料庫中載入帖子,並將它們顯示為列表-包括滑塊。

工具集的視圖塊

插入View塊後,使用嚮導為滑塊設置參數。 例如,下面我添加了分頁,以便用戶可以在幻燈片之間切換,而我保留了未格式化的樣式。

工具集的視圖阻止嚮導

您還需要選擇將成為內容來源的帖子類型。

現在,您已經創建了視圖。 您可以在滑塊的右側欄中進行許多編輯。 您首先需要從左上方的「塊」導航選項中選擇「查看」塊。

滑塊動態內容塊

通過為滑塊設置結構,您可以插入容器塊以添加內容。 例如,您可以添加背景,圖像,文本,價格,評論-幾乎為您添加了自定義欄位的任何內容。 插入元素時,只需選擇「動態源」並相應地選擇您的自定義欄位,然後根據需要進行自定義(更改顏色,字體,位置等)。

3.使用滑塊

現在,我們可以保存滑塊並在前端檢出。 根據添加的內容,您應該會看到一個令人驚嘆的動態內容滑塊。

動態內容滑塊

就像動態圖像滑塊一樣,當涉及到動態內容滑塊時,大多數WordPress滑塊都包含類似的選項。 Toolset提供了一個動態內容源選擇框,Slider Revolution包括內置的動態內容模塊等。在大多數情況下,您將需要插入您選擇的內容模塊以向滑塊添加動態內容。

立即開始構建動態滑塊!

既然您已經了解了所有經驗豐富的WordPress用戶構建滑塊的難易程度,現在就可以嘗試一下。 選擇您的滑塊插件並開始工作!

相關文章