WordPress 调用 CSS 和 JavaScript 的最佳方法 - 详细教程

<p>在 WordPress 中调用 CSS 和 JavaScript 文件有以下几种常见的方法：</p>
<ol>
<li>在主题文件中引入：您可以在主题的头部文件（通常是 header.php）中使用<link>标签来引入 CSS 文件，使用<script>标签来引入 JavaScript 文件。您可以将这些代码直接添加到对应的文件中，或者使用 <code>wp_enqueue_style</code> 和 <code>wp_enqueue_script</code> 函数来实现。</li>
</ol>
<p>例如，在头部文件中引入 CSS 文件的代码如下：</p>
<pre><code class="language-php">&lt;link rel=&quot;stylesheet&quot; href=&quot;&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/style.css&quot;&gt; 
</code></pre>
<p>在尾部文件中引入 JavaScript 文件的代码如下：</p>
<pre><code class="language-php">&lt;script src=&quot;&lt;?php echo get_template_directory_uri(); ?&gt;/script.js&quot;&gt;&lt;/script&gt;
</code></pre>
<ol start="2">
<li>使用自定义功能：您可以在主题的 functions.php 文件中使用 <code>wp_enqueue_style</code> 和 <code>wp_enqueue_script</code> 函数来调用 CSS 和 JavaScript 文件。这样可以更加灵活地管理和控制文件的加载顺序。</li>
</ol>
<p>例如，在 functions.php 中加载 CSS 文件的代码如下：</p>
<pre><code class="language-php">function mytheme_enqueue_styles() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );
</code></pre>
<p>在 functions.php 中加载 JavaScript 文件的代码如下：</p>
<pre><code class="language-php">function mytheme_enqueue_scripts() {
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
</code></pre>
<ol start="3">
<li>使用插件：如果您不想直接编辑主题文件，可以使用一些专门的插件来管理 CSS 和 JavaScript 文件的加载。一些受欢迎的插件包括 'Autoptimize' 和 'W3 Total Cache' 等。</li>
</ol>
<p>这些方法可以根据您的具体需求和主题结构来选择使用。请记得在编辑主题文件之前备份您的 WordPress 网站，以防止意外情况发生。</p>