Share
Al ser desarrolladores, estamos acostumbrados a mirar líneas y líneas de código en fuente monoespaciada y al mismo tiempo "ver" cómo se vería la página en un navegador. Dicho esto, es fácil para nosotros pasar por alto el hecho de que hay muchos no desarrolladores por ahí..
El estilo del editor es una característica ingeniosa que le permite combinar la apariencia del contenido de la publicación dentro del editor TinyMCE con lo que se muestra a los visitantes del sitio. Es extremadamente fácil de usar, pero si su tema tiene opciones de fuente y especialmente si usa Fuentes de Google, el estilo del editor necesita un poco más de trabajo para estilizar el texto según los valores de las opciones de fuente.
Además de cargar editor-style.css utilizando la add_editor_style () Función, debemos hacer las siguientes cosas:
Antes de hacer nada de eso, ya debe tener una forma para que el administrador del sitio seleccione las fuentes que les gustaría usar. Puedes ir con la API de configuración o, si eres uno de los mejores chicos, el Personalizador de temas, pero explicar de qué manera trabajar con cualquiera de ellos no es de lo que trata este tutorial..
Para iniciar este proyecto, usaré el tema de los guiones bajos y la plantilla de personalización del tema. Eso me dará un tema de inicio y una manera de agregar rápidamente opciones al Personalizador de temas, pero la forma en que maneje esta parte depende completamente de usted..
Por lo tanto, descargué una nueva copia del tema de los guiones bajos, le agregué la plantilla para personalizar el tema y ahora estoy listo para agregar algunas opciones al personalizador de la aplicación usando la placa de identificación del personalizador. Esto va directo al tema de funciones.php expediente:
Accentsconagua
/ ** * Arreglo de opciones para la plantilla de personalización de tema * * @link https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate * @return array Opciones de tema * / add_filter ('thsp_cbp_options_array', 'thsp_theme_options_array', 1 ); function thsp_theme_options_array () // Uso de la función auxiliar Customiser Boilerplate para obtener la capacidad predeterminada requerida $ thsp_cbp_capability = thsp_cbp_capability (); $ options = array (// ID de sección 'thsp_typography_section' => array ('existing_section' => false, 'args' => array ('title' => __ ('Typography', 'cazuela'), 'description' = > __ ('Seleccionar fuentes', 'cazuela'), 'prioridad' => 20), 'campos' => array ('body_font' => array ('setting_args' => array ('default' => 'open- sans ',' type '=>' option ',' capacity '=> $ thsp_cbp_capability,' transport '=>' refresh ',), // Fin de configuración args' control_args '=> array (' label '=> __ ( 'Body font', 'cazuela'), 'type' => 'select', // Select control 'choices' => array ('arial' => array ('label' => 'Arial'), 'open- sans '=> array (' label '=>' Open Sans ',' google_font '=>' Open + Sans: 400italic, 700italic, 400,700 '),' pt-sans '=> array (' label '=>' PT Sans ',' google_font '=>' PT + Sans: 400,700,400italic, 700italic ')),' prioridad '=> 1) // Fin control args),' heading_font '=> array (' setting_args '=> array (' predeterminado '=>' open-sans ',' type '=>' option ',' capacity '=> $ thsp_cbp_capability,' transport '=>' refresh ',), // Fin de la configuración args 'control_args' => array ('label' => __ ('Heading font', 'cazuela'), 'type' => 'select', // Select control 'choices' => array (' georgia '=> array (' label '=>' Georgia '),' open-sans '=> array (' label '=>' Open Sans ',' google_font '=>' Open + Sans: 400italic, 700italic, 400,700 '),' droid-serif '=> array (' label '=>' Droid Serif ',' google_font '=>' Droid + Serif: 700 ')),' prioridad '=> 2) // Fin del control args) ,) // campos finales)); devuelve $ opciones; Como puede ver al ver esa matriz, estoy agregando una opción de fuente de cuerpo y una opción de fuente de encabezado al Personalizador de temas, con tres opciones posibles para cada una: Arial, Open Sans y PT Sans para la fuente del cuerpo, Georgia, Open Sans, y Droid Serif para la fuente del encabezado.
Para las fuentes de Google, hay la google_font Valor que usaré más adelante para cargar las hojas de estilo de Google Fonts..
Si vamos a poder cambiar las fuentes en el editor TinyMCE dinámicamente, según lo que seleccionen los usuarios en el Personalizador de temas, debemos pasar información al objeto TinyMCE.
Por ejemplo, si Open Sans está seleccionado como la fuente del cuerpo, agregando un 'cuerpo abierto sans'clase al editor hará el truco. Esto se puede hacer usando el tiny_mce_before_init filtro de gancho y cambiando el body_class valor en la matriz de configuración TinyMCE.
Compruebe los comentarios en línea:
/ ** * Pasa las clases de tipografía personalizadas al editor de Tiny MCE * * @param $ thsp_mceInit array * @uses thsp_cbp_get_options_values () función auxiliar definida en /customizer-boilerplate/helpers.php * @return $ thsp_mceInit array * / function thsp_pic.p.p.P.P. ) // Use la función auxiliar Personalizador de temas de Boilerplate para recuperar las opciones de temas $ thsp_theme_options = thsp_cbp_get_options_values (); / ** * La matriz $ thsp_mceInit almacena sus clases de cuerpo como una cadena * * El carácter de espacio en blanco se usa como separador entre clases, * por lo que al agregar clases deben tener un espacio delante de ellas * / $ thsp_mceInit ['body_class']. = 'body - '. $ thsp_theme_options ['body_font']; // Clase de fuente del cuerpo $ thsp_mceInit ['body_class']. = 'Heading-'. $ thsp_theme_options ['heading_font']; // Heading font class return $ thsp_mceInit; add_filter ('tiny_mce_before_init', 'thsp_tiny_mce_classes'); Eso agregará clases personalizadas al editor TinyMCE, como se puede ver en esta captura de pantalla:
Clases personalizadas (body-open-sans y heading-droid-serif) en el editor WordPress TinyMCE Si desea ver el conjunto completo de configuraciones de TinyMCE, consulte este Gist.
Una vez más, estoy usando el Theme Customizer Boilerplate y algunas de sus funciones para acelerar las cosas, cómo manejar las opciones de tus temas depende de ti.
Algunas de las fuentes en el conjunto de opciones que pasé al Theme Customizer Boilerplate tenían la google_font valor definido Esto ayuda a determinar si es necesario cargar la hoja de estilo Google Fonts y cuál es su URL. Usando esa información, ahora puede enganchar en el mce_css filtre y agregue hojas de estilo personalizadas a la ventana del editor TinyMCE:
$ mce_css es una lista separada por comas de URI de hojas de estilo, por lo tanto, si la hoja de estilos de Google Fonts que está cargando tiene una coma, debe usar una entidad HTML en su lugar. Dado que agregué una opción para las fuentes del cuerpo y del encabezado, tendré que verificar ambas para ver si requieren la hoja de estilo Google Fonts:
/ ** * Cargar Google Fonts para usar en Tiny MCE * * @param $ mce_css string * @uses thsp_cbp_get_options_values () definido en /customizer-boilerplate/helpers.php * @uses thsp_cbp_get_fields () definido en / customizer-boilerplate. php * @return $ mce_css string * / function thsp_mce_css ($ mce_css) $ theme_options = thsp_cbp_get_options_values (); $ theme_options_fields = thsp_cbp_get_fields (); // Usando Theme Customizer Boilerplate para recuperar los valores de las opciones de fuente del tema $ body_font_value = $ theme_options ['body_font']; $ heading_font_value = $ theme_options ['heading_font']; // Uso de la plantilla de personalización del tema para recuperar todas las opciones de tema $ body_font_options = $ theme_options_fields ['thsp_typography_section'] ['fields'] ['body_font'] ['control_args'] ['choices']; $ heading_font_options = $ theme_options_fields ['thsp_typography_section'] ['fields'] ['heading_font'] ['control_args'] ['choices']; // Comprobar protocolo $ protocol = is_ssl ()? 'https': 'http'; // Compruebe si es una fuente de Google if (isset ($ body_font_options [$ body_font_value] ['google_font'])) // Las comas deben estar codificadas en HTML $ body_font_string = str_replace (',', ',', $ body_font_options [$ body_font_value] ['google_font']); $ mce_css. = ','. $ protocolo. ': //fonts.googleapis.com/css? family ='. $ body_font_string; // Comprueba si es una fuente de Google if (isset ($ heading_font_options [$ heading_font_value] ['google_font'])) // Las comas deben estar codificadas en HTML $ heading_font_string = str_replace (',', ',', $ heading_font_options [ $ heading_font_value] ['google_font']); $ mce_css. = ','. $ protocolo. ': //fonts.googleapis.com/css? family ='. $ heading_font_string; devuelve $ mce_css; add_filter ('mce_css', 'thsp_mce_css'); Después de los últimos dos pasos, esta es la parte fácil. El editor de TinyMCE ahora tiene clases personalizadas basadas en opciones de fuentes activas, y las hojas de estilo de Google Fonts se cargan, cuando es necesario. Todo lo que queda por hacer es agregar algunos Familia tipográfica estilos para editor-style.css:
/ * Fuentes del cuerpo * / .body-arial font-family: Arial, sans-serif; .body-open-sans font-family: "Open Sans", sans-serif; .body-pt-sans font-family: "PT Sans", sans-serif; / * Encabezados * / .heading-georgia h1, .heading-georgia h2, .heading-georgia h3, .heading-georgia h4, .heading-georgia h5, .heading-georgia h6 Familia de fuentes: Georgia, serif; .heading-open-sans h1, .heading-open-sans h2, .heading-open-sans h3, .heading-open-sans h4, .heading-open-sans h5, .heading-open-sans h6 font -familia: "Open Sans", sans-serif; .heading-droid-serif h1, .heading-droid-serif h2, .heading-droid-serif h3, .heading-droid-serif h4, .heading-droid-serif h5, .heading-droid-serif h6 font -familia: "Droid Serif", serif;
Ahora, este método podría no tener mucho sentido si su tema les permite a los usuarios seleccionar entre "más de 600 fuentes de Google". Sin embargo, sabiendo que WordPress está construido sobre la Decisiones, no opciones principio y ofrecer más de 600 opciones para solo una de las opciones tiene aún menos sentido.
Si prefiere mantener sus opciones de tema sanas tomando algunas decisiones, espero que aprecie este método de agregar fuentes de Google al editor TinyMCE. Sus comentarios son bienvenidos..
