¿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 trabajo de CSS.
Por qué y cuándo necesita estilos personalizados para WordPress Visual Editor
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 estilos personalizados propios para agregar botones CSS, bloques de contenido, eslóganes, etc.
Siempre puede cambiar del editor visual al de texto y agregar HTML y CSS personalizados. Pero si usa algunos estilos regularmente, sería mejor agregarlos al editor visual para que pueda reutilizarlos fácilmente.
Esto le ahorrará el tiempo que dedica a alternar entre el texto y el editor 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.
Habiendo dicho eso, echemos un vistazo a cómo agregar estilos personalizados en el editor visual de WordPress.
Método 1: agregue estilos personalizados en el editor visual usando el 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 Ajustes » Estilos personalizados de TinyMCE página para configurar los ajustes del complemento.
El complemento le permite elegir la ubicación de los archivos de hojas de estilo. Puede usar las hojas de estilo de su tema o tema secundario, 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 se trata de un elemento en línea, de bloque o de 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. Verá 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 que 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 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, agregaremos 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 están visibles en formatos.
Sin embargo, seleccionarlos no hace ninguna diferencia en el editor de publicaciones en este momento.
Paso 3: Agregar estilos CSS
Ahora, el paso final es agregar reglas de estilo CSS para sus estilos personalizados.
Deberá agregar este CSS en su tema o en los archivos style.css y editor-style.css de su tema secundario.
.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 de 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 cómo agregar estilos personalizados al editor visual de WordPress. También puede consultar nuestra guía sobre cómo agregar estilos personalizados a los widgets de WordPress.
.