web-dev-qa-db-fra.com

Thème Customizer: comment créer un panneau à plusieurs niveaux

Existe-t-il un moyen de créer un sous-panneau de niveaux profonds dans Theme Customizer (comme des racines de plantes)? Le thème que j'ai développé semble être plus compliqué. Je pense que si nous pouvons créer un sous-groupe de niveaux profonds, notre page de personnalisation ne semblera pas compliquée, notre utilisateur personnalisera notre thème plus facilement et nous pourrons rendre le thème WordPress beaucoup plus compliqué. Les images ci-dessous décrivent mon idée ...

 Theme Customizer concept that I found on online tutorials  Here is sub panel that I wan to create 

Malheureusement, j'ai essayé de chercher à propos de celui-ci, mais je ne pouvais trouver qu'un moyen de créer un panneau à un niveau dans le personnalisateur de thèmes. Voici ce que j'ai trouvé sur un autre fil , impossible de trouver un moyen de créer sous-panneau plus profond. Pourriez-vous s'il vous plaît masquer un peu de lumière dans ma vie?

Update : le code suivant est un code que j’utilise pour créer Panel et Control, comme l’image n ° 1 qui est un panneau à un seul niveau. ils fonctionnent tous bien.

$wp_customize->add_panel('panel1',
        array(
            'title' => 'Panel 1',
            'priority' => 1,
            )
        );
        $wp_customize->add_section( 'section1',
            array(
                'title' => 'This is section 1',
                'priority' => 1,
                'panel' => 'panel1'
                )
            );
            $wp_customize->add_setting('field1', array('default' => 'default text'));
            $wp_customize->add_control('field1', array(
                'label' => 'Text field',
                'section' => 'section1',
                'type' => 'text',
                )
            );

Mon problème est que je veux créer un nouveau panneau et les laisser coller dans un autre panneau, ce qui le fera ressembler à la hiérarchie des racines (image n ° 2). Je pense que si nous pouvons faire quelque chose comme ça, nous pourrons en faire beaucoup plus. puissant personnalisateur de thème. J'ai ensuite essayé d'accomplir cette idée et de réécrire mon code. Malheureusement, cela n'a pas fonctionné. S'il vous plaît vérifier le suivant.

$wp_customize->add_panel('panel1',
        array(
            'title' => 'Panel 1',
            'priority' => 1,
            )
        );
        $wp_customize->add_section( 'section1',
            array(
                'title' => 'This is section 1',
                'priority' => 1,
                'panel' => 'panel1'
                )
            );
            $wp_customize->add_setting('field1', array('default' => 'default text'));
            $wp_customize->add_control('field1', array(
                'label' => 'Text field',
                'section' => 'section1',
                'type' => 'text',
                )
            );
        // I used the code below with a little hope that it will help me accomplish my idea, but it didn't work T^T.
        $wp_customize->add_panel('panel1_1',
            array(
                'title' => 'Panel 1.1',
                'priority' => 2,
                'panel' => 'panel1' // I tried adding this line of code in order to let it depend on another panel
                )
            );
            $wp_customize->add_section( 'section1_1',
            array(
                'title' => 'This is section 1',
                'priority' => 1,
                'panel' => 'panel1_1'
                )
            );
            $wp_customize->add_setting('field1_1', array('default' => 'default text'));
            $wp_customize->add_control('field1_1', array(
                'label' => 'Text field',
                'section' => 'section1_1',
                'type' => 'text',
                )
            );

Pourriez-vous me donner la solution, je ne vois pas comment faire en sorte que le panneau ressemble à la hiérarchie des racines. Toute aide serait appréciée :)

theme-developmentthemestheme-customizer
4
Pakpoom Tiwakornkit

Pour tous ceux qui viennent ici à la recherche de cela, j'ai été capable de le faire après avoir lutté avec cela pendant quelques heures.

Le code est un peu volumineux, je ne voulais donc pas poster ici (les mods sont libres de me laisser maintenant si cela serait mieux), mais j'ai créé un Gist: https://Gist.github.com/OriginalEXE/9a6183e09f4cae2f30b006232bb154af

En gros, cela vous permet de spécifier les propriétés panel sur les panneaux (pour les panneaux imbriqués sous les panneaux) et la propriété section sur les sections (pour les sections imbriquées sous les sections).

Remarques:

  • Le code php inclut un exemple de création de panneaux/sous-panneaux/sections/sous-sections. Il est à noter que vous instanciez de nouveaux panneaux/sections à l'aide de la sous-classe que j'ai créée, au lieu d'appeler directement $wp-customize->add_panel et de lui transmettre un tableau de configuration.
  • Les fichiers JS et CSS n'ont pas besoin d'être modifiés. Si vous vous demandiez pourquoi CSS est nécessaire, il est là pour corriger l'animation lors de la transition de panneaux en sous-panneaux et de sections en sous-sections.
  • Lors de la création de sous-sections, veillez également à ajouter une propriété panel qui devrait être identique à la panel de la section parent.

J'ai essayé de le faire avec le moins de code possible et sans rien oublier qui risquerait de foirer le code. Un peu de refactoring pourrait être nécessaire s’ils changeaient de logique dans les versions futures, je l’ai rendu aussi futur que possible.

3
OriginalEXE

Pour le moment, il n'est tout simplement pas possible d'avoir plus que des panneaux, des sections et des contrôles. L'élargissement de ce système nécessiterait une programmation étendue chez WP. Étant donné la taille étroite du personnaliseur, vous pourriez également vous perdre si vous avez autant de panneaux imbriqués. Donc ce n'est probablement pas souhaitable non plus.

2
cjbj