Alterar a aparência do texto do shortcode dentro do editor

11

É possível alterar a aparência dos códigos de acesso no editor ou de qualquer maneira torná-lo mais distinto do texto ao redor?

Por exemplo, se o conteúdo de uma postagem for assim ...

  

Site de referência sobre Lorem Ipsum, dando informações sobre suas origens,   bem como um gerador aleatório Lipsum. Site de referência sobre Lorem Ipsum,   dando informações sobre suas origens, bem como um Lipsum aleatório   gerador. [shortcode] asfdasfd [/ shortcode] Site de referência sobre Lorem   Ipsum, dando informações sobre suas origens, bem como um Lipsum aleatório   site generator.Reference sobre Lorem Ipsum, dando informações sobre a sua   origens, bem como um gerador aleatório Lipsum. Site de referência sobre   Lorem Ipsum, dando informações sobre suas origens, bem como   Gerador Lipsum.

... seria bom se o shortcode dentro estivesse em negrito para que possa ser visto assim:

    
por Ivan Topić 27.01.2016 / 00:05

1 resposta

12

Você pode adicionar um plugin personalizado ao WordPress e também ao editor visual TinyMCE. A fonte a seguir é um exemplo simples que funciona e adiciona uma string antes e depois de todo o shortcode.

Uso

O shortcode encontrará via regex, relevante se você precisar dele para diferentes códigos de acesso e diferentes marcas neste. O script adiciona conteúdo personalizado ao shortcode, aqui <b>FB-TEST antes e depois da tag de fechamento e do conteúdo. Você também pode usar marcação, classes css para criar uma visibilidade. É importante que você remova esse conteúdo na postagem salva, disparado no script em PostProcess . Aqui, execute o script e remova o conteúdo personalizado por meio da função restoreShortcodes .

Mas, atualmente, isso é simples, talvez não seja válido para cada requisito. Talvez você deva armazenar o shortcode no init e restaurar com esta variável armazenada.

Screenshot

Veja a imagem como exemplo para entender o resultado.

Fonte

Ocódigo-fonteprecisadessaestruturadediretórioparausá-lo:

--shortcode-replace|--phpfile|--assets|--js|--jsfile

Primeiro,umpequenoarquivophp,queincluiafontecomopluginnoambientewp.Deixe-onodiretórioprincipaldopluginshortcode-replace.

<?php#-*-coding:utf-8-*-/***PluginName:ShortcodeReplace*PluginURI:*Description:*Version:0.0.1*TextDomain:*DomainPath:/languages*License:MIT*LicenseURI:*/namespaceFbShortcodeReplace;if(!function_exists('add_action')){exit();}if(!is_admin()){return;}add_action('admin_enqueue_scripts',__NAMESPACE__.'\initialize');functioninitialize($page){if('post.php'===$page){add_filter('mce_external_plugins',__NAMESPACE__.'\add_tinymce_plugin');}}functionadd_tinymce_plugin($plugins){if(!is_array($plugins)){$plugins=array();}$suffix=defined('SCRIPT_DEBUG')&&SCRIPT_DEBUG?'.dev':'';$url=plugins_url('/assets/js/fb_shortcode_replace.js',__FILE__);$plugins=array_merge($plugins,array('fb_shortcode_replace'=>$url));return$plugins;}

Estearquivophpcarregaumjavascriptcomopluginnoeditorvisual.Oplug-insóserácarregadonaspáginasdeadministração,apenasnaspáginascomastringpost.php-consulteif('post.php'===$page){.

Afonteaseguiréoarquivojavascript,denominadofb_shortcode_replace.js.Deixe-onodiretórioassets/js/,dentrododiretóriodepluginsdesteplugin.

tinymce.PluginManager.add('fb_shortcode_replace',function(editor){varshortcode=/\[.+\]/g;varadditional_before='<b>FB-TEST';varadditional_after='FB-TEST</b>';functionifShortcode(content){returncontent.search(/\[.+\]/)!==-1;}functionreplaceShortcodes(content){returncontent.replace(shortcode,function(match){returnhtml(match);});}functionrestoreShortcodes(content){content=content.replace(additional_before,'');content=content.replace(additional_after,'');returncontent;}functionhtml(data){console.log(data);returnadditional_before+data+additional_after;}editor.on('BeforeSetContent',function(event){//Noshortcodesincontent,return.if(!ifShortcode(event.content)){return;}event.content=replaceShortcodes(event.content);});editor.on('PostProcess',function(event){if(event.get){event.content=restoreShortcodes(event.content);}});});

Útil

  • Oscomentáriossobresuasperguntas.
  • enlace

Sugestão adicional

O plugin Raph converte os códigos de acesso em html para visualizá-lo e simplifica a compreensão do resultado. Talvez seja também útil neste contexto.

    
por bueltge 30.08.2016 / 16:55