Buch & Berger

  • Angebot
  • Agentur
  • Blog
  • Kontakt
  • Search

Genesis Sticky Footer

Genesis Sticky Footer: eine umfassende Sticky-Footer-Lösung für das Genesis Framework für WordPress.

Auf Pages mit wenig Inhalt positioniert das folgende Modul den Footer am unteren Rand des Browser-Viewports. Auf längeren, scrollbaren Pages verhält sich der Footer jedoch ganz normal und schließt erst am Dokumentende ab.

Ob für eingeloggte User der Admin Bar im Frontend aktiviert ist oder nicht, wird erkannt und in die Berechnung der Footer-Position miteinbezogen.

Genesis Sticky Footer: der Code

/** Intro:
The module sticks the Genesis site footer to the bottom of 
the page and viewport, even if the page content is too short 
to push it there. But it behaves normally on pages, that have
enough content to push it out of sight.

Note: To add space above the footer vis CSS use the
'.sticky-footer-spacer' class with the height property.

Based on: https://9seeds.com/2013/11/29/sticky-footer-genesis
*/


/*
PHP: Add Sticky Footer Page Wrapper
---------------------------------------------------------------------------------------------------- */

/**
 * Add Page Wrapper
 */
add_action( 'genesis_before_header', 'bubdev_stickyfooter_pagewrap_open');
function bubdev_stickyfooter_pagewrap_open() {

  echo '<div class="sticky-footer-page-wrapper">';
}

add_action( 'genesis_before_footer', 'bubdev_stickyfooter_pagewrap_close');
function bubdev_stickyfooter_pagewrap_close() {

  echo '<div class="sticky-footer-spacer"></div></div>';
}


/*
CSS / JS
---------------------------------------------------------------------------------------------------- */

add_action( 'wp_head', 'bubdev_stickyfooter_script_and_styles' );
/**
 * Add sticky footer CSS and JS to page head.
 */
function bubdev_stickyfooter_script_and_styles() {


  /* Sticky Footer CSS
  --------------------------------------------- */ ?>
  
  <style>

    html,
    body, 
    .site-container {
      height: 100% !important;
    }

    .sticky-footer-page-wrapper {
      height: auto !important;
      margin-top: 0 !important;
      min-height: 100% !important;
    }
     
    .site-footer {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

  </style>
  <?php


  /* Sticky Footer JS
  --------------------------------------------- */ ?>

  <script>

    jQuery( function( $ ) {

      /**
       * Sticky Footer JS
       */
      var stickyFooterFunction = function() {

        var viewportHeight = $( window ).height();
        var adminBarHeight = $( '#wpadminbar' ).outerHeight();
        var footerHeight = $( '.site-footer' ).outerHeight();
        var theHeight;

        // Set html height depending on whether the admin bar 
        // is active or not. We only trust the body class and
        // have to cross-check, in case a browser plugin, that 
        // controls the visibility of the admin bar, is in use.
        if ( $( 'body' ).hasClass( 'admin-bar' ) ) {
          theHeight = viewportHeight - adminBarHeight;
        } else {
          theHeight = viewportHeight;
        }

        // Set proper height of the html element.
        document.documentElement.style.setProperty( 
          'height', theHeight + 'px', 'important'
        );

        // Substract the footer height from the page.    
        $( '.sticky-footer-page-wrapper' ).css({ 
          'marginBottom': '-' + footerHeight + 'px'
        });
      }

      // Trigger the function on window load and resize.
      $( window ).on( 'load resize', stickyFooterFunction );
      
      // Account for brower plugins, that control the
      // visibility of the admin bar, and invoke the 
      // function a second time (after some waiting).
      setTimeout( stickyFooterFunction, 1000 );
    });

  </script>
<?php
}

Der Abstand oberhalb des Footers kann mit Hilfe der CSS-Klasse .sticky-footer-spacer eingerichtet werden. Beispiel:

.sticky-footer-spacer {
  height: 50px;
}

Reine CSS-Lösung mit Flexbox

/* Sticky Footer
--------------------------------------------- */

.site-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.site-inner {
  flex-grow: 1;
  width: 100%;
}

.site-header,
.site-footer {
  /* ie11 */
  flex-shrink: 0;
}

Datum: 2016-12-19
Rubrik: Design & Development

Über den Autor

Stefan Buchberger beschäftigt sich seit vielen Jahren mit der Präsentation, Verbreitung und Kommunikation von Inhalten. Er war vor allem als Buchverleger aktiv.

Heute gilt seine Aufmerksamkeit einer nachhaltigeren Form der Webentwicklung, welche die Inhalte zurück in den Fokus rückt.

Seitenleiste

Neue Beiträge

Mann skizziert Projekt auf Tafel

Wege zur Website: Nach Maß und von der Stange

Websites entstehen individuell und nach Maß oder auf Basis bestehender Vorlagen. Vielfach aber: sowohl als …
Rhinozeros

Antworten zur Website-Wartung und Wartungsvereinbarung

In diesem Beitrag beantworten wir Fragen, die uns zum Thema Wartung und Wartungsvereinbarung gestellt wurden …
Screenshot

Blog für die Österreichische Gesellschaft für Literatur

Die Österreichische Gesellschaft für Literatur in der Wiener Herrengasse ist Drehscheibe zwischen Texten, Schreibenden und …
Wireframing auf einem Tablet

Projektablauf: Vom Erstgespräch zur fertigen Website

Bevor Sie sich entschließen, mir mehr über Ihr Vorhaben zu erzählen, möchte ich Ihnen die …

WordPress: Infos zu Warnhinweisen und Fehlermeldungen

The installed version of UpdraftPlus Backup/Restore has not been tested on your version of WordPress …

Newsletter

Unser Newsletter mit Tipps und Angeboten erscheint wenige Male im Jahr. Infos zu Versand und Verarbeitung erhalten Sie in unserer Datenschutzerklärung.

    nav-social-menu

    • Facebook
    • Twitter
    • LinkedIn
    • RSS
  • Impressum
  • Datenschutz
Top ▲
Top ▲
Finde

Zeige alle ...

Generic filters
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Weiters möchten wir Sie auf unsere Datenschutzinformation aufmerksam machen: Erfahren Sie mehr