web-dev-qa-db-fra.com

Comment ajouter un nouvel onglet à l'éditeur de page

Quelqu'un sait comment y parvenir?

enter image description here

Cela a quelque chose à voir avec les méta-boîtes, mais je ne peux tout simplement pas trouver la syntaxe appropriée.

postspagesmetabox
5
Tony Bogdanov

Je me suis souvenu qu’une fois que j’ai fait cela, hier, j’ai trouvé où, mais ce code était ... mauvais. Donc aujourd'hui je l’ai peu amélioré et je vais partager. Avant de vouloir expliquer ce que je fais.

Tout d'abord, il y a 3 choses principales à faire:

  1. Ajouter le titre de l'onglet à côté de la norme 2
  2. Ajouter quelque chose au contenu de l'onglet
  3. Faire apparaître le contenu quand on clique sur le titre de notre onglet et disparaître quand on clique sur le titre des onglets standard

La plupart des choses ont besoin de js, nous devons donc enqueje js dans les bonnes pages (post.php et post-new.php).

Le premier point ne peut pas peut être effectué via PHP, car le balisage de ces boutons est directement repris de la fonction wp_editor, sans être traité par aucun filtre. Donc, la seule chance est de les ajouter via javascript.

2ème point, peut être facilement réalisé via PHP, en utilisant une fonction hooking the_editor filter.

Le 3ème point est à nouveau réalisé via javascript.

Pour tout le code, j'ai créé un plugin simple contenant 3 fichiers:

  • gmet.php - le fichier de plugin principal
  • gmet.js - le fichier contenant le javascript
  • gmet-content.php - ce fichier contient le contenu de l'onglet

J'ai créé un autre fichier pour le contenu des onglets de cette manière, il est facile de le personnaliser, sans fouiller dans le code.

gmet.php

<?php namespace GMET;
/*
 * Plugin Name: GM Editor Tab
 * Author: Giuseppe Mazzapica
 * Author URI: http://wordpress.stackexchange.com/users/35541/g-m
 *
 * Text Domain: gmet
 */


\add_action('admin_init', '\GMET\init'); 

function init() {
  \load_plugin_textdomain( 'gmet', false, dirname( \plugin_basename( __FILE__ ) ) );
  \add_action('admin_enqueue_scripts', '\GMET\scripts');
  \add_filter('the_editor', '\GMET\content');
}

function scripts( $page ) {
  if ( $page === 'post.php' || $page === 'post-new.php' ) {
    $custom_css = "#content-gmet.active { 
      border-color: #ccc #ccc #f4f4f4; background-color: #f4f4f4; color: #555;
    }";
    wp_add_inline_style( 'colors', $custom_css );
    \wp_enqueue_script('gmet', \plugins_url('/gmet.js', __FILE__ ) );
    \wp_localize_script( 'gmet', 'gmetData', array(
      'tabTitle' => __('My Custom Tab', 'gmet')
    ) );
  }
}

function content( $content ) {
  preg_match("/<textarea[^>]*id=[\"']([^\"']+)\"/", $content, $matches);
  $id = $matches[1];
  // only for main content
  if( $id !== "content" ) return $content;
  ob_start();
  include( \plugin_dir_path( __FILE__ ) . 'gmet-content.php' );
  return $content . ob_get_clean();
}

Il n'y a que 3 fonctions: la première configuration des crochets, la seconde ajouter le javascript dans la page, la troisième est responsable de l'ajout du contenu sur la page à onglet.

gmet.js

(function($) {

  $(document).ready(function() {
    var $bar = $('<div></div>');
    $bar.addClass('quicktags-toolbar');
    $wrap = $('#gmet_content_wrap');
    $wrap.children().css('padding', '5px 15px');
    $wrap.prepend($bar);
    $('#wp-content-editor-tools #content-html').before(
      '<a id="content-gmet" class="wp-switch-editor">' + gmetData.tabTitle + '</a>'
    );
  });

  $(document).on('click', '#content-gmet', function(e) {
    e.preventDefault();
    var id = 'content';
    var ed = tinyMCE.get(id);
    var dom = tinymce.DOM;
    $('#wp-content-editor-container, #post-status-info').hide();
    dom.removeClass('wp-content-wrap', 'html-active');
    dom.removeClass('wp-content-wrap', 'tmce-active');
    $(this).addClass('active');
    $('#gmet_content_wrap').show();
  });

  $(document).on('click', '#content-tmce, #content-html', function(e) {
    e.preventDefault();
    $('#content-gmet').removeClass('active');
    $('#gmet_content_wrap').hide();
    $('#wp-content-editor-container, #post-status-info').show();
  });

})(jQuery);

Encore une fois 3 tâches: sur le document prêt j'installe quelques css et, le plus important, j'ajoute notre balisage de titre d'onglet à l'éditeur. Deuxième tâche exécutée lorsque l'utilisateur clique sur le titre de notre onglet: l'éditeur standard est masqué et notre contenu affiché. Dans l’éditeur standard masqué, j’ai copié et collé le code som à partir de wp-admin/js/editor.js. La dernière tâche est la plus facile, quand on clique sur les titres d'onglets standards, je cache le contenu de nos onglets et supprime la classe 'active' de celle de titre.

gmet-content.php

<div id="gmet_content_wrap" class="wp-editor-container">
  <!-- Everything you want to output should go inside this div -->
  <h3>Hi there</h3>
  <p>
    <input type="text" class="regular-text" name="gmet_text" placeholder="Example" />
  </p>
  <p>
   <textarea name="gmet_textarea" cols="100" id="gmet_textarea" rows="10"></textarea>
  </p>
</div>

Ce fichier contient ce qui est montré dans un onglet. Ce n’est qu’un exemple, personnalisez-le à votre guise, n’oubliez pas d’ajouter tout ce qui se trouve dans le div wrapper.

Maintenant, créez simplement un dossier dans votre répertoire plugins, sauvegardez les 3 fichiers qu’il contient, puis allez sur votre dasboard et activez le plugin.

Tous les fichiers sont disponibles sous la forme Gist here .

5
gmazzap

Cela ne va pas être facile à faire. Ceci est codé en dur dans le noyau et n'a rien à voir avec les méta-boîtes.

Si vous inspectez le HTML pour ces onglets, vous pouvez voir des classes telles que wp-switch-editor switch-html and switch-tmce. Si vous effectuez une recherche dans le code principal de ces classes, vous pourrez trouver où créer ces onglets.

Le plus difficile serait de disséquer le JavaScript qui le fait basculer et d’ajouter un support pour votre nouvel onglet.

0
Michael Lewis