[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-estilos-personalizados-al-editor-visual-de-wordpress\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-estilos-personalizados-al-editor-visual-de-wordpress\/","headline":"C\u00f3mo agregar estilos personalizados al editor visual de WordPress","name":"C\u00f3mo agregar estilos personalizados al editor visual de WordPress","description":"\u00bfQuieres agregar estilos personalizados en el editor visual de WordPress? Agregar estilos personalizados le permite aplicar formato r\u00e1pidamente sin cambiar al editor de texto. En ... Leer m\u00e1s<\/a>","datePublished":"2021-06-23","dateModified":"2021-06-23","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-estilos-personalizados-al-editor-visual-de-WordPress.jpg","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-estilos-personalizados-al-editor-visual-de-WordPress.jpg","height":340,"width":520},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-estilos-personalizados-al-editor-visual-de-wordpress\/","about":["Tutoriales Wordpress"],"wordCount":1225,"articleBody":"\u00bfQuieres agregar estilos personalizados en el editor visual de WordPress? Agregar estilos personalizados le permite aplicar formato r\u00e1pidamente sin cambiar al editor de texto. En este art\u00edculo, le mostraremos c\u00f3mo agregar estilos personalizados al editor visual de WordPress.Nota: Este tutorial requiere conocimientos b\u00e1sicos de CSS.Por qu\u00e9 y cu\u00e1ndo necesita estilos personalizados para el editor visual de WordPressDe forma predeterminada, el editor visual de WordPress viene con algunas opciones b\u00e1sicas 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\u00eda mejor agregarlos al editor visual para que pueda reutilizarlos f\u00e1cilmente. Esto le permitir\u00e1 ahorrar tiempo en alternar entre el editor de texto y visual. Tambi\u00e9n le permitir\u00e1 utilizar constantemente los mismos estilos en todo su sitio web. Lo m\u00e1s importante es que puede modificar o actualizar estilos f\u00e1cilmente sin tener que editar publicaciones en su sitio web. Dicho esto, echemos un vistazo a c\u00f3mo agregar estilos personalizados en el editor visual de WordPress. M\u00e9todo 1: agregar estilos personalizados en el editor visual usando un complementoLo primero que debe hacer es instalar y activar el Estilos personalizados de TinyMCE enchufar. Para obtener m\u00e1s detalles, consulte nuestra gu\u00eda paso a paso sobre c\u00f3mo instalar un complemento de WordPress.Tras la activaci\u00f3n, debe visitar Configuraci\u00f3n \u00bbEstilos personalizados de TinyMCE p\u00e1gina para configurar los ajustes del complemento. El complemento le permite elegir la ubicaci\u00f3n 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\u00f3n personalizada propia. Despu\u00e9s de eso, debe hacer clic en el bot\u00f3n ‘Guardar todas las configuraciones’ para almacenar sus cambios.Ahora puede agregar sus estilos personalizados. Debe desplazarse un poco hacia abajo hasta la secci\u00f3n de estilo y hacer clic en el bot\u00f3n Agregar nuevo estilo.Primero debe ingresar un t\u00edtulo para el estilo. Este t\u00edtulo se mostrar\u00e1 en el men\u00fa desplegable. A continuaci\u00f3n, debe elegir si es un elemento en l\u00ednea, de bloque o selector. Despu\u00e9s de eso, agregue una clase CSS y luego agregue sus reglas CSS como se muestra en la captura de pantalla a continuaci\u00f3n.Una vez que haya agregado un estilo CSS, simplemente haga clic en el bot\u00f3n ‘Guardar todas las configuraciones’ para almacenar sus cambios.Ahora puede editar una publicaci\u00f3n existente o crear una nueva. Notar\u00e1 un men\u00fa 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\u00fa desplegable Formatos para aplicarlo. Ahora puede obtener una vista previa de su publicaci\u00f3n para ver si sus estilos personalizados se aplican correctamente. M\u00e9todo 2: agregar manualmente estilos personalizados al editor visual de WordPressEste m\u00e9todo requiere que agregue c\u00f3digo manualmente a sus archivos de WordPress. Si es la primera vez que agrega c\u00f3digo a WordPress, consulte nuestra gu\u00eda sobre c\u00f3mo agregar fragmentos de c\u00f3digo de la web a WordPress. Paso 1: agregue un men\u00fa desplegable de estilos personalizados en el Editor visual de WordPressPrimero, agregaremos un men\u00fa desplegable de Formatos en el editor visual de WordPress. Este men\u00fa desplegable nos permitir\u00e1 seleccionar y aplicar nuestros estilos personalizados. Debe agregar el siguiente c\u00f3digo al archivo functions.php de su tema o un complemento espec\u00edfico del sitio. function wpb_mce_buttons_2($buttons) {\tarray_unshift($buttons, 'styleselect');\treturn $buttons;}add_filter('mce_buttons_2', 'wpb_mce_buttons_2');Paso 2: agregue las opciones de selecci\u00f3n al men\u00fa desplegable Ahora deber\u00e1 agregar las opciones al men\u00fa desplegable que acaba de crear. Luego podr\u00e1 seleccionar y aplicar estas opciones desde el men\u00fa desplegable Formatos. Por el bien de este tutorial, estamos agregando tres estilos personalizados para crear botones y bloques de contenido. Deber\u00e1 agregar el siguiente c\u00f3digo al archivo functions.php de su tema o un complemento espec\u00edfico del sitio. \/** Callback function to filter the MCE settings*\/function my_mce_before_init_insert_formats( $init_array ) { \/\/ Define the style_formats array\t$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*\/\t\tarray( \t\t\t'title' => 'Content Block', \t\t\t'block' => 'span', \t\t\t'classes' => 'content-block',\t\t\t'wrapper' => true,\t\t\t\t\t), \t\tarray( \t\t\t'title' => 'Blue Button', \t\t\t'block' => 'span', \t\t\t'classes' => 'blue-button',\t\t\t'wrapper' => true,\t\t),\t\tarray( \t\t\t'title' => 'Red Button', \t\t\t'block' => 'span', \t\t\t'classes' => 'red-button',\t\t\t'wrapper' => true,\t\t),\t); \t\/\/ Insert the array, JSON ENCODED, into 'style_formats'\t$init_array['style_formats'] = json_encode( $style_formats ); \t\treturn $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\u00f3n en WordPress y hacer clic en el men\u00fa desplegable Formatos en el editor visual. Notar\u00e1 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\u00e1 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 { \tbackground-color:#33bdef;\t-moz-border-radius:6px;\t-webkit-border-radius:6px;\tborder-radius:6px;\tborder:1px solid #057fd0;\tdisplay:inline-block;\tcursor:pointer;\tcolor:#ffffff;\tpadding:6px 24px;\ttext-decoration:none;}.red-button {\tbackground-color:#bc3315;\t-moz-border-radius:6px;\t-webkit-border-radius:6px;\tborder-radius:6px;\tborder:1px solid #942911;\tdisplay:inline-block;\tcursor:pointer;\tcolor:#ffffff;\tpadding:6px 24px;\ttext-decoration:none;}La hoja de estilo del editor controla la apariencia de su contenido en el editor visual. Consulte la documentaci\u00f3n de su tema para averiguar la ubicaci\u00f3n 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\u00edgnele un nombre custom-editor-style.css. Debe cargar este archivo en el directorio ra\u00edz de su tema y luego agregar este c\u00f3digo 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 \u00e9xito sus estilos personalizados en el editor visual de WordPress. Si\u00e9ntase libre de jugar con el c\u00f3digo agregando sus propios elementos y estilos.Esperamos que este art\u00edculo le haya ayudado a aprender a agregar estilos personalizados al editor visual de WordPress. Es posible que tambi\u00e9n desee ver nuestra gu\u00eda sobre c\u00f3mo agregar estilos personalizados a los widgets de WordPress. Si le gust\u00f3 este art\u00edculo, suscr\u00edbase a nuestro Canal de Youtube para tutoriales en video de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook. 4.2 \/ 5 ( 335 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo agregar estilos personalizados al editor visual de WordPress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-estilos-personalizados-al-editor-visual-de-wordpress\/#breadcrumbitem"}]}]