Como adicionar uma nova guia ao editor de páginas

Alguém sabe como conseguir isso?

insira a descrição da imagem aqui

Tem algo a ver com meta checkboxs, mas não consigo descobrir a syntax adequada.

Solutions Collecting From Web of "Como adicionar uma nova guia ao editor de páginas"

Lembrei-me de que, uma vez que fiz isso, ontem encontrei onde, mas esse código era … ruim . Então, hoje, eu pouco melhorou e vou compartilhar. Antes que eu queira explicar o que eu faço.

Em primeiro lugar, existem 3 coisas principais a fazer:

  1. Adicione o título da guia ao lado do padrão 2
  2. Adicione algo ao conteúdo da guia
  3. Faça com que o conteúdo apareça quando o nosso título da guia é clicado e desapareça quando os títulos das tabelas padrão são clicados

A maioria das coisas precisa de js, então também precisamos enqueje js nas páginas certas (post.php e post-new.php).

O primeiro ponto não pode ser feito através do PHP, porque a marcação para esses botões é diretamente feita a partir da function wp_editor , sem ser processada por nenhum filtro. Então, apenas a chance é adicioná-los via javascript.

2º ponto, pode ser feito facilmente através do PHP, usando uma function que the_editor filtro the_editor .

O terceiro ponto novamente é feito via javascript.

Para todo o código criei um plugin simples contendo 3 arquivos:

  • gmet.php – o arquivo principal do plugin
  • gmet.js – o arquivo contendo javascript
  • gmet-content.php – este arquivo contém o conteúdo da guia

Eu criei um arquivo anotther para o conteúdo da guia desta maneira é fácil de personalizá-lo, sem cavar no código.


gmet.php

 < ?php namespace GMET; /* * Plugin Name: GM Editor Tab * Author: Giuseppe Mazzapica * Author URI: http://wordpress.stackexchange.com/users/35541/gm * * 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("/ 

Existem apenas 3 funções: a primeira configuração dos ganchos, a segunda adiciona o javascript na página, o terceiro é responsável por adicionar o conteúdo na página de registro.


gmet.js

 (function($) { $(document).ready(function() { var $bar = $('
'); $bar.addClass('quicktags-toolbar'); $wrap = $('#gmet_content_wrap'); $wrap.children().css('padding', '5px 15px'); $wrap.prepend($bar); $('#wp-content-editor-tools #content-html').before( '' + gmetData.tabTitle + '' ); }); $(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);

Novamente 3 tarefas: no documento pronto, configurei alguns css e, o mais importante, adiciono a marcação do título da aba ao editor. A segunda tarefa é executada quando o usuário clicar no nosso título da guia: o editor padrão está escondido, nosso conteúdo é mostrado. Para o editor padrão escondido, copiei e coloquei um código de som de wp-admin/js/editor.js . A última tarefa é a mais fácil, quando os títulos de tabulação padrão são clicados, esconder o nosso conteúdo de tabulação e remover a class “ativa” do título da aba.


gmet-content.php

 

Hi there

Este arquivo contém o que é mostrado em uma guia. Este é apenas um exemplo, personalize-o como quiser, lembre-se de adicionar tudo com a div. Wrapper.

Agora, basta criar uma pasta dentro do seu diretório de plugins, salvar todos os 3 arquivos dentro dele, e então ir para o seu quadro e ativar o plugin.

Todos os arquivos estão disponíveis como Gist aqui .

Isso não será fácil de fazer. Isso é codificado no núcleo, e não tem nada a ver com meta checkboxs.

Se você inspecionar o HTML para estas guias, você pode ver algumas classs como wp-switch-editor switch-html and switch-tmce . Se você pesquisar através do código central para essas classs, você pode descobrir onde está criando essas guias.

A parte mais difícil seria dissecar o JavaScript que realmente o altera e adicionar suporte para sua nova guia.