wake-up-neo.com

Wie gehe ich mit einer Hintergrundgröße um: Titelbild in Wordpress?

Designer neu bei WordPress hier. Ich möchte das vorgestellte Bild auf einen Beitrag setzen und es zu einem Heldenbild für die einzelne Beitragsseite machen.

Normalerweise mache ich das, indem ich ein div erstelle, die Breite auf 100% und die Höhe auf das von mir gewünschte vh einstelle und dann den Hintergrund für die Bild-URL im CSS mit der Hintergrundgröße als Deckung einstelle.

Also, wie ich dies in Wordpress versuche, ist wie folgt:

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

Aber das wird ein wenig kompliziert, weil das Setzen des Hintergrunds mit Inline-Stilen das gesamte CSS auf die Standardelemente zurücksetzt. Irgendwelche Ideen, wie man das besser macht? Am besten ohne Plugins, da ich so viel Code wie möglich lernen möchte. Obwohl ich bereits erweiterte benutzerdefinierte Felder und eine benutzerdefinierte Benutzeroberfläche für Beitragstypen installiert habe und diese häufig verwende.

2
David A. French

Jacks Antwort funktioniert also und ist richtig, aber ich habe auch eine elegantere Lösung für das gefunden, was ich bereits hatte. Ich habe das Hintergrundbild im Inline-Stil anstelle des Hintergrunds erstellt:

0
David A. French

Haben Sie versucht, die Hintergrundgröße "Cover" auch inline hinzuzufügen, wie so

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

Sie können sich in den Header eines Themas einhängen und Ihren Stil hinzufügen. Fügen Sie diesen Code in die functions.php-Datei Ihres Themas ein:

<?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 
    }
}
?>

Dadurch wird der Kopfzeile Ihres Themas in einem einzelnen Beitrag der folgende Stil hinzugefügt:

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

das wird den Trick machen.

0
Jack Johansson