Procurando uma maneira de criar botões de mídia para adicionar shortcodes automaticamente? Este snippet adicionará um menu suspenso com uma lista gerada automaticamente de seus shortcodes.
Instruções:
Adicione este código ao arquivo functions.php do seu tema ou a um plugin específico do site
Opcionalmente, edite a linha do array 10 para excluir certos shortcodes.
add_action('media_buttons','add_sc_select',11);
function add_sc_select(){
global $shortcode_tags;
/* ------------------------------------- */
/* enter names of shortcode to exclude bellow */
/* ------------------------------------- */
$exclude = array("wp_caption", "embed");
echo ' <select id="sc_select"><option>Shortcode</option>';
foreach ($shortcode_tags as $key => $val){
if(!in_array($key,$exclude)){
$shortcodes_list .= '<option value="['.$key.'][/'.$key.']">'.$key.'</option>';
}
}
echo $shortcodes_list;
echo '</select>';
}
add_action('admin_head', 'button_js');
function button_js() {
echo '<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#sc_select").change(function() {
send_to_editor(jQuery("#sc_select :selected").val());
return false;
});
});
</script>';
}
Observação: Se esta é a sua primeira vez adicionando snippets de código no WordPress, consulte nosso guia sobre como adicionar snippets de código corretamente no WordPress, para não quebrar acidentalmente seu site.
Se você gostou deste snippet de código, considere conferir nossos outros artigos no site como: Análise do Shortcodes Ultimate: Adicione Shortcodes ao WordPress de Forma Rápida e Fácil.
Olá, script muito útil, ainda tenho uma pergunta para melhoria,
Ele está mostrando a sintaxe de shortcodes existentes entre colchetes, mas não os IDs disponíveis exatamente.
Adicionalmente, eu precisaria de uma lógica condicional oposta para mostrar apenas de alguns plugins como 'para incluir', você pode propor uma abordagem ou script?
Atenciosamente
aliás, se você quiser personalizar o que é impresso, você pode fazer algo assim
foreach ($shortcode_tags as $key => $val){
if(!in_array($key,$exclude)){
if ($key==’button’){
$shortcodes_list .= “”.$key.””;
}elseif ($key==’focus’){
$shortcodes_list .= “”.$key.””;
}else{
$shortcodes_list .= ”.$key.”;
}
}
}
Oi Emmanuel,
Tentei seguir seu tutorial nos comentários, e estou um pouco confuso sobre o símbolo (“”) em “”. $ key. “”, você pode explicar para que serve?
Ótimo exemplo, muito obrigado, era exatamente o que eu precisava para exibir meus shortcodes personalizados! Continue com as ótimas partilhas 🙂
yo kev ótimo post! Me poupou muito código e muita dor de cabeça procurando artigos com maneiras mais complicadas de fazer isso. Tive uma pergunta. Ao inserir o código, ele funciona muito bem. Eu queria saber apenas para mostrá-lo como um botão em vez disso.
Isso não é algo que funcionaria para este trecho, pois a maioria das instalações do WordPress teria muitos, muitos shortcodes. Esta é uma das razões pelas quais uso um menu suspenso, pois ele pode ter uma lista de quem sabe quantos itens. Me avise se estou interpretando mal sua pergunta.
em vez disso echo ‘ “Shortcode”‘;
echo ‘ “”‘;
Não tenho certeza se estou entendendo, use o formulário http://wpsnip.com/contact/ e me envie um e-mail.
eu quero que ele exiba uma img em vez do shortcode de opção
acho que fiz a pergunta errada. Eu quero que não as opções dentro do dropdown apareçam como um botão, mas que o próprio menu suspenso apareça como um botão, então quando eu clicar nele, ele abrirá um menu mostrando todos os shortcodes.
Snippet incrível, mas não funcionará para shortcodes mais complexos. Por exemplo, eu gosto de incluir um shortcode de origem com dois arrays: nome e link, para que o nome apareça e seja vinculado à página para a qual está direcionado. Se houver alguma correção, por favor, me avise!
” isso é um bom conselho” :)) clacks @google-78e9f950b24057773891758bcae63bb2:disqus
Legal, fico feliz que você goste do snippet.
Olá Kevin,
Existe alguma maneira de tirar o dropdown do botão de mídia para a 3ª ou 2ª linha do editor do tinymce? Porque com o uploader atualizado (com a v3.3), não fica bom.
Obrigado,
Hoko
E agora eu verifiquei, agora está funcionando com o WordPress 3.3… 🙁
………*não está funcionando….
desculpe novamente, está funcionando corretamente com o WordPress 3.3.
Mas ainda estou perguntando se podemos mover o dropdown do local dos botões de mídia para qualquer uma das linhas de botões do tinymce?
Obrigado Kevin
+1 para esta solicitação para adicionar o dropdown à barra de menu real do editor TinyMCE. Aliás, este é um ótimo snippet e exatamente o que estou procurando, MAS eu gostaria que o dropdown fosse movido. Ele parece um pouco fora do lugar bem ao lado do botão de mídia de uploads e está quebrando um pouco o CSS.
Não facilmente, não,
Ótimo trecho Kevin, obrigado por isso. Tenho uma pergunta – no momento, isso simplesmente permite que você insira a tag de shortcode de abertura e fechamento lado a lado, mas seria ainda melhor se você pudesse selecionar um bloco de texto e ter as tags de abertura e fechamento envolvendo esse texto. Isso faz sentido? Você acha que seria possível?
Oi Matt, com certeza, esta foi apenas uma versão inicial, que é principalmente JQuery que fará essa parte. Não tenho certeza quando postarei uma versão atualizada, no entanto. Mas tentarei resolver isso o mais rápido possível.
[…] para lembrar os shortcodes, então pesquisei na internet e encontrei o snippet de Kevin Chard em http://wpsnipp.com/index.php/functions-php/update-automatically-create-media_buttons-for-shortcode-s… para incorporar um dropdown de shortcode ao editor. Modifiquei o código de Kevin para funcionar com […]
Quando misturo o Código Javascript daqui e o troco com o Javascript “Add custom media_buttons for shortcode selection”, funciona muito bem 🙂 obrigado.. ainda.. o select está batendo com o topo do meu editor, escondendo um pouco o topo das ferramentas lá.
Isso não é tão ruim, mas parece estranho.. tentei CSS, mas não funcionou
Tenho uma ideia de como posso influenciar a div "media-buttons" a partir do meu functions.php?
(só para eu adicionar um valor de margin-bottom: 10px)
Obrigado de qualquer forma
Você pode estilizar coisas com id=”sc_select”, o seguinte código adicionará CSS. Não tenho certeza se isso resolverá as coisas, mas ajudará você a brincar com o CSS para resolver as coisas.
function wps_add_my_css(){? #sc_select{margin-bottom:10px;} }
add_action( 'admin_head-post.php', 'tinymce_title_css'); add_action( 'admin_head-post-new.php', 'tinymce_title_css');
Valeu cara.. eu meio que descobri isso, mas o 'select' pode ter 'margin' já que está dentro de uma div.. tudo bem, mas eu simplesmente defini o font-size para 11px e ficou ótimo acima da barra de ferramentas do editor.
Obrigado por este ótimo código 🙂
Sem problemas, fico feliz que você goste do trecho.
Existe alguma maneira de especificar a ordem em que ele aparece na div #media-buttons? No momento, parece que ele está aparecendo alinhado à esquerda e está estragando minha área de texto principal.
Pequeno trecho de código matador, no entanto.
c.
Deveria ficar ao lado do ícone de adicionar mídia acima da barra de ferramentas do editor, como na imagem acima, não está assim para você?
Desculpe se estou perdendo algo muito óbvio, mas o que a inserção do shortcode faz? Existem capturas de tela por aí? Obrigado.
Olá Cliff
Shortcodes ou um pouco de código que você pode adicionar às suas postagens, que é uma forma curta de adicionar funcionalidade ou realmente qualquer coisa. Por exemplo, o link abaixo permitirá que você adicione um iframe com apenas um pouco de código. [ iframe url=”http://wpsnipp.com” ]
http://wpsnipp.com/index.php/functions-php/iframe-shortcode-for-posts-and-pages/
O WordPress também tem alguns shortcodes integrados como [ gallery ] esta página fornecerá mais detalhes sobre o shortcode de galeria.
http://codex.wordpress.org/Gallery_Shortcode
No entanto, o código acima nesta postagem criará uma lista de shortcodes que você tem disponíveis para que você possa selecioná-los para adicionar às suas postagens. Espero que isso ajude a explicar as coisas um pouco melhor.
Eu sei o que são shortcodes (e eu os amo, porque então você pode ficar no Editor Visual – como o seu de iframe, que é ótimo), mas eu estava me perguntando se algum código adicional era necessário em algum lugar. Eu pergunto porque vi [/php] e [/html] e não tinha certeza sobre o caso de uso. Você coloca código PHP ou HTML diretamente no Editor Visual? Obrigado.
Este código criará uma lista de shortcodes que você já tem em sua instalação do WordPress, então se você tiver [/php] ou [/html], então é específico para você.
Entendi. Eu não tenho esses na minha lista de shortcodes – eu os vi na sua captura de tela no início desta postagem.
Com base no seu comentário, como essa funcionalidade é diferente desta (http://wpsnipp.com/index.php/template/print-a-list-of-all-supported-shortcodes/)?
Alguma dica de onde obter shortcodes PHP ou HTML para usar?
É muito diferente, o link para o snippet postado usará apenas print_r e imprimirá o array em si. O código acima adicionará um menu à sua tela de editor com uma lista de shortcodes disponíveis. Quando você selecionar um, ele o adicionará ao editor.
Olá Kevin,
Pessoalmente, acho que este será um dos melhores e mais fáceis códigos que usarei ao criar um novo site.
Seria realmente incrível ter uma segunda caixa de seleção que listasse todas as entradas (valores de shortcode) de alguma forma.
Atenciosamente,
Cor
Legal, fico feliz que você goste. Você pode explicar com um pouco mais de detalhe sobre o segundo menu de seleção?
O WordPress já inclui o jQuery... não há necessidade de tê-lo duas vezes.
E se você adicioná-lo por algum motivo, ele deve ser chamado com wp_enqueue_script("jquery") antes de wp_head().
@vagrantradio:disqus este é um bom conselho.
Olá Mark, como você está,
Isso é muito verdade, eu fiz as atualizações para o snippet, não tenho certeza do que havia no meu cereal esta manhã.
Obrigado pelo aviso.
[…] adicionar ícone de mídia. Edite o value= para alterar o texto inserido. Este snippet foi atualizado recentemente (seleção de shortcode). PHP add_action('media_buttons','add_sc_select',11); function add_sc_select(){ echo […]