Wie WordPress JS-Dateien und CSS-Dateien korrekt lädt

Bei der Erstellung des WordPress-Theme-Affe-WordPress-Plug-Ins müssen wir häufig Style-Dateien oder JS-Skriptdateien hinzufügen. Da die meisten Benutzer mehrere Plug-Ins auf ihren Websites ausführen, können verschiedene Dateien geladen werden, was leicht dazu führen kann Probleme, daher bietet das WordPress-System Entwicklern ein gutes Warteschlangensystem für Skripte und Stildateien, das hilft, Skriptkonflikte zwischen Plug-Ins zu verhindern. In diesem Artikel stelle ich hauptsächlich vor, wie man Javascript-Dateien und CSS-Dateien in WordPress hinzufügt. Dies ist besonders nützlich für diejenigen, die gerade erst mit der Entwicklung von WordPress-Themes und Plug-Ins beginnen.

Falscher Weg

Wordpress stellt den wp_head-Hook bereit, der uns hilft, bestimmte Header-Nachrichten, wie z. B. allgemeine Schlüsselwörter und Beschreibungen, zum Header der Seite hinzuzufügen. Es gibt einen So fügen Sie den Code wie folgt hinzu:

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo '
'; //添加js文件
}
?>

Diese Methode ist zwar einfach zu verwenden, wird jedoch nicht empfohlen. Diese Lademethode kann leicht zu Konflikten führen WordPress-Skripte.

Wordpress-Skript-Warteschlangensystem

1. Einführung

Wordpress hat eine starke Entwickler-Community auf der ganzen Welt und viele Menschen sind sehr aktiv an der Entwicklung von WordPress-Themes und -Plugins beteiligt -ins. Um zu verhindern, dass von verschiedenen Entwicklern entwickelte Skriptkonflikte auftreten, bietet WordPress eine sehr leistungsstarke Skriptladefunktion wp_enqueue_script. Über diese Funktion können wir WordPress informieren Wo das Skript geladen werden soll. Von welchen Frameworks das Skript abhängt, und wenn diese Funktion die integrierte Javascript-Bibliothek verwendet, kann das mehrfache Laden desselben Skripts vermieden werden. Dies trägt dazu bei, die Ladezeiten von Seiten zu verkürzen und Konflikte mit anderen Themes und Plugins zu vermeiden.

2. Anwendungsbeispiele

Es ist sehr einfach, das korrekte Ladeskript von WordPress zu verwenden. Der Code lautet wie folgt:

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

Sie können den obigen Code einfügen Ihre Plug-in-Datei oder die Datei „functions.php“ Ihres Themes.

Hinweis:

Im Beispiel übergeben wir zunächst die Funktion wp_register_script(), die 5 Parameter empfängt:

$handle
(string) (必须) 脚本名称. 名称必须唯一在之后函数 wp_enqueue_script() 会使用到该名称.
Default: None
$src
(string) (必须) 脚本路径，可以使用绝对路径。
Default: None
$deps
(array) (可选) 脚本依赖包，依赖包会在脚本加载之前预先加载。
Default: array()
$ver
(string) (可选)脚本版本控制。
Default: false
$in_footer
(boolean) (可选) 定义脚本的位置，如果为true脚本会在页面底部加载，默认在head头部加载。
Default: false

Wenn wir die Funktion wp_register_script() verwenden, um Registrieren Sie die Skriptdatei. Anschließend können Sie die Funktion wp_enqueue_script() verwenden, um die registrierte Skriptdatei zu laden.

Vielleicht wird jemand fragen, warum wir die Skriptdatei nicht direkt laden, sondern sie zuerst registrieren und dann laden. Ist das nicht unnötig? Tatsächlich dient dies hauptsächlich dazu, dass andere Entwickler auf der Website problemlos auf Ihre Kernskriptdateien in anderen Plug-Ins oder Themes verweisen können.

Wie WordPress CSS-Stildateien lädt

Das Laden von WordPress-CSS-Stildateien ist das gleiche wie die oben vorgestellte Methode zum Laden von Skriptdateien, wie unten gezeigt:

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

Im obigen Beispiel verwenden wir auch den Hook wp_register_script, um Stildateien zu laden.

Im Beispiel verwenden wir „plugins_url()“, um den Pfad der Stildatei abzurufen. Dies wird im Allgemeinen im Plug-in-Entwicklungsprozess verwendet. Wenn wir das Theme entwickeln und die Funktion „wp_register_script()“ verwenden Sie können get_template_directory_uri() verwenden, um den Pfad der Stildatei abzurufen. Wenn er in einem untergeordneten Thema verwendet wird, können Sie die Funktion get_stylesheet_directory_uri() verwenden, um den Pfad abzurufen:

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

Durch Nach der obigen Analyse hoffe ich, dass Sie JavaScript-Dateien zu WordPress hinzufügen und ein neues Verständnis von CSS-Dateien entwickeln können.