¿Quieres crear tu propio menú desplegable de estilos personalizados? Si bien probablemente exista un plugin para esto, hemos creado un fragmento de código rápido que puedes usar para crear un menú desplegable de estilos personalizados en el editor visual TinyMCE.
Instrucciones:
Todo lo que tienes que hacer es agregar este código al archivo functions.php de tu tema o a un plugin específico del sitio:
function themeit_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );
function themeit_tiny_mce_before_init( $settings ) {
$settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,';
$style_formats = array(
array( 'title' => 'Button', 'inline' => 'span', 'classes' => 'button' ),
array( 'title' => 'Green Button', 'inline' => 'span', 'classes' => 'button button-green' ),
array( 'title' => 'Rounded Button', 'inline' => 'span', 'classes' => 'button button-rounded' ),
array( 'title' => 'Other Options' ),
array( 'title' => '½ Col.', 'block' => 'div', 'classes' => 'one-half' ),
array( 'title' => '½ Col. Last', 'block' => 'div', 'classes' => 'one-half last' ),
array( 'title' => 'Callout Box', 'block' => 'div', 'classes' => 'callout-box' ),
array( 'title' => 'Highlight', 'inline' => 'span', 'classes' => 'highlight' )
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo copiar / pegar 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: Las 46 marcas más grandes del mundo que usan WordPress activamente y cómo crear un formulario de registro de usuario personalizado en WordPress.
Ya no parece funcionar. Acabo de agregar esto, no pasó nada en mi MCE. ¿Quizás un conflicto con mi tema/constructor de páginas? (Madrigal/WPBakery)
Disculpa por revivir un post antiguo, pero ¿hay alguna manera de hacer esto y crear 2 menús desplegables de 'Formato' separados? Me gustaría uno que contenga opciones de P y otro que contenga opciones de color, si es posible.
¡¡¡Muchísimas gracias por esto!!! Estaba usando otro fragmento de código para el mismo efecto, pero después de actualizar a WP con el nuevo plugin TinyMCE, ese código ya no funcionaba. Probé esto y todavía funciona.
Te lo agradezco.
¡Perfecto! Me alegra saber que este fragmento de TinyMCE te ha sido de ayuda.
¡¡¡Muchísimas gracias por esto!!! Estaba usando otro fragmento de código para el mismo efecto, pero después de actualizar a WP con el nuevo plugin TinyMCE, ese código ya no funcionaba. Probé esto y todavía funciona.
Te lo agradezco.
¡¡¡Muchísimas gracias por esto!!! Estaba usando otro fragmento de código para el mismo efecto, pero después de actualizar a WP con el nuevo plugin TinyMCE, ese código ya no funcionaba. Probé esto y todavía funciona.
Te lo agradezco.
¡¡¡Muchísimas gracias por esto!!! Estaba usando otro fragmento de código para el mismo efecto, pero después de actualizar a WP con el nuevo plugin TinyMCE, ese código ya no funcionaba. Probé esto y todavía funciona.
Te lo agradezco.
¡¡¡Muchísimas gracias por esto!!! Estaba usando otro fragmento de código para el mismo efecto, pero después de actualizar a WP con el nuevo plugin TinyMCE, ese código ya no funcionaba. Probé esto y todavía funciona.
Te lo agradezco.
¡¡¡Muchísimas gracias por esto!!! Estaba usando otro fragmento de código para el mismo efecto, pero después de actualizar a WP con el nuevo plugin TinyMCE, ese código ya no funcionaba. Probé esto y todavía funciona.
Te lo agradezco.
Gran post Kevin, gracias. ¿Hay alguna manera de que podamos eliminar los estilos en el editor, de la misma manera que el usuario puede hacer clic en el botón de eliminar formato?
Gracias Kevin,
Esta es exactamente la solución que estaba buscando.
¡Perfecto! Me alegra ver que te gusta el fragmento 🙂
¡brillante! ¡¡¡GRACIAS!!! esta es exactamente la solución que estaba buscando… ¡incluso con los estilos correctos listos para usar!
@twitter-17003417:disqus Genial, me alegra que encuentres útil este fragmento de WordPress. Los estilos correctos, ¡wow, es como si pudiera leer tu mente! 😉 Saludos, disfruta...
Gracias Kevin,
He encontrado una solución trabajando con saltos de línea con la Etiqueta Más (dividir contenido).
También es muy fácil de añadir.
No quiero poner URLs aquí, pero esto me ayudó mucho.
http://digwp.com/2010/03/wordpress-post-content-multiple-columns/
Kevin, lo siento pero tengo una última pregunta.
El código funciona correctamente, solo hay un pequeño problema con WordPress que envuelve cada párrafo en una sola columna izquierda o derecha.
Esta es mi función, nada especial.
function themeit_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons;}add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );function themeit_tiny_mce_before_init( $settings ) { $settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,'; $style_formats = array( array( 'title' => 'Add Columns' ), array( 'title' => '← Column', 'block' => 'div', 'classes' => 'content-col-left' ), array( 'title' => 'Column →', 'block' => 'div', 'classes' => 'content-col-right' ) ); $settings['style_formats'] = json_encode( $style_formats ); return $settings;}add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
Y cuando empiezo a escribir una historia,
Digamos que es una historia con 3 párrafos, y cuando termino de escribir, selecciono todo el contenido (3 párrafos) juntos y presiono el botón estilo > Botón de columna izquierda del editor TinyCME, pero envuelve cada párrafo en un solo...
Esto es muy frustrante de ver y por alguna razón no puedo hacer que funcione.
Quiero que mis 3 párrafos estén envueltos en etiquetas P y los 3 P-tags juntos deben estar envueltos en un div con una clase left-column.
Hola B.J. Sí, puedo ver a qué te refieres, eso sería frustrante, sin embargo, en el punto en que se insertan las cosas, eso sería TinyMCE y no parte de mi fragmento, así que no creo que se pueda hacer nada. El fragmento solo agrega configuraciones de noticias,
Sin embargo, ¿has intentado agregar un salto de línea después de que fusiona los tres párrafos en uno? ¿eso soluciona las cosas? Jugaré con las cosas y veré si puedo hacer algo al respecto por ti.
Muchas gracias Kevin,
De nada, me alegra haber podido ayudar.
¿Podrías hacer columnas con esos estilos de menú desplegable?
Como en el menú desplegable:
Agregar columna 1 (esto agregará este código)
El cursor debe estar aquí para escribir contenido en PDespués de eso, elige del menú desplegable Agregar columna 2
Para agregar una segunda columna de texto al lado de la primera.
Creo que es muy difícil dividir el texto en 2 columnas en el div de entrada de contenido si no sabes cómo funciona el HTML.
Me gustaría saber esto para un cliente mío que solo puede trabajar con un editor WYSIWYG pero le gustaría tener una opción para tener dos columnas en el div de entrada.
Perdón por mi inglés pobre 🙁
Hola B.J. sí, podrías agregar un div con la clase class=\"rgt-column\" y otro con class=\"lft-column\" entonces depende de ti al configurar el CSS para que esto funcione como columnas. Si quieres tener el CSS para crear las columnas utilizadas dentro del editor, puedes agregar este pequeño código y crear una nueva hoja de estilos con el código de las columnas.
function wps_add_editor_style() {
add_editor_style( ‘editor-style-columns.css’ );
}
add_action( ‘after_setup_theme’, ‘wps_add_editor_style’ );De esta manera podrán ver el contenido en múltiples columnas, es posible que necesites experimentar un poco para que funcione como deseas.