web-dev-qa-db-fra.com

Utiliser les onglets pour le plugin wordpress

J'ai fait mes recherches et découvert comment appeler le script jQuery intégré dans ui dans wp pour la zone d'administration, mais je suis bloqué sur la mise en œuvre des autres scripts JQuery nécessaires, qui sont, je crois, intégrés à wp. Je sais comment ajouter le css et l'ajout du html, je ne veux tout simplement pas causer de problèmes avec les autres plugins existants, je veux donc ajouter les scripts ci-dessous qui sont nécessaires.

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

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

Voici ce que je vais utiliser pour javascript (encore une fois, comment ajouter les scripts ci-dessus?):

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' );

Voici ce que j'ai eu jusqu'à présent pour le 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

S'il y a un problème uniquement avec le balisage html, vous devez consulter un exemple du site officiel de l'interface utilisateur de jQuery ici: http://jqueryui.com/tabs/

Cela ressemble au vôtre, mais pour le travail, vous devez vérifier si votre site contient des éléments tels que jquery et jquery ui script, jquery css est également important. Après cela, vous devriez avoir un script avec:

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

Et tout devrait bien fonctionner. Si vous pensez que tout va bien avec l'installation et que vous ne voyez aucun résultat, vous devriez vérifier la console de votre navigateur pour plus d'informations sur les erreurs du moteur javascript.

6
Maciej Płusa