将脚本/样式插入开发排队

时间：2016-03-07 作者：Enrique René

我正在开发我的第一个插件，但wp\\u enqueue\\u风格不起作用。我正在安装localhost（apache2），ubuntu 14.04。

在我的主文件中

define( \'EASYDM_CSS_DIR\', plugin_dir_path( __FILE__ ).\'css/\' );
add_action( \'wp_enqueue_style\', \'easydm_add_link_tag_to_head\' );

在我的php函数文件中，我有：

function easydm_add_link_tag_to_head() {
    wp_enqueue_style( \'style.css\', EASYDM_CSS_DIR );
}

我想在管理面板中设置选项页的样式。

3 个回复

SO网友:Tim Malone

你给了wp_enqueue_style 目录，但没有文件名。看看https://developer.wordpress.org/reference/functions/wp_enqueue_style/:

的第一个参数wp_enqueue_style 是Wordpress内部引用的样式表的名称或句柄（这应该是队列中每个样式表的唯一名称）

第二个参数是样式表的src-因此，如果将第二个参数更改为EASYDM_CSS_DIR . "style.css" - 然后用这样的东西\'my-stylesheet\' 作为第一个参数，如果一切都在正确的位置，您应该会发现它是有效的。：）

EDIT

只是注意到一些我之前没有在你的代码中发现的东西：实际上没有wp_enqueue_style 行动您需要使用wp_enqueue_scripts 添加样式和脚本的操作。这有点令人困惑，因为函数wp_enqueue_style 您使用的是正确的，但由于操作不正确，它从未被调用。

更改此项：

add_action( \'wp_enqueue_style\', \'easydm_add_link_tag_to_head\' );

对此：

add_action( \'wp_enqueue_scripts\', \'easydm_add_link_tag_to_head\' );

然后是你的功能easydm_add_link_tag_to_head 应正确调用。

如果它仍然不工作，可能是因为路径不正确，或者是代码中没有注意到的其他东西！这就是我们需要开始调试以发现问题的地方。最简单、最粗糙、最简单的方法就是echo 1;, echo 2;, echo 3; 等等，然后查看页面的源代码，以确定哪些工作正常，哪些不正常。当然，还需要检查<link> 标记正在到达页面的源，因为如果是，线索可能在路径中不正确！

SO网友:Enrique René

已解决！！！

的文档wp_enqueue_style 函数明确表示第二个参数nedd是根安装WordPress的相对路径。但当我在使用完整路径的教程中查看许多示例时，我忽略了它。现在，定义这个常量和前面的所有步骤，一切都正常运行。

define( \'EASYDM_CSS_PATH\' , str_replace( site_url().\'/\', \'\', plugin_dir_url( __FILE__ ) ).\'css/\' );

在功能上：

wp_enqueue_style( \'easydm-style\', \'/\'.EASYDM_CSS_PATH.\'style.css\', array(), null, \'all\' );

因此，如果有人厌倦了寻找，不想阅读所有的讨论，最后的代码是：

define( \'EASYDM_CSS_PATH\' , str_replace( site_url().\'/\', \'\', plugin_dir_url( __FILE__ ) ).\'css/\' );
add_action( \'admin_enqueue_scripts\', \'easydm_add_link_tag_to_head\' );

函数文件：

function easydm_add_link_tag_to_head() {
    wp_enqueue_style( \'easydm-style\', \'/\'.EASYDM_CSS_PATH.\'style.css\', array(), null, \'all\' );
    wp_enqueue_style( \'easydm-manager\', \'/\'.EASYDM_CSS_PATH.\'manager.css\', array(), null, \'all\' );
}

在这里，我添加了两种样式。我真的希望这能帮助别人。谢谢大家！

SO网友:mukto90

你需要加入admin_enqueue_scripts 因为你想style an option page, in the admin panel.

添加此代码并更改css/style.css 如果需要，使用适当的文件路径。希望这能奏效。

add_action( \'admin_enqueue_scripts\', \'easydm_add_link_tag_to_head\' );
function easydm_add_link_tag_to_head(){
    wp_enqueue_style( \'enrique_custom\', plugin_dir_url( __FILE__ ). \'css/style.css\' );
}

小码农CODE

将脚本/样式插入开发排队

相关推荐