web-dev-qa-db-fra.com

Afficher/masquer les widgets dans le tableau de bord en fonction des champs personnalisés avancés actuels

Donc, dans le but de faire avancer mon nouveau projet, je cherche un moyen d’enregistrer et de désenregistrer des zones de widgets en fonction du fichier d’en-tête que je charge via ACF Pro dans la page Options.

Quelques informations pour mettre tout le monde au courant: J'utilise ACF Pro (Advanced Custom Fields Pro) pour sélectionner et appeler les dispositions d'en-tête. Par exemple: Sélectionner "Noir" dans la liste déroulante appelle header-black.php et est appliqué globalement comme en-tête de site lors de l'enregistrement de ma sélection.

Ce que j'essaie maintenant de comprendre, c'est comment enregistrer des widgets exclusifs à un en-tête sélectionné (tel que "Noir") et faire en sorte que les widgets "Noir" d'en-tête apparaissent dans la page d'administration du widget en tant que seuls widgets disponibles.

Exemple: Sélectionnez le style d'en-tête "Noir" comportant deux zones de widgets (En-tête Black Widget à droite et En-tête Black Widget à gauche), qui deviennent les deux seuls widgets d'en-tête disponibles pouvant être utilisés dans la page d'administration du widget.

Un scénario par exemple: Dans mon premier exemple, j’ai sélectionné le style d’en-tête "Noir", alors je souhaite maintenant passer à une autre structure d’en-tête appelée "Slim". Maintenant, je sélectionne le style d'en-tête "Slim" qui comporte trois zones de widget (En-tête Slim Widget 1, En-tête Slim Widget 2, En-tête Slim Widget 3) et, lors de l'enregistrement de mon choix d'en-tête, les deux widgets du style "En-tête" vont loin et être remplacé par le style en-tête "Slim" trois zones de widgets.

J'ai creusé pendant quelques heures et ai trouvé une autre question ici qui touche en quelque sorte à ce que je veux accomplir, mais je ne comprends toujours pas comment l'exécuter correctement car la réponse donnée a été modifiée/mise à jour et n'a fait qu'ajouter à ma confusion.

Voici le lien vers l'autre fil que j'ai trouvé ici: Comment enregistrer des menus et des widgets conditionnellement basés sur des options/paramètres de thème?

J'espère que vous pourrez m'aider à trouver cette affaire.

Bonne année! Rayon

functionstheme-developmentwidgetsadvanced-custom-fieldsconditional-content
3
AlonsoF1

Tu es chanceux. En fait, je cherchais un prétexte pour faire cela dans l’un de mes projets. J'ai finalement pris le temps d'ajouter cette idée à l'un de mes thèmes. :)

Vous pouvez prendre cette idée et courir avec elle. C'est un exemple très basique et simple, mais il fait ce que vous voulez qu'il fasse.

Cela ne couvre pas les options de thème. Cela suppose que vous ayez déjà géré vos paramètres de thème (ce qui semble être le cas).

Étape 1 - Parlez à WordPress de "zones de widget" pris en charge par votre thème. 

if ( ! function_exists( 'mbe_theme_register_widget_areas' ) ) {

    /**
     * This function tells WordPress that your theme supports up to 4 Widget Areas:
     * 1.) Header Column 1
     * 2.) Header Column 2
     * 3.) Header Column 3
     * 4.) Header Column 4
     *
     * Allows Widgets to be placed in various places within the theme header.
     *
     * @author Michael Ecklund
     * @author_url http://www.michaelbrentecklund.com/
     *
     * @return bool
     */
    function mbe_theme_register_widget_areas() {

        $widget_areas = array();

        $widget_areas[] = array(
            'name' => 'Header Column 1',
            'id'   => 'mbe-theme-widget-area-header-column-1'
        );

        $widget_areas[] = array(
            'name' => 'Header Column 2',
            'id'   => 'mbe-theme-widget-area-header-column-2'
        );

        $widget_areas[] = array(
            'name' => 'Header Column 3',
            'id'   => 'mbe-theme-widget-area-header-column-3'
        );

        $widget_areas[] = array(
            'name' => 'Header Column 4',
            'id'   => 'mbe-theme-widget-area-header-column-4'
        );

        foreach ( $widget_areas as $widget_area ) {

            $default_args = array(
                'before_widget' => '<div id="%1$s" class="widget mbe-theme-widget %2$s">',
                'after_widget'  => '</div><!-- end .mbe-theme-widget -->',
                'before_title'  => '<div class="mbe-theme-widget-title">',
                'after_title'   => '</div><!-- end .mbe-theme-widget-title -->'
            );

            $args = wp_parse_args( $widget_area, $default_args );

            register_sidebar( $args );

        }

        return true;

    }

    add_action( 'widgets_init', 'mbe_theme_register_widget_areas' );

}

Le code ci-dessus doit être collé dans le fichier functions.php de votre thème WordPress actuellement actif.

Étape 2 - Créez les fichiers de modèle pour chaque type d'en-tête.

Dans cet exemple, vous souhaiterez créer 4 nouveaux fichiers de modèle dans le répertoire racine de votre thème WordPress actuellement actif:

  1. header-column-1.php
  2. header-column-2.php
  3. header-column-3.php
  4. header-column-4.php

Étape 3 - Préparez chaque nouveau widget de fichier de modèle d'en-tête.

Dans cet exemple, je vais illustrer un modèle d'en-tête de 4 colonnes (header-column-4.php):

<?php


# BoF Header Column 1
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-1' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-1' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #1' . PHP_EOL;

}

echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 1


# BoF Header Column 2
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-2' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-2' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #2' . PHP_EOL;

}

echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 2


# BoF Header Column 3
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-3' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-3' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #3' . PHP_EOL;

}
echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 3


# BoF Header Column 4
echo '<section class="col-lg-3">' . PHP_EOL;

if ( is_active_sidebar( 'mbe-theme-widget-area-header-column-4' ) ) {

    // Display Widgets
    dynamic_sidebar( 'mbe-theme-widget-area-header-column-4' );

} else {

    // No Widgets, display default fallback markup.
    echo 'Default Column #4' . PHP_EOL;

}

echo '</section><!-- end .col-lg-3 -->' . PHP_EOL;
# EoF Header Column 4


echo '<div class="clearfix"></div>' . PHP_EOL;

?>

Étape 4 - Éditez header.php dans votre thème actif pour activer la sortie d'en-tête dynamique. 

<?php

echo '<section class="container">' . PHP_EOL;
echo '<section class="row">' . PHP_EOL;

$header_template = get_option( 'mbe-theme-header-template' ); // Retrieve theme option configured by user.

if ( ! $header_template ) {
    $header_template = 'column-3'; // Fallback: Set a default header template.
}

get_template_part( 'header', $header_template );// Load the header template.

echo '</section><!-- end .row -->' . PHP_EOL;
echo '</section><!-- end .container -->' . PHP_EOL;

?>
5
Michael Ecklund