web-dev-qa-db-fra.com

Créer une image d'en-tête responsive pleine largeur par page

Wordpress est nouveau pour moi - je suis en train de créer un site de quelques pages (Accueil, Artistes, Historique, Vidéos).

Chacune de ces pages nécessite un en-tête personnalisé contenant une image pleine largeur sensible (l'image sera utilisée comme image d'arrière-plan dans le CSS).

J'aimerais que ce CMS soit convivial et que les éditeurs de contenu puissent sélectionner et télécharger l'image d'en-tête (idéalement 2 images, ordinateur de bureau et mobile) dans la zone du widget (à partir de la section page).

Comment aborderiez-vous cela?

info: (J'utilise le thème Vingt quinze).

Merci

METTRE À JOUR

J'ai créé un champ personnalisé pour la page - header_imge - (Type de champ -> Image)

Ensuite, je définis l'image d'arrière-plan (avec la valeur de mon champ personnalisé) à partir de la balise. Le reste est géré via CSS.

    <?php   
        $args = array(
            'meta_key' => 'header_image'
        );
        $the_query = new WP_Query( $args );
    ?>  

<div class="header-banner" style="background-image:url(<?php the_field('header_image'); ?>)"></div>

C'est la solution la plus rapide et la plus facile jusqu'à présent. Ajouter du style inline & PHP dedans se sent un peu hacky cependant.

categoriescustom-fieldpagescsstheme-twenty-fifteen
1
John

John, il existe de nombreuses façons de le faire, en fonction de ce que vous voulez exactement et de votre expérience en html/php/css (ou du temps que vous voudriez consacrer à l'apprentissage).

Il existe de nombreux plugins sur Wordpress qui pourraient y parvenir. Vous voudrez peut-être en essayer quelques-unes:

https://wordpress.org/plugins/search.php?q=custom+header

Si vous voulez quelque chose tout de suite, cela ressemble à ceci est une bonne option bien que les options soient modifiées dans le backend et non dans le personnalisateur de widgets. Parmi les autres plugins qui pourraient également réaliser quelque chose comme ceci sont ceux comme Revolution Slider ou Visual Composer bien qu'ils ne vous permettent également pas d'utiliser le personnaliseur directement.

Si vous décidez que vous voulez vraiment aller dans image widget route, j'ai essayé la plupart des fichiers les mieux notés du répertoire des plugins et ils fonctionnent tous très bien. Cependant, je ne sais pas si le cas échéant prend en charge les images d'arrière-plan Si vous en trouvez un, allez-y, puis créez simplement un modèle personnalisé avec une nouvelle zone de widget pour afficher votre bannière.

Exemple de création d'une zone de widget et d'un modèle de page personnalisés dans vingt-quinze: 

<?php

/* include in functions.php */

function register_banner_widget_area() {

    $args = array(
        'id'            => 'custom-banner-area',
        'name'          => __( 'After Header - (Custom Banner Area)', 'my-theme' ),
        'description'   => __( 'This is an area for a custom banner',  'my-theme'  ),
        'class'         => 'banner-area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '',
        'after_title'   => '',
    );

    register_sidebar( $args );

}
add_action('widgets_init', 'register_banner_widget_area');

function do_custom_banner_area() {
   if ( is_active_sidebar( 'custom-banner-area' ) ) {
        dynamic_sidebar( 'custom-banner-area' );
   }
}
add_action('custom_banner_widget_area', 'do_custom_banner_area');

Suivant dupliquer page.php à partir du thème vingt-quinze et renommez-le en quelque chose comme "template_header-image.php". À l'intérieur du fichier, vous trouverez votre crochet nouvellement créé, qui ajoutera la prise en charge d'une zone de widget personnalisée située juste au-dessus du contenu (en supposant que ce soit ce que vous vouliez).

 <?php
  /**
   * Template Name: Custom Header Area
   * Description: A Template Which Allows Custom Header Areas
   */

 get_header(); ?>
 <?php do_action( 'custom_banner_widget_area' ); ?> 
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <?php
        while ( have_posts() ) : the_post();
            get_template_part( 'content', 'page' );
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
        // End the loop.
        endwhile;
        ?>
        </main><!-- .site-main -->
    </div><!-- .content-area -->
<?php get_footer(); ?>

Si vous ne parvenez pas à trouver un widget image ou si vous souhaitez créer un CMS véritablement "personnalisé" avec des champs faciles à modifier et avez de l'expérience en css et en html, Champs personnalisés avancés est depuis longtemps un favori de nombreux et est probablement le plus riche en fonctionnalités des plugins de terrain personnalisés. Il a des tonnes de documentation et des tonnes de support et de peur de créer facilement des backends personnalisés pour vos modèles de sites.

Voici un exemple que j'ai mis en place et qui vous permettra de sélectionner une image sur chaque page (cet exemple est destiné à l'édition en arrière-plan, bien que vous puissiez également utiliser ACF pour créer des champs de widget personnalisés si vous le souhaitez.)

  1. Installer Champs personnalisés avancés
  2. Sur votre site, accédez à http://example.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export et upload acf-banner-import.json .
  3. Ajoutez page_banner-header.php à votre dossier de thème actif. Enfin, ajoutez une nouvelle page sur ( http://example.com/wp-admin/post-new.php?post_type=page ) et choisissez votre nouveau modèle appelé "En-tête de bannière".
  4. Maintenant, éditez simplement les champs qui apparaissent et publiez votre page.

Espérons que quelque chose ici fonctionne pour vous ... Vous aurez évidemment besoin de modifier css pour l'adapter à vos préférences.

UPDATE:

Jetez un coup d’œil ici sur la manière dont Wordpress ajoute des arrière-plans d’en-tête personnalisés (via css) au thème des vingt-quinze ans.

vingt-quinze ans/inc/custom-header.php # L141

vingt-quinze ans/inc/custom-header.php # L157

Donc, si vous deviez éditer cela, il vous suffirait de commenter/supprimer les images d’arrière-plan actuelles ou simplement de les développer en ajoutant à cette même section du fichier custom-header.php.

Exemple:

.css-selector {
    background-image: url(<?php header_image(); ?>);
}

Pour éditer ceci directement sur votre site, changez yoursite.com dans le lien ci-dessous en votre nom de site (vous devez être connecté au backend wordpress) et cela vous mènera directement à l'endroit où vous éditez l'en-tête css pour le thème par défaut vingt-quinze.

http://votresite.com/wp-admin/theme-editor.php?file=inc%2Fcustom-header.php&theme=twentyfifteen&scrollto=2397

Pour être honnête, tant qu'un plugin n'a pas de mauvaises critiques, vous devriez utiliser n'importe lequel d'entre eux prétendant ajouter des en-têtes personnalisés. Si vous utilisez vingt-quinze, la plupart des plug-ins d’en-tête personnalisés les ajouteront comme images d’arrière-plan, car c’est ainsi que fonctionne le thème par défaut.

Essayez-en un. Les deux devraient bien fonctionner.

En-têtes personnalisés étendus

En-têtes uniques

Mise à jour 2: Méthode ACF

Ceci est un réponse à votre dernière mise à jour sur les champs personnalisés avancés. Si vous mettez ceci un simple modèle de page/publication, vous ne devriez pas avoir besoin de ces codes meta_key et WP_Query dans votre dernière mise à jour.

Cela seul devrait fonctionner:

<div class="header-banner" style="background-image:url(<?php the_field('header_image'); ?>)"></div>

Si vous voulez être plus clair à ce sujet, vous pouvez envelopper une instruction if afin qu'elle ne crache pas de code HTML inutile lorsqu'aucune image n'est sélectionnée:

if(get_field('header_image'))
{
    echo'<div class="header-banner" style="background-image:url(' . get_field('header_image') . ')"></div>';
}
3
Bryan Willis