问题描述

我需要为自定义帖子类型”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 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。