it-swarm-vi.tech

Cách thêm tab mới vào trình chỉnh sửa trang

Bất cứ ai cũng biết làm thế nào để đạt được điều này?

enter image description here

Nó có một cái gì đó để làm với các hộp meta, nhưng tôi không thể tìm ra cú pháp thích hợp.

5
Tony Bogdanov

Tôi nhớ rằng một khi tôi đã làm điều này, ngày hôm qua tôi đã tìm thấy ở đâu, nhưng mã đó là ... xấu. Vì vậy, hôm nay tôi đã cải thiện nó một chút và tôi sẽ chia sẻ. Trước khi tôi muốn giải thích những gì tôi làm.

Trước hết, có 3 điều chính cần làm:

  1. Thêm tiêu đề tab bên cạnh tiêu chuẩn 2
  2. Thêm một cái gì đó vào nội dung của tab
  3. Làm cho nội dung xuất hiện khi tiêu đề tab của chúng tôi được nhấp và không hoạt động khi tiêu đề tab tiêu chuẩn được nhấp

Hầu hết mọi thứ cần js vì vậy chúng tôi cũng cần enqueje js trong các trang bên phải (post.php và post-new.php).

Điểm đầu tiên không thể được thực hiện thông qua PHP, vì đánh dấu cho các nút đó được lặp lại trực tiếp từ hàm wp_editor, mà không được xử lý bởi bất kỳ bộ lọc nào. Vì vậy, chỉ có cơ hội là thêm chúng thông qua javascript.

Điểm thứ 2, có thể dễ dàng thực hiện thông qua PHP, sử dụng bộ lọc hàm the_editor.

Điểm thứ 3 một lần nữa được thực hiện thông qua javascript.

Đối với tất cả các mã tôi đã tạo một plugin đơn giản chứa 3 tệp:

  • gmet.php - tệp plugin chính
  • gmet.js - tệp chứa javascript
  • gmet-content.php - tệp này chứa nội dung tab

Tôi đã tạo tệp anotther cho nội dung tab theo cách này để dễ dàng tùy chỉnh nó, mà không cần đào sâu vào mã.


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

Chỉ có 3 chức năng: thiết lập đầu tiên các hook, thứ hai thêm javascript trong trang, thứ ba có trách nhiệm thêm nội dung trên trang tab.


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

Một lần nữa 3 tác vụ: trên tài liệu đã sẵn sàng, tôi thiết lập một số css và quan trọng nhất là tôi thêm đánh dấu tiêu đề tab của chúng tôi vào trình chỉnh sửa. Tác vụ thứ hai chạy khi người dùng nhấp vào tiêu đề tab của chúng tôi: trình chỉnh sửa tiêu chuẩn bị ẩn một nội dung của chúng tôi được hiển thị. Để ẩn trình soạn thảo tiêu chuẩn, tôi đã sao chép và dán mã som từ wp-admin/js/editor.js. Nhiệm vụ cuối cùng là dễ nhất, khi tiêu đề tab tiêu chuẩn được nhấp, tôi ẩn nội dung tab của chúng tôi và xóa lớp 'hoạt động' khỏi tiêu đề tab.


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>

Tập tin này chứa những gì được hiển thị trong tab aour. Đây chỉ là một ví dụ, tùy chỉnh nó theo ý muốn, chỉ nhớ thêm mọi thứ bên cạnh div trình bao bọc.

Bây giờ, chỉ cần tạo một thư mục bên trong thư mục plugin của bạn, lưu cả 3 tệp bên trong nó, sau đó vào dasboard của bạn và kích hoạt plugin.

Tất cả các tệp có sẵn dưới dạng Gist tại đây .

5
gmazzap

Điều này sẽ không dễ dàng để làm. Điều này được mã hóa cứng vào lõi và không liên quan gì đến các hộp meta.

Nếu bạn kiểm tra HTML cho các tab này, bạn có thể thấy một số lớp như wp-switch-editor switch-html and switch-tmce. Nếu bạn tìm kiếm thông qua mã lõi cho các lớp này, bạn có thể tìm ra nơi nó tạo ra các tab này.

Phần khó nhất sẽ là phân tích JavaScript thực sự chuyển đổi nó và thêm hỗ trợ cho tab mới của bạn.

0
Michael Lewis