¿Quieres agregar estilos personalizados en el editor visual de WordPress? Agregar estilos personalizados le permite aplicar formato rápidamente sin cambiar al editor de texto. En este artículo, le mostraremos cómo agregar estilos personalizados al editor visual de WordPress.
Nota: Este tutorial requiere conocimientos básicos de CSS.
Por qué y cuándo necesita estilos personalizados para el editor visual de WordPress
De forma predeterminada, el editor visual de WordPress viene con algunas opciones básicas de formato y estilo. Sin embargo, a veces es posible que necesite sus propios estilos personalizados para agregar botones CSS, bloques de contenido, lemas, etc.
Siempre puede cambiar de visual a editor de texto y agregar HTML y CSS personalizados. Pero si usa regularmente algunos estilos, sería mejor agregarlos al editor visual para que pueda reutilizarlos fácilmente.
Esto le permitirá ahorrar tiempo en alternar entre el editor de texto y visual. También le permitirá utilizar constantemente los mismos estilos en todo su sitio web.
Lo más importante es que puede modificar o actualizar estilos fácilmente sin tener que editar publicaciones en su sitio web.
Dicho esto, echemos un vistazo a cómo agregar estilos personalizados en el editor visual de WordPress.
Método 1: agregar estilos personalizados en el editor visual usando un complemento
Lo primero que debe hacer es instalar y activar el Estilos personalizados de TinyMCE enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, debe visitar Configuración »Estilos personalizados de TinyMCE página para configurar los ajustes del complemento.
El complemento le permite elegir la ubicación de los archivos de hoja de estilo. Puede usar las hojas de estilo de su tema o del tema hijo, o puede elegir una ubicación personalizada propia.
Después de eso, debe hacer clic en el botón ‘Guardar todas las configuraciones’ para almacenar sus cambios.
Ahora puede agregar sus estilos personalizados. Debe desplazarse un poco hacia abajo hasta la sección de estilo y hacer clic en el botón Agregar nuevo estilo.
Primero debe ingresar un título para el estilo. Este título se mostrará en el menú desplegable. A continuación, debe elegir si es un elemento en línea, de bloque o selector.
Después de eso, agregue una clase CSS y luego agregue sus reglas CSS como se muestra en la captura de pantalla a continuación.
Una vez que haya agregado un estilo CSS, simplemente haga clic en el botón ‘Guardar todas las configuraciones’ para almacenar sus cambios.
Ahora puede editar una publicación existente o crear una nueva. Notará un menú desplegable Formato en la segunda fila del editor visual de WordPress.
Simplemente seleccione un texto en el editor y luego seleccione su estilo personalizado en el menú desplegable Formatos para aplicarlo.
Ahora puede obtener una vista previa de su publicación para ver si sus estilos personalizados se aplican correctamente.
Método 2: agregar manualmente estilos personalizados al editor visual de WordPress
Este método requiere que agregue código manualmente a sus archivos de WordPress. Si es la primera vez que agrega código a WordPress, consulte nuestra guía sobre cómo agregar fragmentos de código de la web a WordPress.
Paso 1: agregue un menú desplegable de estilos personalizados en el Editor visual de WordPress
Primero, agregaremos un menú desplegable de Formatos en el editor visual de WordPress. Este menú desplegable nos permitirá seleccionar y aplicar nuestros estilos personalizados.
Debe agregar el siguiente código al archivo functions.php de su tema o un complemento específico del sitio.
function wpb_mce_buttons_2($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
Paso 2: agregue las opciones de selección al menú desplegable
Ahora deberá agregar las opciones al menú desplegable que acaba de crear. Luego podrá seleccionar y aplicar estas opciones desde el menú desplegable Formatos.
Por el bien de este tutorial, estamos agregando tres estilos personalizados para crear botones y bloques de contenido.
Deberá agregar el siguiente código al archivo functions.php de su tema o un complemento específico del sitio.
/*
* Callback function to filter the MCE settings
*/
function my_mce_before_init_insert_formats( $init_array ) {
// Define the style_formats array
$style_formats = array(
/*
* Each array child is a format with it's own settings
* Notice that each array has title, block, classes, and wrapper arguments
* Title is the label which will be visible in Formats menu
* Block defines whether it is a span, div, selector, or inline style
* Classes allows you to define CSS classes
* Wrapper whether or not to add a new block-level element around any selected elements
*/
array(
'title' => 'Content Block',
'block' => 'span',
'classes' => 'content-block',
'wrapper' => true,
),
array(
'title' => 'Blue Button',
'block' => 'span',
'classes' => 'blue-button',
'wrapper' => true,
),
array(
'title' => 'Red Button',
'block' => 'span',
'classes' => 'red-button',
'wrapper' => true,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
Ahora puede agregar una nueva publicación en WordPress y hacer clic en el menú desplegable Formatos en el editor visual. Notará que sus estilos personalizados ahora son visibles en formatos.
Sin embargo, seleccionarlos no hace ninguna diferencia en el editor de publicaciones en este momento.
Paso 3: agregue estilos CSS
Ahora, el paso final es agregar reglas de estilo CSS para sus estilos personalizados.
Deberá agregar este CSS en los archivos style.css y editor-style.css de su tema o tema hijo.
.content-block {
border:1px solid #eee;
padding:3px;
background:#ccc;
max-width:250px;
float:right;
text-align:center;
}
.content-block:after {
clear:both;
}
.blue-button {
background-color:#33bdef;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #057fd0;
display:inline-block;
cursor:pointer;
color:#ffffff;
padding:6px 24px;
text-decoration:none;
}
.red-button {
background-color:#bc3315;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #942911;
display:inline-block;
cursor:pointer;
color:#ffffff;
padding:6px 24px;
text-decoration:none;
}
La hoja de estilo del editor controla la apariencia de su contenido en el editor visual. Consulte la documentación de su tema para averiguar la ubicación de este archivo.
Si su tema no tiene un archivo de hoja de estilo del editor, siempre puede crear uno. Simplemente cree un nuevo archivo CSS y asígnele un nombre custom-editor-style.css.
Debe cargar este archivo en el directorio raíz de su tema y luego agregar este código en el archivo functions.php de su tema.
function my_theme_add_editor_styles() {
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );
Eso es todo. Ha agregado con éxito sus estilos personalizados en el editor visual de WordPress. Siéntase libre de jugar con el código agregando sus propios elementos y estilos.
Esperamos que este artículo le haya ayudado a aprender a agregar estilos personalizados al editor visual de WordPress. Es posible que también desee ver nuestra guía sobre cómo agregar estilos personalizados a los widgets de WordPress.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.