Wp_enQueue_script的相对路径而不是绝对路径

时间:2018-03-23 作者:Troy Templeman

将脚本或样式与以下内容排队时:

function themeslug_enqueue_style() {
    wp_enqueue_style( \'core\', \'/style.css\', false ); 
}
add_action( \'wp_enqueue_scripts\', \'themeslug_enqueue_style\' );
您可以获得以下信息:

<link rel=\'stylesheet\' id=\'core-css\'  href=\'http://localhost:8080/wordpress/style.css?ver=4.9.4\' type=\'text/css\' media=\'all\' />
注意,在本例中,它将站点url附加到开头http://localhost:8080. 我正在尝试删除它,以便它与执行它的文件相关。通常这是通过plugins_urlget_stylesheet_uri(). 然而,我不想使用其中任何一个,因为它可能被用作插件或包含在主题中-我想保持这两个的代码相同。

有没有办法做到这一点?

3 个回复
SO网友:mopsyd

虽然不能使用Wordpress API,但可以使用vanilla PHP轻松完成。

<?php
//Get the full path of the local directory first.
$fullpath = __DIR__;

//check if you are in a theme directory or a plugin directory
if (strpos( $fullpath, \'themes\' ) !== false )
{
    //It\'s a theme, use get_stylesheet_uri

} elseif ( strpos( $fullpath, \'plugins\' )
{
    //It\'s a plugin, use plugins_url

} else {
    //It\'s somewhere else entirely.
}

SO网友:Gerard Reches

I found myself in the same situation, I\'m developing a library that I don\'t know where will it be included by other users, so I cannot provide an absolute path.

What can we use to achieve it?

With this, we can remove the ABSPATH from __DIR__, obtaining a relative path to the current file\'s directory from the WordPress root, so that it works when it gets appended to the site url.

Code example

Let\'s suppose that we have the following files structure:

-> /inc
   -> current-file.php
   -> /assets
      -> your-file.js
      -> your-file.css

The following code would work:

// Get the path from the WordPress root to the current file\'s directory
$current_path = str_replace( ABSPATH, \'/\', __DIR__ );

// Relative path from the current file\'s directory to your asset.
$relative_path = \'/assets/your-file.js\'


// Enqueueing a script
wp_enqueue_script( \'your-handle\', $current_path . $relative_path );

// Enqueueing a stylesheet
wp_enqueue_style( \'your-handle\', $current_path . $relative_path );

Or we can write it shorter if we don\'t worry about readability (I don\'t in this case):

// Scripts
wp_enqueue_script( \'your-handle\', str_replace( ABSPATH, \'/\', __DIR__ ) . \'/assets/your-file.js\' );

// Stylesheets
wp_enqueue_style( \'your-handle\', str_replace( ABSPATH, \'/\', __DIR__ ) . \'/assets/your-file.css\' );

Notice that in the case that our asset was located in a directory above the file where we are enqueueing it, the relative path should be something like \'/../assets/your-file.js\'.

Here is another example:

-> /inc
   -> current-file.php
-> /assets
   -> your-file.js
   -> your-file.css

And then

// Scripts
wp_enqueue_script( \'your-handle\', str_replace( ABSPATH, \'/\', __DIR__ ) . \'/../assets/your-file.js\' );

// Stylesheets
wp_enqueue_style( \'your-handle\', str_replace( ABSPATH, \'/\', __DIR__ ) . \'/../assets/your-file.css\' );

I hope this helps if anyone else wonders how to enqueue a script without knowing the final path of the file beforehand.

SO网友:JDandChips

使用过滤器style_loader_src. 此筛选器将传递完整的src(即。http://localhost:8080/wordpress/style.css?ver=4.9.4), 然后您可以根据需要修改以删除域。例如

function style_loader_src_make_relative ( $src, $handle ) {
  // Remove the domain part. 
  // site_url() = http://localhost:8080
  $src = str_replace(site_url(), "", $src); 
  
  return $src;  
}
add_filter(\'style_loader_src\', \'style_loader_src_make_relative\', 10, 2 );

结束

相关推荐

我的定制主题的style.css根本没有被应用

我正在创建自己的主题Wordpress,但是我为主题设计编写的CSS根本没有被应用。它以样式保存。css,我在我的函数中应用了以下内容。php文件:function letters_files() { wp_enqueue_style(\'style\',get_stylesheet_uri(),NULL, microtime() ); wp_enqueue_style(\'custom-google-fonts\', \'https://fonts.googleapis.