如何輕鬆地將帖子過濾器添加到您的 WordPress 網站

已發表: 2015-01-25

我遇到的一個常見請求是讓用戶在其網站的前端過濾或排序帖子的能力。

也許用戶想按字母順序查看帖子,或者可能只看到那些帶有縮略圖的帖子? 這對於常規帖子已經有意義,但在產品、照片或其他內容類型的情況下可能更有意義。

在今天的周末 WordPress 項目中,我將簡要介紹如何在 25 歲主題中實現這樣的功能。 讓我們開始吧!

  • 創建子主題
  • 創建控件
  • 修改查詢
  • 更智能的表格
  • WordPress 行為
  • 結論

創建子主題

與往常一樣,您需要一個子主題。 我們在 WPMU DEV 上提供了兒童主題指南,如果您不熟悉兒童主題,我建議您閱讀一下。

創建控件

讓我們添加三個控件:一個用於排序帖子,一個用於設置排序方向,一個用於僅顯示帶有縮略圖的帖子。

第一步是將父主題的index.php複製到我們的子主題中。

在您的子主題中打開index.php文件並將以下 HTML 粘貼到主容器下方(應該在第 20 行):

加載要點 e12c354bc6c9c95c497d

這是前端的樣子:

形式
還不是很漂亮,但我們的表格在正確的位置

如您所見,我們缺少一些樣式。 讓我們通過向樣式表添加一些樣式來解決這個問題:

加載要點 e12c354bc6c9c95c497d
樣式過濾器
可以做更多的工作,但看起來好多了

我經常聽到新手對編程的反應是:“他怎麼知道這些風格會使其融入主題?”

解決辦法很簡單:我作弊。 我使用 Chrome 中的開發人員工具來檢查常規文章元素。 在這種情況下,它讓我看到元素如何獲得它們的盒子陰影和邊距,我只是將這些規則應用於我自己的元素。

修改查詢

讓我們選擇“按標題排序”、“升序”和“帶有縮略圖的帖子”並提交表單。 您實際上應該看到更改而不對代碼做任何事情。

要了解原因,讓我們檢查 URL。 它應該是這樣的:

 http://yourdomain.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed

可以使用$_GET變量在我們的 PHP 腳本中調用信息的花絮。 WordPress 已經知道 order 和 orderby 參數的含義,並在默認查詢中使用它們。 結果,如果我們只需要訂購和訂購方向,我們實際上已經完成了。

這一切都很好,但我又是怎麼知道的? 我可以使用“order_by”作為參數而不是“orderby”。 在這種情況下,WordPress 不會理解我們的意圖。 我查看了 WordPress Codex 中的 WP_Query 文檔,其中有很多參數,其中許多可以在 URL 中使用。

現在,讓我們實現我們的帖子縮略圖參數。 如果帖子具有關聯的鍵_thumbnail_id的元數據,則該帖子具有縮略圖。 我們需要修改我們的查詢以確保考慮到這一點。 現在讓我們用query_posts()來做這件事。

將以下代碼粘貼到文件頂部的get_header()函數上方:

加載要點 e12c354bc6c9c95c497d

我們將原始查詢的參數與我們自己的新參數合併,從而產生一組不同的帖子。 我們的表單現在可以工作,但它不記得我們的選擇。 讓我們通過重寫我們的表單並使用一些 PHP 來解決這個問題。

更智能的表格

除了按選擇器列出訂單的所有選項之外,我們還需要一種方法來指示選擇了哪個選項。 如果我們在沒有循環的情況下這樣做,它看起來像這樣:

加載要點 e12c354bc6c9c95c497d

你明白嗎? 我不怪你! 在每個選項中,我們檢查當前選擇的值是否等於選項的值。 如果是,我們輸出選定的屬性。 讓我們用一個循環讓它更乾淨:

加載要點 e12c354bc6c9c95c497d

這有點長,但只是因為我們有三個選項。 這是管理任何類型選擇的一種更好的格式。 讓我們將其擴展到整個表單:

加載要點 e12c354bc6c9c95c497d

全部做完。 表單現在應該記住我們基於 URL 中的$_GET變量的選擇。

WordPress 行為

還記得我提到我知道使用“order”和“orderby”是因為我查看了 WP_Query 文檔嗎? 這是一種很好的做法,但可能會導致意想不到的結果。 找到您擁有的類別的 slug,說這個類別是“wordpress”。

現在使用以下 URL:http://yourwebsite.com/?category_name=wordpress。 您應該會看到您的類別存檔,其中列出了您所有的 WordPress 帖子。 這很好,但我們有兩個問題:

如果你打開了漂亮的永久鏈接(你應該這樣做),頁面已經被重定向到一個新的 URL,很可能是 http://yourwebsite.com/category/wordpress。 我們的過濾器將不可見,因為archive.php文件處理這個視圖,而不是index.php 。 此外,我們的類別名稱沒有作為 URL 參數傳遞,因此我們需要使用一些額外的技巧來使我們的過濾器工作。

完成這項工作的捷徑是故意使用 WordPress 使用的相同參數。 您可以使用 URL 中的catname參數傳遞類別名稱,因為 WordPress 不會接受這一點。 然後,您可以使用正確的參數名稱將其提供給查詢。 像這樣的東西:

加載要點 e12c354bc6c9c95c497d

另一種方法是使用函數而不是按原樣在index.php中輸出我們的表單。 您需要從 WordPress 查詢本身檢測類別,並基於此顯示當前選擇。

結論

添加自己的過濾器並不是那麼困難,但需要一些擺弄。 在我們的例子中,您可能希望確保在訂單設置為隨機時刪除分頁。 它可以被一個“顯示更多隨機性”按鈕所取代,它只是重新加載頁面。

希望本文為您提供瞭如何為自己完成此任務的基礎知識,並且您將能夠構建所需的過濾器。

如果您對此項目有任何疑問,請隨時在評論中提問。
標籤: