Tutorial de campos personalizados de WordPress Gutenberg: Explicación completa de los métodos manuales y de plugins

Campos personalizadoses una potente función para añadir metadatos adicionales a entradas y páginas en WordPress. Este enfoque le permiteAmpliación de la estructura de contenidos del sitio web(matem.) géneroProporcione más informacióncomo biografías de autores, valoraciones de productos, reseñas u otros contenidos específicos del dominio. En este artículo le explicaremos en detalle cómo crear una página de WordPress Gutenberg Añadir y mostrar campos personalizados en su sitio web, cubriendo tanto los métodos de plugin como los métodos manuales con pasos detallados y consejos.

Tutorial de campos personalizados de WordPress Gutenberg

¿Qué son los campos personalizados en WordPress?

Los campos personalizados, también conocidos como metadatos, pueden añadir información adicional específica a cada entrada o página de WordPress. Estos campos no sólo almacenan datos adicionales en la administración back-end, sino que también pueden mostrarse a los visitantes a través de las páginas front-end.

La ventaja de los campos personalizados es que se puede añadir información única al contenido para diferentes necesidades sin cambiar la plantilla o la estructura de la página. Esto es muy útil para sectores y usos específicos como el comercio electrónico, el sector inmobiliario, los blogs, etc.

Creación de campos personalizados con plugins

Para la mayoría de los usuarios de WordPress, utilizar un plugin es la forma más sencilla de implementar la funcionalidad de los campos personalizados. Tome Campos personalizados avanzados (ACF) como ejemplo, es uno de los plugins de campos personalizados más populares.

Paso 1: Instalar y activar el plug-in ACF

  1. Inicie sesión en el panel de control de WordPress.
  2. cambiar a Plugins > Añadir nuevo plugin.
  3. Escriba en la casilla de búsqueda Campos personalizados avanzadosCuando encuentre el complemento, haga clic en el botón montaje además active.
Campos personalizados avanzados

Paso 2: Crear un grupo de campos personalizados

  1. Después de activar el plugin, en el menú del tablero de WordPress vea Campos personalizados Opciones. Haga clic en él para entrar en la configuración del plugin ACF.
Imagen [3] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins
  1. En la pantalla ACF, pulse Añadir nuevo para crear un nuevo grupo de campos.
 En la pantalla ACF, haga clic en Añadir nuevo.
  1. En la pantalla Grupos de campos, introduzca un nombre y una descripción para el grupo. Cree tantos campos como necesite. Los tipos de campo más comunes sonejemplaresynuméricoyfechasycasillaetc., se puede seleccionar el tipo de campo adecuado mediante el menú desplegable.
Imagen [5] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins
  1. Especifique etiquetas, nombres y valores por defecto para cada campo. La etiqueta es el nombre que el front-end muestra al usuario, y el nombre es el identificador interno del campo.
Imagen [6] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins
Imagen [7] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins
  1. Para añadir varios campos: pulse + Añadir campo para añadir más campos personalizados al grupo de campos.

Paso 3: Establecer las reglas de posición de los grupos de campos

existe Normas de posicionamiento puede establecer reglas sobre dónde se muestran los grupos de campos. Puede controlar la visualización de grupos de campos personalizados sólo en páginas o entradas específicas.

Ajuste de las reglas de posición de los grupos de campos

Por ejemplo, establezca la regla Páginas - Iguales - Cesta de la comprapara garantizar que los campos sólo se utilicen en elcarroLa plantilla aparece en la página de la plantilla. También se pueden seleccionar más condiciones, como mostrar grupos de campos basados en categorías, tipos de página o plantillas personalizadas.

Imagen [9] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins

Paso 4: Guardar el grupo de campos

Una vez completados los ajustes, pulse Guardar cambios el grupo de campos personalizados se guardará y se activará.

Imagen [10] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins

Ahora que se ha creado correctamente un grupo de campos personalizados, estos campos pueden ser los siguientesAplicar a su página o post.

Cómo utilizar campos personalizados en un sitio web Gutenberg

Con los campos personalizados creados, la siguiente tarea es añadirlos al contenido en el editor de Gutenberg. En Gutenberg, el valor de un campo personalizado puede mostrarse en una página a través de la función Contenido dinámico.

Instale y active el plugin GutenKit

  1. El plugin GutenKit es una extensión para el editor Gutenberg que proporciona funcionalidades adicionales, incluyendo la integración de campos personalizados.
  2. Instale y active el plugin GutenKit (Pro) para utilizar más funciones de contenido dinámico en el editor Gutenberg.
Imagen [11] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins

Añadir campos personalizados con GutenKit

  1. Crear o editar unPágina o puestoEn el editor de Gutenberg, añada un GutenKit Bloque del título.
GutenKit Añadir campos personalizados
  1. En el panel de configuración del bloque, haga clic en contenido dinámico (normalmente situado en la barra de herramientas).
Imagen [13] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins
  1. opción Campos personalizados avanzados (ACF) el sistema mostrará todos los grupos de campos y campos disponibles.
Imagen [14] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins
  1. Seleccione el campo que desea visualizar en la lista desplegable y pulse el botón formato de solicitud.

Se han añadido con éxito campos personalizados a una página de Gutenberg. De este modo, se pueden crear campos personalizados que se asocian dinámicamente al contenido de la página, mostrando metadatos específicos.

Ver resultados

Después de guardar su página, puede previsualizarla para ver si los campos personalizados se muestran correctamente.

Configurar manualmente los campos personalizados (sin plugin)

Si desea añadir campos personalizados a una página Gutenberg manualmente sin utilizar el plugin, deberá editar los archivos del tema. Este método es adecuado para desarrolladores, pero no se recomienda para principiantes, ya que una manipulación incorrecta puede provocar errores en el sitio.

Activar los campos personalizados por defecto de WordPress

  1. Cuando edite una página o una entrada, haga clic en la esquina superior derecha del icono menú de tres puntos(más opciones).
Imagen [15] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins
  1. opción preferenciasy habilitarlo en la ventana emergente Campos personalizados Opciones.
Imagen [16] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins
  1. Tras guardar los ajustes, verá el panel Campos personalizados en la parte inferior de la página de edición.

Añadir campos personalizados

  1. En el panel Campos personalizados, haga clic en Añadir campos personalizados, introduzca el nombre y el valor del campo.
  2. Si se requiere más de un campo, puede continuar haciendo clic en Añadir campos personalizados para añadir más campos.
Imagen [17] - Cómo añadir campos personalizados en WordPress Gutenberg: Explicación de los métodos manuales y con plugins

Mostrar campos personalizados (manual)

  1. Abra la carpeta de su tema, busque y edite funciones.php Documentación.
  2. hacer uso de get_post_meta() obtiene el valor del campo personalizado de la base de datos.
  3. En el archivo de plantilla, utilice el echo Imprime el valor de un campo personalizado.

Ejemplo:

<?php 
$value = get_post_meta(get_the_ID(), 'su_campo_personalizado', true);
echo $value.
?>

Este código obtiene y muestra el post actual o la página de su_campo_personalizado El valor del campo.

Mostrar campos personalizados (manual)

Preguntas frecuentes

¿Cómo añadir meta campos personalizados en WordPress sin utilizar un plugin?

Puede utilizar el add_meta_box() responder cantando actualizar_post_meta() función en el funciones.php Los campos personalizados se añaden manualmente en el archivo. El método manual es adecuado para desarrolladores con experiencia en codificación, pero para la mayoría de los usuarios el métodoEl enfoque enchufable es más fácil.

¿Cómo añadir meta campos de usuario personalizados en WordPress?

De forma similar a los campos de entrada o de página, los campos de usuario personalizados pueden crearse a través de un plugin (como ACF) con la funciónNormas de posicionamientoAsígnelos a funciones de usuario específicas.

¿Cómo añado varios valores a un campo personalizado?

Al utilizar el plugin ACF, puede añadir varios valores a un grupo de campos utilizando la condición "y" y mostrarlos en el front-end.

¿Cómo puedo mostrar una barra lateral utilizando un campo personalizado?

Puede elegir mostrar los campos en la barra lateral en el grupo Campos del plugin ACF, yAjuste de la posición de la pantalla mediante reglas de posición(ACF Pro).


Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
© Declaración de reproducción
Este artículo fue escrito por: xiesong
EL FIN
Si le gusta, apóyela.
felicitaciones10 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios