本地主机的WordPress的:正确的方式来链接引用的CSS / JS文件?

By simon at 2018-02-07 • 0人收藏 • 34人看过

我试图将Bootstrap布局转换为Wordpress,但是我面临 链接js / css资源有些困难。 什么w为了index.html,即。

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

<link href="./css/business-frontpage.css" rel="stylesheet">
即使使用相同的文件结构,似乎也不能在header.php文件中工作。 以前我h大道试图修改一个WordPress的布局,但我做了一个现场 网站,还没有尝试过通过本地的第一,所以我没有的nCounter 这个问题。任何人都可以让我知道正确的方法来做到这一点?

4 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

将所有静态资产移动到您的模板目录并使用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">
更多细节在这里:

2018-02-07   #2

这取决于你的工作文件的存储位置。如果他们在 根,您可以简单地删除代码中的点d的文件将是 从根访问。例如,您的引导CSS文件将被访问 由* www.mydomain.com * /供应商/bootstrap/css/bootstrap.min.css。 但是,如果您将这些文件放在您的主题中,则必须这样做 加<?php echo get_template_directory_uri(); ?> wh你的点是为了链接到你的主题文件夹。

2018-02-07   #3

将所有静态资产移动到您的模板目录并使用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">
更多细节在这里:

2018-02-07   #4

排队脚本和样式 将脚本和样式添加到主题的正确方法是将它们排入其中 functions.php f尔斯。所有主题都需要style.css文件,但是 可能需要添加其他文件来扩展功能o你的 主题。 * 样式表 您的CSS样式表用于自定义您的主题的演示文稿。一个 样式表也是the文件存储您的主题信息。 而不是在你的header.php文件中加载样式表,你应该lOAD 它使用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是它所在的位置。其余的参数s是可选的。   * $deps是指这个样式表是否依赖于另一个样式表。如果这是设置,他的样式表将不会被加载,除非它的依赖样式表被首先加载。   * $ver设置版本号。* $media可以指定加载此样式表的媒体类型,例如allscreenprinthandheld。所以如果你想加载名为slider.css的文件夹 CSS在你主题的根目录下,你w应该使用:
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');
* *脚本 主题所需的任何其他JavaScript文件都应该使用加载 wpenqueuescript。这确保正确的加载和缓存,并允许使用 条件标签来定位特定的页面。这些是可选的。 * WP_enqueue_script *使用类似的语法来
wpenqueuestyle 。 排队你的脚本:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
  * $handle是name为脚本。   *
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');
39定义了脚本的位置。   *
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');
88是一个可以处理任何scr的数组你的新脚本所依赖的ipt,比如jQuery。   * $ver让你列出一个版本号。   * $in_footer是boolean(true / false)参数允许您将脚本放在HTML文档的页脚中,而不是放在他ader,这样就不会延迟加载DOM树。 您的入队函数可能如下所示:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
**结合入队函数
最好将所有已排队的脚本和样式合并为一个函数, 然后用9号给他们打电话9999999992323行动。这个功能和行动 应位于初始设置(以上执行)以下的某处。
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' );

登录后方可回帖

Loading...