web-dev-qa-db-ja.com

ワードプレスプラグイン用のタブの使用

私の研究を終え、これが管理領域のためにwpで組み込みの ui tab jqueryスクリプト を呼び出す方法であることがわかりました他のjqueryスクリプトは私がwpに組み込まれていると信じている必要がありました。私はCSSを追加する方法を知っていて、ちょうどHTMLを追加しました、私はちょうど他の既存のプラグインとの問題を起こしたくないので、私は必要とされるこれらのスクリプトを適切に以下に加えたいです。

http://code.jquery.com/jquery-1.8.3.js

http://code.jquery.com/ui/1.9.2/jquery-ui.js

これが私がjavascriptに使うことになるものです（また上のスクリプトを追加する方法？）：

function my_plugin_load_js() {
wp_enqueue_script('jquery-ui-tabs');
}
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );

function mypluginjs() {
echo '<script>
jQuery(function() {
    jQuery( "#tabs" ).tabs();
});
</script>';
}
add_action( 'admin_enqueue_scripts', 'mypluginjs' );

これは私がこれまでにhtmlについて得たものです：

<div class="wrap">
  <h2>My plugin</h2>
  <form method="post" action="options.php">
  <?php settings_fields('my_plugin_options'); ?>
  <?php $options = get_option('my-plugin'); ?>

  <div id="tabs">
  <ul>
  <li><a href="#tabs-1">First</a></li>
  <li><a href="#tabs-2">Second</a></li>
  <li><a href="#tabs-3">Third</a></li>
  </ul>

  <table class="form-table">

  <div id="tabs-1"> options tr/td go here </div>
  <div id="tabs-2"> options tr/td go here </div>
  <div id="tabs-3"> options tr/td go here </div>

  <p class="submit">
   <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
  </p>
  </table>
  </form>
   </div> <!--- wrap end -->
pluginswp-admincsshtmlsettings-api
3
Jes

HTMLマークアップのみで問題がある場合は、公式のjQuery UIサイトから例を確認してください。 http://jqueryui.com/tabs/

それはあなたのもののように見えますが、仕事のためにあなたのサイトがjqueryやjquery ui scriptのようなものを含んでいるかどうかチェックしなければなりません、jquery cssも同様に重要です。その後、以下のスクリプトを書く必要があります。

$( "#tabs" ).tabs();

そして、すべてがうまくいくはずです。セットアップはすべて問題ないと思っていて結果がまったく表示されない場合は、JavaScriptエンジンからのエラーに関する詳細情報をブラウザのコンソールで確認してください。

6
Maciej Płusa