【问题标题】:localhost for wordpress: correct way to link reference css/js files?wordpress 的本地主机:链接参考 css/js 文件的正确方法?
【发布时间】:2018-07-16 10:53:03
【问题描述】:

我正在尝试将 Bootstrap 布局转换为 Wordpress,但是在链接 js/css 资源时遇到了一些困难。

什么对 index.html 有效,即。

<link href="./vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="./css/business-frontpage.css" rel="stylesheet">

即使具有相同的文件结构,似乎也不适用于 header.php 文件。

以前我曾尝试修改 Wordpress 布局,但我是在实时网站上进行的,没有尝试先通过 localhost 进行修改,我没有遇到这个问题。谁能让我知道这样做的正确方法?

【问题讨论】:

标签: javascript php html css wordpress


【解决方案1】:

这取决于您的工作文件的存储位置。如果它们在根目录中,您只需删除代码中的点,即可从根目录访问文件。例如,www.mydomain.com/vendor/bootstrap/css/bootstrap.min.css 可以访问您的引导 CSS 文件。

但是,如果您将这些文件放在您的主题中,则必须在点所在的位置添加 &lt;?php echo get_template_directory_uri(); ?&gt; 才能链接到您的主题文件夹。

【讨论】:

  • get_template_directory_uri() 存在问题。如果主题是子主题,它将返回主主题的 url。
【解决方案2】:

将所有静态资产移动到你的模板目录并使用get_template_directory_url函数:

<link href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/css/business-frontpage.css" rel="stylesheet">

更多详情:https://developer.wordpress.org/reference/functions/get_template_directory_uri/

【讨论】:

  • get_template_directory_uri() 存在问题。如果主题是子主题,它将返回主主题的 url。
  • 我不知道。你有解决这个问题的办法吗?
  • 是的,请改用get_stylesheet_directory_uri()developer.wordpress.org/reference/functions/…
【解决方案3】:

排队脚本和样式

将脚本和样式添加到主题的正确方法是将它们排入functions.php 文件中。所有主题都需要 style.css 文件,但可能需要添加其他文件来扩展主题的功能。

样式表

您的 CSS 样式表用于自定义主题的呈现方式。样式表也是存储主题信息的文件。

而不是将样式表加载到您的header.php 文件中,您应该使用wp_enqueue_style 加载它。为了加载您的主样式表,您可以将其排入functions.php

入队style.css

wp_enqueue_style( 'style', get_stylesheet_uri() );

这将查找名为 style 的样式表并加载它。

样式入队的基本函数是:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
  • $handle 只是样式表的名称。
  • $src 是它所在的位置。其余参数是可选的。
  • $deps 指的是这个样式表是否依赖于另一个样式表。如果设置了此项,则不会加载此样式表,除非先加载其依赖的样式表。
  • $ver 设置版本号。
  • $media 可以指定加载该样式表的媒体类型,例如allscreenprinthandheld em>。

因此,如果您想在主题根目录中名为 CSS 的文件夹中加载名为 slider.css 的样式表,您可以使用:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

脚本

主题所需的任何其他 JavaScript 文件都应使用 wp_enqueue_script 加载。这确保了正确的加载和缓存,并允许使用条件标签来定位特定页面。这些是可选的。

wp_enqueue_script 使用与 wp_enqueue_style 类似的语法。

将你的脚本加入队列:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
  • $handle 是脚本的名称。
  • $src 定义脚本所在的位置。
  • $deps 是一个数组,可以处理您的新脚本所依赖的任何脚本,例如 jQuery。
  • $ver 可让您列出版本号。
  • $in_footer 是一个 boolean (true/false) 参数,允许您将脚本放在 HTML 文档的页脚而不是页眉中,这样它就不会延迟 DOM 的加载树。

您的入队函数可能如下所示:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

组合入队函数

最好将所有入队的脚本和样式组合成一个函数,然后使用wp_enqueue_scripts 操作调用它们。此功能和操作应位于初始设置下方的某个位置(如上所示)。

function add_theme_scripts() {
   wp_enqueue_style( 'style', get_stylesheet_uri() );

   wp_enqueue_style( 'slider', get_template_directory_uri() . 
   '/css/slider.css', array(), '1.1', 'all');

    wp_enqueue_script( 'script', get_template_directory_uri() . 
     '/js/script.js', array ( 'jquery' ), 1.1, true);

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) 
    ) {
     wp_enqueue_script( 'comment-reply' );
    }
  }
  add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

【讨论】:

    猜你喜欢
    • 2013-04-23
    • 1970-01-01
    • 1970-01-01
    • 2016-01-02
    • 2016-07-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-24
    相关资源
    最近更新 更多