問題描述

我需要為自定義帖子型別”Slideshow”(這個帖子型別已經建立) 建立一個自定義後置元框 (es) 。每個 metabox 將儲存每個幻燈片幻燈片中的內容並將其儲存到相應的自定義欄位。每個 metabox 應包含以下欄位:

  • 標題 (文字欄位)

  • 影像 (img URL 的文字欄位或理想的下拉式清單顯示附加到帖子的影像的縮圖)

  • 嵌入程式碼 (文字區)

  • 說明 (wysiwyg)

  • 隱藏幻燈片 (核取方塊用於暫時隱藏幻燈片而不刪除幻燈片)

  • 刪除幻燈片 (刪除此幻燈片填寫的後期欄位的內容的按鈕)

我也想要一個按鈕,允許我 「新增幻燈片」,所以當它被點選時,它新增另一個”Slide” 自定義元框,它是第一個的重複,但新增一個增量的數字到每個定製後期元欄位。我目前只有 15 個 metaboxes,並且幻燈片模板的設定方式是,如果只有 5 個 metaboxes 被填充,那麼只有 5 個幻燈片顯示。

最後,我想要能夠透過 「拖放」 或另一個文字欄位 re-order 的幻燈片,我可以鍵入訂單號。

我已經得到它幾乎在我需要它與“More Fields” plugin 和一些程式碼幫助從 Rarst 。使用”More Fields” 外掛,我在每個 metabox 中有以下欄位:

  • 標題 (文字欄位)

  • 影像 (附加到帖子的影像的下拉式清單)

  • 嵌入程式碼 (文字區)

  • 說明 (wysiwyg)

  • 隱藏幻燈片 (核取方塊用於暫時隱藏幻燈片而不刪除幻燈片)

這是一個截圖,我如何透過”More Fields” 外掛進行設定:

這樣做的問題是,由於”More Fields” 在任何地方都不使用<?php delete_post_meta($post_id, $key, $value); ?>,所以無法刪除幻燈片。外掛的另一個問題是它是不可靠的,並且隨著更新而頻繁出現。

我已經能夠使用我自己的自定義 metaboxes 實現類似的解決方案,包括:

  • 標題 (文字欄位)

  • 影像 (img URL 的文字欄位)

  • 嵌入程式碼 (文字區)

  • 說明 (文字區)

  • 隱藏幻燈片 (核取方塊用於暫時隱藏幻燈片而不刪除幻燈片)

有了這個實現,我似乎無法使多個 TinyMCE 欄位工作或影像下拉框。 TinyMCE 程式碼似乎可以工作,直到我新增建立第一個 metabox 的增量副本的程式碼,此時我在 TinyMCE 按鈕應該是這樣的欄位上面得到這個錯誤:Warning: array_push() [function.array-push]: First argument should be an array...

此外,現在我依靠我的作家知道為每個幻燈片放置一個影片或影像,沒關係,但是可以更好的是有一個單選按鈕,讓他們選擇幻燈片中的哪一個 (可能預設為影像),其與幻燈片模板中的條件顯示語句相關聯。

我正在透過側邊欄中的內建 “Featured Image” 框處理影像上傳,儘管我不介意在寫入面板頂部簡單地說出”Upload Images” 的定製 metabox 。

最終我正在尋找類似於此的幻燈片:http://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html 。我希望我的影片可以作為幻燈片中的內容而不是圖片。對於我的作家,我需要一個簡潔易用的管理員面板 (他們不是很聰明,而且不可靠使用 html 和/或短碼) 。為了防止這個例子不清楚,每張幻燈片都應該生成一個新的頁面瀏覽。

Drag’n’Drop 重新排序不是一個高優先順序,但它會很酷。我發現一個處理這個很好的外掛:SlideDeck 。不幸的是,外掛不符合我的需要,但是他們處理幻燈片的順序的方式是非常光滑的。它是側邊欄中的一個單獨的 metabox,可讓您按照您喜歡的順序拖動幻燈片。這也是如何新增幻燈片,透過單擊”Add Slide” 按鈕,將另一個幻燈片 Metabox 新增到寫入面板。這是一個截圖:

您也可以看到 more screenshots of it in action in the wordpress repository

這是我的所有程式碼:

功能設定我的幻燈片釋出型別和幻燈片分頁:http://loak.pastebin.com/g63Gf186

來自 DeluxeBloggingTips.com(DBT) 的原始程式碼,我基於我的 Metaboxes:http://loak.pastebin.com/u9YTQrxf

我修改的 DBT 程式碼的版本給我相同的 metabox 的增量版本:http://loak.pastebin.com/WtxGdPrN

Chris Burbridge 建立的允許多個 TinyMCE 例項的 DBT 程式碼的修改版本:http://loak.pastebin.com/Mqb3pKhx 使用此程式碼,TinyMCE 可以正常工作。

我修改 Burbridge 的程式碼,試圖整合我的增量和一個欄位,讓您從附加到帖子的所有影像的下拉式清單中選擇影像:http://loak.pastebin.com/xSuenJTK 在此嘗試中,TinyMCE 已損壞,下拉式清單不起作用。

這可能沒關係,只是為了防止你想知道,這裡是我使用的程式碼從自定義帖子元素中提取嵌入程式碼,調整大小,並將其插入到帖子中:http://loak.pastebin.com/n7pAzEAw

這是原始問題的編輯版本,以反映專案的當前狀態並回答評論中釋出的問題。感謝 Chris_O 把賞金放在這裡。此外,感謝 RarstJustinThemeHybrid.com forum 中幫助我的很多。我已經花了幾個小時這個時間,我被卡住了 (我在這個問題上花了幾個小時) 。任何幫助將不勝感激。

最佳解決方案

從事物的外觀來看,您最安全的下注和最簡單的路線是專門為更多 Field 外掛使用。我可以看到你需要的兩個最大的功能是一個欄位”factory” 和一個 drag-and-drop 介面。

多個欄位

我的建議是看 WordPress Widget class,並用它作為你的領域工廠的典範 – 基本上,借建立一個欄位的多個例項的能力,一旦你擁有了它內建的框架。

這是多個視窗小工具在側邊欄中工作的核心:

  • 您可以透過擴充套件 WP_Widget 類來定義每個小工具的程式碼一次。

  • 然後,您可以根據需要建立任意數量的小工具副本

    • 每個小工具的細節作為序列化資料儲存在選項表中

  • 您可以自定義每個小工具,使用簡單的 delete 命令刪除它們,並透過外觀 drag-and-drop 介面顯式設定它們的定位

Drag-and-drop

再次建議您檢視 WordPress 小工具系統的靈感。我們已經有了一個相當直觀的 drag-and-drop 介面,所以在別的地方,re-purpose 是相當容易的。或者,如果您想要真正想花哨,您可以在單獨的自定義元欄位內實現自己的 drag-and-drop 系統。

因此,每個幻燈片將由與該帖子相關聯的自定義元框定義。幻燈片的順序將由一個單獨的自定義元框設定,該自定義元框也連結到該帖子。我建議透過 AJAX 提交幻燈片更新,以便您可以根據資訊動態更新幻燈片順序元框 (這樣可以防止在移動之前手動點選”update” 並等待頁面重新載入) 。

jQuery UI 有一個很好的 「draggable」 介面,您可以輕鬆地在此自定義元框中為您的目的操作。困難的部分是沒有構建介面,它在元框和頁面上其他位置的幻燈片元集合的集合之間獲得一致,準確的通訊。

綜上所述

從你的帖子中收集到的是你有一個可行的解決方案:

  • 您已透過 「更多欄位」 視窗小工具將 15 個自定義欄位新增到您的自定義帖子型別,但是希望動態新增/刪除欄位,而不是使用設定的數字

  • 您需要一種方法來調整這些自定義欄位的順序,以便幻燈片按順序載入

我會這樣做的方法是將自定義元建立過程抽象到一個可以一次又一次建立新的自定義元欄位的類中。然後,我將擴充套件類初始化兩種型別的元框:一個用於幻燈片,一個用於幻燈片結構。我也會在幻燈片結構元框中建立動態建立新的幻燈片元框的功能 (幻燈片元框將會安置自己的”delete” 動作) 。

整個幻燈片將不是由幻燈片後設資料庫儲存,而是透過幻燈片結構元框到後期的自定義元欄位中 – 自定義元將是一個鋸齒狀陣列,其中每個幻燈片在其中表示為陣列 – 在訂購。在結構元框中自定義幻燈片的順序將重組陣列和 re-save 的後期元。這樣我只有 1 個元值才能讀取,當我想要訪問幻燈片。

在 SlideDeck,更多欄位和您到目前為止放置的自定義程式碼之間,您已經掌握了大部分的解決方案,您只需要同時處理所有的解決方案。在新增 JavaScript 修飾之前,我將著重於獲取根實現。動態建立,修改,儲存和刪除幻燈片比富文字編輯器 IMO 更為重要。先破解了然後讓訂購系統下來。然後,您可以專注於在 TinyMCE 上工作的多個例項。

參考文獻

注:本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。