web-dev-qa-db-fra.com

Pages avec 2 colonnes

J'ai examiné de nombreux plugins disponibles, mais ils semblent tous trop difficiles à utiliser ou ne fournissent pas assez de flexibilité.

Plugins que j'ai déjà essayés:

  • WP Post Columns
  • Magazine Columns
  • Colonnes WP
  • WP Easy Columns

J'en ai aussi consulté une qui permettait des barres latérales par page qui pourraient fonctionner, mais la colonne est distincte pour le contenu, ce qui la rend difficile à gérer et l'absence d'éditeur WYSIWYG. le rend difficile pour ceux qui ne connaissent pas HTML.

Ce que je tente d'atteindre:

Le projet sur lequel je travaille nécessite que les personnes chargées de la saisie du contenu puissent ajouter du contenu dans une colonne 3/4 du contenu principal et dans une colonne 1/4 du contenu informatif relatif au contenu principal. Le contenu de la colonne 1/4 changera en fonction de la page.

Pour la plupart des développeurs, il est simple d'écrire du code HTML pour le faire dans le contenu du message, mais les personnes qui ajouteront/modifieront le contenu ne connaissent pas le code HTML. Je recherche donc des alternatives. Je préférerais qu'ils n'aient pas à se souvenir de codes (ou de codes courts).

Pour compliquer les choses, j'ai 3 modèles: "1 colonne", "2 colonnes (1/4, 3/4)" et "2 colonnes (3/4, 1/4)".

La question:

Quelqu'un a-t-il proposé une solution simple à ce problème? Est-ce qu'il y a un plugin dont je ne suis pas au courant qui ajouterait la possibilité d'avoir plusieurs contenus (colonnes) pour une seule page? Ou y a-t-il quelque chose qui me permettrait d'ajouter un éditeur WYSIWYG aux widgets?

J'attends vos pensées et recommandations avec impatience.

pluginswidgetspagescolumns
2
indexdotphp

Voici une approche intéressante:

LE PLAN ET LA LOGIQUE:

Les champs personnalisés constituent une fonctionnalité intégrée qui répondra parfaitement à nos besoins. Nous pouvons définir un nouveau champ personnalisé, puis l’utiliser pour saisir et stocker nos données personnalisées. Nous pouvons ensuite utiliser un widget pour afficher ce contenu personnalisé dans la barre latérale de nos pages individuelles.

Exemple de champ personnalisé dans l'éditeur de publication

enter image description here

Problèmes possibles:

Il y a quelques problèmes à prendre en compte

  • Qu'un widget ait du contenu ou non, il est considéré comme une barre latérale active. Le problème est que nous ne voulons pas afficher le widget sur une autre page que la page de publication unique; nous souhaitons également masquer la barre latérale lorsque nous n’avons aucun autre widget et lorsque notre widget personnalisé est vide. Il n'y a pas de fonction de construction permettant de définir l'instruction conditionnelle is_active_sidebar() sur false ou de disposer d'une fonction similaire permettant de masquer une barre latérale lorsque nous avons une barre latérale avec un widget vide uniquement.

  • Certains thèmes n'ont pas la possibilité de basculer entre le mode pleine largeur et le mode normal avec barre latérale lorsque le statut d'une barre latérale passe de actif à inactif et inversement.

SOLUTIONS À NOTRE PROBLÈME:

Notre principal problème est de savoir comment masquer le widget lorsqu'il est vide ou si nous sommes sur une page qui n'est pas une page de publication unique. Notre plan ici serait de supprimer le widget personnalisé du tableau des widgets de barres latérales renvoyés via la fonction wp_get_sidebars_widgets() . Nous utilisons spécialement le filtre de construction sidebars_widgets .

Il est vraiment simple de déterminer la page sur laquelle nous nous trouvons en utilisant simplement l’énoncé conditionnel is_single().

Pour savoir si notre widget est vide ou non, la logique est assez simple. Nous aurons besoin d’une fonction d’aide pour obtenir la méta-valeur de l’affichage de notre dossier personnalisé sur des pages à un seul article. Cette fonction d'assistance sera utilisée par notre widget pour afficher le contenu. Maintenant, cette logique peut être utilisée pour déterminer si notre widget sera vide ou non, et en conséquence, nous pouvons masquer/supprimer le widget de la fonction wp_get_sidebars_widgets() utilisée par des fonctions telles que is_active_sidebar().

La question de l'affichage pleine largeur par rapport à l'affichage normal en fonction du statut d'une barre latérale est assez simple, et je ne vais pas entrer dans les détails ici. En bref, si vous regardez le thème vingt-quatorze, il utilise body_classes pour définir une classe CSS de full-width lorsque la barre latérale de contenu (sidebar-2) est vide. Cela signifie que la zone de contenu est définie sur 100% width ( si vous souhaitez l'appeler ainsi ) pour masquer l'espace vide à droite du contenu s'il n'y a pas de widgets dans la barre latérale. .

Voici la section responsable de cette

function twentyfourteen_body_classes( $classes ) {
    /* ...................*/

    if ( ( ! is_active_sidebar( 'sidebar-2' ) )
        || is_page_template( 'page-templates/full-width.php' )
        || is_page_template( 'page-templates/contributors.php' )
        || is_attachment() ) {
        $classes[] = 'full-width';
    }

    /* ...................*/

    return $classes;
}
add_filter( 'body_class', 'twentyfourteen_body_classes' );

Vous pouvez, à votre guise, consulter le CSS utilisé pour basculer entre la vue pleine largeur et la vue normale avec une barre latérale, et vous assurer de jouer avec les possibilités

LE CODE:

HELPER FUNCTION get_custom_field_content

Nous allons d’abord écrire notre fonction d’aide pour renvoyer le contenu personnalisé du champ personnalisé de la publication en vue unique. J'ai commenté le code, il sera donc facile à suivre

function get_custom_field_content( $key = '' )
{
    // Make sure this is a singel page, if not, return false
    if ( !is_single() )
        return false;

    // Make sure we have a custom field key value, if not, return false
    if ( !$key )
        return false;

    // We have made it this far, so let sanitize the $key input
    $key = filter_var( $key, FILTER_SANITIZE_STRING );

    // OK, we've come this far, all our conditions checked out, lets get the current post ID
    $current_post_ID = get_queried_object_id();

    // Lets us now get and return our custom post meta value
    $custom_content = get_post_meta( 
        $current_post_ID, // Current post ID to get post meta from
        $key, // Custom field to get value from
        true // Return single value
    );
    return $custom_content;
}

Cette fonction sera utilisée dans notre widget pour obtenir le contenu personnalisé, puis l'afficher. Le paramètre $key dans la fonction sera le nom du champ personnalisé, dans notre exemple, il s'agira de custom_content. Cette fonction sera également utilisée par notre fonction de filtrage pour déterminer si notre widget est vide et pour supprimer notre widget de nos barres latérales dans une instruction conditionnelle.

LE WIDGET:

Ce notre widget, qui aura un champ où vous devez entrer le nom du champ personnalisé dans le champ spécifié. Encore une fois, le code est commenté pour le rendre facile à suivre

/**
 * RelatedContentWidget widget class
 *
 * Displays posts from a selected category
 *
 * @since 1.0.0
*/
class RelatedContentWidget extends WP_Widget 
{

    public function __construct() 
    {
        parent::__construct(
            'widget_related_content', 
            _x( 'Related Content Widget', 'Related Content Widget' ), 
            [ 'description' => __( 'Display a list of related content.' ) ] 
        );
        $this->alt_option_name = 'widget_related_content';

        add_action( 'save_post', [$this, 'flush_widget_cache'] );
        add_action( 'deleted_post', [$this, 'flush_widget_cache'] );
        add_action( 'switch_theme', [$this, 'flush_widget_cache'] );
    }

    public function widget( $args, $instance ) 
    {
        $cache = [];
        if ( ! $this->is_preview() ) {
            $cache = wp_cache_get( 'widget_rel_content', 'widget' );
        }

        if ( ! is_array( $cache ) ) {
            $cache = [];
        }

        if ( ! isset( $args['widget_id'] ) ) {
            $args['widget_id'] = $this->id;
        }

        if ( isset( $cache[ $args['widget_id'] ] ) ) {
            echo $cache[ $args['widget_id'] ];
            return;
        }

        ob_start();

        $title            = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Related Content' );
        /** This filter is documented in wp-includes/default-widgets.php */
        $title            = apply_filters( 'widget_title', $title, $instance, $this->id_base );
        // This holds the custom field key that holds the custom content
        $custom_field_key = ( ! empty( $instance['custom_field_key'] ) ) ? $instance['custom_field_key'] : '';

        /**
         * Make sure we only run this on a singular page/single post. 
         * Also make sure that we have a value inside $custom_field_key
         */
        if (  $custom_field_key  
             && is_single() 
        ) { 

            /**
             * Get the custom field having our custom content
             * First make sure that the custom function get_custom_field_content() exists to avoid fatal errors
             */
            if ( function_exists( 'get_custom_field_content' ) ) {
                $custom_content = get_custom_field_content( 
                    $custom_field_key // The custom field we need to retrieve content from
                );

                // Make sure we actually have a value before we display anything
                if ( $custom_content ) {

                    echo $args['before_widget'];
                    if ( $title ) { 
                        echo $args['before_title'] . $title . $args['after_title'];
                    }               

                    // Display our current content
                    echo $custom_content;

                    echo $args['after_widget']; 

                }
            }
        }

        if ( ! $this->is_preview() ) {
            $cache[ $args['widget_id'] ] = ob_get_flush();
            wp_cache_set( 'widget_rel_content', $cache, 'widget' );
        } else {
            ob_end_flush();
        }
    }

    public function update( $new_instance, $old_instance ) 
    {
        $instance                      = $old_instance;
        $instance['title']             = filter_var( $new_instance['title'],            FILTER_SANITIZE_STRING );
        $instance['custom_field_key']  = filter_var( $new_instance['custom_field_key'], FILTER_SANITIZE_STRING );
        $this->flush_widget_cache();

        $alloptions = wp_cache_get( 'alloptions', 'options' );
        if ( isset($alloptions['widget_related_content']) )
            delete_option('widget_related_content');

        return $instance;
    }

    public function flush_widget_cache() 
    {
        wp_cache_delete('widget_rel_content', 'widget');
    }

    public function form( $instance ) 
    {

        $title            = isset( $instance['title'] )            ? esc_attr( $instance['title'] )            : '';
        $custom_field_key = isset( $instance['custom_field_key'] ) ? esc_attr( $instance['custom_field_key'] ) : '';
        ?>

        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'custom_field_key' ); ?>"><?php _e( 'Custom field key:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'custom_field_key' ); ?>" name="<?php echo $this->get_field_name( 'custom_field_key' ); ?>" type="text" value="<?php echo $custom_field_key; ?>" />
        </p>

    <?php
    }

}

add_action( 'widgets_init', function () 
{
    register_widget( 'RelatedContentWidget' );
});

Voici à quoi ressemblera notre widget en arrière-plan

enter image description here

FONCTION DU FILTRE:

Enfin, notre fonction d'assistance permet de supprimer le widget sur toutes les pages, à l'exception des pages à publication unique et chaque fois que le widget est vide. Encore une fois, le code est commenté pour le rendre facile à suivre

add_filter( 'sidebars_widgets', function ( $sidebars_widgets )
{
    // Return our filter when we are on admin screen
    if ( is_admin() )
        return $sidebars_widgets;

    // Widget we need to target. This should be the name/id we used to register it, in this case widget_related_content
    $custom_widget = 'widget_related_content';
    // Set our custom field key to get our custom content
    $custom_field_key = 'custom_content'; // Be sure to change this to your exact name

    /**
     * Only run the next block for all templates/pages except the single page. You can
     * adjust this as needed. 
     *
     * We also want to run this on a single page if our custom widget is empty
     */

    // Set a variable to test for single pages
    $single_post = false;
    // Set variable to hold the custom content
    $custom_content = '';

    /**
     * Check for a single page and if it is, check if we have custom content
     * We will use the custom function we have created, get_custom_field_content()
     * to run this conditions
     */
    if ( is_single() ) {
        if ( function_exists( 'get_custom_field_content' ) )
            $custom_content = get_custom_field_content( $custom_field_key );
        $single_post    = true;
    }

    // Stop and return $sidebars_widgets if we are on a single page and have custom content
    if ( $single_post && $custom_content )
        return $sidebars_widgets;

    // We have come this far, let us wrap this up
    // See if our custom content widget exists is any sidebar, if so, get the array index
    foreach ( $sidebars_widgets as $sidebars_key=>$sidebars_widget ) {
        // Skip the wp_inactive_widgets set, we do not need them
        if ( $sidebars_key == 'wp_inactive_widgets' )
        continue;

        // Only continue our operation if $sidebars_widget are not an empty array
        if ( $sidebars_widget ) {
            foreach ( $sidebars_widget as $k=>$v ) {
                /**
                 * Look for our custom widget, if found, unset it from the $sidebars_widgets array
                 * @see stripos()
                 */
                if ( stripos( $v, $custom_widget ) !== false )
                unset( $sidebars_widgets[$sidebars_key][$k] );
            } // endforeach $sidebars_widget
        } // endif $sidebars_widget
    } // endforeach $sidebars_widgets

    return $sidebars_widgets;
});

Et c'est tout ce dont nous avons besoin. En utilisant le thème vingt-quatorze, voici ce que vous verrez si nous avons du contenu personnalisé

enter image description here

et voici un post sans contenu personnalisé

enter image description here

4
Pieter Goosen

EDIT- cette réponse est ancienne, il existe de meilleures options.

quelques plugins - pods , champs magiques , modèle de champs personnalisés .

ou vous pouvez bricoler avec des méta-boîtes et des éditeurs Tinymce, voir cette réponse .

3
Milo

C'est quelque chose que je gérerais au niveau du modèle de thème. Vous indiquez que la personne qui entre dans le contenu doit faire les deux. Je suppose donc que l'auteur entre les deux sur le même message.

Sur le back-end, j'installerais le plugin Advanced Custom Fields . Ceci est juste pour vous éviter le casse-tête d'essayer d'ajouter une option de champ personnalisé WYSIWYG pour la barre latérale. C'est un processus relativement simple de créer cela et permet même certaines règles qui le rendent hautement personnalisé.

Dans le fichier de modèle content.php de ce type de message, vous utiliseriez le code suivant:

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : ?>
        <article>
            // Your Post Code Here
            <aside>
               <?php echo get_post_meta(get_the_ID(), 'sidebar_content', true); ?>
            </aside>
        </article>
    <?php endwhile; ?>
<?php endif; ?>

Ce code fera dans la balise article, puisque vous déclarez que son contenu est directement lié au contenu principal, c’est créer un aparté dans l’article, aller dans la table _postmeta avec l’ID de la publication en cours et rechercher la clé 'sidebar_content' (This est un nom que vous donnerez au champ dans ACF).

0
Cedon