Cómo agregar opciones de estilo personalizadas al editor de publicaciones de WordPress

El editor de publicaciones en WordPress, como su nombre lo indica, está destinado a permitirle editar publicaciones y contenido. De forma predeterminada, no le permite agregar clases CSS personalizadas. Si desea agregar estilos o clases CSS personalizados, la única forma es cambiar al modo “Texto” y agregarlo al código HTML.

Dado que WordPress es tan personalizable, hay formas de hacer su vida más fácil agregando opciones de estilo personalizadas al editor de publicaciones de WordPress. Con estas opciones personalizadas, puede aplicar los estilos CSS con solo unos pocos clics. Ya no tienes que cambiar al modo de texto o recordar todas las clases de CSS que se incluyen en tus publicaciones para que se vean mejor.

Hay un par de formas en las que puede agregar opciones de estilo personalizadas al editor de publicaciones de WordPress. El primero es usar un complemento gratuito y el segundo es agregar un fragmento de código. Ambos métodos funcionan de manera muy similar, así que siga el que le resulte más cómodo.

Nota : antes de continuar, supongo que conoce HTML y CSS básicos y puede entender cosas como clases CSS, elementos a nivel de bloque, elementos HTML, atributos, etc.

1. Usando un complemento

La forma más fácil de agregar opciones de estilo personalizado en el editor de publicaciones de WordPress es usar un complemento llamado TinyMCE Custom Styles.

Lo bueno de este complemento es que crea automáticamente una hoja de estilo del editor donde puede agregar estilos CSS personalizados. Esto es muy útil cuando desea ver los estilos de interfaz relacionados con enlaces, imágenes, formularios, botones, etc., aplicados dentro del editor de publicaciones.

1. Para comenzar, descargue, instale y active los estilos personalizados de TinyMCE como cualquier otro complemento de WordPress. Después de activarlo, vaya a la página de configuración del complemento navegando a “Configuración -> Estilos personalizados de TinyMCE”.

2. De buenas a primeras, el complemento mostrará un mensaje de error que le pedirá que elija dónde desea colocar el archivo de la hoja de estilo del editor. Dependiendo de su tema, puede elegir entre tres opciones. Lea esas opciones detenidamente y elija la que sea adecuada para usted. En mi caso, elegí la segunda opción porque estoy usando un tema hijo personalizado de Genesis. Haga clic en el botón “Guardar todas las configuraciones” para guardar los cambios.

3. Desplácese hacia abajo y haga clic en el botón “Agregar nuevo estilo”. Ahora, ingrese el nombre del estilo, seleccione un tipo (es decir, en línea, bloque o selector), ingrese el valor del tipo y luego la clase CSS.

4. En el lado más a la derecha, no olvide seleccionar si el elemento es un “Wrapper” o no. Si selecciona esta opción, el estilo creará un nuevo elemento de nivel de bloque alrededor del elemento de nivel de bloque seleccionado en el editor de publicaciones.

5. Si lo desea, incluso puede agregar directamente estilos CSS personalizados haciendo clic en “Agregar nuevo estilo” que aparece en la categoría “Estilos CSS”. Sin embargo, le recomiendo que agregue esos estilos en el archivo “editor-style.css” ubicado en su directorio de temas (si ha seleccionado la segunda opción como yo en el segundo paso). Facilita la gestión.

6. Una vez que haya terminado, haga clic en el botón “Guardar todas las configuraciones” que aparece al final de la página.

7. Eso es todo. A partir de ahora, verá un nuevo menú desplegable llamado “Formatos” en el editor de publicaciones. En ese menú desplegable, puede encontrar la opción de estilo personalizado recién agregada junto con otras preconfiguradas. Para usar el estilo, simplemente haga clic en él y el código CSS necesario se agregará automáticamente al editor de publicaciones. Ves ese código en el modo de texto.

8. Si ha agregado los estilos requeridos al archivo editor-style.css, esos estilos se reflejarán en el editor de publicaciones cuando use la opción de estilo del menú desplegable.

En el futuro, si deshabilita o elimina el complemento, la hoja de estilo del editor no se eliminará. Sin embargo, ya no puede acceder a las opciones personalizadas en el editor de publicaciones.

2. Método manual

Si no le gusta usar un complemento, puede lograr lo mismo agregando un fragmento de código simple a su archivo “functions.php”. Hay dos partes en esto: una es para agregar el botón a la barra de herramientas para insertar código CSS, y la segunda es hacer que el estilo CSS viva en el editor de publicaciones.

Agregar botones de estilo CSS personalizados a la barra de herramientas

Agregue lo siguiente al final de su archivo “functions.php”. Este código en realidad lo proporciona WordPress .

Necesita personalizar el código para reflejar sus opciones de estilo. En el código anterior, cada matriz es una opción de estilo independiente. Ingrese el título de su estilo junto a “título”, el tipo de bloque junto a “bloque”, la clase CSS junto a “clases” y, si el elemento es un contenedor, escriba “verdadero” al lado de “contenedor”. Si no es así, escriba “falso”.

Siempre que desee agregar una nueva opción de estilo, simplemente duplique la matriz y modifique los campos. En mi caso, completé la primera matriz para reflejar mi opción “Botón azul”.

Una vez que haya terminado con la personalización, guarde y cargue el archivo “functions.php” modificado en su servidor.

Crear hoja de estilo del editor

Cree un archivo con el nombre “editor-style.css”. Ahora, agregue los estilos CSS relevantes que le gustaría ver en el editor de publicaciones. No olvide que las clases CSS que está creando en el archivo “editor-style.css” deben coincidir con las clases CSS en el código de opciones de estilo anterior.

Ahora, abra el archivo “functions.php” de su tema y agregue el siguiente código.

Sube los archivos “editor-style.css” y “functions.php” a tu servidor. Eso es todo lo que hay que hacer. A partir de ahora, puede usar las opciones de estilo personalizado del editor de publicaciones de WordPress.

Puede ver los estilos aplicados en tiempo real.

Comente a continuación compartiendo sus pensamientos y experiencias con respecto al uso de los métodos anteriores para agregar opciones de estilo personalizadas en el editor de publicaciones de WordPress.

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario