问题描述
我一直在尝试加载 WordPress 小工具的脚本和样式,具有以下条件…
-
脚本必须在 HEAD 中加载 (否则它们会中断) 。
-
脚本必须在窗口小工具实际显示时才加载 (它们相当沉重) 。
我做了很多的搜索,这似乎是一个常见的 (未解决的) 问题… 但我希望有人在这里成功实施了一个解决方法。
这是迄今为止最好的
以下是向侧边栏打印文本的简单小工具。它有条件地成功地加载 jQuery(当实际显示小工具时)… 虽然只有在页脚中! (注意:它是 may also only work on WordPress 3.3,尽管 this hack 可能会提供向后兼容性) 。
class BasicWidget extends WP_Widget
{
function __construct() {
parent::__construct(__CLASS__, 'BasicWidget', array(
'classname' => __CLASS__,
'description' => "This is a basic widget template that outputs text to the sidebar"
));
}
function form($instance) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
$title = $instance['title'];
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></label></p>
<?php
}
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = $new_instance['title'];
return $instance;
}
function widget($args, $instance) {
extract($args, EXTR_SKIP);
echo $before_widget;
$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
if (!empty($title))
echo $before_title . $title . $after_title;;
echo "<h1>This is a basic widget!</h1>";
echo $after_widget;
// if we're echoing out content, enqueue jquery.
if (!empty($after_widget)) {
wp_enqueue_script('jquery');
}
}
}
add_action( 'widgets_init', create_function('', 'return register_widget("BasicWidget");') );
WordPress 似乎开始处理小工具,现在为了排队 (甚至取消注册先前已经排队的内容) 已经太迟了。
任何想法都将不胜感激!
标记。
最佳解决方案
WordPress 作为一个很好的函数 is_active_widget
,您可以在__construct 中使用,并测试该窗口小工具是否存在于当前页面中,并根据该示例添加您的脚本/样式:
function __construct() {
parent::__construct(__CLASS__, 'BasicWidget', array(
'classname' => __CLASS__,
'description' => "This is a basic widget template that outputs text to the sidebar"
));
if ( is_active_widget(false, false, $this->id_base) )
add_action( 'wp_head', array(&$this, 'add_styles_and_scripts') );
}
function add_styles_and_scripts(){
//since its wp_head you need to echo out your style link:
echo '<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />';
//as for javascript it can be included using wp_enqueue_script and set the footer parameter to true:
wp_enqueue_script( 'widget_script','http://example.com/js/script.js',array(),'',true );
}
参考文献
注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。