カスタムメタボックスを使用してスライドショーのカスタム投稿タイプを作成するのに役立ちますか?


16

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

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

また、「スライドを追加」できるボタンが必要なので、クリックすると、最初の複製である「スライド」カスタムメタボックスが追加されますが、各カスタム投稿メタフィールドに増分番号が追加されます。現在、15個のメタボックスしかありませんが、スライドショーテンプレートは、5個のメタボックスのみが入力された場合、5個のスライドのみが表示されるように設定されています。

最後に、「ドラッグアンドドロップ」または注文番号を入力できる別のテキストフィールドを使用して、スライドの順序を変更できるようにします。

「More Fields」プラグインとRarstのコードヘルプを使用して、必要な場所でほとんど入手できました。「More Fields」プラグインでは、各メタボックスに次のフィールドがあります。

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

「More Fields」プラグインを使用してセットアップする方法のスクリーンショットを次に示します。

代替テキスト

これに関する問題は、「More Fields」は<?php delete_post_meta($post_id, $key, $value); ?>どこでも使用しないため、一度作成されたスライドを削除する方法がないことです。プラグインのもう1つの問題は、プラグインの信頼性が低く、更新時に頻繁に破損することです。

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

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

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

また、私はライターに各スライドのビデオまたは画像のいずれかを入力することを頼りにしていますが、それは大丈夫ですが、スライドを選択するラジオボタンを持っている方が良いかもしれません(おそらくデフォルトに画像)は、スライドショーテンプレートの条件付き表示ステートメントに関連付けられています。

書き込みパネルの上部にある「画像のアップロード」と簡単に言ったカスタムメタボックスは気にしませんが、サイドバーのビルトイン「Featured Image」ボックスを使用して画像のアップロードを処理しています。

:最終的に私はこれに似たスライドショーを探していますhttp://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html。私は、スライドのコンテンツとして、画像ではなくビデオを使用できるようにしたいと考えています。ライター向けの直感的で使いやすい管理パネルが必要です(HTMLやショートコードを使用した場合、技術に精通しておらず、信頼性も低くなります)。例から明らかでない場合に備えて、すべてのスライドで新しいページビューを生成する必要があります。

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

代替テキスト

また、wordpressリポジトリで実際のスクリーンショットを見ることができます

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

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

私がメタボックスを作成したDeluxeBloggingTips.com(DBT)の元のコード:http ://loak.pastebin.com/u9YTQrxf

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

TinyMCEの複数のインスタンスを許可するためにChris Burbridgeが作成したDBTコードの修正バージョン:http : //loak.pastebin.com/Mqb3pKhxこのコードでTinyMCE は機能します。

増分と、投稿に添付されているすべての画像のドロップダウンリストから画像を選択できるフィールドを組み込むことを試みるバーブリッジのコードの変更:http : //loak.pastebin.com/xSuenJTK この試みでは、TinyMCEが壊れており、ドロップダウンが機能しません。

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

これは、プロジェクトの現在のステータスを反映するために元の質問を編集したもので、コメントに投稿された質問に回答します。これに賞金をかけてくれたChris_Oに感謝します。また、ThemeHybrid.comフォーラムで多くのことを手伝ってくれたRarstJustinに感謝します。私はこれに何時間も費やしましたが、行き詰っています(この質問には数時間しかかかりません)。どんな助けも大歓迎です。


スケッチなどのように、全体像を示す単純な画像を描画できますか?あなたのニーズをよりよく理解するのに役立つと思います。
-hakre

下部にいくつかの例を追加しました。これで問題が十分に解決されない場合はお知らせください。
マット

まだはっきりしていませんか?
マット

誰でも?これはオンですか?
マット

@ハクレ、そこにいるの?
マット

回答:


6

物事の見地から、あなたの最も安全な賭けと最も簡単なルートは、あなたの使用のために特別にMore Fieldsプラグインをフォークすることです。フォークに必要な最大の2つの機能は、「工場」フィールドとドラッグアンドドロップインターフェイスです。

複数のフィールド

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

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

  • WP_Widgetクラスを拡張することにより、各ウィジェットのコードを一度定義します。
  • その後、必要なだけウィジェットのコピーを作成できます
    • 各ウィジェットの詳細は、シリアル化されたデータとしてオプションテーブルに保存されます
  • 各ウィジェットをカスタマイズし、簡単な方法で削除できます deleteコマンドで、外観のドラッグアンドドロップインターフェイスを使用して明示的に位置を設定できます。

ドラッグアンドドロップ

繰り返しになりますが、インスピレーションを得るにはWordPressウィジェットシステムをお勧めします。既にかなり直感的なドラッグアンドドロップインターフェイスが設定されているため、他の場所で同じコードのほとんどを再利用するのはかなり簡単です。または、本当におしゃれにしたい場合は、個別のカスタムメタフィールド内に独自のドラッグアンドドロップシステムを実装できます。

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

jQuery UIには、このカスタムメタボックス内で目的に合わせて簡単に操作できる優れた「ドラッグ可能な」インターフェイスがあります。難しい部分はインターフェイスを構築することではなく、メタボックスとページ上の他の場所にあるスライドメタボックスのコレクションとの間で一貫性のある正確な通信を取得することです。

要約すれば

あなたの投稿から私が集めたのは、あなたがいくぶん実行可能な解決策を持っているということです:

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

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

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

SlideDeck、More Fields、およびこれまでに作成したカスタムコードとの間で、ほとんどのソリューションを手に入れました。すべてを同時に連携させる必要があります。JavaScript装飾を追加する前に、まずルート実装をダウンさせることに焦点を当てます。スライドを動的に作成、変更、保存、および削除することは、リッチテキストエディターであるIMOよりも重要です。それを最初に解体してください。次に、注文システムを停止します。 その後、ページで動作するTinyMCEの複数のインスタンスを取得することに集中できます。


助けてくれてありがとう!現時点では、これは私のスキルセットから少し外れていますが、学習プロセスの良いガイドとして役立ちます。私は「クラス」を認識しており、メタボックスコードですでにクラスを使用していることを認識していますが、まだ理解していません。私が「知っている」別のことは完全に理解していませんが、配列の使用です。
マット

ファンダメンタルズを最初にダウンさせることについてのあなたのアドバイスは理にかなっていますが、私はこれを実稼働環境にできるだけ早く入れることを必要とするいくつかの現実世界の制約に立ち向かっています。 。プロジェクトを段階的に増やし、途中で松葉杖に頼るのは構わないが、このアプローチは明らかにスケーラブルである必要がある。それは私がこれを理解するまで、「複数のフィールド」プラグインを使用すると、しかし、私はと必ずその意志の仕事...ないんだけど、一時的な解決策となり得るように思わ言った
マット

1つのカスタムフィールドにスライドショー全体を保存するというアプローチ。すべてを1つのフィールドに入れる方が良いと本当に思いますか?これは無知に聞こえるかもしれませんが、小さな変更が行われるたびにwpがスライドショー全体を書き換えなければならない場合、エラーの余地がもっとあるように思えます。
マット

ショー全体を1つのメタフィールドに保存することで、問題の発生を防止および防止できます。複数のフィールドを選択、読み取り、ループすることを強制しないため、プレゼンテーションサイトでの時間を節約できます。ただし、1つのスライドで何かが壊れてDBに書き込まれると、スライドショー全体が壊れます。間違いなくトレードオフですが、私は常にスピードと開発のしやすさを選びます。
EAMann

サイトのフロントエンドの時間を節約すると言っていますか?一度に1つのスライドのみを表示している場合、なぜでしょうか?
マット

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.