Back-to-Top-Button in WordPress hinzufügen – Benutzerfreundlichkeit verbessern
Lesezeit: ca. 5 Minuten
Back-to-Top-Button in WordPress einfügen: Schritt-für-Schritt-Anleitung
Bei umfangreichen Beiträgen oder Seiten kann es für Nutzer mühsam sein, zum Seitenanfang zurückzukehren. Ein Back-to-Top-Button in WordPress bietet hier eine komfortable Lösung, indem er es ermöglicht, mit einem Klick nach oben zu scrollen. In dieser Anleitung zeige ich Dir, wie du einen solchen Button in dein WordPress-Theme integrierst und ihn individuell anpasst.
Warum einen Back-to-Top-Button verwenden?
• Verbesserte Benutzerfreundlichkeit: Erleichtert das Navigieren auf langen Seiten.
• Erhöhte Interaktivität: Bietet dem Nutzer eine zusätzliche Steuerungsmöglichkeit.
• Modernes Design-Element: Kann das Erscheinungsbild der Website aufwerten.
Schritt 1: Meta-Box für die Aktivierung des Buttons erstellen
Zunächst fügen wir eine Meta-Box hinzu, mit der du den Back-to-Top-Button für einzelne Beiträge oder Seiten aktivieren kannst. Dazu ergänzen wir die functions.php deines aktiven Themes um folgenden Code:
// 1. Meta-Box registrieren
function add_back_to_top_meta_box() {
// Alle öffentlichen Post-Typen abrufen (z. B. 'post', 'page', etc.).
$post_types = get_post_types(['public' => true], 'names');
// Eine Meta-Box hinzufügen.
add_meta_box(
'back_to_top_meta', // ID der Meta-Box
__('Back to Top Button', 'hbdev'), // Titel der Meta-Box
'back_to_top_meta_box_callback', // Callback-Funktion, die den Inhalt der Box rendert
$post_types, // Ziel-Post-Typen
'side', // Platzierung in der Seitenleiste des Editors
'default' // Priorität der Anzeige
);
}
// Aktion hinzufügen, um die Meta-Boxen zu registrieren
add_action('add_meta_boxes', 'add_back_to_top_meta_box');
// 2. Meta-Box-Inhalt rendern
function back_to_top_meta_box_callback($post) {
// Meta-Wert abrufen (1 = aktiviert, 0 = deaktiviert).
$value = get_post_meta($post->ID, '_back_to_top_enabled', true);
?>
<label for="back_to_top_enabled">
<!-- Checkbox zur Aktivierung des Buttons -->
<input type="checkbox" name="back_to_top_enabled" id="back_to_top_enabled" value="1" <?php checked($value, '1'); ?>>
<?php _e('Enable Back to Top Button', 'hbdev'); ?>
</label>
<?php
}
// 3. Meta-Daten speichern
function save_back_to_top_meta_box($post_id) {
// Prüfen, ob die Checkbox im Formular gesetzt wurde.
if (isset($_POST['back_to_top_enabled'])) {
// Meta-Wert speichern (1 = aktiviert).
update_post_meta($post_id, '_back_to_top_enabled', '1');
} else {
// Meta-Wert löschen, wenn die Checkbox nicht gesetzt wurde.
delete_post_meta($post_id, '_back_to_top_enabled');
}
}
// Aktion hinzufügen, um Meta-Daten beim Speichern eines Beitrags zu speichern
add_action('save_post', 'save_back_to_top_meta_box');
Erläuterung:
• Meta-Box registrieren: Die Funktion add_back_to_top_meta_box erstellt eine neue Meta-Box für alle öffentlichen Post-Typen.
• Inhalt der Meta-Box: Die Callback-Funktion back_to_top_meta_box_callback rendert eine Checkbox zur Aktivierung des Buttons.
• Speichern der Meta-Daten: Die Funktion save_back_to_top_meta_box speichert den Status der Checkbox beim Speichern des Beitrags oder der Seite.
Schritt 2: Back-to-Top-Button im Frontend einfügen
Nun fügen wir den eigentlichen Button in das Frontend ein. Dies geschieht ebenfalls über die functions.php:
// 4. Back-to-Top-Button einfügen
function add_back_to_top_button() {
// Prüfen, ob es sich um eine Einzelseite/-beitrag handelt und die Option aktiviert ist.
if ( is_singular() && get_post_meta( get_the_ID(), '_back_to_top_enabled', true ) ) {
// Button HTML ausgeben.
echo '<div id="back-to-top" class="back-to-top" style="display: none;">
<a href="#top">↑ ' . __( 'Zurück nach oben', 'hbdev' ) . '</a>
</div>';
}
}
// Aktion hinzufügen, um den Button bei wp_body_open einzufügen
add_action('wp_body_open', 'add_back_to_top_button');
Erläuterung:
• Prüfung: Es wird überprüft, ob es sich um einen einzelnen Beitrag oder eine Seite handelt und ob die Option für den Back-to-Top-Button aktiviert ist.
• HTML-Ausgabe: Der Button wird mit einer div und einem a-Tag erstellt, der beim Klicken zum Seitenanfang scrollt.
Schritt 3: JavaScript für den Button hinzufügen
Damit der Button bei Bedarf angezeigt und ein sanftes Scrollen ermöglicht wird, fügen wir folgendes JavaScript hinzu:
// Handling Back-to-top-Button
document.addEventListener('DOMContentLoaded', function () {
var backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', function () {
if (window.scrollY > 400) { // Button erscheint nach 400px Scrollhöhe
backToTop.style.display = 'block';
} else {
backToTop.style.display = 'none';
}
});
backToTop.addEventListener('click', function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
document.addEventListener('DOMContentLoaded', function () {
var backToTop = document.getElementById('back-to-top');
if (backToTop && backToTop.parentNode.classList.contains('mm-page')) {
// Button wieder direkt ins <body> verschieben
document.body.insertBefore(backToTop, document.body.firstChild);
}
});
Schritt 4: Das Styling für den Button hinzufügen
#back-to-top {
position: fixed; /* Fixiert den Button an einer festen Position relativ zum Viewport */
top: 92vh; /* 92% vom oberen Bildschirmrand */
right: 20px; /* 20px Abstand vom rechten Rand */
z-index: 9999; /* Hohe Priorität, damit er über anderen Elementen liegt */
background-color: #af08bd;
color: #fff;
padding: 10px 15px;
border-radius: 50px;
text-align: center;
font-size: 14px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: none; /* Der Button wird standardmäßig durch JS ein-/ausgeblendet */
&:hover {
color: #111 !important;
opacity: 0.7;
a, a:focus, a:active {
color: #111;
}
}
a {
color: #fff;
text-decoration: none;
}
}
Resultat
Das Resultat ist ein Button, der nach einem Scrollen von 400px erscheint. Der Button wird an seiner festgelegten Position bleiben, bis man wieder in den oberen Bereich der Seite scrollt (Position < 400px). Dieser Button wird im Backend separat für jede Seite/Beitrag aktiviert, da ich mir für kurzen Seiteninhalt diesen Button gerne spare.
So sieht mein Resultat im Front- und Backend aus:
