Tema UCAB

UCAB

Documentación oficial para el tema principal UCAB

Repositorio en GitHub uwucab/ucab-theme

El Tema UCAB para WordPress constituye un desarrollo personalizado para la Universidad Católica Andrés Bello basado en el tema principal Divi, el cual brinda numerosas funcionalidades de cara al usuario final que estará manteniendo constantemente su sitio, aunado a una extensa documentación capaz de proveer los conocimientos necesarios para poder dar inicio en el uso de dicha solución.

La documentación del Tema UCAB se puntualiza a continuación para facilitar la lectura de la misma:

Tabla de contenidos

Requerimientos

Es posible utilizar XAMPP en caso de querer generar rápidamente un ambiente de desarrollo que incluya Apache + PHP + MySQL. (Descargar)

Para el archivo de configuración php.ini, se recomienda el uso de las siguientes variables con sus respectivos valores:

post_max_size=20M
upload_max_filesize=20M
max_input_time=120
max_input_vars=1000
memory_limit=128M

Esta configuración es solamente válida para ambientes de desarrollo.

Instalación

Para poder realizar la instalación del Tema UCAB en la instancia WordPress requerida, se debe de contar inicialmente con los siguientes archivos:

El equipo de la Unidad Web (UCAB) estará encargado de proveer siempre la última versión de los archivos antes mencionados previo acuerdo con el(los) interesado(s).

Los enlaces provistos previamente hacen referencia al último lanzamiento oficial del Tema UCAB y plugin Módulos personalizados UCAB a través de GitHub. Solo aquellos con acceso a los repositorios, podrán realizar la descarga directa.

Inicialmente, se requiere definir el modo debug en el que funcionará el plugin Módulos personalizados UCAB a través del archivo de configuración de WordPress wp-config.php. Para ello, solo debe de añadirse la definición define('UCAB_DEBUG', false), la cual se recomienda hacer de forma consecutiva a la definición del modo debug propio de WordPress, siendo el resultado final similar al siguiente:

...

/**
 * For developers: WordPress debugging mode.
 *
 * Change this to true to enable the display of notices during development.
 * It is strongly recommended that plugin and theme developers use WP_DEBUG
 * in their development environments.
 *
 * For information on other constants that can be used for debugging,
 * visit the Codex.
 *
 * @link https://codex.wordpress.org/Debugging_in_WordPress
 */
define('WP_DEBUG', false);
define('UCAB_DEBUG', false);

...

Al utilizar define('UCAB_DEBUG', false), el plugin Módulos personalizados UCAB hará uso del bundle previamente generado en el último lanzamiento, permitiendo cargar correctamente los módulos personalizados a través del Constructor Divi (front end).

Se hará uso única y exclusivamente de la definición define('UCAB_DEBUG', true) cuando se requiera realizar un desarrollo local sobre los módulos personalizados pertenecientes al plugin. Para mayor información, dirigirse al apartado Desarrollo de módulos personalizados.

Posteriormente, se procederá a instalar el Tema UCAB por medio de su archivo comprimido (ZIP) como se procedería con cualquier otro tema desde el Administrador de WordPress, específicamente en la sección Apariencia > Temas.

Asimismo, el plugin Módulos personalizados UCAB sería instalado igualmente desde el Administrador de WordPress, pero a través de la respectiva sección Plugins.

Posteriormente, se debe de emplear la configuración inicial contemplada para el Personalizador de temas en WordPress aplicando los cambios que sean requeridos según las necesidades del sitio a ser configurado.

En última instancia, se recomienda realizar la configuración de las opciones principales del tema desde el Administrador de WordPress, específicamente en el apartado Divi > Opciones del tema.

El Tema UCAB permite realizar una configuración rápida de las opciones antes mencionadas por medio de un archivo en formato JSON, el cual contiene todas las definiciones comunes requeridas.

A continuación, se presenta la estructura JSON que debe de contemplar el archivo de configuración para las opciones principales del tema:

{
  "context": "epanel",
  "data": {
    "divi_logo": "",
    "divi_fixed_nav": "on",
    "divi_gallery_layout_enable": "false",
    "divi_color_palette": "#ffc526|#40b4e5|#047732|#f5821f|#00a79d|#0071bb|#50237f|#c4151c",
    "divi_grab_image": "false",
    "divi_blog_style": "false",
    "divi_sidebar": "et_left_sidebar",
    "divi_shop_page_sidebar": "et_left_sidebar",
    "divi_show_facebook_icon": "false",
    "divi_show_twitter_icon": "false",
    "divi_show_google_icon": "false",
    "divi_show_rss_icon": "false",
    "divi_facebook_url": "#",
    "divi_twitter_url": "#",
    "divi_google_url": "#",
    "divi_rss_url": "",
    "divi_woocommerce_archive_num_posts": 9,
    "divi_catnum_posts": 6,
    "divi_archivenum_posts": 5,
    "divi_searchnum_posts": 5,
    "divi_tagnum_posts": 5,
    "divi_date_format": "M j, Y",
    "divi_use_excerpt": "false",
    "divi_responsive_shortcodes": "on",
    "divi_gf_enable_all_character_sets": "on",
    "divi_back_to_top": "on",
    "divi_smooth_scroll": "on",
    "divi_disable_translations": "false",
    "divi_minify_combine_scripts": "on",
    "divi_minify_combine_styles": "on",
    "divi_custom_css": "",
    "divi_enable_dropdowns": "on",
    "divi_home_link": "on",
    "divi_sort_pages": "post_title",
    "divi_order_page": "asc",
    "divi_tiers_shown_pages": 3,
    "divi_enable_dropdowns_categories": "on",
    "divi_categories_empty": "on",
    "divi_tiers_shown_categories": 3,
    "divi_sort_cat": "name",
    "divi_order_cat": "asc",
    "divi_disable_toptier": "false",
    "divi_scroll_to_anchor_fix": "false",
    "divi_postinfo2": ["date", "categories"],
    "divi_show_postcomments": "on",
    "divi_thumbnails": "on",
    "divi_page_thumbnails": "false",
    "divi_show_pagescomments": "false",
    "divi_postinfo1": ["date", "categories"],
    "divi_thumbnails_index": "on",
    "divi_seo_home_title": "false",
    "divi_seo_home_description": "false",
    "divi_seo_home_keywords": "false",
    "divi_seo_home_canonical": "false",
    "divi_seo_home_titletext": "",
    "divi_seo_home_descriptiontext": "",
    "divi_seo_home_keywordstext": "",
    "divi_seo_home_type": "BlogName | Blog description",
    "divi_seo_home_separate": " | ",
    "divi_seo_single_title": "false",
    "divi_seo_single_description": "false",
    "divi_seo_single_keywords": "false",
    "divi_seo_single_canonical": "false",
    "divi_seo_single_field_title": "seo_title",
    "divi_seo_single_field_description": "seo_description",
    "divi_seo_single_field_keywords": "seo_keywords",
    "divi_seo_single_type": "Post title | BlogName",
    "divi_seo_single_separate": " | ",
    "divi_seo_index_canonical": "false",
    "divi_seo_index_description": "false",
    "divi_seo_index_type": "Category name | BlogName",
    "divi_seo_index_separate": " | ",
    "divi_integrate_header_enable": "on",
    "divi_integrate_body_enable": "on",
    "divi_integrate_singletop_enable": "on",
    "divi_integrate_singlebottom_enable": "on",
    "divi_integration_head": "",
    "divi_integration_body": "",
    "divi_integration_single_top": "",
    "divi_integration_single_bottom": "",
    "divi_468_enable": "false",
    "divi_468_image": "",
    "divi_468_url": "",
    "divi_468_adsense": "",
    "divi_show_instagram_icon": "false",
    "divi_instagram_url": "#",
    "divi_enable_responsive_images": "on"
  },
  "defaults": "",
  "images": []
}

Estas opciones deben de ser copiadas y almacenadas en un archivo en formato JSON para luego poder ser importadas en el sitio específico. Para importar el archivo de configuración, se debe de presionar el botón denominado Importar y exportar, ubicado en la parte superior derecha del panel de configuración.

Seguidamente, aparecerá una pequeña ventana modal que nos ofrecerá la opción de Exportar o Importar la configuración. Al seleccionar el apartado Importar, se podrá apreciar un control de carga de archivos a través del cual se realizará la carga del archivo de configuración previamente almacenado.

Al realizar la carga y comenzar la subida del archivo, se deberá de esperar un tiempo prudencial hasta que la configuración sea aceptada y el apartado Opciones del tema recargue automáticamente.

Al ser aceptada la configuración principal del tema, se recomienda encarecidamente verificar que las opciones denominadas Generación de archivos CSS estáticos y Habilitar editor clásico pertenecientes al apartado Divi > Opciones del tema > Constructor > Avanzado, se encuentren activas.

Es importante tomar en consideración que, la configuración principal del tema no incluye datos sensibles como el Nombre de usuario y la Clave API, por lo que no se podrán recibir automáticamente las actualizaciones que posea el tema padre Divi.

Estructura del tema

La estructura del tema se compone de cinco directorios principales, siendo éstos:

Adicionalmente a los directorios antes descritos, se encuentran los archivos base requeridos por WordPress para la correcta construcción del tema, al igual que los archivos package.json y package-lock.json para poder realizar la instalación de las dependencias NPM requeridas por el tema.

Estilos SASS/CSS

En vista de las extensas personalizaciones que posee el Tema UCAB a nivel de estilos, y con el fin de poder mantener con mayor facilidad las mismas, se empleó el uso de SASS como preprocesador CSS para la generación de tres archivos principales, siendo éstos:

Estos tres archivos son los únicos que se ven afectados directamente al realizar el procesado de los archivos SASS.

Estructura SASS

Todos los archivos SASS utilizados por el tema se encuentran en el directorio assets/styles/sass y se organizan de la siguiente forma:

Es importante tomar en consideración que, todos los enlaces planteados a lo largo de los archivos SASS son relativos a la ubicación en la que estarán los archivos CSS procesados.

Procesamiento de archivos SASS

Para poder llevar a cabo el procesamiento de los archivos SASS a fin de generar los archivos CSS empleados por el Tema UCAB, se requiere utilizar el manejador de paquetes NPM, el cual viene por defecto al instalar Node.js.

Por medio de los archivos package.json y package-lock.json, NPM identifica cuáles son los paquetes requeridos por el Tema UCAB, los cuales deben de ser instalados ejecutando en primera instancia:

$ npm install

Al concluir la instalación de los paquetes de forma satisfactoria, se podrá hacer uso de los comandos de consola contemplados a través de NPM para el Tema UCAB, los cuales son:

Consideraciones adicionales (SASS/CSS)

El Tema UCAB se desarrolló con el fin de poder ser replicado en numerosas instancias WordPress, las cuales en muchas ocasiones, suelen ser configuradas como redes multisitio para facilitar la gestión de las mismas.

Las redes multisitio en WordPress ofrecen la capacidad de poder compartir temas y plugins entre los distintos sitios que conforman una red. No obstante, esto implica que, toda modificación que sea realizada afectará al conjunto de sitios que empleen un recurso específico.

Al ser empleada la configuración de redes multisito en WordPress, siempre debe de tomarse en consideración que, al hacerse cualquier cambio en los archivos SASS del Tema UCAB y procesar éstos para generar los respectivos archivos CSS, se estará afectando por igual a todos los sitios de la red que empleen el tema.

Un caso común de esta situación se presenta al momento de editar las variables $main-color y $accent-color del archivo assets/styles/sass/_palette.scss para poder ajustar los colores requeridos específicamente por un sitio. Al realizar el cambio en las variables, se afectaría directamente el estilo principal del Tema UCAB.

Para subsanar esta problemática, solo deben de personalizarse los campos Color principal y Color de acento a través del Personalizador de temas en WordPress para el sitio que requiera un conjunto de colores distintos a los estipulados inicialmente en el estilo principal del Tema UCAB.

Scripts JavaScript

El Tema UCAB incorpora numerosas funcionalidades contempladas a través de distintos scripts sustentados mediante la librería jQuery, la cual viene por defecto incluida en WordPress.

Asimismo, en el Tema UCAB se configuró el uso de NPM como manejador de paquetes JavaScript para poder incluir ciertas dependencias que faciliten la creación de nuevas funcionalidades y el mantenimiento de las existentes.

Las dependencias NPM empleadas actualmente son:

Las dependencias NPM empleadas por el Tema UCAB están enfocadas únicamente en mejorar el proceso de desarrollo local, por lo que no cumplen algún próposito particular en ambientes de producción.

Los comandos de consola contemplados a través de NPM para el Tema UCAB son los siguientes:

Estructura JavaScript

Todos los archivos JavaScript utilizados por el tema se encuentran en el directorio assets/scripts y se organizan de la siguiente forma:

Es importante acotar que, actualmente, el directorio ucab contempla los scripts de mayor relevancia para el funcionamiento del Tema UCAB, siendo estos los siguientes:

Módulos personalizados UCAB

El plugin Módulos personalizados UCAB engloba todos los componentes funcionales que han sido desarrollados específicamente para suplir algún requerimiento o necesidad a nivel de contenido y de estructura para los múltiples sitios que conforman el Mundo UCAB.

El plugin Módulos personalizados UCAB existe como una solución independiente al Tema UCAB debido a los lineamientos estipulados por Elegant Themes en su documentación para desarrolladores. Para la creación de un módulo personalizado, se cuenta con un scaffolding presentado en forma de plugin el cual posee toda la estructura requerida para poder ser llevado a cabo un desarrollo local y posteriormente, generar el bundle necesario para su lanzamiento a producción.

Es importante tomar en consideración que este scaffolding permite el correcto funcionamiento de los módulos personalizados, ya que éstos se componen de dos grandes partes, una que responde al Administrador de WordPress (back end), y otra que responde al Constructor Divi (front end). Por tanto, es indispensable poseer conocimientos en los lenguajes PHP y JavaScript (haciendo uso específico de la librería React).

No obstante, a pesar de que el plugin Módulos personalizados UCAB es una solución independiente al Tema UCAB, requiere de este último para poder configurar correctamente los estilos base de cada módulo personalizado, al igual que el color principal y de acento a ser empleados para un sitio particular. Por tanto, los estilos SASS se encuentran actualmente en el Tema UCAB, específicamente en el directorio assets/styles/sass/modules.

Estructura del plugin

La estructura del plugin se compone de cinco directorios principales, siendo éstos:

Adicionalmente a los directorios antes descritos, se encuentran los archivos base requeridos por WordPress para la correcta construcción del plugin (modules.php y readme.txt), al igual que los archivos package.json y package-lock.json para poder realizar la instalación de las dependencias NPM requeridas por el plugin.

Desarrollo de módulos personalizados

Todo desarrollo a ser llevado a cabo para el plugin Módulos personalizados UCAB, debe de ser realizado en un ambiente de desarrollo local que cumpla con los requerimientos previamente estipulados. Asimismo, es de suma importancia poder cumplir con las siguientes pautas en orden:

  1. Definir el modo debug en el que funcionará el plugin Módulos personalizados UCAB a través del archivo de configuración de WordPress wp-config.php. Para ello, solo debe de añadirse la definición define('UCAB_DEBUG', true). Igualmente, se recomienda cambiar la definición del modo debug en el que estará funcionando WordPress a define('WP_DEBUG', true); en el mismo archivo de configuración.

    La definición define('UCAB_DEBUG', true) permitirá obviar el bundle generado para producción existente en el plugin Módulos personalizados UCAB, y empleará en contraposición, el generado constantemente por el servidor local de React.

  2. Iniciar el servidor local de React, para ello, se debe de ejecutar el comando de consola $ npm start, el cual se encargará de realizar toda la configuración requerida para funcionar en conjunto con WordPress, y recargar automáticamente la página sobre la que se esté trabajando a través del Constructor Divi (front end) en la medida que se realicen cambios sobre los archivos JSX (React).
  3. Verificar que los módulos personalizados se puedan apreciar correctamente a través del Constructor Divi (front end) desplegando sus respectivas interfaces gráficas.

Si al ser completadas las pautas anteriores, se aprecia a través del Constructor Divi (front end) un error como el siguiente al tratar de ser cargada la interfez gráfica de un módulo personalizado:

function(t){return r.a.createElement(f.a,C({rawContentProcesser:h.default.replaceCodeContentEntities},e.props))}

La causa principal radicaría en una falla del servidor local de React al momento de generar la interfaz gráfica del módulo. Habría que evaluar su correcto funcionamiento, o verificar si el módulo personalizado posee su respectivo archivo JSX, y adicionalmente, corroborar si este último está siendo bien importado a través del archivo includes/modules/index.js.

Puesto que la documentación para desarrolladores ofrecida por Elegant Themes se encuentra actualmente en crecimiento; a continuación, se presentan varias recomendaciones obtenidas a partir de la experiencia durante el desarrollo de los módulos personalizados:

Procesamiento del plugin a través de NPM

Los comandos de consola contemplados a través de NPM para el plugin Módulos personalizados UCAB son los siguientes:

Personalizador de temas en WordPress

El Personalizador de temas en WordPress cumple un papel sumamente importante al momento de configurar el Tema UCAB para una instancia WordPress particular, ya que permite definir opciones generales como colores, tipografías, opciones del encabezado, CSS adicional, entre otros.

El Tema UCAB permite realizar una configuración rápida de las opciones antes mencionadas por medio de un archivo en formato JSON, el cual contiene todas las definiciones comunes requeridas.

A continuación, se presenta la estructura JSON que debe de contemplar el archivo de configuración para el Tema UCAB. El color principal contemplado es el valor hexadecimal #40b4e5, el cual puede ser reemplazado para poder cumplir con el requerimiento que posea el sitio específico:

{
  "context": "et_divi_mods",
  "data": {
    "static_css_custom_css_safety_check_done": true,
    "2_5_flush_rewrite_rules": "done",
    "et_flush_rewrite_rules_library": "4.0.7",
    "divi_previous_installed_version": "4.0.7",
    "divi_latest_installed_version": "4.0.7",
    "divi_skip_font_subset_force": true,
    "divi_email_provider_credentials_migrated": true,
    "divi_1_3_images": "checked",
    "et_pb_layouts_updated": true,
    "library_removed_legacy_layouts": true,
    "divi_2_4_documentation_message": "triggered",
    "et_pb_post_type_integration": {
      "post": "on",
      "page": "on",
      "project": "on",
      "location": "on",
      "event": "on"
    },
    "et_pb_static_css_file": "off",
    "et_pb_css_in_footer": "off",
    "et_pb_product_tour_global": "off",
    "et_enable_classic_editor": "on",
    "product_tour_status": { "1": "off" },
    "et_fb_pref_settings_bar_location": "bottom",
    "et_fb_pref_builder_animation": "false",
    "et_fb_pref_builder_display_modal_settings": "false",
    "et_fb_pref_builder_enable_dummy_content": "true",
    "et_fb_pref_event_mode": "hover",
    "et_fb_pref_limited_view_mode": "wireframe",
    "et_fb_pref_hide_disabled_modules": "false",
    "et_fb_pref_history_intervals": 1,
    "et_fb_pref_page_creation_flow": "default",
    "et_fb_pref_quick_actions_always_start_with": "nothing",
    "et_fb_pref_quick_actions_show_recent_queries": "off",
    "et_fb_pref_quick_actions_recent_queries": "",
    "et_fb_pref_quick_actions_recent_category": "",
    "et_fb_pref_limited_modal_preference": "default",
    "et_fb_pref_modal_snap_location": "false",
    "et_fb_pref_modal_snap": "false",
    "et_fb_pref_modal_fullscreen": "false",
    "et_fb_pref_modal_dimension_width": 400,
    "et_fb_pref_modal_dimension_height": 400,
    "et_fb_pref_modal_position_x": 931,
    "et_fb_pref_modal_position_y": 196,
    "et_fb_pref_limited_toolbar_click": "false",
    "et_fb_pref_limited_toolbar_desktop": "true",
    "et_fb_pref_limited_toolbar_grid": "false",
    "et_fb_pref_limited_toolbar_hover": "false",
    "et_fb_pref_limited_toolbar_phone": "true",
    "et_fb_pref_limited_toolbar_tablet": "true",
    "et_fb_pref_limited_toolbar_wireframe": "true",
    "et_fb_pref_limited_toolbar_zoom": "true",
    "heading_font": "Fedra Sans Std Bold",
    "body_font": "Open Sans",
    "accent_color": "#40b4e5",
    "primary_nav_font": "Source Sans Pro",
    "footer_widget_text_color": "#ffffff",
    "footer_widget_link_color": "#ffffff",
    "et_fb_pref_view_mode": "desktop",
    "et_fb_pref_modal_preference": "default",
    "et_fb_pref_toolbar_click": "false",
    "et_fb_pref_toolbar_desktop": "true",
    "et_fb_pref_toolbar_grid": "true",
    "et_fb_pref_toolbar_hover": "false",
    "et_fb_pref_toolbar_phone": "true",
    "et_fb_pref_toolbar_tablet": "true",
    "et_fb_pref_toolbar_wireframe": "true",
    "et_fb_pref_toolbar_zoom": "true",
    "link_color": "#40b4e5",
    "wp_custom_css": "",
    "divi_bfb_optin_modal_shown": "yes",
    "builder_custom_defaults": [],
    "customizer_settings_migrated_flag": true,
    "builder_custom_defaults_unmigrated": false,
    "body_font_size": 16,
    "et_pb_clear_templates_cache": true,
    "show_search_icon": false,
    "fixed_secondary_nav_bg": "#40b4e5",
    "fixed_menu_link_active": "#40b4e5",
    "footer_columns": "1",
    "show_footer_social_icons": false,
    "all_buttons_text_color": "#40b4e5",
    "all_buttons_border_color": "#40b4e5",
    "all_buttons_icon": "no",
    "all_buttons_text_color_hover": "#fefefe",
    "all_buttons_bg_color_hover": "#40b4e5",
    "all_buttons_border_color_hover": "#40b4e5",
    "all_buttons_border_radius_hover": 3,
    "post_meta_font_size": "14",
    "post_meta_height": "1",
    "post_meta_spacing": "0",
    "post_meta_style": "",
    "post_header_font_size": "30",
    "post_header_height": "1",
    "post_header_spacing": "0",
    "post_header_style": "",
    "boxed_layout": "",
    "content_width": "1080",
    "gutter_width": "3",
    "use_sidebar_width": "",
    "sidebar_width": "21",
    "section_padding": "4",
    "phone_section_height": "50",
    "tablet_section_height": "50",
    "row_padding": "2",
    "phone_row_height": "30",
    "tablet_row_height": "30",
    "cover_background": "on",
    "body_font_height": "1.7",
    "phone_body_font_size": "14",
    "tablet_body_font_size": 16,
    "body_header_size": "30",
    "body_header_spacing": "0",
    "body_header_height": "1",
    "body_header_style": "",
    "phone_header_font_size": "30",
    "tablet_header_font_size": "30",
    "font_color": "#666666",
    "header_color": "#666666",
    "color_schemes": "none",
    "header_style": "left",
    "vertical_nav": "",
    "vertical_nav_orientation": "left",
    "hide_nav": "",
    "show_header_social_icons": "",
    "slide_nav_show_top_bar": "on",
    "slide_nav_width": "320",
    "slide_nav_font_size": "14",
    "slide_nav_top_font_size": "14",
    "fullscreen_nav_font_size": "30",
    "fullscreen_nav_top_font_size": "18",
    "slide_nav_font_spacing": "0",
    "slide_nav_font": "none",
    "slide_nav_font_style": "",
    "slide_nav_bg": "#40b4e5",
    "slide_nav_links_color": "#ffffff",
    "slide_nav_links_color_active": "#ffffff",
    "slide_nav_top_color": "rgba(255,255,255,0.6)",
    "slide_nav_search": "rgba(255,255,255,0.6)",
    "slide_nav_search_bg": "rgba(0,0,0,0.2)",
    "nav_fullwidth": "",
    "hide_primary_logo": "",
    "menu_height": "66",
    "logo_height": "54",
    "menu_margin_top": "0",
    "primary_nav_font_size": "14",
    "primary_nav_font_spacing": "0",
    "primary_nav_font_style": "",
    "secondary_nav_font_size": "12",
    "secondary_nav_fullwidth": "",
    "secondary_nav_font_spacing": "0",
    "secondary_nav_font": "none",
    "secondary_nav_font_style": "",
    "menu_link": "rgba(0,0,0,0.6)",
    "hide_mobile_logo": "",
    "mobile_menu_link": "rgba(0,0,0,0.6)",
    "menu_link_active": "#40b4e5",
    "primary_nav_bg": "#ffffff",
    "primary_nav_dropdown_bg": "#ffffff",
    "primary_nav_dropdown_line_color": "#40b4e5",
    "primary_nav_dropdown_link_color": "rgba(0,0,0,0.7)",
    "primary_nav_dropdown_animation": "fade",
    "mobile_primary_nav_bg": "#ffffff",
    "secondary_nav_bg": "#40b4e5",
    "secondary_nav_text_color_new": "#ffffff",
    "secondary_nav_dropdown_bg": "#40b4e5",
    "secondary_nav_dropdown_link_color": "#ffffff",
    "secondary_nav_dropdown_animation": "fade",
    "primary_nav_text_color": "dark",
    "secondary_nav_text_color": "light",
    "hide_fixed_logo": "",
    "minimized_menu_height": "40",
    "fixed_primary_nav_font_size": "14",
    "fixed_primary_nav_bg": "#ffffff",
    "fixed_menu_link": "rgba(0,0,0,0.6)",
    "fixed_secondary_menu_link": "#ffffff",
    "phone_number": "",
    "header_email": "",
    "footer_bg": "#222222",
    "widget_header_font_size": 18,
    "widget_header_font_style": false,
    "widget_body_font_size": 16,
    "widget_body_line_height": "1.7",
    "widget_body_font_style": false,
    "footer_widget_header_color": "#40b4e5",
    "footer_widget_bullet_color": "#40b4e5",
    "footer_menu_background_color": "rgba(255,255,255,0.05)",
    "footer_menu_text_color": "#bbbbbb",
    "footer_menu_active_link_color": "#40b4e5",
    "footer_menu_letter_spacing": "0",
    "footer_menu_font_style": false,
    "footer_menu_font_size": "14",
    "bottom_bar_background_color": "rgba(0,0,0,0.32)",
    "bottom_bar_text_color": "#666666",
    "bottom_bar_font_style": false,
    "bottom_bar_font_size": "14",
    "bottom_bar_social_icon_size": "24",
    "bottom_bar_social_icon_color": "#666666",
    "disable_custom_footer_credits": "",
    "custom_footer_credits": "",
    "all_buttons_font_size": "20",
    "all_buttons_bg_color": "rgba(0,0,0,0)",
    "all_buttons_border_width": "2",
    "all_buttons_border_radius": "3",
    "all_buttons_spacing": "0",
    "all_buttons_font_style": "",
    "all_buttons_font": "none",
    "all_buttons_selected_icon": "5",
    "all_buttons_icon_color": "#ffffff",
    "all_buttons_icon_placement": "right",
    "all_buttons_icon_hover": "yes",
    "all_buttons_spacing_hover": false
  },
  "defaults": "",
  "images": []
}

Estas opciones deben de ser copiadas y almacenadas en un archivo en formato JSON para luego poder ser importadas en el sitio específico. Para importar el archivo de configuración, se debe de ir al Personalizador de temas en WordPress y presionar el botón denominado Importar y exportar, ubicado en la parte superior del panel de configuración.

Seguidamente, aparecerá una pequeña ventana modal que nos ofrecerá la opción de Exportar o Importar la configuración. Al seleccionar el apartado Importar, se podrá apreciar un control de carga de archivos a través del cual se realizará la carga del archivo de configuración previamente almacenado.

Al realizar la carga y comenzar la subida del archivo, se deberá de esperar un tiempo prudencial hasta que la configuración sea aceptada y el Personalizador de temas en WordPress recargue automáticamente.

Los cambios pueden no ser apreciados instantáneamente debido a que el Tema UCAB hereda estas opciones de configuración a través del tema padre Divi, el cual genera archivos estáticos CSS que pueden no ser actualizados al culminar el proceso de configuración.

Para regenerar los archivos estáticos CSS, se debe de acceder al Administrador de WordPress, específicamente a la sección Divi > Opciones del tema > Constructor > Avanzado > Generación de archivos CSS estáticos y limpiar por medio del botón ubicado en dicho apartado, los archivos CSS estáticos. Posteriormente, antes de visualizar nuevamente el sitio, se recomienda realizar una limpieza sobre la caché y localStorage del navegador utilizado.

Opciones del Tema UCAB

La configuración inicial permite definir numerosos valores requeridos por el Tema UCAB los cuales son inherentes al tema padre Divi. No obstante, existe un apartado específico denominado Opciones UCAB el cual debe de ser ajustado manualmente.

Las opciones de configuración contempladas para este apartado son las siguientes:

En caso de no existir en el apartado Colores del tema > Estilo de cabecera un estilo predefinido acorde con el requerido, se pueden emplear las opciones contempladas en el apartado Colores del menú para personalizar el encabezado en su totalidad, ya que éstas sobrescribirán cualquier opción contemplada previamente como Estilo de cabecera, sin importar la elección que sea realizada.

Plugins

En cada instancia WordPress, se emplean los siguientes plugins en su versión más reciente para añadir funcionalidades necesarias para la gestión y mantenimiento de las mismas:

No obstante, si una instancia WordPress particular lo requiere, puede hacer uso de otros plugins adicionales a los listados anteriormente.

Widgets

Actualmente, el Tema UCAB emplea los siguientes widgets ajustados específicamente a los requisitos presentes:

Menú lateral UCAB

Permite desplegar un menú de navegación lateral que ofrece la capacidad de recorrer múltiples niveles y posicionarse, por defecto, en el nivel al que pertenece la página visualizada siempre y cuando haya sido incluida en el menú a ser listado por el widget.

Para emplear el widget, se deben de cumplir los siguientes pasos:

  1. Disponer el widget Menú lateral UCAB en el área de widgets denominada Barra lateral.

  2. Crear un menú que contenga toda la estructura jerárquica del sitio. Dicho menú debe de poseer un nodo inicial que englobe a todas las páginas requeridas. A continuación, se presenta una estructura jerárquica a fin de ejemplificar la disposición requerida en el menú a ser utilizado por el widget:

    Nodo inicial
├── Página 1
│   ├── Página 1.1
│   │   ├── Página 1.1.1
│   │   └── Página 1.1.2
│   └── Página 1.2
├── Página 2
└── Página 3
  3. Editar la página en la que se desea añadir la estructura del menú lateral modificando en la esquina superior derecha, las opciones Diseño de página con el valor Barra lateral izquierda y Menú lateral con el nombre del menú que se haya creado.
  4. Guardar y visualizar la página. Automáticamente, el widget Menú lateral UCAB se encargará de desplegar el menú en la posición correspondiente siempre y cuando la página editada se encuentre presente en el menú seleccionado.

Es importante considerar que, haciendo uso de este widget, se podría crear un único menú que contenga el árbol de navegación completo de un sitio, por lo que todas las páginas que lo requieran, solo deberían de hacer referencia al mismo menú, facilitando a largo plazo el mantenimiento del mismo.

Eventos UCAB

Requiere del plugin Events Manager para su funcionamiento, y permite listar todos los eventos creados a través del Administrador de WordPress.

Para emplear el widget, se deben de cumplir los siguientes pasos:

  1. Disponer el widget Eventos UCAB en un área de widgets personalizada, la cual podrá ser aprovechada posteriormente por el módulo Barra lateral existente en el Constructor Divi.
  2. Configurar las opciones ofrecidas por el widget como lo son: título, número de eventos y ordenamiento.

  3. Definir la estructura HTML a ser empleada como elemento de la lista haciendo uso del siguiente snippet:

    <li class="event">
  <div class="date">
    <time datetime="#Y-#m-#d">
      <span class="month">#M</span>
      <span class="day">#d</span>
    </time>
  </div>
  <div class="info">
    <h2 class="title">#_EVENTLINK</h2>
    <div class="desc-wrapper">
      <i class="far fa-calendar" aria-hidden="true"></i>
      <p class="desc">#_EVENTDATES</p>
    </div>
    <div class="desc-wrapper">
      <i class="far fa-clock" aria-hidden="true"></i>
      <p class="desc">#_EVENTTIMES</p>
    </div>
  </div>
  <div style="clear: both;"></div>
</li>

  4. Definir la estructura HTML a ser empleada al momento de no haber eventos a ser listados haciendo uso del siguiente snippet:

    <li>No hay eventos</li>
  5. Guardar los cambios y visualizar la página empleada para desplegar el listado de eventos.

Lineamientos gráficos

La Universidad Católica Andrés Bello en aras de poder estandarizar los procesos inherentes a la creación y mantenimiento de los distintos espacios a nivel web que conforman el Mundo UCAB, define una serie de pautas a seguir las cuales son descritas con exactitud en el Manual de lineamientos gráficos UCAB.

No obstante, a continuación se presentan los lineamientos gráficos más importantes a ser tomados en consideración:

Organización de sitios UCAB

Actualmente, existen tres niveles distintos de organización para los sitios que conforman el Mundo UCAB, los cuales brindan una serie de pautas específicas que deberán de ser seguidas a plenitud.

Es sumamente importante tomar en consideración esta primera normativa a modo de conocer las directrices a ser seguidas para la creación o mantenimiento de un sitio particular.

Para mayor información, referirse al Manual de lineamientos gráficos UCAB.

Colores y tipografías

Los sitios que conforman el Mundo UCAB varían primordialmente por el color principal y de acento designados, a no ser que pertenezcan a la la clasificación de sitios de tercer nivel (Para mayor información, referirse al Manual de lineamientos gráficos UCAB).

Asimismo, la tipografía empleada posee un papel fundamental en la caracterización de los sitios, haciendo que éstos se puedan relacionar entre sí a pesar de no compartir ciertamente la misma información, o no se refieran a una misma dependencia u organización.

Para definir todos estos valores requeridos, en el apartado Personalizador de temas en WordPress se detallan todos los pasos a seguir para configurar una instancia WordPress que emplee el Tema UCAB.

Diseño de páginas

En última instancia, es importante acotar cómo debe de ser empleado el diseño de las página según el nivel al que correspondan en la arquitectura de información definida.

Página inicial

Página inicial

Es la página inicial (home) del sitio y solamente emplea el módulo personalizado denominado Carrusel de ancho completo (UCAB) para presentar las noticias más relevantes, o los contenidos más destacados o de importancia para el usuario final.

El alto de esta página estará acotado al viewport del navegador si y solo si es posible según la resolución del dispositivo con el cual se esté visualizando.

El diseño empleado para esta página es el denominado ancho completo.

Página concentradora

Página concentradora

Corresponde al esquema que debe de ser implementado en toda página que pertenezca al primer nivel de nevagación en la arquitectura de información, es decir: https://www.nombrededominio.com/primer-nivel/.

Permite condensar toda la información contenida en los siguientes niveles de navegación, agrupando el contenido destacado o de interés para que pueda ser accedido de forma rápida por el usuario final.

Puede emplearse una imagen de encabezado, la cual siempre deberá de ocupar el ancho completo del viewport del navegador. Seguidamente, se hará uso de alguno de los módulos encargados de poder plantear un título para la página.

En última instancia, se presentará todo el contenido que requiera la página incluyendo enlaces, vídeos, imágenes, entre otros; siempre haciendo uso de los módulos base y módulos personalizados existente en el Constructor Divi.

El diseño empleado para esta página es el denominado ancho completo.

Página de contenido desplegado

Página de contenido desplegado

Corresponde al esquema que debe de ser implementado en toda página que pertenezca al segundo nivel de nevagación en la arquitectura de información, es decir: https://www.nombrededominio.com/primer-nivel/segundo-nivel/.

Los próximos niveles de navegación implementarán obligatorialmente este esquema de diseño.

Este esquema de diseño contempla dos áreas bien delimitadas, las cuales son:

Área de breadcrumbs

Permite visualizar el nivel de navegación al que pertenece la página desplegado. Asimismo, ofrece la capacidad de enlazar con los niveles superiores para facilitar la navegación.

Área de widgets

Empleada principalmente para desplegar el widget denominado Menú lateral UCAB. Facilita la navegación a través de los distintos niveles contemplados en la arquitectura de información.

Área de contenido

Contempla todo el contenido que requiere la página incluyendo enlaces, vídeos, imágenes, entre otros; siempre haciendo uso de los módulos base y módulos personalizados existente en el Constructor Divi.

El diseño empleado para esta página es el denominado barra lateral izquierda.

Lanzamiento de nuevas versiones

Actualmente, tanto el Tema UCAB como el plugin Módulos personalizados UCAB mantienen versiones que fungen como guía para controlar los cambios realizados y la incorporación de nuevas funcionalidades en razón del tiempo.

Asimismo, dichas soluciones poseen la capacidad de adquirir actualizaciones automáticamente en lo que una nueva versión es generada, mejorando significativamente los procesos de mantenimiento y adquisición de mejoras.

Antes de generarse una nueva versión, se debe de conocer el funcionamiento actual del repositorio a fin de entender el flujo empleado para la creación de nuevas funcionalidades o correcciones que hayan que ser realizadas. El branch master solo poseerá código completamente funcional y probado, ya que a partir de él serán construidos los nuevos releases.

Los branches development y documentation serán empleados para desarrollar nuevas funcionalidades y documentar todos los cambios realizados respectivamente. Siempre que se disponga a realizar algún desarrollo, es importante actualizar ambos branches en relación con el branch master a fin de partir de una versión estable.

Si la funcionalidad a desarrollar es extensa, puede hacerse la creación de un branch con un nombre conciso que lo identifique, el cual partirá desde el branch development. Posteriormente, al ser culminado el desarrollo requerido, se creará un pull request que permitirá integrar todos los cambios al branch del cual se partió, permitiendo así canalizar todo hasta el branch master.

Consecuentemente, todos los cambios realizados estarán disponibles en el branch master, y así se podrá a través la interfaz web de GitHub, generar un nuevo release el cual deberá de ser, en número de versión, mayor al último release existente en el repositorio. A continuación, se listan todos los archivos que deben de ser modificadas antes de poderse generar correctamente una nueva versión:

Tema UCAB Módulos personalizados UCAB
package.json package.json
package-lock.json package-lock.json
functions.php (Metadatos iniciales) modules.php (Metadatos iniciales)
assets/styles/sass/style.scss (Metadatos iniciales) includes/Modules.php (específicamente: public $version)
docs/changelog.md (Añadir cambios realizados) readme.txt (Añadir cambios realizados)

Posteriormente, es importante ejecutar el comando de consola $ npm run build en cualquiera de las soluciones en las que se esté trabajando antes de realizar commit y push, para así asentar correctamente todos los cambios necesarios referentes a la edición de la versión.

Al realizarse la creación de un nuevo release, habrá que esperar un lapso de cinco minutos para poder apreciar en los ambientes que empleen el Tema UCAB y el plugin Módulos personalizados UCAB, su respectiva actualización.

Consideraciones adicionales

Cambio de la imagen de marca en la cabecera

Para poder realizar el cambio de la imagen en la cabecera del sitio requerido, debe de tomarse en consideración que son necesarias dos versiones de la misma, las cuales responderán a la imagen original y a una versión simplificada comúnmente en color blanco (empleada para la cabecera en su versión reducida).

La proporción de la imagen debe de ser rectangular, manteniendo un mayor ancho que alto debido al espacio en donde será presentada, y debe de ser usada estrictamente en formato SVG para poder escalar correctamente y mantener una buena definición sin importar la densidad de pixeles del dispositivo a través del cual se visualice el sitio.

Posteriormente, ambas versiones previamente mencionadas deben de ser convertidas a su equivalente en Base64, para así poder ser incluidas posteriormente a través del Personalizador de temas en WordPress haciendo uso de un pequeño snippet de código CSS.

Para realizar la conversión de las imágenes SVG a su equivalente Base64, se puede emplear la herramienta ofrecida por RapidTables y obtener el string <encoded_string> a ser sustituido en el código presentado a continuación, el cual será añadido en el apartado Personalizador de temas > CSS adicional del sitio requerido:

/* Imagen de marca en su versión completa */
.ucab-header .ucab-brand-bar .home-link .brand-logo {
  background: url("data:image/svg+xml;base64,<encoded_string>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Imagen de marca en su versión simplificada */
.shrink .ucab-header .ucab-brand-bar .home-link .brand-logo {
  background: url("data:image/svg+xml;base64,<encoded_string>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

En última instancia, se guardarán los cambios y se evaluará si la imagen se ajusta de forma satisfactoria en el espacio designado para la misma. En caso contrario, se puede hacer uso de las reglas CSS width, height y transform a fin de conseguir un mejor resultado.

Uso de tablas funcionales (DataTables)

Para hacer uso de las tablas funcionales (DataTables) que ofrecen la capacidad de buscar y filtrar información, se debe de emplear la estructura HTML planteada a continuación:

<table class="ucab-datatables" style="width: 100%;">
  <thead>
    <tr>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
    </tr>
  </tbody>
</table>

Esta estructura debe de ser planteada a través de la vista HTML existente en el editor de texto enriquecido ofrecido por WordPress para las páginas o entradas.

Tablas funcionales agrupadas (Row Grouping DataTables)

Adicionalmente, se permite el uso de tablas funcionales con filas agrupadas (Row grouping) a fin de presentar grupos de datos relacionados entre sí. Es importante tomar en consideración que las filas estarán agrupadas por el valor estipulado en la primera columna de cada una de éstas.

<table class="ucab-grouped-datatables" style="width: 100%;">
  <thead>
    <tr>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
    </tr>
  </tbody>
</table>

Esta estructura debe de ser planteada a través de la vista HTML existente en el editor de texto enriquecido ofrecido por WordPress para las páginas o entradas.

Uso de lineamientos gráficos sin emplear el Tema UCAB

Se ha presentado en ciertas ocasiones, la necesidad de emplear los lineamientos gráficos estipulados por el Tema UCAB sin hacer uso del mismo. La razón de dicho requerimiento puede radicar en el querer eliminar la cabecera (header) y pie de página (footer) personalizados para su uso a lo largo de las múltiples instancias WordPress. Asimismo, puede ser necesaria la definición de una nueva estructura de diseño (layout) para las distintas páginas de un sitio, las cuales posiblemente no pueden ser satisfechas a plenitud por el Tema UCAB.

En vista de este posible escenario, se recomienda la creación de un tema hijo para WordPress a partir del Tema UCAB. Es importante acotar que el Tema UCAB en sí es un tema hijo que depende del tema principal Divi, por consiguiente, la forma más sencilla de realizar dicha creación es a través del cambio del Text Domain del Tema UCAB y de sus metadatos existentes en las primeras líneas del archivo de estilos principal del tema (style.css).

/*
  Theme Name: UCAB
  Theme URI: https://uwucab.github.io/ucab-theme/
  Description: Tema UCAB para las múltiples instancias WordPress
  Author: Mermelon Design
  Author URI: http://www.mermelonde.com.ve
  Template: Divi
  Version: 2.1.0
  Text Domain: ucab
  Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

Si se planea emplear SASS como preprocesador CSS, el cambio puede realizarse directamente a través del archivo SASS principal localizado en assets/styles/sass/style.scss, y posteriormente, se utilizaría el comando de consola $ npm run build para regenerar todos los estilos CSS empleados por el tema.

Posteriormente, se recomienda remover la librería plugin-update-checker a fin de no recibir más actualizaciones automáticas pertenecientes al Tema UCAB, y evitar que las personalizaciones realizadas sobre el nuevo tema hijo se vean afectadas o perdidas por una actualización realizada por error.

Para su remoción, se debe de eliminar el siguiente código localizado en el archivo functions.php:

/**
 * Get updates from GitHub repo for UCAB theme.
 *
 * @since 1.2.0
 */
require 'updates/plugin-update-checker.php';

$updater = Puc_v4_Factory::buildUpdateChecker(
    'https://github.com/uwucab/ucab-theme',
    __FILE__,
    'ucab'
);

// Access token for private repo
$updater->setAuthentication('<secret_access_token>');

// Branch that contains stable releases
$updater->setBranch('master');

// Additional data for custom details_url link
$updater->addResultFilter(function($themeInfo, $httpResponse = null) {
    $themeInfo->details_url = 'https://uwucab.github.io/ucab-theme/changelog';
    return $themeInfo;
});

Asimismo, luego de completar el proceso anterior, se puede remover el directorio updates a fin de eliminar la librería empleada para la gestión de las actualizaciones automáticas del Tema UCAB.