Bedingte Tags zum Laden von Stilen und Skripten in WordPress

Kernpunkte

• WordPress unterstützt bedingte Ladestylesheets und -Skripte, um sicherzustellen, dass diese Dateien nur bei Bedarf geladen werden, wodurch die Website der Website beschleunigt wird und unnötige Daten -Downloads für Benutzer reduziert werden.
• Styling und Skripte sollten gemäß den in WordPress.org -Codierungsstandards empfohlenen Best Practices geladen werden. Die Verwendung von Standard -WordPress -Methoden kann in Unverträglichkeitsproblemen vermieden und sicherstellen, dass die Website effizient bleibt.
• WordPress bietet wp_enqueue_style und wp_enqueue_script Funktionen, die benutzerdefinierte Stylesheets bzw. JavaScript -Dateien enthalten. Diese Funktionen stellen sicher, dass WordPress alle erforderlichen Stylesheets und Skripte findet und sie in der richtigen Reihenfolge herunterladen.
• WordPress liefert bedingte Tags, die in Verbindung mit if...else Anweisungen verwendet werden können, um zu bestimmen, welcher Code unter bestimmten Bedingungen angewendet werden soll. Diese Tags können verwendet werden, um sicherzustellen, dass bestimmte Stilblätter und Skripte nur heruntergeladen werden, wenn Besucher bestimmte Seiten der Website besuchen.

Dieser Artikel ist Teil einer Serie, die in Zusammenarbeit mit SiteGround erstellt wurde. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglicht haben.

Wenn Ihre WordPress -Site nur bestimmte Stylesheets oder JavaScript -Dateien auf einer bestimmten Seite oder nur unter begrenzten Bedingungen verwenden muss, müssen Sie diese Dateien nicht an jedem Ort auf der Website laden.

Dieser Artikel wird Sie nur dann zum Laden von CSS -Stilen und -Skripten leiten, wenn die Website sie benötigt. Auf diese Weise wird Ihre Website schneller geladen und Benutzer, die keine Seiten mit zusätzlichen Dateien besuchen, müssen keine unnötigen Daten in ihren Browser herunterladen.

Warum sollten Stile und Skripte in WordPress hinzugefügt werden?

Wenn in der WordPress-Entwicklung ein Anti-Muster vorhanden ist, können Sie den Abschnitt des HTML-Dokuments <link> und <script></script> -Tags hinzufügen, um das Stylesheet- und JavaScript-Dateien separat zu laden, und dann erledigt es.

Ausführen einer WordPress-Website umfasst die Verwendung von Stylesheets und JavaScript-Code aus der Software selbst, vielen Plug-Ins und aktiven Themen.

Dies bedeutet, dass das Thema oder der Plugin -Autor keine Ahnung im Voraus hat, welche Stile und Skripte für eine bestimmte Installation ausgeführt werden oder welche Reihenfolge diese Ressourcen benötigt werden. Nehmen wir beispielsweise die JQuery -Bibliothek als Beispiel. WordPress selbst kann diese Bibliothek verwenden, um AJAX-Anforderungen und andere Aufgaben zu behandeln, und sie kann auch von mehreren Plug-Ins und aktiven Themen verwendet werden.

Wenn Plug-In- und Themenautoren die Stylesheets und Skripte enthalten, die sie benötigen, indem sie entsprechende Tags direkt zum HTML-Dokument hinzufügen, kann dies zu Konflikten führen, die mehrmals geladenen Ressourcen und/oder eine falsche Ladereihenfolge.

Aus diesem Grund sollten Sie immer Stile und Skripte laden, indem Sie den Best Practices folgen, die in WordPress.org -Codierungsstandards empfohlen werden:

Damit alles harmonisch funktioniert, ist es für Themen und Plugins wichtig, Skripte und Stylesheets mit Standard -WordPress -Methoden zu laden. Dadurch wird sichergestellt, dass die Website effizient bleibt und keine Inkompatibilitätsprobleme vorliegen.

enthält CSS und JavaScript - Themenhandbuch

wie man wp_enqueue_style und wp_enqueue_script verwendet

Die grundlegende Funktion, die ein benutzerdefiniertes Stilblatt in das Thema einbezieht, lautet wie folgt:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Nur die ersten beiden Parameter sind erforderlich, andere Parameter sind optional.

• Parameter ist der Name des Stylesheet. Sie können es Main, Portfolio usw. entsprechend der Datei nennen. Wenn Sie ein Stylesheet aus einem JavaScript -Plugin angeben, verwenden Sie einfach den Namen des Plugins. $handle
• repräsentiert die URL, in der sich das Stylesheet befindet. $src Der Parameter
• Gibt an, ob dieses Stilblatt von einem anderen Stylesheet abhängt, um ordnungsgemäß zu funktionieren. $deps
• bestimmt die Versionsnummer des Stilblatts. $ver
• repräsentiert die Medientypen, die für Stilblätter wie alle, Bildschirm, Druck usw. gelten. $media

Zum Beispiel könnte der Code zum Hinzufügen eines Stylesheet namens Portfolio.css zu Ihrer WordPress -Website so aussehen:

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

Um JavaScript -Dateien einzuschließen, sollten Sie:

verwenden

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

Diese Parameter ähneln denen in

, außer dass der letzte Parameter, der wahre oder falsche Werte basiert, ob Sie den Teil wp_enqueue_style oder <script> Teil des Dokuments platzieren möchten. <head> <body> Angenommen, Sie möchten Ihrer Website Portfolio.js hinzufügen, sieht der Code so aus:

Dieser Code sagt WordPress:

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

Sie möchten die Portfolio -Datei verwenden, die sich im JS -Unterordner innerhalb des aktiven Themaverzeichnisses befindet.

• WordPress verlangt, dass JQuery vor dem Laden des Portfolios.js heruntergeladen werden kann, ansonsten funktionieren letztere nicht ordnungsgemäß (Sie müssen jQuery nicht importieren, da es standardmäßig bereits mit WordPress gebündelt ist).
• WordPress verlangt, dass diese Datei im Abschnitt
des HTML -Dokuments hinzugefügt wird.
• <body>
Möglicherweise müssen Sie mehrere Stylesheets oder Skriptdateien einbeziehen. In diesem Fall wickeln Sie alle Aufrufe in

und

in eine Funktion ein und schalten Sie diese Funktion dann an die entsprechende WordPress -Aktion an. wp_enqueue_style() wp_enqueue_script() Dies ist ein Beispiel. Wenn Sie ein WordPress -Thema entwickeln, können Sie es Ihrer Datei Ihrer Funktionen.Php hinzufügen.

Jetzt können Sie sicher sein, dass WordPress alle erforderlichen Stylesheets und Skripte findet und sie in der richtigen Reihenfolge herunterladen wird.

function mytheme_styles_scripts() {
  // 主样式表，style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  // 作品集部分的样式表
  // (与网站的其余部分不同)
  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  // 作品集部分的 JS
  wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
} 

// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );

Bedingung Laden von Stilblättern und Skripten

Der obige Code funktioniert gut und folgt WordPress Best Practices. WordPress lädt jedoch sowohl portfolio.css als auch portfolio.js von jedem Ort auf Ihrer Website herunter. Wenn Ihre Besucher Ihre Portfolio -Seite noch nie besucht haben, ist dies unglücklich, kann aber passieren, und der Browser lädt zwei unnötige Dateien.

Gehen wir nun noch einen Schritt weiter und stellen Sie sicher, dass WordPress nur dann Portfolio.css und portfolio.js enthält, wenn die Besucher auf Ihren Portfolio -Abschnitt zugreifen.

WordPress Conditional Tag

WordPress bietet bedingte Tags, die in Verbindung mit den regulären if...else -Anweisungen verwendet werden, um einfach auszuwählen, welcher Code unter bestimmten Bedingungen angewendet werden soll.

Wenn Sie beispielsweise einen Code nur auf der Homepage Ihrer Website und anderer Code an anderer Stelle ausführen möchten, schreiben Sie so etwas wie folgt:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Wenn Sie stattdessen einen bestimmten Code außerhalb der Startseite der Website ausführen möchten, schreiben Sie:

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

WordPress bietet eine große Anzahl von bedingten Tags, und Sie können eine vollständige Liste im Abschnitt "Bedingungs -Tags" des Themashandbuchs anzeigen.

Sie können das bedingte Tag verwenden, um sicherzustellen, dass WordPress nur dann das Portfolio -Seite Ihrer Website besucht.

Schauen wir uns einige Möglichkeiten an, wie Sie dies tun können.

Benutzer -Seiten -ID

Sie können das bedingte Tag verwenden, um zu überprüfen, ob der Benutzer die Portfolio -Seiten -ID auf der Website verwendet.

Um die Seiten -ID zu verstehen, machen Sie Folgendes:

• Melden Sie sich beim Administratorbereich Ihrer WordPress -Website an.
• Klicken Sie auf die Seite, um auf eine Liste aller Seiten auf der Website zuzugreifen.
• Klicken Sie auf den Titel der Seite, an dem Sie interessiert sind, und öffnen Sie sie im Editor.
• Die Seite ist jetzt im Editor geöffnet. Bitte überprüfen Sie die URL in der Adressleiste des Browsers. Sie sollten so etwas wie Post = plus eine Zahl sehen. Diese Nummer ist die Seiten -ID:

Jetzt, da Sie die Seiten -ID kennen, können Sie das bedingte Tag verwenden, um den Code zu ändern, der zuvor das Themenstylesheet und die Skripte enthält, wie unten gezeigt:

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

verwenden Sie den Seitentitel

Das bedingte Etikett der Seite gilt auch für den Seitentitel. Wenn Ihre Portfolio -Seite den Titel "Mein Portfolio" enthält, sieht der Code möglicherweise so aus (ich habe gerade den bedingten Abschnitt für die Kürze hinzugefügt):

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

verwenden Sie Page alias

Sie können das bedingte Tag mit einem Seitenalias verwenden, der benutzerfreundliche URL der Seite. Das Folgende sieht in der tatsächlichen Anwendung aus:

function mytheme_styles_scripts() {
  // 主样式表，style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  // 作品集部分的样式表
  // (与网站的其余部分不同)
  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  // 作品集部分的 JS
  wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
} 

// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );

Schlussfolgerung

In diesem Artikel diskutiere ich, wie man Stylesheets und Skriptdateien in einer WordPress -Website auf eine bedingte Weise einbezieht. In einigen Fällen ist die Anzahl der zusätzlichen Stile gering, sodass es nicht viel sinnvoll ist, ein dediziertes Stilblatt für sie zu erstellen. Dies generiert nur eine HTTP -Anfrage, die Ihre Website möglicherweise nicht benötigt.

Unter geeigneten Bedingungen unterscheidet sich beispielsweise das Design einer Seite oder eines Themenbereichs vom Rest der Website. Das selektive Laden von Stilblättern und -Skripten folgt den besten Praktiken der WordPress und stellt sicher, dass der Browser des Besuchers nur heruntergeladen wird Die für den erforderliche Inhalt erforderliche Datenmenge.

Wie können Sie benutzerdefinierte Skripte und Stile in Ihre WordPress -Site aufnehmen? Klicken Sie auf das Kommentarfeld unten, um zu teilen.

FAQs (FAQ) über bedingte Tags und Ladestile und Skripte in WordPress

Was sind die bedingten Tags in WordPress und wie funktionieren sie?

Das bedingte Tag in WordPress ist eine PHP -Funktion, die in der Themendatei verwendet wird, um den auf einer bestimmten Seite angezeigten Inhalt zu ändern, basierend auf den Bedingungen, die die Seite erfüllt. Sie werden verwendet, um festzustellen, ob eine bestimmte Bedingung erfüllt wird, bevor eine bestimmte Funktion ausgeführt wird. Beispielsweise können Sie das bedingte Tag verwenden, um zu überprüfen, ob eine Seite ein einzelner Beitrag ist, bevor eine bestimmte Seitenleiste angezeigt werden.

Wie verwendet ich bedingte Tags, um Stile und Skripte in WordPress zu laden?

Um konditionelle Tags zum Laden von Stilen und Skripten in WordPress zu verwenden, müssen Sie Ihre Skripte und Stile in der Datei der Funktionen des Themas hinzufügen. Sie können die Funktionen wp_enqueue_script und wp_enqueue_style mit den bedingten Tags verwenden. Wenn Sie beispielsweise Skripte nur auf der Startseite laden möchten, können Sie das bedingte Tag is_home() verwenden.

Was sind einige häufige bedingte Tags in WordPress?

Einige häufig verwendete Zustands -Tags in WordPress enthalten is_single(), is_page(), is_home(), is_front_page(), is_category(), is_tag(), is_author(),

, usw. Jedes Tag überprüft sich nach bestimmten Kriterien, z. B. ob es sich bei der Seite um einen einzelnen Beitrag, eine bestimmte Seite, eine Homepage, eine Homepage, eine Kategorieseite, eine Tag -Seite oder eine Autorenseite handelt.

Wie erstelle ich bedingte Code -Snippets in WordPress?

if Um einen bedingten Code -Snippet in WordPress zu erstellen, müssen Sie das bedingte Tag in der Anweisung PHP if verwenden. Der Code in der Anweisung if wird nur ausgeführt, wenn die Bedingung erfüllt ist. Um beispielsweise Code -Snippets nur auf der Startseite anzuzeigen, können Sie das bedingte Tag -Tag in der Anweisung is_home() verwenden.

Warum wird mein Stil nicht in WordPress geladen?

Wenn Ihr Stil nicht in WordPress geladen wird, kann dies aufgrund einer Reihe von Gründen liegen. Der häufigste Grund ist, dass die Stildateien in der Datei functions.php nicht korrekt registriert sind. Stellen Sie sicher, dass Sie die wp_enqueue_style -Funktion korrekt verwendet haben. Überprüfen Sie auch, ob der Dateipfad und die Abhängigkeiten korrekt sind. Wenn Sie das bedingte Tag verwenden, stellen Sie sicher, dass der Zustand erfüllt ist.

Wie lädt man bedingte CSS in WordPress auf die richtige Art und Weise?

Um bedingte CSS in WordPress zu laden, müssen Sie die Funktion wp_enqueue_style verwenden, um die CSS -Datei in der Funktion des Themas zu registrieren. Sie können die Registerkarte Bedingungen verwenden, um die Bedingungen anzugeben, unter denen die CSS -Datei geladen werden soll. Um beispielsweise CSS -Dateien nur auf der Startseite zu laden, können Sie das bedingte Tag is_home() verwenden.

Kann ich mehrere bedingte Tags in WordPress verwenden?

Ja, Sie können mehrere bedingte Tags in WordPress verwenden. Sie können sie mit logischen Operatoren wie und (&&) und oder (||) kombinieren. Um beispielsweise zu überprüfen, ob eine Seite ein einzelner Beitrag ist und keine Startseite ist, können Sie die is_single() und die !is_home() -Teditions -Tags verwenden.

Wie verwenden Sie das bedingte Tag, um verschiedene Stile für verschiedene Seiten in WordPress zu laden?

Um verschiedene Stile für verschiedene Seiten in WordPress zu laden, können Sie die bedingten Tags in der Datei functions.php des Themas verwenden. Verwenden Sie für jeden Stil die Funktion wp_enqueue_style und überprüfen Sie die bedingten Tags für eine bestimmte Seite. Um beispielsweise einen bestimmten Stil für die Startseite zu laden und einen anderen Stil für einen einzelnen Beitrag zu laden, können Sie die bedingten Tags is_home() und is_single() verwenden.

Was ist der Unterschied zwischen

und is_home() in WordPress? is_front_page()

Das bedingte Tag in WordPress prüft, ob die Startseite angezeigt wird, während die

Bedingungsprüfungen überprüft, ob die Startseite angezeigt wird. Wenn Sie Ihre Homepage festgelegt haben, um Ihre neuesten Beiträge anzuzeigen, kehren beide Tags True zurück. Wenn Sie jedoch die statische Seite als Homepage festgelegt haben, kehrt is_home() für diese Seite true zurück und is_front_page() wird für die Seite, die als Postseite festgelegt wird, true zurück. is_front_page() is_home() Kann ich bedingte Tags außerhalb des Schleifens in WordPress verwenden?

Ja, Sie können bedingte Tags außerhalb des Schleifens in WordPress verwenden. Einige bedingte Tags (z. B.

und

) funktionieren jedoch möglicherweise nicht wie erwartet, wenn sie vor der Schleife verwendet werden. Dies liegt daran, dass WordPress nach Beginn der Schleife nur die Details der Abfrage kennt. Daher wird im Allgemeinen empfohlen, diese bedingten Etiketten innerhalb oder nach Beginn der Schleife zu verwenden. is_single()

Das obige ist der detaillierte Inhalt vonBedingte Tags zum Laden von Stilen und Skripten in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!