Respaldado por Awesome Motive.
Más información en nuestro Blog de los Halcones Marinos.

Campos personalizados avanzados en WordPress: Guía definitiva

Campos personalizados avanzados

Los campos avanzados de WordPress son útiles para los propietarios de sitios, ya que permiten almacenar datos adicionales y potencian la funcionalidad de plugins y temas. Los campos personalizados avanzados permiten añadir información única. Por ejemplo, un plugin de WooCommerce utiliza campos para detalles del producto como el precio y el color. Un plugin de eventos utiliza campos para la ubicación y hora del evento. Los campos personalizados te dan la flexibilidad de almacenar datos relevantes.

Los campos personalizados de WordPress permiten a los usuarios incluir, almacenar y mostrar datos adicionales relacionados con el contenido. Funcionan como contenedores de metadatos y potencian diversas funcionalidades en plugins y temas. Además, los usuarios pueden crear campos personalizados adaptados a sus requisitos específicos, lo que facilita la gestión personalizada de datos en WordPress.

En este blog, exploraremos cómo incorporar campos personalizados avanzados en el diseño de WordPress en varias etapas del desarrollo de WordPress

¿Por qué necesita campos personalizados en WordPress?

Campos personalizados avanzados

Ya sea para gestionar una tienda de comercio electrónico con WooCommerce o para programar eventos con un plugin de calendario, los campos personalizados ofrecen una solución versátil para adaptar tu sitio web a tus necesidades específicas. Te permiten almacenar datos adicionales más allá de los campos de entrada o página estándar, lo que te permite crear diseños de contenido más dinámicos y visualmente atractivos.

Lea también: 40+ Los mejores plugins de WooCommerce

Las principales ventajas de utilizar campos personalizados son:

Almacenamiento de metadatos: Almacena metadatos relevantes para posts, páginas o tipos de post personalizados.

Visualización de contenidos mejorada: Presente los contenidos de forma organizada y estéticamente agradable.

Integración de plugins: Se integra perfectamente con plugins populares para SEO, comercio electrónico, almacenamiento en caché, eventos, seguridad, búsqueda de WordPress y mucho más.

Experiencia de usuario personalizada: Adapte la experiencia de usuario de su sitio web para pequeñas empresas mostrando contenido específico basado en campos personalizados.

Flexibilidad a prueba de futuro: Adáptese fácilmente a las cambiantes necesidades de contenido sin modificar la estructura central de WordPress.

¿Tiene un sitio WordPress de aspecto desordenado que está ahuyentando a su negocio?

Nuestros experimentados diseñadores pueden renovar el diseño de su sitio con campos personalizados avanzados para WordPress

¿Qué son los campos personalizados incorporados en WordPress?

Campos personalizados avanzados

Añadir campos personalizados en WordPress es un proceso sencillo y eficaz, que mejora la organización y funcionalidad del contenido. Con opciones disponibles en los editores clásicos y de bloques, habilitar los campos personalizados integrados en WordPress es sencillo y permite introducir sin problemas pares clave/valor para mejorar la personalización.

Así es como debes hacerlo:

Configuración del editor clásico: Accede a Opciones de pantalla y habilita los campos personalizados para la interfaz del editor clásico.

Más información: WordPress 6.2: Editor de sitios renovado, modo de escritura sin distracciones e insertador de bloques actualizado

Campos personalizados avanzados

Configuración del editor de bloques: Navegue hasta el área Opciones y active los campos personalizados para el editor de bloques.

Acceda a los campos personalizados: Localice la sección de campos personalizados debajo de su contenido una vez habilitado.

Introducir datos: Introduzca la información de su campo personalizado utilizando pares clave/valor.

Funcionalidad incorporada: Aunque funcional, el método nativo puede carecer de facilidad de uso. Compruebe para optimizar,

Tenga en cuenta los plugins: Muchos optan por el plugin Advanced Custom Fields para una experiencia más intuitiva.

Añadir sus campos en Campos personalizados avanzados: Guía paso a paso

Advanced Custom Fields (ACF) ofrece una versión premium accesible y asequible. La versión gratuita cubre la mayoría de las necesidades básicas con varios tipos de campos y funciones fáciles de usar. 

Sin embargo, la versión Pro introduce funciones prácticas como campos repetidores para gestionar varias instancias de datos por entrada, bloques ACF para Gutenberg, campos de contenido flexibles para diseños personalizados y campos de galería para cargar varias imágenes. ACF PRO cuesta a partir de 49 $ al año para un solo sitio, lo que ofrece flexibilidad para actualizar según sea necesario.

Tanto si utilizas la versión gratuita como la pro, para añadir tus campos seguirás este método -

Crear un nuevo grupo de campos

Campos personalizados avanzados

Después de instalar y activar la versión accesible de Advanced Custom Fields desde WordPress.org, dirígete a Custom Fields > Add New para crear tu primer Grupo de Campos.

Un "Grupo de campos" es un grupo de campos personalizados que se muestran juntos en el panel de control de WordPress.

En este ejemplo, crearemos un grupo de campos con cinco campos personalizados.

Dale un nombre a tu grupo de campos y elige dónde debe aparecer. Para las entradas de blog, manténgalo como el Post por defecto. Pero si lo quieres en otro lugar, como con un tipo de entrada personalizada, puedes cambiarlo. También puedes añadir reglas para mostrar tus campos en diferentes lugares.

Más información: ¿Cómo desarrollar un sitio web WordPress personalizado?

Añadir campos personalizados

Campos personalizados avanzados - nuevo grupo de campos

Para continuar, seleccione el botón + Añadir campo para incorporar su campo personalizado inicial. Aunque se le presentará una plétora de opciones, es opcional completar todos los campos.

Las dos selecciones principales son:

Etiqueta de campo: Es el nombre visible en el editor y sirve de base para el Nombre de campo utilizado en el código. La modificación del nombre del campo es opcional.

Tipo de campo: Elija el tipo de datos que desea recopilar, como Número para datos numéricos o Correo electrónico para direcciones de correo electrónico.

Campos personalizados avanzados

Para el primer campo, opte por el tipo de campo Botón de radio. A continuación, introduzca las opciones disponibles para la selección del botón de radio en el cuadro Opciones. Además, ajuste la configuración como requisito de campo y valor predeterminado según desee.

Campos personalizados avanzados

Para otro escenario, considere un campo personalizado para capturar la distancia de una carrera. En este caso, seleccione el tipo de campo Número. Puede incluir la unidad de distancia para facilitar su uso y establecer valores mínimos y máximos con fines de validación.

Campos personalizados avanzados

Repita estos pasos para cualquier campo personalizado adicional que desee incluir. Una vez completada, su configuración debería parecerse al ejemplo proporcionado.

Campos personalizados avanzados

Configurar y publicar 

Para completar el proceso, desplácese hasta el cuadro Configuración. Aquí puedes ajustar cómo aparecen tus campos en el editor de WordPress.

Campos personalizados avanzados

Por lo general, se puede seguir con los valores predeterminados, pero no dude en personalizar si es necesario. Por ejemplo, puedes mostrar tus campos personalizados encima del editor normal de WordPress. Cuando estés satisfecho con la configuración, pulsa Publicar para activar el grupo de campos.

Lea también: Arreglar WordPress "Publishing Failed. La respuesta no es una respuesta JSON válida". Problema

Ampliar información en el editor de WordPress 

Campos personalizados avanzados

Después de publicar tu grupo de campos, tus campos personalizados estarán fácilmente disponibles al crear una nueva entrada. Se integrarán perfectamente debajo del editor, tanto en el editor clásico TinyMCE como en el nuevo editor de bloques.

Campos personalizados avanzados en el módulo de acceso

¡Enhorabuena! Ha llegado a la mitad de su recorrido por los campos personalizados avanzados. Ahora, vamos a abordar un paso crucial: mostrar los datos de sus campos personalizados en la parte frontal de su sitio web.

A pesar de añadir campos personalizados a las entradas de tu blog, éstas siguen apareciendo como entradas normales del front-end. 

¡Cambiemos eso!

Aquí tiene tres métodos para mostrar los datos de sus Campos personalizados avanzados:

Archivos de plantilla del tema: Lo mejor para aquellos que se sientan cómodos con los aspectos técnicos y trabajando con archivos de plantilla. También puede consultar las plantillas AI para el mismo.

Código corto: Simple y adecuado para insertar datos de campo en entradas específicas, pero requiere esfuerzo manual.

Elementor Pro: Una opción premium que elimina el trabajo con PHP, ideal si prefieres un editor visual.

Elija el método que mejor se adapte a sus necesidades o explórelos todos: ¡usted decide!

Lea también: Gutenberg Vs. Elementor: ¿Quién ganará en 2024?

Campos personalizados avanzados con plantilla de temas

Campos personalizados avanzados

El primer método para mostrar la información de tus campos personalizados consiste en añadir funciones PHP de Advanced Custom Fields directamente a los archivos de plantilla de tu tema hijo. Aunque es un poco avanzado, garantiza una visualización coherente de los campos personalizados.

Localice y edite el archivo de plantilla única para su tipo de entrada (por ejemplo, single.php o content-single.php para el tema TwentyNineteen).

Utilice la función the_field() para mostrar información de campo, combinando el marcado HTML con PHP.

Colócalo encima del contenido normal de la entrada en el archivo de plantilla de tu tema, ¡y listo! Los datos de su campo personalizado aparecerán perfectamente sobre el contenido de WordPress.

Leer más: ¿Cómo convertir HTML a WordPress tema?

Campos personalizados avanzados con un código corto

¿Busca una forma más sencilla de mostrar los datos de sus campos personalizados? Considere el uso de shortcodes. Simplemente inserte el shortcode cada vez que desee mostrar un campo personalizado. Aunque es práctico, requiere un esfuerzo manual sin automatización.

Aquí tienes un shortcode de ejemplo:

Campos personalizados avanzados - código corto

Insertar esto en el editor de WordPress producirá la misma apariencia frontend que el método de plantilla de tema.

Campos personalizados avanzados

Conclusión

El dominio de los campos personalizados avanzados abre un sinfín de posibilidades para mejorar la funcionalidad y la presentación del contenido de su sitio web en WordPress. Ya seas propietario de una tienda de comercio electrónico, organizador de eventos o cualquier persona que desee personalizar su sitio, los campos personalizados te permiten almacenar y mostrar datos únicos sin problemas. 

Al aprovechar la interfaz intuitiva del complemento, los tipos de campo y las opciones de integración, puede crear diseños visualmente atractivos, agilizar la gestión de contenidos y ofrecer experiencias de usuario personalizadas. Los campos personalizados proporcionan la flexibilidad necesaria para adaptarse a medida que evoluciona su sitio web sin necesidad de modificar la estructura principal. Aproveche el poder de los campos personalizados avanzados y abra un mundo de personalización que elevará su sitio de WordPress a nuevas cotas de profesionalidad y sofisticación.

Entradas relacionadas

Instalar WordPress en Windows 11 te permite crear un entorno de desarrollo local para construir

Encontrarse con "errores de actualización y publicación de WordPress" puede ser una fuente de inmensa frustración para los usuarios de WordPress.

WordPress y Umbraco son dos sistemas de gestión de contenidos líderes que facilitan la creación de

Ahana Datta 26 de abril de 2024

Umbraco vs WordPress: La elección correcta para su gestión de contenidos

WordPress y Umbraco son dos sistemas de gestión de contenidos líderes que facilitan la creación de

WordPress
Ahana Datta 26 de abril de 2024

Cómo instalar WordPress localmente en Mac

Si eres un usuario de Mac que aspira a crear y gestionar un sitio web WordPress autoalojado

WordPress
Ahana Datta 26 de abril de 2024

Desarrollo Offshore de WordPress: Todo lo que necesita saber

El desarrollo deslocalizado de WordPress es una tendencia en rápido crecimiento impulsada por empresas que buscan soluciones rentables sin

WordPress

Empieza con Seahawk

Regístrate en nuestra app para ver nuestros precios y obtener descuentos.