帮助创建带有自定义元框的幻灯片自定义帖子类型?


16

我需要为自定义帖子类型“ Slideshow”(此帖子类型已创建)创建一个自定义帖子元框。每个metabox将在每个幻灯片中保存内容,并将其保存到相应的自定义字段中。每个metabox均应包含以下字段:

  • 标题(文本字段)
  • 图片(img URL的文本字段,或者理想情况下为下拉列表,显示附加到帖子的图片的缩略图)
  • 嵌入代码(文本区域)
  • 说明(所见即所得)
  • 隐藏幻灯片(复选框,用于暂时隐藏幻灯片而不删除它)
  • 删除幻灯片(删除此幻灯片所填写的帖子元字段的内容的按钮)

我还希望在某个按钮上允许我“添加幻灯片”,以便在单击该按钮时会添加另一个“幻灯片”自定义元框,该框与第一个自定义框重复,但会向每个自定义帖子元字段添加增量编号。我目前只有15个元框,并且通过以下方式设置幻灯片模板:如果仅填充5个元框,则仅显示5张幻灯片。

最后,我希望能够重新排序幻灯片,无论是通过“拖放”还是通过其他可以输入订购号的文本字段。

使用“更多字段”插件和Rarst的一些代码帮助,我几乎可以在需要的地方获得它。使用“更多字段”插件,我在每个metabox中具有以下字段:

  • 标题(文本字段)
  • 图片(帖子中所附图片的下拉列表)
  • 嵌入代码(文本区域)
  • 说明(所见即所得)
  • 隐藏幻灯片(复选框,用于暂时隐藏幻灯片而不删除它)

这是我如何通过“更多字段”插件进行设置的屏幕截图:

替代文字

问题在于,一旦制作完幻灯片,就无法删除它,因为“更多字段”在<?php delete_post_meta($post_id, $key, $value); ?>任何地方都不会使用。插件的另一个问题是,它太不可靠,并且经常因更新而中断。

我已经能够使用自己的自定义元框实现类似的解决方案,其中包括:

  • 标题(文本字段)
  • 图像(img URL的文本字段)
  • 嵌入代码(文本区域)
  • 说明(文本区域)
  • 隐藏幻灯片(复选框,用于暂时隐藏幻灯片而不删除它)

通过此实现,我似乎无法使多个TinyMCE字段正常工作或图像下拉框。在添加添加代码以创建第一个metabox的增量副本之前,TinyMCE代码似乎一直有效,此时,我在TinyMCE按钮应该位于的字段上方上方看到此错误Warning: array_push() [function.array-push]: First argument should be an array...

另外,现在我依靠我的作家知道为每张幻灯片放一个视频或图像,这没关系,但是最好有一个单选按钮,让他们选择幻灯片是哪一张(可能默认为图片),该图片与幻灯片模板中的条件显示语句相关联。

我正在通过侧边栏中的内置“功能图像”框来处理图像上传,尽管我不介意在编写面板顶部仅显示“上传图像”的自定义元框。

最终,我正在寻找与此类似的幻灯片:http : //www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html。我希望我也能够将视频作为幻灯片中的内容而不是图片。我需要一个直观且易于使用的管理控制台供我的编写者使用(他们不太精通技术,并且使用html和/或简码也不可靠)。万一示例中的内容不清楚,每张幻灯片都应生成一个新的综合浏览量。

Drag'n'Drop的重新排序不是一个高优先级,但是会很酷。我找到了一个可以很好地处理此问题的插件:SlideDeck。不幸的是,该插件不适合我的需求,但是它们处理幻灯片订购的方式非常流畅。这是边栏中的一个单独的metabox,可让您将幻灯片拖动到所需的顺序。这也是通过单击“添加幻灯片”按钮将幻灯片添加到书写面板的方式添加幻灯片的方式。这是屏幕截图:

替代文字

您还可以在wordpress信息库中查看更多有关它的屏幕截图

这是我的所有代码:

设置我的幻灯片发布类型和幻灯片分页的功能:http : //loak.pastebin.com/g63Gf186

我基于我的Metabox的DeluxeBloggingTips.com(DBT)原始代码:http ://loak.pastebin.com/u9YTQrxf

我修改了DBT代码的版本,以便为我提供同一metabox的增量版本:http : //loak.pastebin.com/WtxGdPrN

克里斯·伯布里奇​​(Chris Burbridge)创建的DBT代码的修改版本,以允许TinyMCE的多个实例:http : //loak.pastebin.com/Mqb3pKhx使用此代码,TinyMCE可以正常工作。

我对Burbridge代码的修改,试图结合我的增量和一个字段,该字段使您可以从张贴到该帖子的所有图像的下拉列表中选择图像:http : //loak.pastebin.com/xSuenJTK 在这种尝试中,TinyMCE已损坏,下拉菜单不起作用。

这可能无关紧要,但以防万一您想知道,这是我用来从自定义帖子元中提取嵌入代码,调整其大小并将其插入帖子中的代码:http : //loak.pastebin.com / n7pAzEAw

这是原始问题的编辑版本,以反映项目的当前状态并回答评论中发布的问题。感谢Chris_O在这方面的悬赏。另外,感谢RarstJustinThemeHybrid.com论坛上为我提供了很多帮助。我已经花了几个小时在这个问题上,被困住了(我在这个问题上花了几个小时)。任何帮助将不胜感激。


您可以绘制一个可以显示整个图片的模拟图像,例如素描吗?我认为这有助于更好地了解您的需求。
hakre 2010年

我在底部添加了一些示例。如果还不能完全解决问题,请告诉我。
马特2010年

还不清楚吗?
马特2010年

任何人?这东西在吗?
马特2010年

@Hakre,你在那里吗?
马特2010年

Answers:


6

从外观上看,最安全和最简单的方法就是派发专为您使用的More Fields插件。我可以看到您的fork需要的两个最大功能是“工厂”字段和拖放界面。

多个领域

我的建议是查看WordPress Widget类,并将其用作字段工厂的模型-基本上,一旦为该字段构建了框架,就可以使用它来创建字段的多个实例。

这是边栏中多个小部件的工作方式的核心:

  • 您可以通过扩展WP_Widget类为每个小部件定义一次代码。
  • 然后,您可以根据需要创建任意数量的小部件副本
    • 每个小部件的详细信息作为序列化数据存储在选项表中
  • 您可以自定义每个小部件,使用一个简单的delete命令将其删除,然后通过外观拖放界面显式设置它们的位置。

拖放式

再次,我建议寻找WordPress小部件系统以获取灵感。我们已经在那里建立了一个非常直观的拖放界面,因此在其他地方重新使用许多相同的代码将非常容易。或者,如果您真的想花哨的话,可以在单独的自定义元字段中实现自己的拖放系统。

因此,每个幻灯片都将由链接到帖子的自定义元框定义。幻灯片的顺序将由一个单独的自定义元框设置,该框也链接到该帖子。我建议您通过AJAX提交幻灯片更新,以便您可以根据该信息动态更新幻灯片订单元框(这样可以避免在移动内容之前必须手动点击“更新”并等待页面重新加载)。

jQuery UI具有出色的“ 可拖动 ”界面,您可以在此自定义meta框中轻松地对其进行操作。最困难的部分不是构建界面,而是在元数据框和页面其他位置的幻灯片元数据框集合之间实现一致,准确的通信。

综上所述

我从您的帖子中收集到的是,您有一个可行的解决方案:

  • 您已通过“更多字段”窗口小部件向自定义帖子类型添加了15个自定义字段,但希望动态添加/删除字段,而不是使用固定的编号
  • 您需要一种方法来调整这些自定义字段的顺序,以便按顺序加载幻灯片

我采用的方法是将自定义元创建过程抽象为一个类,我可以反复使用它来创建新的自定义元字段。然后,我将扩展该类以初始化两种类型的元框:一种用于幻灯片,一种用于幻灯片结构。我还将在幻灯片结构的meta盒中内置动态创建新幻灯片meta盒的能力(幻灯片meta盒将容纳自己的“删除”操作)。

整个幻灯片放映将不由幻灯片元框存储,而是由幻灯片结构元框存储到帖子的自定义元字段中-自定义元将是一个锯齿状的数组,其中每个幻灯片都表示为数组中的数组- 在订购。在结构meta框中自定义幻灯片的顺序将重新组织数组并重新保存post meta。这样,当我要访问幻灯片时,我只有1个meta值可以读出。

在SlideDeck,More Fields和到目前为止已经放在一起的自定义代码之间,您已经掌握了大部分解决方案……您只需要同时使它们一起工作即可。在添加JavaScript装饰之前,我将重点放在首先降低根实现上-动态创建,修改,保存和删除幻灯片比富文本编辑器IMO更重要。首先弄清楚。然后关闭订购系统。 然后,您可以集中精力在页面上运行多个TinyMCE实例。


谢谢您的帮助!目前,这超出了我的技能范围,但将为整个学习过程提供良好的指导。我知道“类”,并意识到我已经在metaboxes代码上使用了一个类,但是我仍然不理解它们。我“知道”但又不完全了解的另一件事是数组的使用。
马特2010年

您关于首先降低基础知识的建议很有意义,但是我遇到了一些现实世界中的限制,这些限制要求我尽快将其纳入生产环境,最重要的因素之一是所见即所得的编辑器,因为许多作家都是非技术性的。我不介意使项目逐渐增加并一路依赖拐杖,但是这种方法显然需要可扩展。就是说,在我看来,使用“更多字段”插件可以作为一个临时解决方案,直到我弄清楚这一点为止,但是我不确定这是否适用于...
matt 2010年

您将整个幻灯片保存在一个自定义字段中的方法。您是否真的认为将所有内容放在一个领域中更好?这听起来可能是无知的,但是在我看来,如果wp在每次进行较小的更改时都必须重写整个幻灯片,则错误的余地还更大。
马特2010年

将整个节目保存到一个meta字段既可以防止问题,也可以带来一些问题:它不会强迫您选择,阅读和遍历多个字段,从而节省了演示站点的时间。但是,如果某张幻灯片中出现故障并被写入数据库,则会破坏整个幻灯片的显示。绝对是一个折衷,但是我总是选择速度和易于开发。
EAMann

您是说它可以节省网站前端的时间吗?如果一次只显示一张幻灯片,那又为什么呢?
马特2010年

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.