WordPress Header Background mit Hover

  • Auf meiner WordPress-Seite habe ich 2 Varianten von Header:
    a) "Statisch" -> post thumb wird angezeigt
    b) "Mit Hover" -> In normalen Status wird das Bild eines ACF-Fields angezeigt ("normal"), beim Hovern soll das entsprechende Bild vom Feld "hover" angezeigt werden.

    Hier mein bisheriger Code, welche die beiden Typen unterscheidet (ist kein post thumb vorhanden, wird automatisch der Hover-Effekt aufgerufen.

    PHP
    <?php if (has_post_thumbnail( $post->ID ) ): ?>        
            <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
            <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('<?php echo $image[0]; ?>')">    
        <?php else : ?>
            <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('<?php the_field('normal'); ?>');">    
        <?php endif; ?>

    Was mir nun aber noch fehlt ist der Hover-Effekt mit dem field "Hover". Wie kann ich dies abrufen?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Habs mittlerweile selbst rausgefunden. Wen es interessiert:

    <?php if (has_post_thumbnail( $post->ID ) ): ?>
    <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
    <style type="text/css">
    .header {
    background-image: url('<?php echo $thumb[0]; ?>');
    }
    </style>
    <?php else : ?>
    <?php $image = get_field('normal'); ?>
    <?php $imagehover = get_field('hover'); ?>
    <style type="text/css">
    .header {
    background-image: url('<?php echo $image['url']; ?>');
    }
    .header:hover {
    background-image: url('<?php echo $imagehover['url']; ?>');
    }
    </style>
    <?php endif; ?>

    <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader"> ... </div>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!