Theme Reference
Theme Panel
Site settings page.
Sections
- Admin Panel — Gutenberg, admin bar, dashboard
- Security — XML-RPC, REST API, version hiding
- Extensions — Forms, SMTP, Telegram, reCAPTCHA
- WooCommerce — WooCommerce settings
- Theme Settings — Field backend, migration tools
- Search — Search configuration
Consultas
Crea selecciones reutilizables de WP_Query / get_terms(). Úsalas de dos formas: llama a un preset de consulta desde una plantilla PHP, o adjunta una Custom Query a un elemento de bucle directamente mediante atributos HTML.
Desde una plantilla PHP (Query Presets)
Crea un preset en la subpestaña Post/Term Query Presets, asígnale un Query Code y llámalo desde el código de la plantilla:
- Posts:
$q = new WP_Query(tf_get_query('your-code')); - Terms:
$terms = tf_get_term_query('your-code'); - Auto-apply: asocia un preset a un archivo de tipo de entrada o taxonomía en la pestaña «Auto-apply» y reemplazará la consulta principal automáticamente (mediante pre_get_posts), sin editar la plantilla.
Mediante atributos HTML (Custom Queries)
Nombra una consulta en la subpestaña Custom Queries / Term Queries y luego referénciala en el elemento de bucle, o escribe los argumentos en línea. Solo el primer elemento hijo se usa como plantilla repetida.
- Por nombre:
<div wp-select="catalog"> … </div>(alias:wp-query-name) - En línea:
<div wp-query="'post_type'=>'product','posts_per_page'=>8"> - Lista de términos:
<div wp-term-query="'taxonomy'=>'product_cat','parent'=>0">·wp-term-select="name" - WooCommerce:
<div wp-product-query="get_related_products(4)">
Dentro del bucle: campos
En los elementos dentro del bucle, muestra los valores con atributos de WordPress o atributos de campo ACF/SCF:
- WordPress:
wp="post-title",wp="post-image",wp="post-link",wp="term-title",wp="term-link" - ACF / SCF:
fld-text,fld-image,fld-link,fld-loop(formato alternativo:f_text,f_image,f_loop)
Compatibilidad
El runtime lee tres fuentes por orden de prioridad: presets de TF, luego Query Master (sitios importados antiguos) y luego las consultas del configurador heredado. Los presets nuevos siempre se guardan en el almacenamiento de TF; los datos existentes siguen funcionando.
Tipos de contenido y taxonomías personalizados
Registra tipos de contenido y taxonomías personalizados desde el panel: cada fila del repetidor corresponde a una llamada de registro de WordPress, sin código.
Tipos de contenido personalizados
Cada fila corresponde a register_post_type(). El campo «Name» es la clave del tipo de contenido (minúsculas latinas, sin espacios). Define las etiquetas plural/singular/menú, un icono de Dashicons, las funciones admitidas (título, editor, miniatura, …), el slug de URL del archivo, REST/Gutenberg, la disponibilidad pública, un interruptor «Archivo público» (desactiva el feed /slug/ para tipos de servicio) — y una «Página de aterrizaje del archivo» opcional que hace el archivo editable (ver la sección «Páginas de aterrizaje de archivos» más abajo).
Taxonomías personalizadas
Cada fila corresponde a register_taxonomy(). Elige jerárquica (como categorías) o plana (como etiquetas), vincúlala a uno o varios tipos de contenido y define el slug y la visibilidad en REST.
Cómo se conectan
Los nuevos tipos de contenido y taxonomías aparecen automáticamente en los desplegables de los presets de consultas. Los enlaces permanentes se actualizan al guardar. Las plantillas siguen las convenciones de WordPress: single-{type}.php, archive-{type}.php, taxonomy-{taxonomy}.php.
Páginas de aterrizaje de archivos
La URL de un archivo (el blog, el catálogo de la tienda, el archivo de un tipo de contenido personalizado) muestra una LISTA de entradas: no tiene página propia, así que normalmente no hay nada que editar en ella. ThemeForge da a cada archivo una página de aterrizaje: una página real de la lista de Páginas cuyos campos se convierten en el contenido editable del archivo (título hero, texto introductorio, imágenes, SEO), mientras el feed sigue mostrando la lista. Los editores modifican el archivo igual que cualquier otra página.
Cómo funciona
En la página de archivo de tu proyecto Webflow (archive-post, archive-product, archive-{type}) coloca los atributos de campo FUERA del bucle del listado, es decir, fuera del elemento marcado con wp="posts" / wp="products". Esos campos se adjuntan automáticamente a la página de aterrizaje en la administración y se muestran desde ella en la URL del archivo.
- Fuera del bucle funciona cualquier campo de valor único: fld-text, fld-image, fld-link, fld-bg-image, fld-editor y el resto de la familia fld-*, además de wp="post-title" y wp="post-content", que imprimen el título y el contenido de la propia página de aterrizaje.
- Los campos DENTRO del bucle conservan su significado habitual: leen cada entrada listada, exactamente como antes.
- Los sitios multilingües resuelven la página de aterrizaje por idioma automáticamente (Polylang / WPML): cada idioma edita su propia traducción de la página.
- SEO: en los archivos de tipos de contenido personalizados la página de aterrizaje también alimenta a Yoast — el archivo recibe su título SEO y una URL canónica correcta, incluso en las páginas paginadas.
Blog
El aterrizaje del blog es la «Página de entradas» nativa de WordPress. Crea una página (por ejemplo /blog/), asígnala en Ajustes → Lectura, y los campos colocados fuera del bucle en la plantilla archive-post se adjuntan a esa página, sin configuración adicional.
archive-postCatálogo de WooCommerce
El catálogo de la tienda usa la página Tienda de WooCommerce como aterrizaje. Los campos fuera del bucle de productos en la plantilla archive-product se adjuntan a la página Tienda y se muestran en la URL del catálogo.
archive-productTipos de contenido personalizados
El archivo de un tipo de contenido personalizado no tiene aterrizaje nativo en WordPress, así que ThemeForge lo añade: crea una página cuya URL coincida con el slug del archivo (por ejemplo /portfolio/ para un tipo con slug de archivo «portfolio») y selecciónala en la fila de ese tipo en el Theme Panel. La URL del archivo sigue mostrando la plantilla del feed, y la página seleccionada lleva sus campos editables. Si la plantilla de archivo de tu proyecto Webflow declara un grupo de campos, ThemeForge crea (o adopta) la página de aterrizaje automáticamente — en todos los idiomas del sitio, igual que WooCommerce crea su página Tienda.
archive-{type}La página vinculada ES DUEÑA de la URL del archivo: renombra la página y el archivo se mueve con ella (el campo de slug se oculta mientras hay una página vinculada). Sin página vinculada, el slug viene del Theme Panel. La página nunca se muestra directamente — es la superficie de edición detrás del archivo.
Conviene saber
- Los campos de grupo fuera del bucle (repetidor, grupo, contenido flexible, galería) se leen desde la página de aterrizaje igual que los campos de valor único. La única excepción es un grupo con loop-mode="0": la pestaña de Registros del proyecto lo marca como «archive-scope-unsupported».
- Un campo colocado DENTRO de un bucle de listado pertenece a las entradas listadas — decláralo en la plantilla single-{type} correspondiente para que aparezca en las pantallas de edición de esas entradas.
- Si no hay página de aterrizaje configurada, nada se rompe: el archivo se muestra exactamente como antes. Puedes añadirla en cualquier momento sin regenerar el tema.
Forms Extension
Built-in form handling.
Features
- SMTP email sending
- reCAPTCHA v3 / v2
- Telegram notifications
- Protección contra spam sin claves — activada en sitios nuevos
- Auto-reply
- JustValidate client-side validation
- CPT
tf_form_entry— submission storage - CSV export
Protección contra spam
Funciona sin claves ni servicios externos. En un sitio nuevo está activada desde el principio; en un sitio que ya recibe solicitudes, actívela con «Protección básica contra spam» en Formularios → Ajustes.
- Filtra los envíos que rellenan un campo trampa oculto, llegan sin el script de la página, se envían más rápido de lo que una persona puede escribir, llevan varios enlaces o se saltan el captcha de imagen. La frecuencia de envío desde una misma dirección está limitada.
- Los envíos filtrados no se mandan a ningún sitio: quedan 30 días en la carpeta Spam de Entradas, y uno filtrado por error puede recuperarse con «No es spam».
- Los formularios propios de WordPress los protege un interruptor aparte, «Protección contra spam para formularios de WordPress», activado por defecto: comentarios y valoraciones de productos, registro y restablecimiento de contraseña. Un comentario que un bot envía sin abrir la página se rechaza y no se guarda; uno dudoso va a Comentarios → Spam; un registro o una solicitud de restablecimiento sospechosos se rechazan pidiendo volver a intentarlo. El formulario de acceso y los usuarios conectados no se comprueban.
- El captcha de imagen habla el idioma de la página: los textos se definen por idioma y solo dibuja caracteres que el visitante puede escribir sin cambiar la distribución del teclado (letras ucranianas, rusas, latinas o cifras).
Contra bots diseñados para imitar a una persona, use reCAPTCHA con claves de Google: se activa en los mismos ajustes.
wp-field — una clave de campo que sobrevive al cambio de nombre
Por defecto, un campo de formulario se envía con la etiqueta que escribiste en Webflow. Si la renombras más tarde, la plantilla del correo y el mapa de entrega que la referenciaban dejan de coincidir, y en silencio: la solicitud sigue llegando. Marca el campo (o su contenedor con la etiqueta) y la clave dejará de depender del texto visible.
<input type="tel" wp-field="phone">
<div class="row" wp-field="phone">
<label for="tel">Teléfono</label>
<input type="tel" id="tel">
</div>La clave se escribe en el campo al generar el tema, así que después no hay nada que configurar. Usa letras latinas, dígitos, _ y -; los nombres reservados por el sistema de formularios se rechazan y quedan en el registro del proyecto. Los campos cuyo nombre fija WordPress o WooCommerce — comentarios, reseñas, pago — se marcan con sus propias etiquetas.
Motor de campos personalizados
El tema almacena los campos personalizados mediante un motor compatible con ACF. Dos motores intercambiables comparten los mismos campos y datos, por lo que puedes cambiar sin perder valores.
Dos motores, un formato de datos
¿Secure Custom Fields es el predeterminado: un plugin gratuito de WordPress.org que se actualiza solo y ofrece todos los tipos de campo de ACF PRO, sin licencia. ¿Prefieres tu propio ACF PRO con licencia? Instálalo y el tema lo detecta automáticamente.
Opciones multilingüe
Soporte multilingüe integrado para opciones del tema y campos de página. Se activa automáticamente con Polylang o WPML.
Cómo funciona
El tema detecta automáticamente Polylang o WPML y carga la integración correspondiente.
- Detección automática: Polylang (pll_current_language) o WPML (ICL_SITEPRESS_VERSION)
- Almacenamiento por idioma: cada idioma tiene su propio conjunto de valores de opciones
- Fallback: los campos vacíos heredan valores de «Todos (predeterminado)»
- Banderas personalizadas: subir banderas propias desde la Biblioteca de medios
Gestión de opciones por idioma
Use el selector de idioma en la página de opciones para editar los valores de cada idioma.
| Action | Description |
|---|---|
| «Todos (predeterminado)» | Valores maestros. Se usan como fallback cuando un idioma no tiene valor propio. |
| Edición por idioma | Cambie al idioma para editar sus valores. Los campos vacíos heredan de «Todos». |
| Herencia | Deje un campo vacío en la página del idioma para usar el valor «Todos (predeterminado)» en el frontend. |
Traducción automática de campos
Traducción automática integrada de valores de campos. Disponible en la barra lateral en páginas de edición y opciones.
- Botón «Traducir» junto a cada campo de texto
- «Traducir todo» en la barra lateral — traduce todos los campos a la vez, incluidas pestañas y repetidores ocultos
- Los campos de enlace se omiten automáticamente (detección por nombre y patrón URL)
- No requiere clave API — usa el endpoint gratuito de Google Translate
- Campos WYSIWYG (texto enriquecido) soportados — se preserva la estructura HTML
Protected Files
These files are preserved during theme updates.
user-functions.php— Custom PHP functionscss/user.css— Custom CSS stylesjs/user.js— Custom JavaScript
Orden de carga CSS: main.css → themeforge.css → user.css.
Import System
Data and media import from pages.json and menus.json.
Import Order (Important!)
- Step 1: Upload images (import_images)
- Step 2: Import data (import_data)
Images must be uploaded before data import.
Import Actions
| Action | Description |
|---|---|
/?action=import_images | Upload all media files |
/?action=import_data | Import all field data |
/?action=import_page_media&slug=X | Upload media for a specific page |
/?action=import_page_data&slug=X | Import data for a specific page |
/?action=import_menu_data | Import all menus |
Fuente del título de página
Al crear páginas de WordPress durante la importación, el título se toma del HTML de origen en orden de prioridad:
<meta property="og:title">— Open Graph<title>— HTML title tag- Nombre de la plantilla (ej. "About" de page-about)
Image Filename Resolution
The import system resolves image filenames using a fallback chain:
- URL-decode filename
- Strip Webflow hash prefix
- sanitize_file_name() + DB LIKE query
Importación por idioma
Añada &lang=xx para importar datos en un idioma específico. El metabox de importación detecta automáticamente el idioma de la página.
/?action=import_page_data&slug=theme-options&lang=en| Contexto | Description |
|---|---|
| Opciones del tema | Guarda las opciones con un sufijo de idioma (options_LOCALE_field). Usa el selector de idioma en la página de Opciones. |
| Páginas | Busca o crea la traducción de Polylang e importa los datos en ella. La página original se encuentra independientemente del filtro de idioma. |
| Metabox de importación | En páginas: detecta el idioma del post (pll_get_post_language). En opciones: lee ?lang= de la URL. |
Referencia para desarrolladores
Detalles técnicos para desarrolladores y asistentes de IA. Atributos HTML, tipos de campos, sistema de menús, hooks JavaScript, funciones auxiliares.
Field Types
Mapeo de tipos de campo ACF / SCF. Cada tipo de atributo corresponde a un elemento HTML específico.
| ACF / SCF Type | Element | Attribute Example |
|---|---|---|
| text | div, span, p, h1-h6 | fld-text="name" |
| textarea | div, p | fld-area="name" |
| wysiwyg | div | fld-editor="name" |
| image | img (src) | fld-image="name" |
| link / url | a (href) | fld-link="name" |
| true_false | wrapper div | fld-show="name" |
| color_picker | any (bg) | fld-bg-color="name" |
| repeater | wrapper div | fld-loop="name" |
| group | wrapper div | fld-group="name" |
| gallery | wrapper div | fld-gallery="name" |
| tab | container div | fld-tab="name" |
Field Groups (wp-fields-group)
The wp-fields-group attribute creates field groups in WordPress admin.
Usage
<div wp-fields-group="Section Name"> ... fields ... </div>- Wraps fields into a named group
- Multiple wp-fields-group groups per page supported
- On theme-options: all groups merge into one container
- Without wp-fields-group: fields generate PHP only
wp-show-editor
Mantener visible el editor de texto de WordPress en páginas con campos personalizados.
Uso
<body wp-show-editor wp-fields-group="Section">- Colocar en la etiqueta <body> — por defecto, el editor se oculta en plantillas de página con campos
- Usar junto con wp-fields-group cuando la página necesita campos personalizados Y the_content()
- No se aplica a plantillas de entrada (single, single-product) — el editor siempre permanece visible
Compatibilidad de datos ACF / SCF
Secure Custom Fields es un fork gratuito y compatible de ACF PRO, mantenido en WordPress.org. Es idéntico a nivel de API y almacena los valores exactamente en el mismo lugar, por lo que SCF, ACF PRO y cualquier dato ACF existente son totalmente intercambiables.
Los mismos campos, los mismos datos
Cambiar de motor nunca migra ni reescribe tu contenido: ambos motores leen las mismas claves de campo de wp_postmeta / wp_options. Los datos ACF existentes de otro tema o de una configuración manual se reconocen por el nombre del campo, sin importar qué motor los creó.
Datos ACF existentes y de terceros
Si ya existen datos ACF (o SCF) — de otro generador, un tema anterior o un grupo de campos manual — el tema los lee tal cual por nombre de campo. Nada que importar ni convertir; los valores aparecen en el editor bajo el motor que esté activo.
Hooks de JavaScript
Funciones callback personalizadas disponibles en custom.js. El tema verifica estas funciones y las llama en el momento adecuado.
Hooks generales
| Hook | Cuándo se llama |
|---|---|
tf_webflow_init() | Después de la carga AJAX del contenido (reinicializar interacciones Webflow) |
tf_after_filter() | Después de cargar los resultados del filtro AJAX |
Hooks de WooCommerce
| Hook | Cuándo se llama |
|---|---|
tf_cart_data_modify(data) | Antes de añadir al carrito (modificar datos del carrito) |
tf_after_add_to_cart() | Después de añadir el producto al carrito |
tf_after_cart_data_modify() | Después de modificar los datos del carrito |
tf_after_variation_change() | Después de cambiar la variante del producto |
tf_after_recalc_checkout() | Después de recalcular los totales del pedido |
Defina estas funciones en custom.js. Los nombres antiguos con prefijo wfp_ también son compatibles.
Consultas personalizadas
Cree consultas WP_Query y de términos a través de la interfaz del Panel del tema — sin código.
Consulta de entradas
Configuración en Panel del tema → Custom Queries. Cada consulta contiene: nombre, tipo de entrada, entradas por página, paginación, filtros de taxonomía.
$args = select_query_by_name('my_query');
$query = new WP_Query($args);Consulta de términos
Configuración en Panel del tema → Custom Term Queries. Cada consulta contiene: nombre, taxonomía, hide_empty, orderby, order.
$args = select_term_query_by_name('my_terms');
$terms = get_terms($args);Funciones auxiliares
Funciones PHP disponibles en plantillas y user-functions.php.
General
| Función | Devuelve |
|---|---|
tf_default_thumbnail() | URL de imagen predeterminada (configurable en Ajustes del tema) |
tf_declense($n, $f1, $f2, $f5) | Forma plural eslava: elegir la forma correcta de la palabra para un número |
tf_num_decline($n, $titles) | Plural con prefijo numérico. Acepta array o cadena separada por comas. |
search_context($chars) | Mostrar extracto de texto alrededor de la coincidencia de búsqueda |
device_is($type) | Detectar dispositivo: phone, tablet, mobile, desktop, ios, android |
WooCommerce
| Función | Devuelve |
|---|---|
is_sale() | Si el producto actual está en oferta |
get_price($type, $format) | Precio del producto: "price", "price_sale", "price_regular". Formato: "default", "extreme", "range" |
get_cart_info($info) | Totales del carrito: total_without_discount, total_with_discount, discount_amount, discount_percentage, coupon_discounts |
get_cart_volume() | Volumen total del carrito en metros cúbicos |