web-dev-qa-db-fra.com

Option de thème: possibilité de choisir parmi plusieurs en-têtes prédéfinis

Je suis en train de créer mon premier thème et j'utilise Quark comme thème de départ.

Je voudrais que le thème ait diverses options, l'une étant la sélection d'en-tête. (Disons 5 en-têtes différents - lorsqu'il est sélectionné, l'en-tête indique le site entier.)

J'aimerais également implémenter divers en-têtes dont le code est disponible sur codepen, mais ce qui me pose problème, c'est de donner aux utilisateurs la possibilité de sélectionner l'en-tête de leur choix.

Supposons que je veuille d'abord mettre en oeuvre ce menu: http://codepen.io/WhiteWolfWizard/pen/CJLeu .

J'ai lu la fonction Codex for get header et j'ai également vu ceci:

<?php
if ( is_home() ) :
    get_header( 'home' );
elseif ( is_404() ) :
    get_header( '404' );
else :
    get_header();
endif;
?>

Cela ne convient pas à ce que j'essaie de faire, car il affiche un en-tête page par page.

Je me suis donc demandé: où devrait figurer le code des différents en-têtes et comment puis-je donner aux utilisateurs la possibilité de sélectionner les en-têtes? (avec l'arborescence des options, l'API Customizer ou une meilleure solution si vous en avez)

Merci

PS: Je suis un débutant à cela.

theme-optionsheaderstheme-customizer
2
Tryna Code

Vous avez donc d’abord besoin d’options de personnalisation. Vous pouvez mettre ceci dans customizer.php et inclure ce fichier dans votre functions.php ou vous pouvez simplement le mettre directement dans functions.php.

add_action('customize_register', 'mytheme_customize_register');

function mytheme_customize_register( $wp_customize ) {

    /**
    ------------------------------------------------------------
    SECTION: Header
    ------------------------------------------------------------
    **/
    $wp_customize->add_section('section_header', array(
        'title'          => esc_html__('Header', 'mytheme'),
        'description'    => esc_attr__( 'Choose one of three different Header Styles', 'mytheme' ),
        'priority'       => 1,
    ));

        /**
        Header Styles
        **/
        $wp_customize->add_setting( 'header_styles', array(
            'default'    => '',
        ));
        $wp_customize->add_control( 'header_styles', array(
            'label'      => esc_html__( 'Header Styles', 'mytheme' ),
            'section'    => 'section_header',
            'type'       => 'select',
            'choices'    => array(
                'style_1'    => esc_html__('Header 1', 'mytheme'),
                'style_2'    => esc_html__('Header 2', 'mytheme'),
                'style_3'    => esc_html__('Header 3', 'mytheme'),
            ),
        ));

}

Cela vous donnera un menu déroulant dans votre personnaliseur.

enter image description here

Avec cela, vous pouvez, où que se trouve votre balise d’élément d’entête <header>, ajoutez un style ou même un fichier séparé si vous le souhaitez.

Supposons que votre en-tête se trouve dans un fichier appelé header_style_1.php situé dans un dossier partials et qu'il est inclus dans le fichier header.php en tant que

get_template_part('partials/header_style_1);

Vous pouvez ajouter des fichiers header_style_2.php et header_style_3.php et dans votre header.php, ajoutez simplement:

$header_style = get_theme_mod('header_styles', 'style_1');

get_template_part('partials/header_'.$header_layout);

Cela récupérera tous les modèles que vous avez créés pour votre en-tête.

J'espère que cela t'aides.

1
dingo_d

Avec Option Tree, vous pouvez l'utiliser comme suit:

Disons que vous allez fournir 5 conceptions d'en-tête différentes. Créez 5 fichiers d'en-tête:

  1. header.php
  2. header-two.php
  3. header-three.php
  4. header-four.php
  5. header-five.php

Maintenant, vous pouvez le vérifier comme:

if (ot_get_option('your_header_selection_key') == 'one'){
    get_header();
} elseif (ot_get_option('your_header_selection_key') == 'two'){
    get_header('two');
} elseif (ot_get_option('your_header_selection_key') == 'three'){
    get_header('three');
} elseif (ot_get_option('your_header_selection_key') == 'four'){
    get_header('four');
} elseif (ot_get_option('your_header_selection_key') == 'five'){
    get_header('five');
}

Vous pouvez envelopper ces codes dans une fonction dans functions.php et appeler à partir de modèles de page au lieu de les écrire sur chaque fichier de modèle.

Ceci est juste une idée. Vous pouvez utiliser l'API Customizer avec cette même idée, si vous n'utilisez pas Option Tree.

0
тнє Sufi