Gran parte del éxito de WordPress es que hace que la creación de un contenido web muy fácil. Nada simboliza esto más que el editor visual. Es una herramienta poderosa que permite a los usuarios crear publicaciones de blog y páginas web fácilmente utilizando un procesador de texto. Para facilitar las cosas, el editor ofrece a los usuarios de WordPress y a los propietarios de sitios web muchas opciones de estilo. Ya sea que desee hacer el contenido audaz, en cursiva, subrayado o presionado, puede hacerlo tocando un botón. Y hay muchas más opciones de formato para elegir.

Sin embargo, hay momentos en que no son suficientes. Si alguna vez se ha despertado que desea opciones de estilo personalizadas, como cajas de contenido, CTA o botones en el editor de WordPress, no está solo. Es una solicitud bastante común. Una forma de obtener un estilo personalizado es usar el editor de texto y agregarlo por HTML y CSS en línea. Sin embargo, esto funciona ocasionalmente, no es la mejor solución si tiene que agregar formateo adicional regularmente. En este caso, es mejor hacer de sus estilos personalizados una parte permanente del editor de WordPress.
¿Cómo haces esto? Bueno, eso es exactamente sobre esto en este artículo. A continuación, aprenderá cómo agregar estilos personalizados al editor de WordPress como un menú de caída. Primero veremos cómo hacer esto manualmente y luego a través de un complemento. Después de eso, también analizaremos algunos ejemplos e ideas sobre cómo usar esta función, así que manténgase en la fase hasta el final. Sin embargo, tenga en cuenta que el modelado del contenido web se realiza a través de CSS. Por lo tanto, un conocimiento práctico de los operadores de CSS es útil para rastrear y crear sus propios estilos. Todavía puede usar este tutorial si es un principiante, pero es posible que deba dar un tiempo adicional para comprender el código CSS a continuación. Entonces vamos a romper. Cómo agregar manualmente estilos personalizados al editor de WordPress bien, como prometí por primera vez, echaremos un vistazo a la adición manual de nuevos estilos al editor. Para hacer esto, tendremos que editar algunos archivos de temas. Por esta razón, la primera tarea es hacer una copia de reserva de su tema de WordPress. Mejor, si aún no ha hecho esto, configure un tema secundario para no perder cambios en una actualización. Por supuesto, si ya tiene un tema infantil, haga una copia de seguridad. ¿Todo está bien? Entonces comencemos.
Cree el menú desplegable personalizado para que nuestros estilos personalizados estén disponibles en el editor de WordPress, primero tendremos que crear un nuevo menú desplegable. Por lo tanto, podemos aplicar nuestro formato con algunos clics simples. Para crear el menú, solo tiene que agregar la siguiente pieza de código a la diversión.php del tema. Si lo desea, puede agregar el código a su sitio en forma de un complemento personalizado. Independientemente de la opción que elija, es importante que el código llegue allí. La función add_style_select_buttons ($ buttons) {array_unshift ($ buttons, ‘styleselect’);
devolver $ botones;
}
// Registre la llamada de regreso al filtro apropiado
add_filter (‘mce_buttons_2’, ‘add_style_select_buttons’); Este código agrega un botón para un menú de caída llamado WordPress Publisher. Viene con una serie de nuevas opciones de formato. Una vez que hayamos creado nuestros propios estilos personalizados, aparecerán aquí.
Con el código actual, debe abrir el llamado “fregadero de cocina” para ver el menú. Eso es porque lo conecté a MCE_BUTTONS_2. Si primero desea colocar el menú, puede cambiar el gancho a MCE_BUTTONS_1. Incluso es posible colocarlo en una tercera fila nueva con MCE_BUTTONS_3. Llene el menú con opciones ahora que tenemos nuestro menú, es hora de llenarlo con opciones. Esto, nuevamente, se hace con un código en cuestión: // Agregar estilos personalizados al editor de WordPress
Función my_custom_styles ($ init_array) {

$ style_formats = matrix (
// Estos son los estilos personalizados
matriz(
‘Título’ => ‘Botón Rojo’,
‘bloque’ => ‘span’,
‘class’ => ‘Botón rojo’, ‘Wrapper’ => True,
),
matriz(
‘Title’ => ‘contenido bloque’,
‘bloque’ => ‘span’,
‘Class’ => ‘Bloque de contenido’,
‘WRAPPER’ => VERDADERO,
),
matriz(
‘Título’ => ‘Highlier’,
‘bloque’ => ‘span’,
‘Class’ => ‘Highlier’,
‘WRAPPER’ => VERDADERO,
),
);
// Inserte la matriz, JSON codificada, en “style_formats”
$ init_array [‘style_formats’] = json_encode ($ style_formats);
Devuelve $ init_array;
}
// Adjunte la llamada inversa a “tiny_mce_before_init”
add_filter (‘tiny_mce_before_init’, ‘my_custom_styles’); Tomemos un momento para entender lo que está pasando aquí. En el fragmento de código anterior, creamos tres estilos personalizados diferentes. En particular, agregamos opciones para crear un botón rojo, un cuadro de contenido y un resaltado destacado.
Puedes encontrarlos en las matrices intermedias. Como puede ver, atribuimos a cada opción nuestro propio título, bloque, clases y shell. Esto es lo que cada uno de ellos significa:
Título: el título establece el nombre bajo el cual nuestro estilo personalizado aparecerá en el menú desplegable.
Bloque: define qué tipo de elemento de bloque ocurrirá alrededor del texto resaltado, como
, ,

. Los elementos de bloque existentes en la selección se reemplazarán con el nuevo elemento.
Clases: asigne una o más clases a los elementos seleccionados. Las clases se utilizan para aplicar estilos CSS.
Wrapper: define si se agrega un formato de contenedor para elementos de bloque, como un envoltorio
o blockquote.
También hay varios parámetros que puede usar (encontrarlos en el códice de WordPress): en línea: el nombre del elemento en línea que se agregará a la selección. Similar al bloque.
Selector-CSS 3 Modelo selector para aplicar clases a elementos específicos o cosas complejas, como las líneas impares en una tabla. Útil para aplicaciones de estilo más matizadas.
Estilos: se pueden usar para agregar directamente los estilos CSS en línea. Hacemos esto con las clases CSS y la hoja de estilo.
Atributos: se utilizan para llamar a los nuevos atributos HTML y aplicar a los elementos seleccionados o al nuevo en línea/bloque.
Exactamente: deshabilita la función de combinar estilos similares cuando se usa. Puede ser útil para algunos problemas de herencia CSS.
Después de agregar el código anterior, los estilos personalizados deben ser visibles en el editor de WordPress y ya puede comenzar a asignarlos a los elementos.
Sin embargo, no cambiará demasiado hasta que definamos los estilos CSS apropiados. Afortunadamente, eso es exactamente lo que tomaremos en el siguiente paso. Agregue los estilos CSS a la hoja de estilo para ver cualquier efecto en sus estilos personalizados, primero debe agregar algunos CSS a la hoja de estilo. En nuestro caso, se verá así: .Buton-Roșu {
Color de fondo:#BC3315;
-Moz-Border-Radius: 3px;
-WebKit-Border-Radius: 3px;

Chenar-Raza: 3px;
Chenar: Ninguno;
Color: #fff;
Pantalla: bloque en línea;
Cursor: puntero;
Llenado: 10px 30px;
TEXT-DECOR: Ninguno;
}
.Red-Button: Hover {
Color de fondo: #E53F19;
}
.Centent-block {
Chenar: 1px Solid #EEE;
Llenado: 10px;
Antecedentes: #CCC;
flota a la izquierda;
borde inferior: 1.75 em;
Text-Align: Center;
}
.Centent-block: después de {
Limpia los dos;}
.Marcaler {
Color de fondo:#FFFF66;
} Como puede ver, estos estilos corresponden exactamente a las clases que hemos asignado previamente a nuestros elementos personalizados. Después de agregarlos al archivo style.css de nuestro tema actual, aparecerán en el front-end del sitio.
Básicamente eso es todo. Nuestro trabajo para agregar estilos personalizados al editor de WordPress está casi terminado. Sin embargo, para poner realmente la cereza en la parte superior, tendremos que dar un paso adicional.
En este momento, siempre tendremos que ir y venir entre el editor y la página o la vista previa de la página para ver nuestros estilos personalizados en acción. ¿No sería genial si, por otro lado, podríamos ver los efectos en el editor? Quiero decir, después de todo, se llama “lo que tienes: es el editor”, ¿verdad? Para que él permanezca fiel a su nombre, todo lo que tiene que hacer es agregar los estilos CSS anteriores a un archivo llamado Editor-Styl.CSS. Como puede adivinar, esta es la hoja de estilo del editor en sí. Más y más temas lo usan para dar a los usuarios una mejor impresión de cómo se verá su contenido, sin ir al frente.
Si la suya aún no tiene esta funcionalidad, siempre puede implementar el archivo solo.Todo lo que tiene que hacer para esto es crear un nuevo archivo de texto, cambiar su nombre en Editor-Stys.css y copiar sus estilos CSS personalizados allí.Luego guárdelo y cargalo en el directorio raíz del tema o el tema secundario.Ahora solo queda agregar el siguiente código a las funciones del archivo.php para que el tema use el nuevo archivo: function custom_editor_styles () {add_Editor_style (‘editor-style.css’);
}
add_action (‘init’, ‘custom_Editor_styles’);Después de eso, debería poder ver los efectos de los nuevos estilos personalizados directamente en el editor de WordPress.

Eso es todo. Ahora puedes agregar oficialmente estilos personalizados al editor de WordPress. Por supuesto, hay varias formas de usar esta función (y tenemos más ejemplos a continuación), así que no dude en experimentar. Para obtener más consejos, no olvide consultar nuestro artículo sobre cómo personalizar el editor de Wysiwyg WordPress. Aquí, también aprende a hacer que todo el contenido del editor de WordPress se parezca a su interfaz. Sin embargo, si ha encontrado lo anterior demasiado complicado, tiene suerte: también hay opciones de complementos para agregar estilos personalizados al editor. Por supuesto, continuaremos mirando esto. Las soluciones de complementos para opciones de formato personalizadas también tienen algunos complementos para agregar estilos personalizados. Uno de los más fáciles de usar son los estilos personalizados de TinyMCE. Básicamente, le ofrece una interfaz gráfica que le permite hacer lo mismo que hice manualmente arriba. Aquí le mostramos cómo usarlo. Instale el complemento como primer paso, debemos instalar el complemento en nuestro sitio. Esto sucede que para cualquier otro complemento. Simplemente vaya a los complementos de acceso> Agregue nuevos y busque “estilos personalizados de TinyMce”.

El complemento que está buscando debe ser la primera opción disponible. Haga clic en Instalar ahora para descargarlo e instalar en su sitio. ¡No olvide activarlo cuando esté listo! Configure las hojas de estilo después, es hora de configurar el complemento. Puede hacer esto en configuración> estilos de tinymce personalizados. Como primer paso, debemos configurar dónde se ubicarán nuestras hojas de estilo. Podemos colocarlos en el archivo con tema o tema secundario, o en una carpeta personalizada. La última opción se recomienda no perder los archivos en una actualización del tema. Una vez que haya tomado la decisión y guarde la configuración, el complemento creará dos hojas llamadas editor-Style.css y editor-Style Shared.css. Aquí colocará los estilos personalizados para usar en su tema y en el editor de WordPress, que crearemos en el siguiente paso. Configure los estilos para crear estilos personalizados, primero debe hacer clic en agregar un nuevo estilo a la parte inferior de la pantalla. Esto le dará una serie de opciones para definir sus estilos personalizados. Es prácticamente lo mismo que hice por el código anteriormente, pero con un editor visual.
La mayoría de las opciones se explican por sí misma:
Título: el nombre bajo el cual aparecerá el estilo personalizado en el editor de WordPress.
Escriba: aquí puede elegir si desea crear un elemento en línea, bloque o selector.
Valor de tipo: qué valor usar para el elemento, como SPAN, DIV o algo más.

Clases CSS: clases asociadas con sus estilos personalizados.

Estilos CSS: estilo que se atribuye directamente al elemento (sin el uso de clases).

Atributos: los atributos HTML se aplicarán a los elementos seleccionados.

Exactamente como antes, se usa para deshabilitar etiquetas CSS similares. El envoltorio transforma el formato actual en un contenedor para elementos de bloque, como los DIV.
Eliminación: elimine el formato de los elementos seleccionados.
El complemento también ofrece explicaciones detalladas para cada configuración. Después de haber terminado, haga clic en Guardar todas las configuraciones en la parte inferior de la página. Después de eso, encontrará los nuevos estilos personalizados en el editor de WordPress como antes y estará listo para usarlos. Fácil de sacudir.
Otros complementos como se mencionó, hay más de un complemento para este tipo de funcionalidad. Aquí hay algunos candidatos para agregar estilos personalizados al editor de WordPress:
WP Edit: agrega opciones de formato adicionales al editor, como crear tablas. También permite a los usuarios crear botones y columnas. Aunque no puede crear sus propios estilos, el complemento le brinda opciones adicionales.
TinyMce Advanced: similar al complemento anterior. Viene con opciones para cambiar las fuentes, el tamaño de la fuente, los colores de fondo y más, pero no puede crear las suyas.
Solo estilos de tinymce personalizados: otra opción para agregar sus propios estilos personalizados al editor de WordPress.
Mire los botones de código cortos: si todo lo que necesita en términos de estilos personalizados son los botones, este es el complemento para usted. Cree botones dentro del editor y los personalice según lo desee.
Casos de uso posibles para estilos personalizados bien, ahora que sabemos cómo agregar estilos personalizados, echemos un vistazo rápido a lo que podemos usar.Aquí hay algunas ideas para el tipo de formato adicional que podría agregar al editor: las cajas de contenido, son buenas para promover productos, crear citas largas, mostrar exhortaciones prominentes, para cajas de advertencia y proporcionar marcos para su contenido.
Los botones-button pueden funcionar como sus propios impulsos, permiten a los usuarios descargar documentos de su sitio, moverlos a una página de tienda y más.
Destacando: ya le he mostrado cómo hacer esto arriba.Con la función de iluminación, puede acentuar los pasajes como en el papel.

Testimonios: si planea agregar testimonios a su sitio, ¿por qué no hacer que se destaquen con sus propios estilos personalizados?