Es gibt zahlreiche Methoden, um Sticky-Elemente in WordPress zu erstellen. Die meisten beinhalten das Durcheinander mit benutzerdefiniertem CSS oder die Verwendung komplizierter Seitenersteller von Drittanbietern oder ganzer Website-Ersteller.
Und die meisten von ihnen erheben eine Gebühr, die diese erweiterten Funktionen als Premium-Add-Ons kennzeichnet.
Nur weil etwas kompliziert erscheint, muss es das nicht sein.
So erstellen Sie eine klebrige Fußzeile in WordPress
Zwei Plugins, die WP eine klebrige Fußleiste hinzufügen, sind Fixed Bottom Menu und WPFront Notification Bar. Sie können auch benutzerdefiniertes CSS verwenden, um die Arbeit zu erledigen. Premium-Designs können „Elementhaken“ haben, die verwendet werden können, um eine klebrige Fußzeile zu erstellen. Um das unendliche Scrollen zu umgehen, verschieben Sie den Inhalt des Fußzeilen-Widgets in die Seitenleiste.
So erstellen Sie ein Sticky Mobile Bottom Menu für WordPress
Wende das KISS-Prinzip an. Halten Sie es einfach blöd.
Installieren und aktivieren Sie das Fixed Bottom Menu-Plugin
Was ist schließlich eine feste Fußzeile? Es ist ein festes unteres Menü.
Beginnen Sie mit dem Fixed Bottom Menu-Plugin.
Mit diesem Plugin können Sie drei bis fünf Links am Ende Ihrer Seiten hinzufügen. Das ist ohnehin das Maximum, das für Geräte mit kleinem Bildschirm verwendet werden sollte.
Mehr würde die Navigation erschweren.
Nach der Aktivierung wird das Label „Fixed Bottom Menu“ zu Ihrem Menü „Einstellungen“ in der linken Seitenleiste hinzugefügt.
Klicken Sie auf den Menüpunkt, um zur Einstellungsseite zu gehen und Ihr unteres Menü zu konfigurieren.
was bedeutet ching chong auf chinesisch
Da dies für kleinere Bildschirme gilt, benötigen Sie Symbole. Es gibt einige Optionen.
Sie können auf ein Plugin zum Hinzufügen von Symbolen upgraden oder auf die Links klicken, um zu kostenlosen Quellen zu gelangen. Google Fonts und Font Awesome sind verlinkt. Alle Google Fonts sind kostenlos und Open Source.
Alternativ bleiben Sie bei den Dashicons, die bereits für WordPress codiert sind.
Sobald Sie Ihre Links festgelegt haben, scrollen Sie weiter nach unten und reduzieren Sie die maximale Bildschirmbreite auf 760 Pixel. Sie können kleiner werden.
Der Grund für diese Anpassung der Bildschirmgröße ist, dass das feste Menü nur auf Handys und Tablets angezeigt wird.
Auf Desktops (vorausgesetzt, Ihr Design verfügt über Seitenleisten) sind Navigationslinks sichtbar. Der Vorteil der Fixierung einer Fußleiste am Bildschirm besteht darin, permanente Navigationsschaltflächen zu aktivieren.
So erstellen Sie eine klebrige Fußzeilen-Benachrichtigungsleiste
Wenn Sie nur eine schwebende Klebeleiste am unteren Rand der Seiten anbringen möchten, um Werbebotschaften anzuzeigen oder den Verkehr zu Ihren Cornerstone-Inhalten zu lenken (als Beispiele), ist die Benachrichtigungsleiste der einfachste Weg.
Verwenden Sie das WPFront-Benachrichtigungsleisten-Plugin
Der zu verwendende Teil dieses Plugins ist die Positionsbestimmung.
Um die schwebende Fußleiste zu aktivieren, wählen Sie die Option zum Fixieren der Leiste an der unteren Position.
- Klicken Sie auf Aktivieren
- Ändern Sie die Position von „oben“ nach „unten“.
- Aktivieren Sie das Kontrollkästchen, um „Fixed at Position“ zu aktivieren, wodurch es am unteren Rand des Bildschirms fixiert wird.
- Anzeige auf Geräten: Wählen Sie „kleine Geräte“, wenn die Leiste nur auf Telefonen und Tablets angezeigt werden soll. Wenn Sie es für alle Geräte aktivieren, wird die klebrige Fußzeile auch auf dem Desktop angezeigt.
- Geben Sie Ihre Nachricht in den Textbereich ein, der in der Fußzeile angezeigt werden soll.
Zum Beispiel,
Manager Special: 25 % Rabatt auf handverlesene Produkte. Angebote anzeigen.
Der Text „Angebote anzeigen“ kann innerhalb einer Schaltfläche platziert werden, die auf eine Verkaufsseite oder eine Angebotskategorie auf Ihrer Website verweist.
So fixieren Sie die WP-Fußzeile am Ende von WordPress-Seiten mit CSS
Die meisten WordPress-Themes haben bereits Fußzeilenmenüs oder Widget-Bereiche, um Ihren Fußzeilentext anzuzeigen.
Für diese können Sie Ihrem Design-Anpasser einen CSS-Block hinzufügen, um die Fußzeile am Ende jeder Seite zu fixieren.
Der Code dazu lautet:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}Die Farben, Größen und Textausrichtung können jeweils nach Ihren Wünschen geändert werden.
So erstellen Sie eine Sticky Floating Bar für Mobilgeräte mit WooCommerce-Integration
Dazu muss Ihr WordPress-Theme so codiert sein, dass es WordPress-Hooks verwendet.
Die Mehrheit der Themes, die einen Rahmen mit mehreren Auswahlmöglichkeiten an untergeordneten Themes bieten, sind normalerweise diejenigen mit mehr Hooks.
Welches Theme Sie auch immer verwenden, werfen Sie einen Blick auf die Theme-Dokumentation für einen „Leitfaden für visuelle Hooks“ oder etwas Ähnliches auf ihrer Website.
Der WordPress-Hook, den Ihr Theme unterstützen muss, ist „footer-after“ oder „after-footer“.
Was Sie möchten, ist, dass das Design so codiert wird, dass ein Element ausgelöst wird, nachdem die Fußzeile geladen wurde, aber bevor der HTML-Code endet.
Einige Themes unterstützen diese Funktion nicht.
- Das Genesis-Framework tut dies, was nicht überraschend ist, da es über 50 Hooks im Framework hat.
- Das Astra-Theme hat auch die Funktion „astra_footer_after“.
- Das Divi-Theme unterstützt dies nicht.
- Das Kadence-Thema tut es, aber nur in der Pro-Version.
Überprüfen Sie zuerst Ihr Thema, da dies nur für Themen gilt, die bereits für Hooks codiert sind.
Es ist schwierig zu wissen, wo Hooks in verschiedenen WordPress-Themen registriert werden sollen. Wenn Sie also kein Thema haben, das Element-Hooks unterstützt, versuchen Sie es mit einem, das dies tut.
Das Setup für benutzerdefinierte URLs mit Symbolen ist das gleiche Setup, das Sie für das Fixed Bottom Menu-Plugin verwenden würden.
- Fügen Sie ein 3-Spalten-Layout ein
- Fügen Sie für jede Spalte ein Symbol hinzu
- Verknüpfen Sie die Symbole mit den gewünschten Seiten.
Vorausgesetzt, Ihr Design unterstützt die Hooks, ist das Code-Snippet, das Sie verwenden können, um es der mobilen Fußzeile hinzuzufügen, …
add_action( '[insert_theme-name]_after_footer', '[insert_theme-name]_sticky_mobile_bottom_bar', 20 );
function [insert_theme-name]_sticky_mobile_bottom_bar() {
echo do_shortcode( "[reblex id='####']" );
}Wo „insert theme name“ im obigen Code steht, ersetzen Sie das durch das After-Footer-Code-Snippet für Ihr Theme.
Für das Kadence-Thema wäre es kadence_after-footer, für das Astra-Thema wäre es astra_after-footer und für das Genesis-Framework wäre der Code genesis_after_footer.
So erstellen Sie eine klebrige Fußzeile für ein WP-Thema mit unendlichem Scrollen
Bei Designs, die unendliches Scrollen verwenden, wird die Fußzeile erst geladen, wenn kein Inhalt mehr geladen werden muss.
Eine Problemumgehung besteht darin, den Ansatz von Twitter zu verwenden, nämlich das Fußzeilen-Widget in die Seitenleiste zu verschieben.
Indem Sie den Inhalt verschieben, den Sie in der Fußzeile als letztes Widget in Ihrer Seitenleiste haben möchten, und ihn „klebrig“ machen, wird sichergestellt, dass er sichtbar bleibt.
Verwenden Sie das Q2W3 Fixed Widget für WordPress
Auf diese Weise können Sie alles in eine Seitenleiste verschieben und sichtbar halten.
Gehen Sie zu Plugins > Neu hinzufügen > Suchen Sie nach Q2W3 Fixed Widget für WordPress.
Der zu installierende und zu aktivierende ist By Thomas Maier, Max Bond.
perfekte weihnachten jose mari chan
Wenn Sie nach der Installation zu Ihrem Widget-Bereich gehen, wird ein neues Kontrollkästchen angezeigt, das Sie auswählen können, um ein „festes Widget“ zu erstellen.
Jedes Widget kann repariert werden. Korrigieren Sie jedoch nur das letzte Widget in einem Abschnitt, um zu verhindern, dass sich Widgets überschneiden.
Um eine ausgewählte Anzahl von Seiten einzuschließen, verwenden Sie das Seiten-Widget und verwenden Sie dann die Funktion „Seiten-IDs ausschließen“, um die Anzahl der angezeigten Seiten auf das Wesentliche zu beschränken.
Denken Sie daran, wenn Besucher Ihre Fußzeile erreichen, ist dies die letzte Chance, ihnen etwas zu zeigen, das sie wahrscheinlich brauchen werden. Fügen Sie relevante Informationen in Ihre Fußzeile ein.
… Links zu Ihrer Kontaktseite, Öffnungszeiten, einer FAQ-Seite, Kontaktinformationen etc.
Die Problemumgehung, das Fußzeilenmenü in die Seitenleiste zu platzieren, stellt sicher, dass es das letzte Widget ist, das angezeigt wird, und an einer festen Position sichtbar bleibt.
Bei einer lokalen Unternehmenswebsite ist die Fußzeile auch der Abschnitt, in dem Ihre geschäftlichen NAP-Daten für SEO enthalten sind. Das ist Ihr geschäftlicher „Name, Adresse und Telefonnummer“.
Wenn Sie möchten, dass Ihre Links statt als Linkliste nebeneinander angezeigt werden, verwenden Sie das Widget „Benutzerdefiniertes HTML“ und erstellen Sie die Links dann manuell mit HTML, um Ihre Links anklickbar zu machen. Klickbarer Text hier.