web-dev-qa-db-fra.com

Plusieurs zones de contenu par page

J'ai un problème de contenu complexe. Chaque page peut avoir plusieurs sections (nombre inconnu), chaque section peut avoir plusieurs conteneurs, chaque conteneur peut avoir plusieurs blocs de contenu (1, 2 ou 3).

J'ai actuellement une solution théorique avec des codes courts, mais j'aimerais résoudre ce problème avec l'interface utilisateur si possible en fournissant des éditeurs wysiwyg pour chaque bloc de contenu.

Sections: Il peut y avoir un nombre quelconque de sections (un maximum réaliste/acceptable serait de 10). Conteneurs: une section peut contenir un nombre quelconque de lignes (un maximum réaliste/acceptable serait de 5). Conteneurs: une ligne doit savoir combien de colonnes elle doit contenir. Blocs de contenu: une ligne peut contenir 1, 2 ou 3 colonnes.

La solution de shortcode ressemble à ceci:

[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]

Quelqu'un a-t-il des suggestions sur la manière de procéder?

Merci josh

customizationshortcodecontent
3
Josh

Cela me semble être une utilisation parfaite de "Contenu flexible" fonctionnalité personnalisée pour les champs personnalisés avancés. Les champs de contenu flexibles vous permettent de définir plusieurs mises en page, puis de les ajouter à une page ou de les publier une par une, dans l'ordre ou la combinaison dont vous avez besoin. Chaque mise en page peut être une combinaison de champs de texte, d'images, d'éditeurs wysiwyg et d'autres types de champs.

C'est une interface utilisateur brillante côté client, et il est facile de créer une interface frontale personnalisée dans votre modèle une fois que vous avez compris le principe.

C'est un plugin premium, mais je construis ce type d'interfaces depuis de nombreuses années et cela fonctionne vraiment bien. Je n'ai rien trouvé de pareil.

3
Dalton

Il est plus facile de coder Visual Editor afin que vos éditeurs de contenu puissent mettre en évidence des parties du contenu de la publication plutôt que d'essayer d'ajouter un grand nombre de blocs de contenu supplémentaires à l'écran d'édition.

Voici ce que j’utilise, les bases dont je pense que j’ai tiré du Codex, il ya très longtemps.

// 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');

Cela n'active que le menu déroulant Style à l'extrémité gauche de la deuxième rangée de boutons de Visual Editor.

Maintenant pour la viande:

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' );

Vous pouvez utiliser des identifiants au lieu de classes si vous le souhaitez, mais je ne pense pas que rien puisse empêcher un utilisateur d'ajouter plus d'un élément dans une page.

Ensuite, dans Visual Editor, vous pouvez mettre en surbrillance du contenu, appliquer ce style à partir du menu déroulant et le contenu en surbrillance sera entouré d'une div avec la classe find-us.

L'argument exact empêche l'éditeur de fusionner plusieurs blocs adjacents. En fonction de votre cas, vous voudrez peut-être supprimer ceci.

1
Andy Macaulay-Brook