it-swarm.com.de

So fügen Sie dem Seiteneditor eine neue Registerkarte hinzu

Weiß jemand, wie man das erreicht?

enter image description here

Es hat etwas mit Meta-Boxen zu tun, aber ich kann die richtige Syntax einfach nicht herausfinden.

5
Tony Bogdanov

Ich erinnerte mich, dass ich gestern, als ich das getan hatte, gefunden hatte, wo, aber dieser Code war ... schlecht. Also habe ich es heute wenig verbessert und werde es teilen. Bevor ich erklären möchte, was ich tue.

Zuallererst gibt es drei wichtige Dinge zu tun:

  1. Fügen Sie den Registerkartentitel neben dem Standard 2 hinzu
  2. Fügen Sie dem Inhalt der Registerkarte etwas hinzu
  3. Lässt den Inhalt erscheinen, wenn auf unseren Tabulatortitel geklickt wird, und wird nicht mehr angezeigt, wenn auf Standard-Tabulatortitel geklickt wird

Die meisten Dinge brauchen js, also müssen wir js auch auf den richtigen Seiten (post.php und post-new.php) einblenden.

Der erste Punkt kann nicht über PHP erfolgen, da das Markup für diese Schaltflächen direkt von der Funktion wp_editor wiedergegeben wird, ohne von einem Filter verarbeitet zu werden. Es ist also nur Zufall, sie per Javascript hinzuzufügen.

2. Punkt, kann einfach per PHP durchgeführt werden, indem eine Funktion verwendet wird, die den the_editor-Filter einbindet.

Der dritte Punkt erfolgt wiederum über Javascript.

Für den gesamten Code habe ich ein einfaches Plugin mit 3 Dateien erstellt:

  • gmet.php - die Haupt-Plugin-Datei
  • gmet.js - die Datei, die Javascript enthält
  • gmet-content.php - Diese Datei enthält den Inhalt der Registerkarte

Ich habe eine weitere Datei für den Tab-Inhalt erstellt, die auf diese Weise einfach angepasst werden kann, ohne in Code zu graben.


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();
}

Es gibt nur 3 Funktionen: Die erste Funktion richtet die Hooks ein, die zweite Funktion fügt das Javascript in die Seite ein, die dritte Funktion ist für das Hinzufügen des Inhalts auf der Registerkarte verantwortlich.


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

Nochmals 3 Aufgaben: Auf document ready richte ich ein paar CSS-Dateien ein und füge vor allem unser Tab-Titel-Markup zum Editor hinzu. Der zweite Task wird ausgeführt, wenn der Benutzer auf unseren Tab-Titel klickt: Der Standard-Editor ist ausgeblendet und unser Inhalt wird angezeigt. In den versteckten Standardeditor habe ich einen Code aus wp-admin/js/editor.js kopiert und eingefügt. Die letzte Aufgabe ist die einfachste, wenn auf Standard-Registerkartentitel geklickt wird. Ich verstecke unseren Registerkarteninhalt und entferne die "aktive" Klasse aus dem Registerkartentitel.


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>

Diese Datei enthält das, was auf unserer Registerkarte angezeigt wird. Dies ist nur ein Beispiel. Passen Sie es nach Ihren Wünschen an. Denken Sie nur daran, alles außerhalb des Wrapper-Div hinzuzufügen.

Jetzt erstelle einfach einen Ordner in deinem Plugin-Verzeichnis, speichere alle 3 Dateien darin und gehe dann zu deinem Dasboard und aktiviere das Plugin.

Alle Dateien sind als Gist hier verfügbar.

5
gmazzap

Das wird nicht einfach. Dies ist im Kern fest programmiert und hat nichts mit Meta-Boxen zu tun.

Wenn Sie den HTML-Code nach diesen Registerkarten durchsuchen, sehen Sie einige Klassen wie wp-switch-editor switch-html and switch-tmce. Wenn Sie den Kerncode nach diesen Klassen durchsuchen, können Sie herausfinden, wo diese Registerkarten erstellt werden.

Am schwierigsten wäre es, das JavaScript zu analysieren, das es tatsächlich wechselt, und Unterstützung für Ihren neuen Tab hinzuzufügen.

0
Michael Lewis