問題描述
我需要為自定義帖子類型”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 把賞金放在這裏。此外,感謝 Rarst 和 Justin 在 ThemeHybrid.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 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。

