So erstellen Sie einen klebrigen Header in WordPress

In den letzten zehn Jahren wurde immer mehr Wert auf die Website-Navigation gelegt. Dies fiel mit der weit verbreiteten Verwendung von Smartphones zusammen, die im Vergleich zur herkömmlichen Desktop-Oberfläche eingeschränkte Navigationsoptionen haben. Der Unterschied im Website-Design ist mehr als offensichtlich, wenn Sie sich einen Vergleich zwischen einer Website aus dem Jahr 2011 und einer Website von heute ansehen.

Eine der Hauptmethoden, die bei der Neukonfiguration der Site-Layouts verwendet wurden, waren Sticky-Elemente. Entsprechend benannt, bleiben diese Elemente an den Rändern der Seite haften, wenn Sie sich darauf bewegen, dh sie behalten ihre ursprüngliche Position bei (denken Sie an das Einfrieren von Fenstern in Excel, und Sie werden eine gute Vorstellung davon haben, wie es funktioniert).

Oben, unten, links und rechts

Sticky-Elemente sind normalerweise für Menüs, Kopfzeilen und/oder Statusleisten reserviert; Diese bieten dem Besucher große Flexibilität, da er sofort von einer Seite zur nächsten wechseln kann, ohne überhaupt zurückgehen zu müssen. Außerdem sind all diese zunächst an den oberen und unteren Seitenrändern positioniert, was mit der gesamten Prämisse gut funktioniert. Es wäre extrem schwierig, eine Seite um ein klebriges Element herum aufzubauen, das sich in der Mitte einer Seite befindet.

Selten sind sie auch am linken und rechten Rand zu finden, mit gleicher Funktion, nur unterschiedlichem Layout. In diesen Fällen werden sie ausgeblendet, bis Sie mit dem Mauszeiger darüber fahren oder sie auf dem Bildschirm berühren.

Platzsparer

Das Interessante an Sticky-Elementen ist, dass sie Platz auf der Seite und auf der gesamten Website sparen – sie können tatsächlich verwendet werden, um ganze Seiten zu ersetzen. Denn sie lassen den Hauptteil der Seite intakt und machen die Ränder zu multifunktionalen Werkzeugen, die viele Funktionen der Seite für sich übernehmen. Denken Sie nur einen Moment über Ihr durchschnittliches Website-Layout nach.

Die Oberseite ist für die Menüs reserviert, die Seiten enthalten, die nach bestimmten Kategorien und einer Suchleiste sortiert sind. Diese sind beide beim Scrollen hinter einer Leiste versteckt und werden bei Bedarf erweitert. Wenn dies nicht der Fall wäre, würde nur der Menübaum den gesamten oberen Bereich Ihrer Seite einnehmen und beim Herunterscrollen nicht „folgen“, sodass Ihr Besucher ständig auf und ab gehen müsste, um nur durch die Seiten zu navigieren .

Andererseits kann ein klebriges unteres Element ganz einfach eine ganze Support-Seite ersetzen – fügen Sie einfach die E-Mail-Adresse und/oder Nummer zusammen mit einem Chat-Button hinzu, und schon kann es losgehen. Sie bieten Ihren Besuchern eine ständig präsente Möglichkeit, mit Ihnen in Kontakt zu treten. Die praktische Anwendung ist einmal mehr fantastisch – ein Kunde blättert durch Ihre Produktseiten, hat eine Frage und findet sofort heraus, was er braucht, indem er auf den Chat-Button klickt.

Sticky-Elemente erstellen

Wenn wir über WordPress sprechen, gibt es immer zahlreiche Möglichkeiten, alles zu tun, was Ihnen einfällt, und das Gleiche gilt hier. Sie können Sticky-Elemente manuell im Standardeditor erstellen oder ein Plugin verwenden, das die Notwendigkeit der Codierung durch eine anfängerfreundliche Oberfläche ersetzt. Der Kontrast zwischen den Endergebnissen ist minimal, aber der Weg dorthin macht den Unterschied. In unserem Beispiel verwenden wir Sticky-Header, da sie bei weitem das häufigste Element sind, das zum Sticken verwendet wird.

Manuelles Erstellen eines Sticky-Headers

Das manuelle Erstellen eines Sticky-Headers in WordPress erfordert die Verwendung von CSS-Code. Ohne zu technisch zu werden, CSS-Code ist etwas, das wir praktisch jedem Element auf einer Seite hinzufügen können, um seine Eigenschaften zu ändern. Bei der manuellen Codierung ist dies unsere Hauptmethode der Anpassung. Die Verwendung von CSS erfordert zunächst, dass der Header auf einer Seite vorhanden ist, also stellen Sie sicher, dass es überhaupt etwas gibt, das angepasst werden kann. WordPress vereinfacht diesen Vorgang, da sogar der Standardeditor die Möglichkeit bietet, ihn mit einem Klick hinzuzufügen.

Sobald Sie einen Header haben, mit dem Sie arbeiten können, müssen Sie auf die Konsole zugreifen. Gehen Sie einfach zum Abschnitt „Erscheinungsbild“ auf der linken Seite Ihres Dashboards, wählen Sie „Anpassen“ und klicken Sie dann auf „Zusätzliches CSS“. Wenn die Konsole jetzt geöffnet ist, müssen Sie den Code eingeben, der Ihren Header sticky macht:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

Der obige Code ist nur ein Beispiel dafür, wie er im Allgemeinen aussehen sollte, kein endgültiger Befehl. Denken Sie daran, dass die erste Zeile immer spezifisch für jede Website ist – ersetzen Sie #website-navigation durch die CSS-Klasse oder ID Ihres Navigationskopfs, bevor Sie zum Seiteneditor zurückkehren.

Nachdem Sie die Funktionalität im Seiten-/Beitragsvorschaufenster überprüft haben, veröffentlichen Sie einfach, und Sie haben einen klebrigen Header. Wir müssen darauf hinweisen, dass Sie wahrscheinlich den CSS-Code erweitern möchten, um mehr als nur das „Sticky“-Attribut für einen Header wie diesen zu umfassen – es wird empfohlen, Dinge hinzuzufügen, die den Header visuell hervorheben, wie z. Einzug usw. Da es sich um eine dauerhafte Befestigung auf einer Seite handelt, kann es leicht übersehen werden, also sollten Sie versuchen, es hervorzuheben.

Erstellen eines Sticky-Headers mit einem Plugin

Es gibt eine große Überschneidung zwischen denen, die eine Website für ihr Unternehmen oder ihren Blog benötigen, und denen, die einfach nicht über das Wissen verfügen, etwas zu erstellen, das professionell aussieht und sich anfühlt. Glücklicherweise gibt es bei WordPress so viele Plugins, die das Leben für alle einfacher machen; Sie brauchen praktisch nichts weiter als grundlegende Softwarekenntnisse, um Ihre Ziele zu erreichen. WP Sticky ist ein großartiges Beispiel für ein Plugin, das die gesamte Codierung, die wir oben behandelt haben, durch eine benutzerfreundliche Oberfläche ersetzt, die jeder schnell erreichen kann. Gleichzeitig bietet es die gleiche Menge an Funktionalität, die Sie beim manuellen Erstellen eines Sticky-Headers hätten. Lass es uns aufschlüsseln.

Erstellen eines Elements

So wie Sie bei der Verwendung von CSS zunächst einen Header benötigen, müssen Sie ein Element erstellen, dem Sie dann das Sticky-Attribut hinzufügen.

Es gibt zwei verschiedene Möglichkeiten, das Element herauszuheben – Sie können die Bezeichnung in das erforderliche Feld eingeben, oder Sie können das Element durch ein Vorschaufenster auswählen, indem Sie darauf klicken (dies funktioniert Wunder, wenn Sie Schwierigkeiten haben, die Bezeichnungen herauszufinden). . Wenn Sie Ihr Element im Vorschaufenster auswählen, sehen Sie die sich ändernden Bezeichnungen oben auf Ihrem Bildschirm.

Wir haben festgestellt, dass Sie nach einiger Zeit mit dem Plugin so vertraut damit werden, dass Sie die visuelle Auswahl kaum noch verwenden werden. Die Bezeichnungen werden vertraut, was zu einer einfachen und manuellen Eingabe führt und Ihnen Zeit spart. Bis Sie mit diesem Ausmaß vertraut sind, wird die visuelle Auswahl Ihr bester Freund sein. Letztendlich führen Sie beide Methoden zum selben Ort – einem klebrigen Header im Frontend.

Lass es gut aussehen

Nicht alle klebrigen Elemente sind gleich, und Ihres sollte auch kein 08/15-Beispiel sein. Der Abschnitt mit den visuellen Einstellungen bietet Ihnen eine Fülle von Anpassungsoptionen, mit denen Sie arbeiten können, um Ihren Sticky-Header in jeder Hinsicht einzigartig zu machen.

Das erste, was Sie berücksichtigen müssen, ist die Positionierung Ihres Elements. Da wir eine Kopfzeile erstellen, ist dies eine einfache Entscheidung – wir kleben sie oben auf die Seite. Die Positionierung ist der Schlüssel zu einer guten Kopfzeile. Wenn Sie also nicht möchten, dass sie ganz oben auf der Seite liegt, können Sie sie für eine bessere Anpassung ein paar Pixel nach unten verschieben. Wenn Ihre Website eine Admin-Symbolleiste für registrierte Benutzer verwendet, können Sie das Plugin außerdem automatisch danach suchen lassen und die Kopfzeile entsprechend anpassen.

Wir haben ein wenig die Notwendigkeit angesprochen, dass eine Website vollständig reaktionsfähig sein muss, da es so viele Möglichkeiten gibt, wie potenzielle Besucher im Internet surfen können. Um Ihre Website vollständig anpassungsfähig zu machen, können Sie auswählen, auf welchen Bildschirmen die Kopfzeile fixiert werden soll.

Normalerweise profitieren kleinere Bildschirme am meisten von klebrigen Headern, während größere Bildschirme, die auf herkömmlichen Desktops mit mehr Navigationsoptionen verwendet werden, ohne sie gut auskommen. Die Größen sind in vier Gruppen unterteilt, die alle wichtigen Bildschirmgrößen abdecken.

Der Z-Index ist eine optionale Einstellung, die viele auf den ersten Blick verwirren könnte. Aus diesem Grund und der Tatsache, dass es sich um ein optionales Feature handelt, werden viele es wahrscheinlich abtun und ignorieren. Wenn alles funktioniert, werden Sie wahrscheinlich nicht einmal zurückblicken; Wenn es jedoch Probleme mit der Anzeige gibt, könnte der Z-Index möglicherweise eine schnelle Lösung sein. Stellen Sie sich eine Seite im Wesentlichen als eine Sammlung von Stapeln vor, bei denen die oberen Stapel höhere Nummern haben als die unteren. Wenn also etwas Ihren Sticky-Header verdeckt, versuchen Sie, den Z-Index zu erhöhen (99999 wird als funktionierender Wert vorgeschlagen).

Mit Ihrem klebrigen Header „Top of the Stacks“ ist es an der Zeit, beim Hinzufügen von Effekten noch kreativer zu werden, während Sie nach unten scrollen. Wenn beide Optionen deaktiviert sind, behält die Kopfzeile einfach ihre Position oben wie ein Ausschnitt der Originalseite. Sie können mit Effekten wie Einblenden oder Herunterschieben mehr Flare hinzufügen. Berücksichtigen Sie das visuelle Gesamtdesign Ihrer Website, bevor Sie sich für diese Art von Effekten entscheiden. aber – oft ist weniger mehr.

Visuelle Effekte sind nicht nur auf diejenigen beschränkt, die mit Bewegung verbunden sind. Sie können auch die Kopfzeile selbst anpassen (zusätzlich zu den Bewegungen, die Sie beim Erstellen der Kopfzeile vorgenommen haben). Opazität ist nützlich, wenn Sie nicht möchten, dass die Kopfzeile andere Inhalte auf der Seite verdeckt. Wenn Sie ihn auf etwa 50 % einstellen, werden sowohl die Kopfzeile als auch der Inhalt darunter relativ sichtbar.

Eine noch nützlichere Funktion als die Deckkraft ist das Anpassen des Bildlaufbereichs. Falls Sie sehr lange Seiten haben, wie es Blogs normalerweise haben, gibt es einen bestimmten Punkt beim Navigieren nach unten, an dem ein klebriger Header einfach keinen Sinn mehr macht. Dies sind die Zeiten, in denen es eine gute Idee ist, die Kopfzeile zu entfernen, nachdem Ihr Besucher weit genug nach unten gescrollt hat.

Schließlich gibt es eine Option, um die Hintergrundfarbe der Kopfzeile zu ändern, wenn sie klebrig ist, wodurch sie noch mehr hervorsticht, aber auf ihre ursprünglichen Werte zurückgesetzt wird, wenn die Kopfzeile nicht mehr klebrig ist.

Der allerletzte Teil der visuellen Bearbeitung bringt uns zurück zur manuellen Bearbeitung des Sticky-Headers über CSS.

Auch wenn Sie wirklich keine Vorkenntnisse in der Programmierung benötigen, um WP Sticky erfolgreich zu verwenden, kann es Ihre Arbeit verbessern, wenn Sie es verwenden. Das Feature ist optional, es liegt also ganz bei Ihnen, ob und in welchem ​​Umfang Sie es nutzen möchten.

Erweiterte Optionen

Im Abschnitt „Erweiterte Optionen“ dreht sich so ziemlich alles um Ausschluss, dh in welchen Fällen ein Sticky-Header nicht mehr sticky ist und zur „ursprünglichen Programmierung“ zurückkehrt.

Das manuelle Einrichten der Bildschirmgröße, bei der die Kopfzeile nicht klebrig ist, ist ein Schritt weiter als die vier Standardgrößen, die Ihnen im Abschnitt „Visuelle Einstellungen“ angezeigt werden. Hier können Sie so spezifisch sein, wie Sie möchten. Wenn es also in Zukunft jemals einen wilden Bildschirm gibt, der in keine der vorgegebenen Größen passt, können Sie Regeln aufstellen, die dafür funktionieren.

Damit ein Header nicht klebrig wird, geht es nicht nur um die Bildschirmgröße, sondern auch um den Inhalt Ihrer Website, genauer gesagt um die Kategorisierung. Sie können festlegen, dass Ihre Kopfzeile nicht auf bestimmten Seiten, Beiträgen und Beitragstypen, bestimmten Kategorien oder Inhalten mit bestimmten Tags haftet. Alle diese Bedingungen können gemischt und angepasst werden, um das perfekte Kompendium zu erstellen, wenn der klebrige Header verwendet wird und wenn nicht.

Ähnlich wie Sie ganz am Anfang das Sticky-Element (in unserem Fall Header) ausgewählt haben, können Sie auch weiter unten auf der Seite ein Push-up-Element auswählen, auf dem Ihr Header nach oben verschoben werden soll. Dadurch bewegt sich Ihre Kopfzeile im Wesentlichen an den Rand dieses Elements, ohne Polsterung oder irgendeinen Abstand zwischen ihnen.

Um das Ganze zu beenden, wenn Sie die Nase voll haben und Ihr klebriges Element nicht mehr wollen, gibt es immer die letzte Option, es vollständig zu löschen. Seien Sie gewarnt, dass dies eine dauerhafte Aktion ist und alle Anpassungen, die Sie an dem Element (in diesem Fall der Kopfzeile) vorgenommen haben, verloren gehen.

Zusammenfassung

Es ist schwer zu sagen, welche Vorgehensweise besser ist. Mit CSS stehen Ihnen definitiv mehr Optionen zur Verfügung, aber das ist insgesamt eine Lösung für sehr wenige Leute. Auf der anderen Seite kombiniert ein Plugin wie WP Sticky Benutzerfreundlichkeit mit immer noch robuster Funktionalität, was es zu einer perfekten Wahl für Anfänger oder diejenigen macht, die sich noch nicht sicher sind, von Grund auf neu zu programmieren. Der wahrscheinlich beste Weg, um einen klebrigen, funktionierenden Header zu erstellen, besteht darin, mit Letzterem zu beginnen und sich zu Ersterem hochzuarbeiten.

Autor: Matej Milohnoja

Hat früher über Spiele und Spiele im Allgemeinen geschrieben, ist aber inzwischen zum Testen und Schreiben über Webentwicklungssoftware gewechselt. Spielt immer noch viele Spiele, nur zum Spaß.