1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WordPress Header Background mit Hover

Dieses Thema im Forum "Design" wurde erstellt von irenehofer, 5. August 2016.

Schlagworte:
  1. irenehofer

    irenehofer Well-Known Member

    Registriert seit:
    11. Februar 2010
    Beiträge:
    88
    Zustimmungen:
    0
    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.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Was mir nun aber noch fehlt ist der Hover-Effekt mit dem field "Hover". Wie kann ich dies abrufen?
     
  2. irenehofer

    irenehofer Well-Known Member

    Registriert seit:
    11. Februar 2010
    Beiträge:
    88
    Zustimmungen:
    0
    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>
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden