Cómo agregar estilos personalizados al editor visual de WordPress

Cómo agregar estilos personalizados al editor visual de WordPress

Echa un vistazo a tu editor visual de WordPress. Hay algunas opciones estándar para formatear y diseñar su contenido, pero no mucho en términos de personalización para que sus publicaciones y páginas se vean un poco realmente elegantes.


WordPress Editor

Ahora, puede saber que tiene la capacidad de saltar de un lado a otro entre los editores de texto y visuales en WordPress para agregar CSS para crear cosas como botones y bloques de texto, pero esto es una molestia, y si no tiene mucha experiencia editando código, el editor de texto parece un poco intimidante.

¿No sería más fácil si pudieras crear tus propios estilos personalizados, colocarlos en un menú desplegable en el editor de WordPress y elegir usarlos cuando los necesites? Sí, es mucho más fácil, así que queremos esbozar cómo hacer eso 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.

Veamos 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 pesar su sitio con un complemento.

El objetivo de esto es agregar un nuevo menú desplegable que incluya estilos personalizados en su editor visual de WordPress, que le permite seleccionar elementos en su editor y luego aplicarles estilos personalizados. Si está desarrollando un nuevo tema, ubique su funciones.php archivo y coloque el código a continuación en ese archivo o si está trabajando con un tema ya incorporado, pegue este código en el archivo functions.php de un tema secundario.

función myprefix_mce_buttons_1 ($ botones) {
array_unshift ($ botones, 'styleselect');
volver $ botones;
}

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. ¿Te das cuenta de cómo nos enganchamos a los “botones_mce_1”? Esto coloca el botón de menú de formatos en la primera fila del editor mce. También puede usar 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 dentro de sus publicaciones. Tome el código que figura a continuación y péguelo en su funciones.php archivo que agregará 2 nuevos estilos al menú desplegable Formatos: “Botón de tema” y “Resaltar”.

/ **
* Agregue estilos personalizados al menú desplegable de formatos mce
* *
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
* *
* /
función myprefix_add_format_styles ($ init_array) {
$ style_formats = array (
// Cada hijo de matriz es un formato con su propia configuración: agregue tantos como desee
formación(
'title' => __ ('Botón de tema', 'dominio de texto'), // Título del menú desplegable
'selector' => 'a', // Elemento para apuntar en el editor
'classes' => 'theme-button' // Nombre de clase utilizado para CSS
),
formación(
'title' => __ ('Highlight', 'text-domain'), // Título del menú desplegable
'inline' => 'span', // Envuelve un span alrededor del contenido seleccionado
'classes' => 'text-highlight' // Nombre de clase utilizado para CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
devolver $ 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 personalizado, asegúrese de revisar el WordPress Codex para una explicación más detallada de los parámetros aceptados y los valores de retorno.

Ahora que tiene nuevos estilos, puede resaltar el 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 lapso con su nombre de clase único. Puede ver un ejemplo de nuestro tema Total WordPress sobre cómo hemos utilizado los formatos para que los usuarios puedan aplicar fácilmente una apariencia de lista de verificación a cualquier viñeta en el editor.

Lista de Verificación

Así que ahora puede usar sus formatos personalizados, pero no se verán diferentes hasta que haya agregado un CSS personalizado a su sitio para darle estilo. Debe ubicar la hoja de estilo para su tema (si está creando uno propio) o tema secundario y pegar el siguiente código CSS en el archivo.

.botón de tema {
pantalla: bloque en línea;
acolchado: 10 15px;
color: #fff;
fondo: # 1796c6;
decoración de texto: ninguno;
}
.botón de tema: desplazar {
decoración de texto: ninguno;
opacidad: 0.8;
}
.texto resaltado {
fondo: # FFFF00;
}

Ahora, esto agregará estilo a sus nuevos formatos para el front-end para que, cuando se aplique, pueda verlos en vivo. ¡Hurra! ¿Pero no sería bueno ver también tus estilos en el editor real cuando se están aplicando? Para hacer esto, deberá utilizar la función “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 quiera, 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 cargarla en el back-end.

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 al tema de su hijo, solo asegúrese de darle un nombre único para que no entre en conflicto con el tema principal o si su tema principal ya tiene un archivo CSS para en 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á primero el tema secundario antes de cargar el archivo CSS del editor del tema principal y si lo encuentra lo hará cargarlo desde el tema hijo en su lugar.

Agregue estilos personalizados al editor visual de WordPress con un buen complemento

Si no tiene tiempo para jugar con el código, o no puede imaginarlo, hay buenas noticias. Hay un complemento que le permite completar exactamente lo que acabamos de hacer sin tener que jugar con el código.

Complemento de estilos personalizados de TinyMCE

Simplemente busque, instale y active el Complemento de estilos personalizados de TinyMCE y actívelo en su sitio de WordPress.

Configuración de estilos personalizados de TinyMCE

Ir Configuración> TinyMCE Prof.styles en el lado izquierdo de su panel de WordPress. Aquí es donde modifica su configuración para el complemento.

Configuración de estilos personalizados de TinyMCE

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.

TinyMCE Custom Styles Agregar nuevo

Una vez que guarde la configuración, desplácese hacia abajo para seleccionar el botón Agregar nuevo estilo.

Opciones de estilos personalizados de TinyMCE

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 para usted. Escriba un Título para lo que quiera que aparezca en el menú desplegable. Elija si desea un selector, en línea o tipo de bloque. Siéntase libre de usar la captura de pantalla anterior para completar las clases y estilos de CSS, o cree la suya propia para lo que planea usar el menú desplegable. Una vez hecho esto, haga clic en Guardar configuración en la parte inferior de la página.

Formato de estilos personalizados de TinyMCE

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 ubique 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, revelará el nuevo estilo que acaba de crear.

Formato de estilos personalizados de TinyMCE en uso

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 obtener más información sobre cómo usar nuevos estilos revisando 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éntase libre de compartir cualquier estilo inusual que haya creado para que su sitio se vea un poco mejor!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map