andreb-web.de andreb-web.de

Top-Button ins WordPress-Projekt integrieren

WordPress bietet jede Menge moderne und wirklich gut aussehende Themes, die zudem frei verfügbar sind. Der Funktionsumfang ist jedoch manchmal recht eingeschränkt.

Da derzeit Homepages im Onepage-Design stark angesagt sind, die mit dem neuen Gutenberg-Editor schnell umgesetzt werden können, sollte ein Back-To-Top- Button nicht fehlen. Einige Themes beinhalten diesen, einige aber auch nicht.

Mit ein paar Kenntnissen in HTML5, PHP, jQuery und CSS3 sollte dieses Problem schnell gelöst sein.

Entweder man lädt sich ein entsprechendes Plugin herunter, aktiviert dieses und klickt sich ein Button zusammen.

Oder man erstellt sich ein Child-Theme, schreibt ein bisschen php-Code in die footer.php, erzeugt ein entsprechendes Javascript und passt den Button mit CSS an.

Anleitungen dazu finden sich im WWW.

Möglichkeiten, sich so ein Feature zu erzeugen gibt es für WordPress also einige.

Wer beide oben genannten Möglichkeiten, warum auch immer scheut, kann sein Vorhaben auch (ebenso einfach) mit dieser Vorgehensweise realisieren:

Schritt 1 Installation

Installiere das Plugin „Header and Footer“

Ich installiere „Header and Footer“ in den meisten meiner Projekte sowieso immer, da mit diesem Tool noch viele andere tolle Dinge möglich sind.

Öffne das Plugin „Header and Footer“ nach der Aktivierung.

Du findest das Plugin unter „Einstellungen –> Header and Footer.

Du befindest dich nun auf dem ersten Reiter der „Karteikarte“.

Suche das Feld „BEFORE THE </BODY> CLOSING TAG (FOOTER)“ weiter unten.

Hier kannst du in diesem Feld Code erzeugen.

Schritt 2 jQuery

Kopiere zunächst folgenden jQuery-Code in das Feld:


<script type="text/javascript">
  jQuery( document ).ready(function($){
  var offset = 100,
      speed = 650,
      duration = 800,
      scrollButton = $('#topbutton');
  
  $( window ).scroll( function() {
    if ( $( this ).scrollTop() < offset) {
      scrollButton.fadeOut( duration );
    } else {
      scrollButton.fadeIn( duration );
    }
  });
  
  scrollButton.on( 'click', function(e){
    e.preventDefault();
    $( 'html, body' ).animate({
      scrollTop: 0
    }, speed);
  });
  });
</script>

Die Werte „offset“, „speed“ und „duration“ kannst du später beliebig, deinen Wünschen entsprechend, anpassen.


Schritt 3 HTML

Gleich nach dem abgeschlossenen Script-Tag fügst du noch etwas HTML ein:


<span class="my-topbutton"><a href="#" id="topbutton" title="back to top"></a></span>

Jetzt wird das ganze gespeichert.

Schritt 4 CSS

Jetzt musst Du deinen Top-Button noch etwas stylen bzw. an deine Webseite anpassen. CSS3-Kenntnisse dazu sind wünschenswert.

Dazu öffne das Custom-CSS Menü in Deinem Customizer.

Zu finden ist dieser unter Design –> Customizer. Alternativ kannst du auch einen anderen Custom-CSS-Editor nutzen. Diese gibt es als Plugin.

Folgender Code ist hier einzutragen:


.my-topbutton {
  background: rgba(0,0,0,0.6);
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}
#topbutton {
  position: fixed;
  display: none;
  height: 60px;
  width: 60px;
  line-height: 50px;
  right: 15px;
  bottom: 100px;
  z-index: 1;
  background: rgba(46,56,65, 0.3);
  border-radius: 2px;
  text-decoration: none;
  color: #ffffff;
  font-size: 40px;
  
}
#topbutton:before {
  font-family: "FontAwesome";
   content: "\f102";
  vertical-align: middle;
  
}
#topbutton:hover {
  background: rgba(46,56,65, 0.9);
  color: #ff6900;
}

Jetzt wird wieder gespeichert.

Der CSS-Code kann nun nach Belieben angepasst werden.

Hinweis: Wenn dein Button nicht richtig angezeigt wird, kann es daran liegen, dass dein eingesetztes WordPress-Theme die Symbole von Font Awesome nicht unterstützt. Keine Panik: Font Awesome bietet unter seinem Namen ein entsprechendes Plugin an oder man ersetzt den Wert im CSS-Code

content: "\f102";

gegen einen Wert des normalen Zeichensatzes, so z.B.:

content: "\2191";

Die Ziffern hinter dem Slash sind Ascii-Code und stellen den Pfeil nach oben dar.

Der Eintrag

font-family: "FontAwesome";

kann dann auch entfernt werden.

Meine Webseite benutzt Cookies, um diese reibungslos darstellen zu können. Wenn Sie auf meinen Seiten weiter serven, stimmen Sie dem zu.