¿Buscas una forma de crear botones de medios para agregar shortcodes automáticamente? Este fragmento agregará un menú desplegable con una lista generada automáticamente de tus shortcodes.
Instrucciones:
Agrega este código al archivo functions.php de tu tema o en un plugin específico del sitio
Opcionalmente, edita la línea 10 del array para excluir ciertos 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>';
}
Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo agregar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.
Si te gustó este fragmento de código, considera echar un vistazo a nuestros otros artículos en el sitio como: Reseña de Shortcodes Ultimate: Agrega Shortcodes a WordPress Rápida y Fácilmente.
Hola, script muy útil, todavía tengo una pregunta para mejorar,
Está mostrando la sintaxis de shortcodes existentes entre corchetes, pero no los IDs disponibles exactamente.
Adicionalmente, necesitaría una lógica condicional opuesta para mostrar solo de algunos plugins como 'para incluir', ¿puedes proponer un enfoque o script?
Saludos
por cierto, si quieres personalizar lo que se imprime, puedes hacer algo como esto
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 . "";
}
}
}
Hola Emmanuel,
Intenté seguir tu tutorial en los comentarios, y estoy un poco confundido sobre el símbolo (“”) en “”. Clave $. ¿Puedes explicar para qué es?
¡Gran ejemplo, muchas gracias, justo lo que necesitaba para mostrar mis shortcodes personalizados! Sigue compartiendo cosas geniales 🙂
¡Hola Kev, gran publicación! Me ahorró mucho código y mucho dolor de cabeza buscando artículos con formas más complicadas de hacer esto. Tenía una pregunta. Al insertar el código, funciona muy bien. Quería saber solo para mostrarlo como un botón en su lugar.
Esto no es algo que funcionaría para este fragmento, ya que la mayoría de las instalaciones de WordPress tendrían muchos, muchos shortcodes. Esta es una de las razones por las que uso un menú desplegable, ya que podría tener una lista de quién sabe cuántos elementos. Hazme saber si estoy malinterpretando tu pregunta.
en lugar de eso echo ‘ “Shortcode”‘;
echo ‘ “”‘;
No estoy seguro de entender, usa el formulario de http://wpsnip.com/contact/ y envíame un correo electrónico.
quiero que imprima una imagen en lugar del shortcode de opción
creo que hice la pregunta mal. Quiero que no las opciones dentro del menú desplegable se muestren como un botón, sino que el menú desplegable real se muestre como un botón, de modo que cuando haga clic en él, se despliegue un menú que muestre todos los shortcodes.
¡Fragmento impresionante, pero no funcionará para shortcodes más complejos. Por ejemplo, me gusta incluir un shortcode de origen con dos matrices: nombre y enlace, para que el nombre se muestre y se enlace a la página a la que se dirige. Si hay alguna solución, ¡házmelo saber!
” este es un buen consejo” :)) clacks @google-78e9f950b24057773891758bcae63bb2:disqus
Genial, me alegra que te guste el fragmento.
Hola Kevin,
¿Hay alguna manera de llevar el menú desplegable del botón de medios a la tercera o segunda fila del editor de tinymce? Porque con el cargador actualizado (con v3.3), no se ve bien.
Gracias,
Hoko
Y ahora lo comprobé, ya no funciona con WordPress 3.3... 🙁
………*no funciona….
lo siento de nuevo, funciona correctamente con WordPress 3.3.
Pero sigo preguntando si podemos mover el menú desplegable de la ubicación de los botones multimedia a cualquiera de las filas de botones de tinymce.
Gracias Kevin
+1 para esta solicitud de agregar el menú desplegable a la barra de menú real del editor TinyMCE. Por cierto, este es un gran fragmento y justo lo que estoy buscando, PERO me gustaría que se moviera el menú desplegable. Se ve un poco fuera de lugar justo al lado del botón multimedia de cargas y está rompiendo un poco el CSS.
No fácilmente, no.
Gran fragmento Kevin, gracias por eso. Tengo una pregunta: en este momento, esto simplemente te permite colocar la etiqueta de apertura y cierre del shortcode una al lado de la otra, pero sería aún mejor si pudieras seleccionar un bloque de texto y que las etiquetas de apertura y cierre envuelvan ese texto. ¿Tiene sentido? ¿Crees que sería posible?
Hola Matt, claro que sí, esta era solo una versión temprana, es principalmente JQuery lo que hará esa parte. No estoy seguro de cuándo publicaré una versión actualizada. Pero intentaré hacerlo lo antes posible.
[…] para recordar los shortcodes, así que busqué en internet y encontré el fragmento de Kevin Chard en http://wpsnipp.com/index.php/functions-php/update-automatically-create-media_buttons-for-shortcode-s… para incorporar un menú desplegable de shortcodes en el editor. Modifiqué el código de Kevin para que funcione con […]
Cuando mezclo el código Javascript de aquí y lo cambio con el Javascript de "Agregar media_buttons personalizados para la selección de shortcodes", funciona genial 🙂 gracias.. aún así.. el selector choca un poco con la parte superior de mi editor, ocultando ligeramente la parte superior de sus herramientas.
Esto no está tan mal pero se ve raro.. intenté con CSS pero no funciona
¿Tengo una idea de cómo puedo influir en el div de los "botones multimedia" desde mi functions.php?
(solo para agregar un valor de margin-bottom: 10px)
Gracias de todos modos
Puedes estilizar cosas con id="sc_select" el siguiente código agregará CSS. No estoy seguro si esto solucionará las cosas, pero te ayudará a jugar con el CSS para resolverlas.
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');
Gracias hombre... lo deduje, pero el selector puede tener "margen" ya que está dentro de un div... está bien, sin embargo, simplemente establecí el tamaño de fuente en 11px y se ajustó perfectamente encima de la barra de herramientas del editor.
Gracias por este gran código 🙂
De nada, me alegra que te guste el fragmento.
¿Hay alguna forma de especificar el orden en que aparece en el div #media-buttons? Ahora mismo parece que aparece alineado a la izquierda y está arruinando mi área de texto principal.
Un fragmento de código genial.
c.
Debería estar justo al lado del ícono de agregar medios encima de la barra de herramientas del editor, como en la imagen de arriba, ¿no es así para ti?
Disculpa si me estoy perdiendo algo muy obvio, pero ¿qué hace la inserción del shortcode? ¿Hay capturas de pantalla disponibles? Gracias.
Hola Cliff
Shortcodes o un poco de código que puedes agregar a tus publicaciones, que es una forma corta de agregar funcionalidad o realmente cualquier cosa. Por ejemplo, el enlace de abajo te permitirá agregar un iframe con solo un poco de código. [ iframe url=”http://wpsnipp.com” ]
http://wpsnipp.com/index.php/functions-php/iframe-shortcode-for-posts-and-pages/
WordPress también tiene algunos shortcodes incorporados como [ gallery ] esta página proporcionará más detalles sobre el shortcode de la galería.
http://codex.wordpress.org/Gallery_Shortcode
Sin embargo, el código anterior en esta publicación creará una lista de los shortcodes que tienes disponibles para que puedas seleccionarlos y agregarlos a tus publicaciones. Espero que esto ayude a explicar las cosas un poco mejor.
Sé lo que son los shortcodes (y me encantan, porque así puedes permanecer en el Editor Visual – como el tuyo de iframe, que es genial), pero me preguntaba si se requería algún código adicional en alguna parte. Pregunto porque vi [/php] y [/html] y no estaba seguro del caso de uso. ¿Pones código PHP o HTML directamente en el Editor Visual? Gracias.
Este código creará una lista de los shortcodes que ya tienes en tu instalación de WordPress, así que si tienes [/php] o [/html], entonces es específico para ti.
Entendido. No los tengo en mi lista de shortcodes – los vi en tu captura de pantalla al principio de esta publicación.
Basado en tu comentario, ¿en qué se diferencia esta funcionalidad de esta (http://wpsnipp.com/index.php/template/print-a-list-of-all-supported-shortcodes/)?
¿Algún consejo sobre dónde conseguir shortcodes de PHP o HTML para usar?
Es muy diferente, el enlace al snippet publicado solo usará print_r e imprimirá el array en sí. El código anterior agregará un menú a tu pantalla de editor con una lista de shortcodes disponibles. Cuando selecciones uno, lo agregará al editor.
Hola Kevin,
Personalmente, creo que este será uno de los mejores y más fáciles de usar fragmentos de código que usaré al crear un nuevo sitio.
Sin embargo, sería realmente increíble tener un segundo cuadro de selección que liste todas las entradas (valores de shortcode) de alguna manera.
Saludos cordiales,
Corazón
Genial, me alegra que te guste, ¿puedes explicar con un poco más de detalle sobre el segundo menú desplegable?
WordPress ya incluye jQuery... no hay necesidad de tenerlo dos veces.
Y si lo agregas por alguna razón, debería llamarse con wp_enqueue_script("jquery") antes de wp_head().
@vagrantradio:disqus este es un buen consejo.
Hola Mark, ¿cómo estás?
Esto es muy cierto, hice las actualizaciones al fragmento, no estoy seguro de qué había en mi cereal esta mañana.
Gracias por avisarme.
[…] agregar el ícono de medios. Edita el value= para cambiar el texto insertado. Este snippet se ha actualizado recientemente (selección de shortcode). PHP add_action('media_buttons','add_sc_select',11); function add_sc_select(){ echo […]