BXC Base — Glosario del Tema Maestro
Versión 3.1.0 · Prefijo unificado: bxc_ (PHP) / bxc- (CSS, JS, HTML)
I. Funciones PHP
Todas las funciones PHP usan el prefijo bxc_. Se cargan automáticamente desde la carpeta /inc.
Warning : Undefined variable $form_id in
/home/brainxcode/domains/brainxcode.cl/public_html/wp-content/themes/bxc-base/page-bxc-theme-manual.php on line
295
bxc_show_debug_line( $line, $type = "" )
Archivo: inc/bxc-helpers.php
Imprime una línea de debug visible solo cuando la constante BXC_DEBUG está activa. Útil para diagnóstico en desarrollo sin afectar producción.
bxc_show_debug_line( 'Iniciando proceso X' );
bxc_show_debug_line( $variable, 'pre' );
bxc_get_custom_posts( $post_type, $limit = -1, $extra = array() )
Archivo: inc/bxc-helpers.php
Obtiene posts de un Custom Post Type ordenados por fecha DESC. Permite limitar cantidad y pasar argumentos extra a get_posts().
$posts = bxc_get_custom_posts( 'servicio', 4 );
foreach ( $posts as $p ) {
echo esc_html( $p->post_title );
}
bxc_the_content( $content )
Archivo: inc/bxc-helpers.php
Renderiza contenido aplicando los filtros the_content (párrafos automáticos, shortcodes, bloques Gutenberg, oEmbed).
bxc_the_content( $post->post_content );
bxc_create_page( $title, $content = "", $parent_id = null )
Archivo: inc/bxc-helpers.php
Crea una página si no existe (buscando por título) y devuelve su ID. Si ya existe, devuelve el ID existente. Útil para instalaciones one-shot.
$id = bxc_create_page( 'Contacto', 'Contenido inicial' );
bxc_create_page( 'Aviso Legal', '', $id ); // sub-página
bxc_role_exists( $role )
Archivo: inc/bxc-helpers.php
Verifica si un rol de usuario existe en el sistema.
if ( bxc_role_exists( 'editor' ) ) {
// hacer algo
}
bxc_clone_role( $origin, $clone_name, $clone_show_name )
Archivo: inc/bxc-helpers.php
Clona un rol existente con todas sus capabilities bajo un nuevo slug y nombre visible. Sanea el slug automáticamente.
bxc_clone_role( 'editor', 'cliente_editor', 'Editor de Cliente' );
bxc_clean_string_only_letters( $s, $allow_nums = false )
Archivo: inc/bxc-helpers.php
Limpia una cadena dejando solo letras (y opcionalmente números). Reemplaza espacios por guiones bajos.
$slug = bxc_clean_string_only_letters( 'Hola Mundo 123!', true );
// => 'Hola_Mundo_123'
bxc_pagination( $args = array() )
Archivo: inc/bxc-helpers.php
Paginación numérica estándar (en lugar de "Previous/Next"). Envuelve paginate_links() con defaults razonables.
<?php bxc_pagination(); ?>
bxc_breadcrumbs( $args = array() )
Archivo: inc/bxc-helpers.php
Genera breadcrumbs HTML basados en la jerarquía de páginas, archivos y la página actual. Usa marcado BEM (bxc-breadcrumbs).
<?php bxc_breadcrumbs( array( 'separator' => ' » ' ) ); ?>
bxc_custom_excerpt( $length = 30, $more = "..." )
Archivo: inc/bxc-helpers.php
Devuelve un excerpt con longitud configurable (número de palabras). No imprime, devuelve el string.
echo esc_html( bxc_custom_excerpt( 20 ) );
bxc_get_first_image_url( $html )
Archivo: inc/bxc-helpers.php
Extrae la URL de la primera imagen de un string HTML. Útil cuando se importa contenido sin imagen destacada.
$img = bxc_get_first_image_url( $post->post_content );
bxc_get_field( $selector, $post_id = null, $default = "" )
Archivo: inc/bxc-helpers.php
Wrapper seguro para get_field() de ACF. Devuelve $default si ACF no está activo o el campo está vacío.
$subtitulo = bxc_get_field( 'subtitulo', get_the_ID(), 'Sin subtítulo' );
bxc_get_image_srcset( $attachment_id, $size = "large" )
Archivo: inc/bxc-helpers.php
Devuelve el atributo srcset listo para imprimir para una imagen por su ID.
echo '<img src="' . esc_url( $url ) . '" srcset="' . esc_attr( bxc_get_image_srcset( $id ) ) . '">';
bxc_json_response( $success = true, $data = null, $message = "" )
Archivo: inc/bxc-helpers.php
Envía una respuesta JSON estandarizada {success, data, message} y termina la ejecución. Usa wp_send_json() internamente.
bxc_json_response( true, array( 'id' => 123 ), 'OK' );
bxc_get_menu_array( $menu, $args = array() )
Archivo: inc/bxc-menus.php
Devuelve los items de un menú como array plano de objetos. Reemplaza a base_wpGetMenuArray() que imprimía HTML en vez de devolver array. Acepta ubicación (slug) o ID.
$items = bxc_get_menu_array( 'primary' );
foreach ( $items as $item ) {
echo esc_html( $item->title );
}
bxc_build_menu_tree( $items, $parent = 0 )
Archivo: inc/bxc-menus.php
Construye un árbol jerárquico a partir del array plano devuelto por bxc_get_menu_array(). Cada item recibe la propiedad "children".
$tree = bxc_build_menu_tree( bxc_get_menu_array( 'primary' ) );
foreach ( $tree as $item ) {
echo $item->title;
if ( ! empty( $item->children ) ) { /* render submenu */ }
}
bxc_render_menu( $location = "primary", $args = array() )
Archivo: inc/bxc-menus.php
Renderiza un menú por ubicación usando el Walker BXC_Walker_Nav_Menu. Imprime HTML BEM (bxc-menu, bxc-menu__item, bxc-menu__link).
<?php bxc_render_menu( 'primary' ); ?>
class BXC_Walker_Nav_Menu extends Walker_Nav_Menu
Archivo: inc/bxc-menus.php
Walker personalizado para wp_nav_menu(). Añade clases BEM, soporte para submenu profundo y marca el item activo. Usado automáticamente por bxc_render_menu().
// No se invoca directamente; wp_nav_menu() lo usa vía 'walker' => new BXC_Walker_Nav_Menu().
bxc_register_post_type( $slug, $config = array() )
Archivo: inc/bxc-cpt.php
Registra un Custom Post Type. Reemplaza la antigua base_custom_post_type() de 16 parámetros por un array de configuración. Soporta Gutenberg (show_in_rest) por defecto.
bxc_register_post_type( 'servicio', array(
'name' => 'Servicios',
'singular_name' => 'Servicio',
'menu_icon' => 'dashicons-portfolio',
'menu_position' => 5,
'has_archive' => true,
) );
bxc_register_taxonomy( $slug, $post_type, $config = array() )
Archivo: inc/bxc-cpt.php
Registra una taxonomía personalizada asociada a uno o varios CPTs.
bxc_register_taxonomy( 'categoria_servicio', 'servicio', array(
'name' => 'Categorías de servicio',
'singular_name' => 'Categoría de servicio',
) );
bxc_register_meta_boxes()
Archivo: inc/bxc-meta.php
Hook que registra los meta boxes. Añadir aquí los add_meta_box() personalizados.
add_meta_box( 'bxc-meta-demo', 'Campos BXC', 'bxc_meta_demo_callback', 'post' );
bxc_save_meta_box( $post_id )
Archivo: inc/bxc-meta.php
Guarda los meta boxes de forma segura: verifica nonce, capability, autosave. Hooked en save_post.
// Se ejecuta automáticamente en save_post. No se invoca manualmente.
bxc_enqueue_assets()
Archivo: inc/bxc-assets.php
Encola todos los CSS y JS del front-end (propios + CDN). Localiza el objeto bxc_vars accesible desde JS.
// Hooked en wp_enqueue_scripts. No se invoca manualmente.
bxc_enqueue_admin_assets()
Archivo: inc/bxc-assets.php
Encola los assets del dashboard de administración.
// Hooked en admin_enqueue_scripts.
bxc_preload_assets()
Archivo: inc/bxc-assets.php
Añade hints de preconnect y preload en <head> para mejorar LCP.
// Hooked en wp_head con prioridad 1.
bxc_theme_setup()
Archivo: inc/bxc-theme-setup.php
Registra theme_supports (title-tag, post-thumbnails, html5, custom-logo, etc.) y tamaños de imagen adicionales (bxc-hero, bxc-card, bxc-thumbnail, bxc-banner).
// Hooked en after_setup_theme.
bxc_body_classes( $classes )
Archivo: inc/bxc-theme-setup.php
Añade clases bxc- al <body> (bxc-body, bxc-is-mobile, bxc-singular, bxc-front-page).
// Hooked en body_class filter.
bxc_hide_admin_bar( $show )
Archivo: inc/bxc-theme-setup.php
Oculta la admin bar para usuarios sin capability edit_posts.
// Hooked en show_admin_bar filter.
bxc_login_styling()
Archivo: inc/bxc-theme-setup.php
Personaliza la pantalla de login de WordPress con el branding del tema (logo, fondo, etc.).
// Hooked en login_enqueue_scripts.
bxc_remove_wp_version()
Archivo: inc/bxc-security.php
Elimina la versión de WordPress del meta generator.
// Hooked en the_generator filter.
bxc_security_headers()
Archivo: inc/bxc-security.php
Añade headers HTTP de seguridad: X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy.
// Hooked en send_headers.
bxc_restrict_rest_api( $result )
Archivo: inc/bxc-security.php
Restringe el endpoint /wp-json/wp/v2/users a usuarios logueados para evitar enumeración.
// Hooked en rest_authentication_errors.
bxc_disable_emojis()
Archivo: inc/bxc-security.php
Desactiva los emojis de WordPress para reducir peticiones HTTP y mejorar rendimiento.
// Hooked en init.
bxc_sanitize_ajax_input( $data )
Archivo: inc/bxc-security.php
Sanea recursivamente un array o string de entrada AJAX. Aplica sanitize_text_field() + wp_unslash().
$clean = bxc_sanitize_ajax_input( $_POST['form_data'] );
bxc_verify_ajax_nonce( $action = "bxc_ajax_nonce" )
Archivo: inc/bxc-security.php
Verifica el nonce de una petición AJAX. Devuelve bool.
if ( ! bxc_verify_ajax_nonce() ) { die( 'Nonce inválido' ); }
bxc_register_sidebars()
Archivo: inc/bxc-widgets.php
Registra 4 sidebars: sidebar principal + 3 columnas de footer. Cada widget se envuelve en <section class="bxc-widget">.
// Hooked en widgets_init. Usar con dynamic_sidebar( 'bxc-footer-1' ).
bxc_cf7_dynamic_addcc( $WPCF7_ContactForm )
Archivo: inc/bxc-plugins.php
Hook de Contact Form 7: añade CCs dinámicos al email antes de enviar.
// Hooked en wpcf7_before_send_mail. Configurar .
bxc_cf7_save_submission( $WPCF7_ContactForm )
Archivo: inc/bxc-plugins.php
Hook de Contact Form 7: guarda los datos del envío en una tabla personalizada {prefix}_bxc_submissions.
// Hooked en wpcf7_before_send_mail.
bxc_create_submissions_table()
Archivo: inc/bxc-plugins.php
Crea la tabla bxc_submissions al activar el tema. Hooked en after_switch_theme.
// Se ejecuta automáticamente.
bxc_ajax_get_post_data()
Archivo: inc/bxc-plugins.php
Endpoint AJAX de ejemplo: devuelve datos de un post por ID. Requiere nonce bxc_vars.nonce.
// JS: bxc_ajax( 'bxc_get_post_data', { post_id: 123 } ).
II. Funciones JavaScript
Todas las funciones JS usan el prefijo bxc_ y se exponen también bajo el namespace window.BXC. Variables globales inyectadas desde PHP en window.bxc_vars.
bxc_vars (objeto global)
Archivo: inc/bxc-assets.php (wp_localize_script)
Objeto con datos del servidor: post_id, post, site_url, home_url, template_url, ajax_url, nonce, is_mobile, is_rtl, debug.
console.log( bxc_vars.ajax_url );
console.log( bxc_vars.template_url );
BXC.util.ajax( action, data )
Archivo: js/bxc_functions.js
POST hacia admin-ajax.php con nonce incluido. Devuelve una Promise con la respuesta JSON. Forma moderna de hacer AJAX en WordPress.
const res = await BXC.util.ajax( 'bxc_get_post_data', { post_id: 123 } );
if ( res.success ) console.log( res.data );
BXC.util.fetchText( url )
Archivo: js/bxc_functions.js
GET fetch que devuelve texto plano. Lanza error si la respuesta no es 2xx.
const txt = await BXC.util.fetchText( '/api/datos' );
BXC.util.fetchJson( url )
Archivo: js/bxc_functions.js
GET fetch que devuelve JSON parseado.
const data = await BXC.util.fetchJson( '/wp-json/wp/v2/posts' );
bxc_loadDataToId( url, id )
Archivo: js/bxc_functions.js
Carga HTML desde una URL y lo inyecta en el elemento con el ID indicado. Mantenido por compatibilidad con código legacy.
bxc_loadDataToId( '/fragmentos/menu.html', 'menu-container' );
BXC.util.qs( sel, ctx ) / BXC.util.qsa( sel, ctx )
Archivo: js/bxc_functions.js
Atajos para querySelector / querySelectorAll. qsa devuelve un Array real (no NodeList).
const btn = BXC.util.qs( '.bxc-button' );
const btns = BXC.util.qsa( '.bxc-button' );
btns.forEach( b => b.addEventListener( 'click', fn ) );
BXC.util.on( root, type, selector, handler )
Archivo: js/bxc_functions.js
Delegación de eventos. Útil para elementos creados dinámicamente.
BXC.util.on( document, 'click', '.bxc-button', ( e, target ) => {
console.log( 'clicked', target );
} );
BXC.util.el( tag, attrs, children )
Archivo: js/bxc_functions.js
Crea un elemento DOM con atributos e hijos opcionales. Soporta class, dataset, html, eventos on*.
const btn = BXC.util.el( 'button', {
class: 'bxc-button bxc-rounded-md',
onclick: () => alert( 'click' ),
dataset: { id: 123 },
}, 'Aceptar' );
document.body.appendChild( btn );
BXC.util.debounce( fn, wait, immediate )
Archivo: js/bxc_functions.js
Debounce: retrasa la ejecución hasta que pasen wait ms sin invocaciones. Ideal para resize, input de búsqueda.
const onResize = BXC.util.debounce( () => {
console.log( 'resize terminado' );
}, 200 );
window.addEventListener( 'resize', onResize );
BXC.util.throttle( fn, limit )
Archivo: js/bxc_functions.js
Throttle: limita la frecuencia de invocación a una vez cada limit ms. Ideal para scroll, mousemove.
const onScroll = BXC.util.throttle( () => {
console.log( 'tick' );
}, 100 );
window.addEventListener( 'scroll', onScroll );
BXC.util.copyToClipboard( text )
Archivo: js/bxc_functions.js
Copia texto al portapapeles de forma segura (usa navigator.clipboard con fallback a execCommand).
await BXC.util.copyToClipboard( 'https://example.com' );
BXC.util.getCookie( name ) / BXC.util.setCookie( name, value, days )
Archivo: js/bxc_functions.js
Lee y escribe cookies. setCookie usa SameSite=Lax por defecto.
BXC.util.setCookie( 'bxc_accepted', '1', 30 );
if ( BXC.util.getCookie( 'bxc_accepted' ) ) { /* ... */ }
BXC.util.getQueryParam( name )
Archivo: js/bxc_functions.js
Devuelve el valor de un parámetro de la URL actual usando URLSearchParams.
const id = BXC.util.getQueryParam( 'id' );
BXC.util.isEmail( email )
Archivo: js/bxc_functions.js
Valida un email con regex sencilla.
if ( ! BXC.util.isEmail( input.value ) ) alert( 'Email inválido' );
BXC.util.formatNumber( n, sep )
Archivo: js/bxc_functions.js
Formatea un número con separador de miles.
BXC.util.formatNumber( 1234567 ); // '1.234.567'
BXC.animation.init()
Archivo: js/bxc_animation.js
Inicializa todos los comportamientos de animación: parseo de clases utilitarias, IntersectionObserver, parallax, contadores, smooth scroll, tilt 3D, reveal de texto. Se auto-ejecuta en DOMContentLoaded.
// Re-inicializar tras inyectar HTML dinámico:
BXC.animation.init();
bxc_fadeIn( selector ) / bxc_fadeOut( selector )
Archivo: js/bxc_animation.js
Aplica la clase bxc-fadeIn o bxc-fadeOut a todos los elementos que matcheen el selector.
bxc_fadeIn( '.bxc-modal' );
bxc_fadeOut( '.bxc-modal' );
BXC.animation.scaleOnResize()
Archivo: js/bxc_animation.js
Reescala elementos con clase .bxc-scaling para que encajen en su contenedor manteniendo proporción. Se ejecuta automáticamente en resize.
BXC.animation.scaleOnResize();
data-bxc-parallax="0.3" (atributo)
Archivo: js/bxc_animation.js
Aplica parallax suave al hacer scroll. El valor es la velocidad (0.3 = 30% del scroll). Usa requestAnimationFrame.
<div data-bxc-parallax="0.3">Contenido con parallax</div>
.bxc-counter[data-bxc-to][data-bxc-duration] (atributos)
Archivo: js/bxc_animation.js
Contador numérico animado desde 0 hasta data-bxc-to al entrar en viewport. Atributos: data-bxc-to, data-bxc-duration (ms), data-bxc-prefix, data-bxc-suffix, data-bxc-decimals.
<span class="bxc-counter" data-bxc-to="1234" data-bxc-duration="2000" data-bxc-suffix="+">0</span>
.bxc-tilt-3d[data-bxc-tilt-max] (atributos)
Archivo: js/bxc_animation.js
Efecto tilt 3D que rota el elemento según la posición del mouse. data-bxc-tilt-max = grados máximos (default 15).
<div class="bxc-tilt-3d" data-bxc-tilt-max="20">Tarjeta con tilt</div>
.bxc-text-reveal (clase)
Archivo: js/bxc_animation.js
Revela el texto palabra por palabra al entrar en viewport. Divide el contenido en spans con transición escalonada.
<h2 class="bxc-text-reveal">Bienvenido a nuestro sitio</h2>
BXC.slider.create( root )
Archivo: js/bxc_slider.js
Crea un slider a partir de un elemento .bxc-slider. Si window.Swiper está disponible, lo usa; si no, inicializa una implementación vanilla propia. Devuelve la instancia.
const sl = BXC.slider.create( document.querySelector( '.bxc-slider' ) );
sl.next();
BXC.slider.initAll( scope )
Archivo: js/bxc_slider.js
Inicializa todos los .bxc-slider dentro de scope. Se ejecuta automáticamente en DOMContentLoaded.
BXC.slider.initAll( document );
// Tras inyectar HTML dinámico:
BXC.slider.initAll( container );
III. Clases CSS (framework bxc-)
Framework CSS propio. Todas las clases usan el prefijo bxc-. Variables CSS disponibles en :root con prefijo --bxc-.
Layout / Flex
Clase
Descripción
bxc-container
Contenedor centrado con max-width: 1200px y padding lateral.
bxc-flex
display: flex
bxc-inline-flex
display: inline-flex
bxc-flex-column
flex-direction: column
bxc-flex-row
flex-direction: row
bxc-flex-wrap
flex-wrap: wrap
bxc-flex-1
flex: 1 1 0%
bxc-flex-center
justify-content: center; align-items: center
bxc-flex-between
justify-content: space-between; align-items: center
bxc-flex-around
justify-content: space-around; align-items: center
bxc-flex-start
justify-content: flex-start; align-items: center
bxc-flex-end
justify-content: flex-end; align-items: center
bxc-items-{center|start|end|stretch}
Alineación transversal
bxc-justify-{center|start|end|between|around}
Alineación principal
bxc-gap-{1|2|3|4}
Gap: 8 / 16 / 24 / 32px
bxc-grid
display: grid; gap: var(--bxc-gutter)
bxc-grid-cols-{2|3|4}
Grid de 2 / 3 / 4 columnas
Grid de columnas
Clase
Descripción
bxc-row
Contenedor de columnas (flex-wrap con gutter negativo)
bxc-col-{sm|md|lg}-{1-12}
Ancho de columna por breakpoint. Mobile-first: sm por defecto, md >= 768px, lg >= 1280px.
bxc-col-{sm|md|lg}-offset-{0-12}
Margin-left por breakpoint
bxc-col-{sm|md|lg}-{first|last|normal}
Order
bxc-only-desktop
Visible solo en >= 768px
bxc-only-mobile
Visible solo en < 768px
bxc-only-tablet
Visible solo en 768-1279px
Espaciados
Clase
Descripción
bxc-m-{0|1|2|3|4|5|auto}
Margin (0 / 8 / 16 / 24 / 32 / 40px)
bxc-mt-{0-5}
Margin-top
bxc-mb-{0-5}
Margin-bottom
bxc-ml-{0-5}
Margin-left
bxc-mr-{0-5}
Margin-right
bxc-p-{0-5}
Padding
bxc-pt-{0-5}, bxc-pb-{0-5}, bxc-pl-{0-5}, bxc-pr-{0-5}
Padding direccional
bxc-my-4, bxc-mx-4
Combinaciones (requieren tema hijo o definir)
Tipografía
Clase
Descripción
bxc-text-{left|right|center|justify}
Alineación
bxc-text-{uppercase|lowercase|capitalize}
Transformación
bxc-text-{bold|semibold|light|italic}
Peso y estilo
bxc-text-{xs|sm|md|lg|xl|2xl|3xl}
Tamaños: .75 / .875 / 1 / 1.25 / 1.5 / 2 / 3 rem
bxc-text-{muted|primary|accent}
Colores
bxc-text-decoration-{none|underline}
Decoración
bxc-drop-caps
Letra capital en primera letra
Utilidades
Clase
Descripción
bxc-hidden / bxc-visible
Display none / block
bxc-clearfix
Clearfix moderno
bxc-target-top-margin
padding-top: 5vh (para anchor links)
bxc-scaling
Marcador para escalado responsivo por JS
bxc-rounded-{sm|md|lg|full}
Border-radius: 4 / 8 / 16 / 9999px
bxc-shadow-{sm|md|lg}
Sombras suaves
bxc-bg-{primary|white|light|dark|cover}
Backgrounds
bxc-overflow-{hidden|auto}
Overflow
bxc-cursor-pointer
Cursor: pointer
bxc-pointer-events-none
pointer-events: none
bxc-z-index-{10|100|1000}
Z-index utilitarios
bxc-relative / bxc-absolute / bxc-fixed / bxc-sticky
Posicionamiento
IV. Sistema de Sliders
Basta con agregar la clase .bxc-slider a un contenedor y configurar via data-bxc-*.
Se inicializa automáticamente al cargar la página. Soporta múltiples sliders por página.
Si Swiper está cargado, lo usa; si no, usa implementación propia.
Atributos disponibles
Atributo
Default
Descripción
data-bxc-slides-per-view
1
Slides visibles en desktop
data-bxc-slides-per-view-md
= desktop
Slides visibles en tablet (768-1279px)
data-bxc-slides-per-view-sm
1
Slides visibles en mobile (<768px)
data-bxc-speed
500
Milisegundos de transición
data-bxc-effect
slide
Efecto: slide | fade
data-bxc-loop
false
Bucle infinito: true | false
data-bxc-autoplay
0
Ms entre slides. 0 = no autoplay
data-bxc-pause-on-hover
true
Pausar autoplay al hover
data-bxc-arrows
true
Mostrar flechas
data-bxc-dots
true
Mostrar puntos de navegación
data-bxc-progress
false
Mostrar barra de progreso del autoplay
data-bxc-gap
0
Pixels entre slides
data-bxc-swipe
true
Soporte táctil y mouse drag
Estructura HTML mínima
<div class="bxc-slider"
data-bxc-slides-per-view="3"
data-bxc-slides-per-view-sm="1"
data-bxc-speed="600"
data-bxc-loop="true"
data-bxc-autoplay="3000"
data-bxc-arrows="true"
data-bxc-dots="true"
data-bxc-progress="true"
data-bxc-gap="16">
<div class="bxc-slider__track">
<div class="bxc-slider__slide">Slide 1</div>
<div class="bxc-slider__slide">Slide 2</div>
<div class="bxc-slider__slide">Slide 3</div>
</div>
</div>
Demo en vivo
V. Sistema de Animaciones
Animaciones CSS puras + disparadores JS vía IntersectionObserver. Combinar clase de efecto + modificadores.
Clases de efecto
Clase
Tipo
Descripción
bxc-fadeIn
Fade
Aparece (opacity 0 -> 1)
bxc-fadeOut
Fade
Desaparece (opacity 1 -> 0)
bxc-fadeInUp
Fade
Aparece subiendo desde abajo
bxc-fadeInDown
Fade
Aparece bajando desde arriba
bxc-fadeInLeft
Fade
Aparece desde la izquierda
bxc-fadeInRight
Fade
Aparece desde la derecha
bxc-slideInFromLeft
Slide
Entra deslizándose desde la izquierda
bxc-slideInFromRight
Slide
Entra deslizándose desde la derecha
bxc-slideInFromTop
Slide
Entra desde arriba
bxc-slideInFromBottom
Slide
Entra desde abajo
bxc-zoomIn
Zoom
Aparece escalando desde 0.6
bxc-zoomOut
Zoom
Desaparece escalando hacia 0.6
bxc-pulse
Loop
Pulso continuo (1 -> 1.2 -> 1)
bxc-bounce
Loop
Rebote vertical
bxc-shake
Loop
Sacudida horizontal
bxc-float
Loop
Flotación vertical suave
bxc-spinLeft
Loop
Rotación infinita antihoraria
bxc-spinRight
Loop
Rotación infinita horaria
bxc-flip
Loop
Rotación 3D en Y
bxc-tilt
Loop
Balanceo lateral
bxc-shimmer
Moderno
Brillo de fondo tipo skeleton
bxc-glow
Moderno
Resplandor pulsante (box-shadow)
bxc-blurIn
Moderno
Aparece desenfocando (filter: blur)
bxc-skewIn
Moderno
Entra sesgando (skewX + translateX)
bxc-gradientShift
Moderno
Gradiente animado (background-position)
Modificadores (parseados por JS)
Clase
Descripción
bxc-animation-duration_2Duración: 2 segundos (cualquier número)
bxc-animation-count_3Iteraciones: 3 (o "infinite")
bxc-animation-delay_1.5Delay: 1.5 segundos
bxc-opacity_0.5Opacity: 0.5 (0-1)
bxc-easing_ease-in-outTiming function CSS
bxc-showIntoViewportDispara animación al entrar en viewport
bxc-efx-{nombre}Efecto a disparar on-scroll (fadeIn, fadeInUp, slideInFromLeft, zoomIn, blurIn, skewIn, etc.)
Ejemplo completo
<!-- Animación al hacer scroll, 2s, con delay -->
<div class="bxc-showIntoViewport bxc-efx-fadeInUp
bxc-animation-duration_2
bxc-animation-delay_0.3">
Contenido
</div>
<!-- Loop infinito de pulso -->
<div class="bxc-pulse bxc-animation-duration_1.5">
🟢 En vivo
</div>
Demos en vivo
Fade In Up on Scroll
Slide from Left
Zoom In
Pulse (loop)
Float (loop)
Shimmer
Glow
VI. Librerías externas (CDN)
Librería
Versión
Uso
Swiper
14.0.6
Slider móvil. Se usa automáticamente desde bxc_slider.js si está cargado. API: new Swiper(el, config).
FancyBox
6.1.14
Lightbox para imágenes/galerías. Activar con data-fancybox="gallery" en los enlaces.
Ejemplo FancyBox
<a href="imagen-grande.jpg" data-fancybox="gallery">
<img src="thumbnail.jpg" alt="...">
</a>
<a href="otra-grande.jpg" data-fancybox="gallery">
<img src="otra-thumb.jpg" alt="...">
</a>
<!-- Fancybox v6 se inicializa automáticamente. -->
VII. Tips & Convenciones
Incluir un CSS o JS nuevo
// En inc/bxc-assets.php, dentro de bxc_enqueue_assets():
wp_enqueue_style( 'bxc-mi-estilo', get_template_directory_uri() . '/css/mi-estilo.css', array( 'bxc-main' ), BXC_VERSION, 'all' );
wp_enqueue_script( 'bxc-mi-script', get_template_directory_uri() . '/js/mi-script.js', array( 'bxc-functions-js' ), BXC_VERSION, true );
Crear un tema hijo
/*
Theme Name: Mi Proyecto
Template: bxc
Version: 1.0.0
*/
<?php
// functions.php del hijo
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'bxc-padre', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'bxc-hijo', get_stylesheet_directory_uri() . '/style.css', array( 'bxc-padre' ), '1.0.0' );
} );
Versionado de assets
Si los usuarios no ven cambios tras un deploy, sube la versión del tema en BXC_VERSION (en functions.php). Todos los assets se re-versionan automáticamente.
Seguridad
El tema aplica por defecto:
Eliminación de la versión de WP del generator
Headers X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy
REST API users endpoint restringido a usuarios logueados
XML-RPC deshabilitado
Emojis de WP desactivados (mejor rendimiento)
Nonce en todos los AJAX (bxc_vars.nonce)
Saneado de input en bxc_sanitize_ajax_input()