Eche un vistazo a su editor visual de WordPress. Hay algunas opciones estándar para formatear y diseñar su contenido, pero no muchas en términos de personalización para hacer que sus publicaciones y páginas se vean realmente elegantes.
Ahora, es posible que sepa que tiene la capacidad de saltar de un lado a otro entre los editores de texto y visuales en WordPress para agregar algo de CSS para crear cosas como botones y bloques de texto, pero esto es una molestia, y si no tiene Con mucha experiencia en la edición de código, el editor de texto parece un poco intimidante.
¿No sería más fácil si pudiera crear sus propios estilos personalizados, colocarlos en un menú desplegable en el editor de WordPress y elegir usarlos cuando los necesite? Sí, es mucho más fácil, por lo que queremos describir cómo hacerlo aquí. Tenga en cuenta que, aunque estamos tratando de hacer que este proceso sea lo más simple posible, es útil tener un poco de conocimiento de CSS si desea descubrir todos los beneficios de los estilos personalizados.
Echemos un vistazo a cómo agregar estilos personalizados al editor visual de WordPress.
Agregue estilos personalizados al editor visual de WordPress agregando código
Esta primera opción requiere que sepas un poco sobre cómo incorporar y modificar CSS, pero te daré un pequeño recorrido para ayudarte a aprender los conceptos básicos para que puedas usar este conocimiento en el futuro. Esta es una buena opción si no desea sobrecargar su sitio con un complemento.
El objetivo de esto es agregar un nuevo menú desplegable que incluye estilos personalizados en su editor visual de WordPress, lo que le brinda la capacidad de seleccionar elementos en su editor y luego aplicarles estilos personalizados. Si está desarrollando un nuevo tema, busque su functions.php y coloque el código a continuación en ese archivo o, si está trabajando con un tema ya integrado, pegue este código en el archivo functions.php de un tema secundario.
function myprefix_mce_buttons_1( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );
Regrese al editor en una de sus publicaciones de WordPress y ahora debería ver un nuevo botón «Formatos» en la fila superior del editor. ¿Observa cómo nos conectamos con «mce_buttons_1? Esto coloca el botón del menú de formatos en la primera fila del editor mce. También puede utilizar el filtro «mce_buttons_2» para colocarlo en la segunda fila o «mce_buttons_3» para colocarlo en la tercera fila.
Entonces, ahora que ha habilitado el elemento del menú, es hora de agregar sus estilos personalizados para usar en sus publicaciones. Tome el código que aparece a continuación y péguelo en su functions.php archivo que agregará 2 nuevos estilos al menú desplegable Formatos: “Botón de tema” y “Resaltar”.
/**
* Add custom styles to the mce formats dropdown
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
*/
function myprefix_add_format_styles( $init_array ) {
$style_formats = array(
// Each array child is a format with it's own settings - add as many as you want
array(
'title' => __( 'Theme Button', 'text-domain' ), // Title for dropdown
'selector' => 'a', // Element to target in editor
'classes' => 'theme-button' // Class name used for CSS
),
array(
'title' => __( 'Highlight', 'text-domain' ), // Title for dropdown
'inline' => 'span', // Wrap a span around the selected content
'classes' => 'text-highlight' // Class name used for CSS
),
);
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );
Puede cambiar los títulos para mostrar diferentes nombres en su menú desplegable, agregar / eliminar elementos de la matriz, etc. Puede modificar casi cualquier cosa en este código para revelar sus propios estilos de formato personalizados, asegúrese de revisar el Códice de WordPress para obtener una explicación más detallada de los parámetros aceptados y los valores de retorno.
Ahora que tiene nuevos estilos, puede resaltar contenido en su editor y aplicar los estilos. Observe, ¿cómo el formato «Botón de tema» tiene un parámetro selector? Esto significa que el estilo solo se puede aplicar a ese selector específico (en este caso, la etiqueta «a» o «enlace»). El segundo formato que agregamos «Resaltar» no tiene un parámetro selector sino un parámetro «en línea» que le dice que aplique el estilo a cualquier texto que haya resaltado en su editor y lo envuelva en un intervalo con su nombre de clase único. Puede ver un ejemplo de nuestro tema de Total WordPress sobre cómo hemos usado formatos para que los usuarios puedan fácilmente aplicar una lista de verificación busque las viñetas en el editor.
Por lo tanto, ahora puede usar sus formatos personalizados, pero no se verán diferentes hasta que haya agregado CSS personalizado a su sitio para diseñarlos. Debe ubicar la hoja de estilo para su tema (si está construyendo el suyo) o tema hijo y pegar el siguiente código CSS en el archivo.
.theme-button {
display: inline-block;
padding: 10 15px;
color: #fff;
background: #1796c6;
text-decoration: none;
}
.theme-button:hover {
text-decoration: none;
opacity: 0.8;
}
.text-highlight {
background: #FFFF00;
}
Ahora, esto agregará estilo a sus nuevos formatos para el front-end, de modo que cuando se aplique, pueda verlos en vivo. ¡Hurra! ¿Pero no sería bueno ver también sus estilos en el editor real cuando se están aplicando? Para hacer esto, necesitará hacer uso de la función de «hoja de estilo del editor» en WordPress. Si está creando su propio tema, entonces querrá crear un nuevo archivo css en su tema llamado «editor-style.css» (puede nombrarlo como desee, solo asegúrese de editar el fragmento a continuación en consecuencia) con el CSS personalizado agregado para sus formatos y luego agregue la función a continuación para cargarlo en el backend.
function myprefix_theme_add_editor_styles() {
add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'myprefix_theme_add_editor_styles' );
Si está trabajando con el tema de otra persona, deberá agregarlo en su tema secundario, solo asegúrese de darle un nombre único para que no entre en conflicto con su tema principal o si su tema principal ya tiene un archivo CSS para el editor, puede copiarlo y pegarlo en su tema secundario (sin agregar el código PHP anterior) y luego agregar su nuevo CSS porque WordPress verificará el tema secundario primero antes de cargar el archivo CSS del editor del tema principal y, si lo ubica, lo hará cárguelo desde el tema hijo.
Agregue estilos personalizados al editor visual de WordPress con un complemento agradable
Si no tiene tiempo para jugar con el código, o no puede imaginarlo usted mismo, hay buenas noticias. Hay un complemento que le permite completar exactamente lo que acabamos de hacer sin tener que perder el tiempo con el código.
Simplemente busque, instale y active el Complemento de estilos personalizados TinyMCE y actívelo en su sitio de WordPress.
Ir a Configuración> TinyMCE prof.styles en el lado izquierdo de su panel de WordPress. Aquí es donde modifica la configuración del complemento.
El complemento le permite elegir dónde están sus hojas de estilo o dónde desea colocarlas. Se recomienda que cree un nuevo directorio personalizado. Seleccione la tercera opción y asigne un nombre a su directorio, luego baje la página para hacer clic en su Guardar ajustes opción antes de continuar con el siguiente paso.
Una vez que guarde la configuración, desplácese hacia abajo para seleccionar el botón Agregar nuevo estilo.
Aquí es donde puede personalizar cómo desea que se vean sus estilos personalizados. Básicamente, es un editor simple basado en la web que genera el código CSS por usted. Escriba un título para lo que quiera que aparezca en el menú desplegable. Elija si desea un tipo de selector, en línea o de bloque. Siéntase libre de usar la captura de pantalla anterior para completar las clases y estilos de CSS, o cree los suyos propios dependiendo de lo que planee usar en el menú desplegable. Una vez hecho esto, haga clic en Guardar configuración en la parte inferior de la página.
Ahora es el momento de ver cómo se ve el nuevo estilo personalizado en su editor. Abra una nueva publicación o página y busque el menú desplegable Formatos en el lado izquierdo del editor visual. Aparece en la segunda línea. Una vez que haga clic en el menú desplegable, se revelará el nuevo estilo que acaba de crear.
Haga clic en la opción Big Blue Button, o lo que sea que haya creado, para verlo revelado en su editor. Para usarlo, simplemente resalte el texto que desea formatear, luego haga clic en su opción y ¡listo!
Conclusión
¡Eso es todo por ahora! Siempre puede aprender más sobre cómo usar nuevos estilos consultando el Página del códice de WordPress dedicado a este tema.
Háganos saber en la sección de comentarios si tiene alguna pregunta sobre cómo agregar estilos personalizados al editor visual de WordPress. ¡Y siéntete libre de compartir cualquier estilo inusual que hayas creado para que tu sitio se vea un poco mejor!