WordPress: Wie man Zeilenfarben wechseln

May 7

WordPress: Wie man Zeilenfarben wechseln

Abwechseln Zeilenfarben--oft als "Zebra-Striping"--in Tabellen und Listen Webseiten lesbarer machen. Wenn Tabellen oder Listen Hintergrundfarben nicht abwechseln, wird es leichter für eine Person, die Augen zu überspringen um und wichtige Informationen falsch. Die einfachste Methode für abwechselnde Zeilenfarben soll in WordPress jQuery verwenden. Sie müssen zunächst Ihr Thema mit jQuery kompatibel machen und dann hinzufügen jQuery-Code, die eine neue Klasse in jede zweite Zeile einer Tabelle oder Liste einfügt. Verwenden Sie CSS-Code, um dem Browser mitteilen welche Hintergrundfarbe für diese Klasse verwenden.

Anweisungen

1 Öffnen Sie die Datei "header.php" von Ihrem WordPress-Theme und suchen Sie nach "<? Php wp_head();? >" zwischen < Kopf > und < / Head > Markierungen. Fügen Sie diesen Code oberhalb der wp_head() Funktion:

<? Php wp_enqueue_script("jquery");? >

Wenn Ihr Thema ein < Script >-Tag, die Verweise auf die jQuery-Bibliothek enthält, entfernen Sie das gesamte < Skript >-Tag. WordPress kommt mit jQuery bereits installiert.

2 Finde das < Script > und < / script >-Tags zwischen Ihrem < Head >-Tags. Dieser Satz von < Script >-Tags beinhaltet nicht das Attribut "Src", da es Code eingebettet in die Datei "header.php" enthält. Wenn Ihr Thema nicht diese Tags verfügt, fügen Sie diese. Fügen Sie diesen Code zwischen die < Script >-Tags, wie folgt:

< Skript-Typ = "Text/Javascript" >

{jQuery(document).ready(function()}

jQuery (".alternate: auch tr").addClass("alt");

});

< / script >

Jedes andere < tr > Tag in einer Tabelle mit einem Klassennamen des "Alternate" Ruft den Namen der "Alt"-Klasse. Sie können "sogar" bis "ungerade" wechseln, falls gewünscht.

3 Öffnen Sie die Datei "style.css" von Ihrem WordPress-Theme, und fügen Sie diesen CSS-Code:

.Alternate .alt {}

Hintergrund: Farbe;

}

Ändern Sie "Farbe" in den Namen einer Farbe oder ihre Hexadezimalwerte. Dieser CSS-Code legt eine Hintergrundfarbe auf jeden Tag mit einem Klassennamen von "Alt", wenn dieser Markierung geschachtelt ist ein weiterer Tag gegeben einen Klassennamen der "Alternative."

Tipps & Warnungen

  • Die richtige Methode zum Einbinden von jQuery in WordPress präsentiert eine neue Ausgabe zum Thema unerfahrene Entwickler, weil Sie nicht das übliche Dollarzeichen Präfix im jQuery Code verwenden können. Ersetzen immer das Dollarzeichen mit "jQuery", oder jQuery Code funktioniert nicht.
  • Sichern Sie Ihre Design-Dateien immer vor der Bearbeitung. Obwohl jQuery Fehler Ihrer WordPress-Website nicht unterbrochen werden, können Sie PHP-Code zu brechen und verursachen einen weißen Bildschirm auf Ihrer Website.