Question

我正在尝试使用自定义主题选项开发WordPress主题。我添加了一个仪表板选项页面，但该页面内的jQuery无效。这是我一步一步做的。

使用以下代码创建了functions.php文件：

<?php
//wp_enqueue_script('jQuery UI Core');



add_action( 'admin_menu', 'register_options_page' );

function register_options_page(){
    add_menu_page( 'Theme Options', 'Theme Options', 'manage_options', 'merry_options', 'get_theme_options', 'dashicons-share-alt', 99 );
}

function get_theme_options()
{
 echo "<h1>MerryPress Theme Options</h2>Version: 1.0 Beta";

 $fullDirectoryPath=get_template_directory_uri()."/framework/themeoptions.php";
 //echo $fullDirectoryPath; 
 $optionsContent=file_get_contents($fullDirectoryPath);

 echo $optionsContent;
}

?>

在themeoptions.php中，我添加了jQuery Tab UI代码。这是我在该文件中的内容：

<h1>Holla!</h1>
<?php 

    function my_scripts_method() {
    wp_enqueue_script( 'jquery ui core' );
    wp_enqueue_script( 'jquery' );
    }

    add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); // wp_enqueue_scripts action hook to link only on the front-end

    echo "- end of php functions";
?>

<script>
  $(document).ready(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });
  </script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <h2>Content heading 1</h2>
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <h2>Content heading 2</h2>
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <h2>Content heading 3</h2>
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

我在仪表板中没有收到任何错误或警告。只是代码没有运行。调试已启用。我哪里错了？

编辑：这是带有开发者控制台输出的仪表板屏幕截图： enter image description here

Answer 1

你必须安全地使用$，因为这会导致wordpress中的一些问题，你可以试试这个：

<script>
  jQuery(document).ready(function($) { // use jQuery and pass the $ in the args
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });
</script>

和这个php部分我有点困惑，在我看来可能是你的ui lib在jQuery之前加载。

function my_scripts_method() {
   wp_enqueue_script( 'jquery ui core' );
   wp_enqueue_script( 'jquery' );
}

如果是这种情况，那么你可以交换排队的位置：

function my_scripts_method() {
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'jquery ui core' );
}

除此之外，如果您在控制台中出现任何错误，则可以共享。

Answer 2

主要问题是您缺少wp_enqueue_script( 'jquery-ui-tabs' );。

但还有其他问题。这根本不是 ^（简化）：

$path=get_template_directory_uri()."/file.php";
$content = file_get_contents( $path );
echo $content;

add_action( 'wp_enqueue_scripts', etc )不属于file.php
应为admin_enqueue_scripts

jQuery和jQuery UI核心默认编码在管理员端（检查浏览器开发工具Sources选项卡），但如上所述，不是UI Tabs。查看所有包含的脚本：Default Scripts Included and Registered by WordPress 完整的工作代码，检查评论：

add_action( 'admin_menu', 'register_options_page' );
add_action( 'admin_enqueue_scripts', 'my_scripts_method' ); 

function register_options_page()
{
    $my_hook = add_menu_page( 'Theme Options', 'Theme Options', 'manage_options', 'merry_options', 'get_theme_options', 'dashicons-share-alt', 99 );
    // var_dump($my_hook); die();
}

function my_scripts_method( $hook ) 
{
    if( 'toplevel_page_merry_options' !== $hook ) // Previously at: var_dump + die
        return;

    wp_enqueue_script( 'jquery-ui-tabs' );
    # As best practice, the CSS AND JAVASCRIPT bellow should be enqueued here too
}

function get_theme_options()
{
    # Use THIS, not file_get_contents
    // include_once '/framework/themeoptions.php'; 
    ?>
    <h1>MerryPress Theme Options</h2>Version: 1.0 Beta
    <h1>Holla!</h1>
    <style> /* adjustments for testing */
    div[id^='tabs-']{ /* http://stackoverflow.com/a/16329932/1287812 */
        clear:both;
        padding-top: .5em;
    }
    #tabs ul li {
        float:left;
        margin-right: 2.5em;
        background: #ccc;
        padding:1em;
    }
    #tabs ul li.ui-tabs-active {
        background: #fff;
    }   
    </style>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <h2>Content heading 1</h2>
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        </div>
        <div id="tabs-2">
            <h2>Content heading 2</h2>
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
        </div>
        <div id="tabs-3">
            <h2>Content heading 3</h2>
            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
        </div>
    </div>
    <script  type='text/javascript'>
      jQuery(document).ready(function($) {
        $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
        $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
      });
      </script>
    <?php
}

Answer 3

$未在wordpress中定义，您可以将脚本包装在这样的匿名函数中

<script>
(function ($) {
  $(document).ready(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });
})(jQuery);
</script>

jQuery无法在WordPress仪表板选项页面中工作

3 个答案: