在WordPress中的任何地方添加jQuery标签的好方案吗?

时间:2013-02-26 作者:Michael Ecklund

在原生WordPress脚本中使用jQuery选项卡有什么解决方案吗?如果您知道在前端和后端使用jQuery选项卡的任何方法,请共享您的解决方案。

我已尝试实施jQuery Tabs (链接中提供示例源)

Dependencies:

  1. UI Core
  2. Widget Factory
  3. Effects Core (可选;用于showhide 选项)

Additional Notes:

这个小部件需要一些功能性CSS,否则它将无法工作。如果构建自定义主题,请使用小部件的特定CSS文件作为起点。

我还尝试实施Organic Tabs (demo) (source)

我尝试将所有本机WordPress脚本排队,但无法使选项卡正常工作。

在原生WordPress脚本中使用第一个选项(jQuery和jQuery UI)不起作用。当我使用最新版本的jQeury而不是原生的WordPress jQuery时,它们工作正常,但随后管理界面的其余部分被破坏。

再看一下Organic Tabs源代码,就好像该代码最后一次测试是为了使用jQuery版本:1.7.1.

作为补充说明,本机WordPress jQuery版本似乎是:1.8.3

Here are the styles being added for jQuery and jQuery UI tabs.

$to_add[\'jquery-ui\'] = \'http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css\';
$to_add[\'tabs\'] = \'./css/global/tabs.css\';// path to custom tab styles.

Here are the scripts being added for jQuery and jQuery UI tabs.

$to_add[\'jquery\'] = includes_url(\'/js/jquery/jquery.js\');
$to_add[\'jquery-ui-core\'] = includes_url(\'/js/jquery/ui/jquery.ui.core.min.js\');
$to_add[\'jquery-ui-widget\'] = includes_url(\'/js/jquery/ui/jquery.ui.widget.min.js\');
$to_add[\'jquery-effects-core\'] = includes_url(\'/js/jquery/ui/jquery.ui.effect.min.js\');
$to_add[\'jquery-ui-tabs\'] = includes_url(\'/js/jquery/ui/jquery.ui.tabs.min.js\');
当然,开火了admin_enqueue_scripts 使用wp_enqueue_style()wp_enqueue_script()

Using their same HTML markup from the example just changing the tabs container ID to a class instead.

<script>
$(function(){
    $(".tabs_container").tabs();
});
</script>

Setting jQuery Script to:

$to_add[\'jquery\'] = \'http://code.jquery.com/jquery-latest.js\';

使选项卡正常工作,但仪表板的所有其他区域都会分页符。

我所指的仪表板页面是:任何帖子类型的帖子编辑屏幕。正在尝试将jQeury选项卡添加到元数据库。

It looks like WordPress is loading the following scripts on the post edit screen:

3 个回复
最合适的回答,由SO网友:bcorkins 整理而成

jQuery UI选项卡实际上随WordPress core一起提供,因此实现它们非常简单。听起来您只是想利用管理端的选项卡,因此非常基本的设置如下所示:

In functions.php:

function my_enqueue_scripts($hook) {
     // Only load the scripts on the pages where they\'re needed
     if( \'myfile.php\' != $hook )
          return;

     wp_register_style( \'tabs_css\', \'path/to/tabs.css\' );
     wp_enqueue_style( \'tabs_css\' );

     wp_enqueue_script("jquery-ui-tabs");
     wp_enqueue_script( \'admin_scripts\', \'path/to/admin-script.js\', array(\'jquery\', \'jquery-ui-tabs\') );
     // No need to enqueue jQuery as it\'s already included in the WordPress admin by default
}
add_action( \'admin_enqueue_scripts\', \'my_enqueue_scripts\' );

In admin-script.js:

jQuery(document).ready(function($) {
    $(".tabs_container").tabs();
});
然后使用与示例中相同的HTML标记。如果您让它与jQuery的另一个版本一起使用,那么听起来您对这一部分的理解是正确的。

SO网友:Michael Ecklund

好吧,答案其实很简单。

Enqueuing Styles

您需要将jquery ui基CSS文件排队以获得适当的功能。然后立即将自定义选项卡样式排入队列。

示例:

$styles[\'jquery-ui\'] = \'http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css\';
$styles[\'tabs\'] = \'./css/global/tabs.css\';// path to custom tab styles.

Enqueuing Scripts

您不能包括jQuery,因为admin部分已经加载了jQuery。我将对选项卡的调用放在一个单独的JS文件中,并在最后一个标题中将其排队。

因此:

jQuery(document).ready(function($) {
    $(".tabs_container").tabs();
});
已移至tabs.js 我的插件目录中的文件。

所需脚本示例:

$scripts[\'jquery-ui-core\'] = includes_url(\'/js/jquery/ui/jquery.ui.core.min.js\');
$scripts[\'jquery-ui-widget\'] = includes_url(\'/js/jquery/ui/jquery.ui.widget.min.js\');
$scripts[\'jquery-effects-core\'] = includes_url(\'/js/jquery/ui/jquery.ui.effect.min.js\');
$scripts[\'jquery-ui-tabs\'] = includes_url(\'/js/jquery/ui/jquery.ui.tabs.min.js\');
$scripts[\'tabs\'] = \'./js/global/tabs.js\';
塔达阿。给你。仪表板中的jQuery选项卡。

例如,如果您使用管理脚本进行组织,请编辑2013年6月29日。你可能会用钩子admin_print_scriptsadmin_enqueue_scripts. 我想如果我打电话给admin_enqueue_scripts 通话前admin_print_scripts 重要的脚本将在打印任何其他脚本之前排队。我错了。我花了整整45分钟试图找出问题所在。长话短说,尽管我认为我的脚本会在其他脚本打印之前排队,但这是错误的。

我是怎么修好的?

为您的admin_print_scripts 钩我把我的设定为“999”。这样可以确保在使用jQuery UI核心和小部件工厂的脚本之前包含我所需的脚本。例如选项卡。如果我没有这样做,那么在加载必要的依赖项之前,我的选项卡脚本就会被打印出来。因此,他们一直不能正常工作的原因。

SO网友:Bikram Shrestha

我只需遵循以下步骤

http://www.thecreativedev.com/how-to-use-jquery-ui-tabs-in-a-wordpress/
只需在函数中添加以下代码。php

function load_custom_scripts() {
    wp_enqueue_script(\'jquery-ui-core\');// enqueue jQuery UI Core
    wp_enqueue_script(\'jquery-ui-tabs\');// enqueue jQuery UI Tabs
}

add_action( \'wp_enqueue_scripts\', \'load_custom_scripts\' );
然后在js文件中添加add below js。

jQuery(document).ready(function($){
       $("#tabs").tabs();
});
最后,我们需要有如下html。

<div id="tabs">
    <ul>
        <li><a href="#tab-1"><span>First Tab</span></a></li>
        <li><a href="#tab-2"><span>Second Tab</span></a></li>
        <li><a href="#tab-3"><span>Third Tab</span></a></li>
    </ul>
    <div id="tab-1">
      <p> your first tab content goes here  
    </div>
    <div id="tab-2">
        <p> your second tab content goes here  
    </div>
    <div id="tab-3">
       <p> your third tab content goes here  
    </div>
</div>

结束

相关推荐

JQuery.accordion即使在排队时也不是一个函数

我正在尝试为我们的客户实现一个jQuery手风琴。基本上,这是本教程(http://wp.tutsplus.com/tutorials/creative-coding/create-an-faq-accordion-for-wordpress-with-jquery-ui/) 但是在排队jQuery时遇到了问题。基本上,这是试图将教程中的手风琴脚本排队的代码:-add_action( \'wp_enqueue_scripts\', \'fl_enqueue\' ); function f