web-dev-qa-db-fra.com

Création d'un curseur d'en-tête/d'image rotatif à l'aide de la personnalisation du thème

Donc, j'apprends WP et je veux créer un curseur d'image en rotation pour l'en-tête ( comme dans ceci ) en utilisant API de personnalisation de thème . Mais je ne peux pas comprendre comment et quel paramètre dois-je utiliser pour prendre les images et les stocker pour une animation ultérieure en HTML/JS. Aidez-moi?

imagesthemescustomization
1
laggingreflex

Nous pouvons faire ça! Tout d'abord, vous devrez ajouter une section personnalisée sur le thème Customizer, contenant tous les téléchargements d'images (nous en utiliserons 3 pour cet exemple):

add_action( 'customize_register', 'themename_customize_register' );
function themename_customize_register($wp_customize) {  

$wp_customize->add_section( 'slides', array(
    'title'          => 'Slides',
    'priority'       => 25,
) );

$wp_customize->add_setting( 'first_slide', array(
    'default'        => '',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'first_slide', array(
    'label'   => 'First Slide',
    'section' => 'slides',
    'settings'   => 'first_slide',
) ) );

$wp_customize->add_setting( 'second_slide', array(
    'default'        => '',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'second_slide', array(
    'label'   => 'Second Slide',
    'section' => 'slides',
    'settings'   => 'second_slide',
) ) );

$wp_customize->add_setting( 'third_slide', array(
    'default'        => '',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'third_slide', array(
    'label'   => 'Third Slide',
    'section' => 'slides',
    'settings'   => 'third_slide',
) ) );
}

L'utilisation de ce code ajoutera une nouvelle section, contenant 3 téléchargements de fichiers. Pour l'instant, nous utilisons uniquement des images. Plus tard, vous pourrez revenir en arrière et ajouter des descriptions, des URL cibles, etc. Une fois que vous avez téléchargé trois diapositives, il vous suffit de les appeler dans vos modèles.

Appeler une option de thème est assez facile, en utilisant la fonction get_theme_mod () . Pour appeler la première diapositive, par exemple, il vous suffit d'utiliser:

echo get_theme_mod('first_slide')

Donc, si vous voulez placer un curseur sur votre page d'accueil, par exemple, vous pouvez ouvrir index.php et ajouter du balisage comme ceci:

<ul class="slider">
    <li><img src="<?php echo get_theme_mod('first_slide') ?>" height="" width=""></li>
    <li><img src="<?php echo get_theme_mod('second_slide') ?>" height="" width=""></li>
    <li><img src="<?php echo get_theme_mod('third_slide') ?>" height="" width=""></li>
</ul>

Bien sûr, vous aurez toujours besoin d’une bonne dose de CSS et de JS pour créer le curseur réel, mais c’est la base du téléchargement, du stockage et de l’appel d’images avec Theme Customizer.

Si vous êtes encore un peu flou, Otto a écrit une introduction parfaite sur le reste de la fonctionnalité: http://ottopress.com/2012/how-to-leverage-the-theme -customizer-in-your-own-themes/

4
clark