web-dev-qa-db-ja.com

カスタムメタボックスを使用してスライドショーのカスタム投稿タイプを作成するのを手伝ってください。

カスタム投稿タイプ "Slideshow"のカスタム投稿メタボックスを作成する必要があります(この投稿タイプは既に作成されています)。各メタボックスは各スライドスライドのコンテンツを保持し、対応するカスタムフィールドに保存します。各メタボックスには次のフィールドが含まれています。

  • タイトル(テキストフィールド)
  • 画像(img URLのテキストフィールド、または理想的には投稿に添付された画像のサムネイルを表示するドロップダウンリスト)
  • 埋め込みコード(テキスト領域)
  • 説明(wysiwyg)
  • スライドを非表示にする(スライドを削除せずに一時的に非表示にするためのチェックボックス)
  • スライドを削除(このスライドで埋められた投稿メタフィールドの内容を削除するボタン)

「スライドを追加する」ボタンをクリックすると、最初の複製と同じ「スライド」カスタムメタボックスが追加されますが、各カスタム投稿メタフィールドに増分番号が追加されるボタンも必要です。私は現在15のメタボックスしか持っていません。スライドショーテンプレートは、5つのメタボックスだけが埋められると5つのスライドしか表示されないように設定されています。

最後に、「ドラッグアンドドロップ」または注文番号を入力できる別のテキストフィールドでスライドを並べ替えることができるようにしたいと思います。

私は "More Fields"プラグイン とRarstからのいくつかのコードの助けを借りてそれを必要とするほとんどの場所でそれを手に入れました。 "More Fields"プラグインを使って、各メタボックスには以下のフィールドがあります。

  • タイトル(テキストフィールド)
  • 画像(投稿に添付されている画像のドロップダウンリスト)
  • 埋め込みコード(テキスト領域)
  • 説明(wysiwyg)
  • スライドを非表示にする(スライドを削除せずに一時的に非表示にするためのチェックボックス)

これが "More Fields"プラグインを通してどのようにセットアップしたかのスクリーンショットです。

alt text

これに関する問題は、 "More Fields"では<?php delete_post_meta($post_id, $key, $value); ?>がどこにも使用されていないため、一度作成したスライドを削除する方法がないことです。プラグインのもう一つの問題は、それがあまりにも信頼できず、アップデートで頻繁に壊れることです。

次のような独自のカスタムメタボックスを使用して、同様のソリューションを実装することができました。

  • タイトル(テキストフィールド)
  • 画像(画像URLのテキストフィールド)
  • 埋め込みコード(テキスト領域)
  • 説明(テキスト領域)
  • スライドを非表示にする(スライドを削除せずに一時的に非表示にするためのチェックボックス)

この実装では、複数のTinyMCEフィールドや画像ドロップダウンボックスを機能させることはできません。 TinyMCEコードは、最初のメタボックスの増分コピーを作成するコードを追加するまではうまくいくようです。この時点で、TinyMCEボタンがあるべきフィールドの真上にこのエラーが表示されます:Warning: array_Push() [function.array-Push]: First argument should be an array...

また、現時点では、各スライドにビデオや画像をEITHERに入れることを私の作家に頼っていますが、それでも問題ありません。スライドショーテンプレートの条件付き表示文に関連付けられています。

サイドパネルの内蔵の[Featured Image]ボックスを使用して画像のアップロードを処理していますが、書き込みパネルの上部にある[Upload Images]というカスタムメタボックスを気にする必要はありません。

最終的に私はこれに似たスライドショーを探しています: http://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html 。スライドのコンテンツとして、写真の代わりにビデオを使用できるようにしたいと思います。私は私の作家のための直感的で使いやすい管理パネルを必要とします(彼らは非常に技術に精通しているわけではなく、htmlおよび/またはショートコードを使って信頼できません)。念のために例から明らかではない、すべてのスライドは新しいページビューを生成するべきです。

ドラッグアンドドロップの並べ替えは優先度の高いものではありませんが、クールです。私はこれを本当にうまく処理するプラグインを見つけました: SlideDeck 。残念ながら、このプラグインは私のニーズには適していませんが、スライドの順序を処理する方法は非常に滑らかです。サイドバーにある独立したメタボックスで、スライドを好きな順番にドラッグできます。これは、書き込みパネルに別のスライドメタボックスを追加する「スライドの追加」ボタンをクリックしてスライドを追加する方法でもあります。これがスクリーンショットです。

alt text

また、 wordpressリポジトリで実際に動作しているスクリーンショットのスクリーンショット _も表示されます。

これが私のすべてのコードです:

スライドショーの投稿タイプとスライドショーのページ付けを設定する機能: http://loak.Pastebin.com/g63Gf186

私のMetaboxesを基にした DeluxeBloggingTips.com (DBT)の元のコード: http://loak.Pastebin.com/u9YTQrxf

同じメタボックスの増分バージョンを提供するために私が変更したDBTコードのバージョン: http://loak.Pastebin.com/WtxGdPrN

TinyMCEの複数のインスタンスを可能にするために Chris Burbridge が作成したDBTコードの修正版: http://loak.Pastebin.com/Mqb3pKhx このコードではTinyMCE仕事する。

私のインクリメントと、投稿に添付されているすべての画像のドロップダウンリストから画像を選択できるようにするフィールドを組み込もうとしているBurbridgeのコードの私の修正: http://loak.Pastebin.com/xSuenJTK この試みでは、TinyMCEは壊れていてドロップダウンは機能しません。

これはおそらく問題にはなりませんが、ご参考までに、カスタム投稿メタから埋め込みコードを取得し、サイズを変更して投稿に挿入するために使用するコードを次に示します。 http:// loak。 Pastebin.com/n7pAzEAw

これは、プロジェクトの現在の状況を反映し、コメントに投稿された質問に答えるための元の質問の編集版です。これに賞金を置いてくれた Chris_O に感謝します。また、{ ThemeHybrid.com forum でたくさんのことを手伝ってくれた RarstJustin に感謝します。私はこれに何時間も費やしたし、立ち往生している(私はこの質問に一人で数時間を費やした)。任意の助けは大歓迎です。

15
matt

物事の外観から、あなたの最も安全な賭けと最も簡単な方法はあなたの使用のために特にMore Fieldsプラグインをforkすることでしょう。私があなたのフォークが必要としているのを見ることができる2つの最大の特徴は、フィールド「ファクトリー」とドラッグアンドドロップインターフェースです。

複数のフィールド

私の提案は WordPress Widgetクラス を見て、それをあなたのフィールドファクトリのモデルとして使うことです - 基本的に、あなたがそれのためにフレームワークを構築したらフィールドの複数のインスタンスを作成する能力を借りる。

これがサイドバーで複数のウィジェットがどのように機能するかの中核です。

  • WP_Widgetクラスを拡張して、各ウィジェットのコードを1回定義します。
  • それから、あなたは望むだけの数のウィジェットのコピーを作成することができます
    • 各ウィジェットの詳細は、シリアル化されたデータとしてオプション表に格納されています
  • 各ウィジェットをカスタマイズし、簡単なdeleteコマンドでそれらを削除し、そしてAppearanceのドラッグアンドドロップインターフェースを通してそれらの位置を明示的に設定することができます。

Drag-and-drop

もう一度、私はインスピレーションを得るためにWordPressウィジェットシステムを探すことを勧めます。ここにはかなり直感的なドラッグアンドドロップインターフェースがすでに設定されているので、他の場所で同じコードの大部分を再利用するのはかなり簡単でしょう。あなたが本当に空想を得たいなら、あるいは、あなたは別のカスタムメタフィールドの中にあなた自身のドラッグアンドドロップシステムを実装することができます。

そのため、各スライドは投稿にリンクされたカスタムメタボックスによって定義されます。スライドの順番は、投稿にもリンクされている個別のカスタムメタボックスによって設定されます。スライドの更新をAJAXで送信することをお勧めします。そうすれば、情報に基づいてスライドの順序のメタボックスを動的に更新できます(これにより、手動で "update"を押す必要がなくなります) ).

jQuery UIには、このカスタムメタボックス内で目的に合わせて簡単に操作できる優れた " draggable "インターフェイスがあります。難しい部分はインターフェースを構築していません、それは一貫しています、 正確 メタボックスとページの他の場所にあるスライドメタボックスのコレクションの間のコミュニケーション。

要約すれば

私があなたの投稿から集めたのは、あなたにはやや実用的な解決策があるということです。

  • [その他のフィールド]ウィジェットを使用してカスタム投稿タイプに15個のカスタムフィールドを追加しましたが、セット番号ではなく 動的 フィールドを追加/削除します。
  • スライドが順番にロードされるように、これらのカスタムフィールドの順序を調整する方法が必要です。

私がこれに取り組む方法は私が新しいカスタムメタフィールドを作成するために何度も使用できるクラスにカスタムメタ作成プロセスを抽象化することです。それから、クラスを拡張して、スライド用とスライド構造用の2種類のメタボックスを初期化します。私はまた、新しいスライドメタボックスを動的に作成する機能をスライド構造メタボックスに組み入れたいと思います(スライドメタボックスには独自の「削除」アクションが含まれます)。

スライドショー全体はスライドメタボックスではなく、スライド構造メタボックスによって投稿用のカスタムメタフィールドに格納されます。カスタムメタはギザギザ配列になり、各スライドはその中の配列として表されます - 順に 。構造メタボックスでスライドショーの順序をカスタマイズすると、配列が再編成され、投稿メタが再保存されます。このようにして、スライドショーにアクセスしたいときに読み返すためのメタ値は1つだけです。

SlideDeck、More Fields、そしてこれまでにまとめたカスタムコードの間に、すでにほとんどのソリューションが用意されています。すべてを同時に機能させる必要があります。私は、JavaScriptの装飾を追加する前に、まずルート実装を停止することに集中します。スライドを動的に作成、変更、保存、削除することは、リッチテキストエディタIMOよりも重要です。それを最初に解決してください。それから注文システムを降ろしなさい。 それで あなたはTinyMCEの複数のインスタンスがそのページで動くようにすることに集中することができます。

6
EAMann

私はこれを見つけました。それはまさにあなたが探しているものです - > http://pippinsplugins.com/drag-and-drop-order-for-plugin-options/

0
Ben Racicot