web-dev-qa-db-ja.com

1ページに複数のコンテンツ領域

複雑なコンテンツの問題があります。各ページは複数のセクション（未知数）を持つことができ、各セクションは複数のコンテナーを持つことができ、各コンテナーは複数のコンテンツブロック（1、2、または3）を持つことができます。

現在、ショートコードを使用した理論的な解決策を得ていますが、可能であれば、コンテンツブロックごとにWYSIWYGエディタを提供することで、UIを使用してこれを解決したいと思います。

セクション：セクションはいくつでも存在できます（現実的/許容される最大数は10になります）。コンテナ：セクションには任意の数の行を含めることができます（現実的/許容可能な最大数は5です）。コンテナ：行は、それが含む必要がある列の数を知っている必要があります。コンテンツブロック：行には1、2、または3列を含めることができます。

ショートコードの解決策は次のようになります。

[section id="summary"] //id is required but can be anything (no spaces)
   [container blocks="1"] //row can have 1, 2 or 3 columns
      [block]
      .content-block
      [/block]
   [/container]
[/section]
[section id="find us"] //id is required but can be anything (no spaces)
   [container blocks="3"] //row can have 1, 2 or 3 columns
      [block]
      .content-block
      [/block]
      [block]
      .content-block
      [/block]
      [block]
      .content-block
      [/block]
   [/container]
[/section]
[section id="team"] //id is required but can be anything (no spaces)
   [container blocks="2"] //row can have 1, 2 or 3 columns
      [block]
      .content-block
      [/block]
      [block]
      .content-block
      [/block]
   [/container]
[/section]

誰もが私がこれに取り組むことができる方法について何か提案がありますか？

ありがとう、Josh

customizationshortcodecontent
3
Josh

これは、 Advanced Custom Fieldsの "柔軟なコンテンツ" の機能の完璧な使用のように私には思えます。柔軟なコンテンツフィールドを使用すると、複数のレイアウトを定義し、それらをページに追加したり、必要に応じて任意の順序で1つずつ投稿したりできます。各レイアウトは、テキストフィールド、画像、WYSIWYGエディタ、およびその他のフィールドタイプの組み合わせにすることができます。

これはクライアントサイドの見事なUIであり、一度ハングしたら、テンプレートにカスタムフロントエンドを簡単に作成できます。

これはプレミアムプラグインですが、私は何年もの間このような種類のインターフェースを構築してきました、そしてそれは本当にうまくいきます。私はそれに似たものは他にはありません。

3
Dalton

大量の余分なコンテンツブロックを編集画面に追加するのではなく、コンテンツエディタが投稿コンテンツの一部を強調表示できるようにビジュアルエディタをコーディングする方が簡単です。

これが私が使っているもので、その基本は私がもともとCodexから得たものだと思います。

// Callback function to insert 'styleselect' into the $buttons array
function wpse241267_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

add_filter('mce_buttons_2', 'wpse241267_mce_buttons_2');

これは、ビジュアルエディタボタンの2行目の左端にあるスタイルドロップダウンメニューを有効にするだけです。

今肉のために：

function wpse241267_mce_insert_formats( $init_array ) {  

    $style_formats = array(  
        // Each array child is a format with its own settings

        array(  
            'title' => 'Find Us Block',  
            'block' => 'div',  
            'classes' => 'find-us',
            'wrapper' => true,
            'exact' => true,

        ),
    );  

    // Insert the array, JSON ENCODED, into 'style_formats'

    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 

add_filter( 'tiny_mce_before_init', 'wpse241267_mce_insert_formats' );

必要に応じてクラスの代わりにIDを使用できますが、ユーザーが1つのページに複数のページを追加するのを妨げるものは何もないと思います。

それからビジュアルエディタであなたはいくつかのコンテンツをハイライトし、ドロップダウンからこのスタイルを適用することができ、そしてハイライトされたコンテンツはクラスfind-usを持つdivで囲まれるでしょう。

exact引数は、エディタが複数の隣接ブロックをマージするのを防ぎます。場合によってはこれを削除することをお勧めします。

1
Andy Macaulay-Brook