Cómo agregar estilos personalizados al editor visual de WordPress

Eche un vistazo al editor visual de WordPress. Hay algunas opciones estándar para formatear y estilizar su contenido, pero no demasiado en términos de personalización para que sus publicaciones y páginas se vean un poco elegantes.

Ahora, es posible que sepa que tiene la capacidad de saltar hacia adelante y hacia atrás entre el texto de WordPress y los editores visuales para lanzar algunos CSS para crear cosas como botones y bloques de texto, pero esto es un dolor y si no tiene mucha experiencia en la edición El código del 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 lo necesite? Sí, es mucho más fácil, por lo que queremos presentar cómo hacer esto aquí. Tenga en cuenta que aunque intentamos simplificar este proceso, es posible que tenga un poco de conocimiento de CSS si desea descubrir todas las ventajas 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 al agregar esta primera opción requiere que sepa poco sobre cómo incorporar y modificar CSS, pero daré un pequeño paseo para ayudarlo a aprender los conceptos básicos para que pueda usar este conocimiento en el futuro. Esta es una opción agradable si no desea pesar su sitio con un complemento. El propósito de esto es agregar un nuevo menú de caída que incluye estilos personalizados en su editor visual de WordPress, que le brinda la oportunidad de seleccionar elementos en su editor y luego aplicar estilos personalizados. Si desarrolla un nuevo tema, localice el archivo Functions.php y coloque el código a continuación en ese archivo o si trabaja con un tema ya construido, pegue este código a las funciones.php de un tema infantil.
Function myprefix_mce_buttons_1 ($ buttons) {array_unshift ($ botones, ‘styleselect’);devolver $ 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 “formado” en el editor.¿Observe cómo nos conectamos a “MCE_BUTTONS_1?Esto coloca el botón de menú Primero de todo el editor de MCE.También puede usar el filtro “MCE_BUTTONS_2” para colocarlo en segundo lugar o “MCE_BUTTONS_3” para colocarlo tercero.Entonces, ahora que ha activado el elemento del menú, es hora de agregar los estilos personalizados para usar en sus publicaciones. Tome el código enumerado a continuación y péguelo al archivo Function.php que agregará 2 nuevos estilos al Drop -Down Menú – “botón temático” 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 form. with Es su propia configuración: agregue tantos como desee Array (‘Title’ => __ (‘Botón de tema’, ‘Text -Domain’), // Título para el desplegable ‘Selector => A’, // El objetivo del elemento en Editor ‘ Class ‘=>’ Theme-Button ‘// Nombre de clase utilizado para CSS), Array (‘ Title ‘=> __ (‘ destacado ‘,’ Text-Domain ‘), // Título para desplegable’ Inline ‘=>’ Span ‘, // envuelve un tramo alrededor del contenido seleccionado’ clase ‘=>’ text-highlight ‘// uso de nombre de clase 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ú de caída, puede agregar / eliminar elementos de la matriz, etc. Puede cambiar casi cualquiera de este código para revelar sus propios estilos de formato personalizados, asegúrese de haber verificado el Codex de WordPress para obtener una explicación más profunda de los parámetros aceptados y los valores devueltos.
Ahora que tiene nuevos estilos, puede resaltar el contenido en su editor y puede aplicar estilos. Observe, ¿cómo tiene el “botón del tema” de formato un parámetro de selección? Esto significa que el estilo solo se puede aplicar al selector específico (en este caso, la etiqueta “A” o “Enlace”). El segundo formato que agregué “resaltar” no tiene un parámetro selector, sino más bien un parámetro “en línea” que le dice que aplique el estilo de cualquier texto que resalte en el editor y lo envuelva en un intervalo con su nombre de clase único. Puede ver un ejemplo de nuestro tema total de WordPress sobre cómo usamos formatos, para que los usuarios puedan aplicar fácilmente un aspecto de lista de verificación de cualquier balas en el editor. Por lo tanto, ahora puede usar formatos personalizados, pero no se verán diferentes hasta que haya agregado CSS agregado. Custom para su sitio para estilizarlos. Debe localizar la hoja de estilo para su tema (si construye el suyo) o el tema infantil y pegar el siguiente código CSS en el archivo.

.Theme-Button {Display: Inline-Block; Relleno: 10 15px; Color: #fff; Antecedentes: #1796C6; Decoración de texto: ninguna; } .Theme-button: hover {text-decoration: none; Opacidad: 0.8; } .Text-Highlight {fondo: #ffff00; } Ahora, esto agregará el estilo de sus nuevos formatos frontales para que, cuando se aplique, pueda verlos en vivo. ¡Hurra! ¿Pero no sería bueno ver los estilos en el editor en sí cuando se aplican? Para hacer esto, deberá usar la función “editor de styleheet” en WordPress. Si crea su propio tema, entonces querrá crear un nuevo archivo CSS en su tema llamado “Editor-Style.css” (puede llamarlo de todos modos, solo asegúrese de editar el fragmento a continuación) con el CSS personalizado agregado para sus formatos y luego agregue la función a continuación para cargarla en la parte posterior. } add_action (‘init’, ‘myprefix_theme_add_editor_styles’); Si trabaja con el tema de otra persona, deberá agregar esto a su hijo, asegúrese de darle un nombre único, para que no entre en conflicto con el tema principal o si el padre ya tiene un archivo CSS para el editor usted. Puede copiar y pegar en el tema de su hijo (sin agregar el código PHP anterior), luego agregar su nuevo CSS, porque WordPress verificará el tema del niño primero antes de cargar el archivo CSS del tema principal y si se encuentra, cargue del niño del niño. tema.

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 resolverlo, hay buenas noticias. Hay un complemento que le permite completar exactamente lo que acabo de hacer, sin tener que atornillar el código.
Vaya a Configuración> Prof. Tinymce Styles en el lado izquierdo del tablero de WordPress. Aquí cambia la configuración de su complemento.
El complemento le permite elegir dónde están sus hojas de estilo o dónde desea colocarlas. Es recomendable crear un nuevo director personalizado. Seleccione la tercera opción y dale un nombre al director, luego pasa hacia abajo para hacer clic en Guardar la configuración antes de ir al siguiente paso.

Después de guardar la configuración, desplácese hacia abajo para seleccionar el botón Agregar nuevo estilo.

Aquí personaliza cómo quieres mostrar tus 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 aparecer en el menú Drop -down. Elija si desea un tipo de selector, línea o bloque. Siéntase libre de usar la captura de pantalla anterior para completar las clases y estilos CSS o crear el suyo dependiendo de lo que pretenda usar el menú desplegable. Después de haber terminado, 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 localice el menú Drop -down desde el editor de la izquierda. Muestra en la segunda línea. Después de hacer clic en el menú desplegable, 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 simplemente usar el texto que desea formatear, luego haga clic en su Opción y Voila! ¡Conclusión todo esto es por ahora! Siempre puede obtener más información sobre cómo usar nuevos estilos, consultando la página de Codex de WordPress dedicada a este tema.

Cuéntanos en la sección de comentarios si tiene preguntas sobre cómo agregar estilos personalizados al editor visual de WordPress. ¡Y no dude en compartir los estilos inusuales que creó para que su sitio se vea un poco más hermoso!