web-dev-qa-db-fra.com

Comment gérer une image de fond de taille dans Wordpress?

Nouveau concepteur pour wordpress ici. Je veux prendre l'image présentée sur un post et en faire une image de héros pour la page simple post.

Normalement, je crée un div, définissez la largeur sur 100%, la hauteur sur tout ce que je veux, puis définissez le fond sur l'URL de l'image dans le CSS, la taille de l'arrière-plan étant définie pour couvrir.

Voici comment j'essaie de faire cela dans Wordpress:

<section class="hero" style="background: url('<?php echo $hero_image['url'];?> ');" xmlns="http://www.w3.org/1999/html">

Mais cela semble un peu insipide, car la définition d’arrière-plan avec des styles en ligne remplace tous les éléments CSS par les éléments par défaut. Des idées sur la façon de mieux faire cela? De préférence sans aucun plugin, car j'essaie d'apprendre à utiliser le plus de code possible. Bien que je possède déjà des champs personnalisés avancés et une interface utilisateur de type publication personnalisée installés et que je les utilise de manière intensive.

imagescsscustom-background
2
David A. French

Donc, la réponse de Jack fonctionne et est correcte, mais j'ai aussi trouvé une solution plus élégante pour ce que j'avais déjà. J'ai créé l'image d'arrière-plan de style en ligne au lieu d'arrière-plan:

0
David A. French

Avez-vous essayé d'ajouter la taille de l'arrière-plan "couverture" en ligne, comme

 <section class="hero" style="background: url('<?php echo $hero_image['url'];?> ') cover;" xmlns="http://www.w3.org/1999/html">
0
jay_R_champ

Vous pouvez accrocher dans l'en-tête d'un thème et ajouter votre style. Ajoutez ce morceau de code au fichier functions.php de votre thème:

<?php 
add_action('wp_head','my_hero_image');
function my_hero_image() {
    if( is_single() ) { ?>
        section.hero {
            background-image: <?php the_post_thumbnail_url('full'); ?>;
            background-size: cover;
        } <?php 
    }
}
?>

Cela ajoutera le style suivant à l'en-tête de votre thème dans un seul article:

<style>
    section.hero {
        background-image: YOUR IMAGE URL;
        background-size: cover
    }
</style>

ce qui fera l'affaire.

0
Jack Johansson