• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Cómo usar los campos Personalizados en WordPress

Cómo usar los campos Personalizados en WordPress

Campos personalizados en WordPress

[ 22 agosto 2017 ] [ Actualizado: 3 mayo 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

WordPress por defecto tiene campos predeterminados (título, imagen destacada, etc ) para el contenido de las entradas y páginas, sin embargo podemos añadir información extra a través de los custom fields o campos personalizados.

 

1- Generalidades

Para ver la sección de campos personalizados, lo puedes hacer desde la edición o creación de una entrada o página, en la parte superior en las opciones de pantalla, tal como se muestra en la siguiente imagen.

Pantalla de contenido de entradas con la opción de habilitar campos personalizados

 
Al habilitar los campos personalizados verás que te aparece una nueva sección en la parte inferior.

Sección de campos personalizados en la pantalla de edición de entrada

 
Los campos personalizados constan de dos elementos: nombre ( que vendría ha ser el key) y valor

Algunos plugins o themes usan estos campos personalizados para guardar valores por cada entrada o página, por lo que es posible que veas algunos keys o nombres por defecto al cargar esta sección.

 

2- Crear campos personalizados

Para crear nuevos campos personalizados simplemente llena el nombre y valor, por ejemplo supongamos que estas creando contenido para cursos, entonces tendrás que colocar información adicional de:

  • Fecha de inicio
  • Profesor
  • Nivel
  • Horas

 
Tu entrada con campos adicionales quedará tal como se muestra en la siguiente imagen:

Sección de campos personalizados con nuevos campos creados

 
Estos campos que has agregado en la entrada anterior, estarán disponibles cuando agregues o edites una nueva entrada o página, tal como se muestra en la siguiente imagen:

Muestra un campo de selección en donde se pueden seleccionar los campos ingresados

 

Los campos personalizados se almacenan a nivel de base de datos en la tabla wp-postmeta

 

3- Mostrar los campos personalizados

Por defecto, estos nuevos campos que has agregado no serán visibles en el front-end de tu sitio, por lo tanto, si quieres mostrarlos, tendrás que hacer algunas modificaciones a los archivos de tu theme.

Para hacer modificaciones a los archivos de tu theme, te sugiero crear un Child Theme.

Para obtener el campo personalizado usaremos la función get_post_meta() del core de WordPress.

Por ejemplo si quieres obtener el campo personalizado de Profesor de una determinada entrada, dentro del bucle de las entradas puedes usar el siguiente código PHP:


$cf_profesor = get_post_meta( get_the_ID(), 'Profesor', true );

if ($cf_profesor){
  echo "Profesor: ".$cf_profesor;
}

En el código anterior:

  • Dentro de la función get_post_meta usamos tres parámetros.
  • Ya que todo este código estará en el bucle, la función get_the_ID(), devuelve el ID del post actual
  • El nombre del campo personalizado es case sensitive, por lo que tiene que se escrito exactamente igual a como fue definido
  • Ya que los campos personalizados pueden almacenar también arrays, el valor true indica que sólo devolveremos un valor
  • Luego asignamos el valor devuelto a una variable llamada $cf_profesor
  • Hacemos una validación para sólo mostrar el valor de la variable si esta tiene contenido

 

Cuando hablamos de bucle, nos referimos a un código PHP que usa WordPress para mostrar una o varias entradas, para aprender más, revisa the loop.
En el código anterior se usa directamente la cadena “Profesor: ” para mostrarlo en el front-end, si tu sitio maneja múltiples idiomas, entonces debes usar las funciones de traducción de WordPress.

 

4- Ejemplo de modificación en theme Twenty Seventeen

Si estas usando el theme Twenty Seventeen y quieres mostrar los campos personalizados en el detalle de las entrada, entonces una primera idea sería ubicar el archivo single.php

El archivo single.php tiene el bucle pero muestra el contenido de una entrada haciendo referencia al archivo : template-parts/post/content.php, entonces las modificaciones tienes que hacerlas en este último archivo.

En el archivo content.php en la línea 71 aproximadamente, dentro de la condición que usa la función is_single(), puedes agregar el siguiente código:


$cf_fechaInicio = get_post_meta( get_the_ID(), 'Fecha-Inicio', true );
$cf_nivel = get_post_meta( get_the_ID(), 'Nivel', true );
$cf_profesor = get_post_meta( get_the_ID(), 'Profesor', true );
$cf_horas = get_post_meta( get_the_ID(), 'Horas', true );

if ($cf_fechaInicio) echo "Fecha Inicio: ".$cf_fechaInicio."<br>";
if ($cf_profesor) echo "Profesor: ".$cf_profesor."<br>";
if ($cf_nivel) echo "Nivel: ".$cf_nivel."<br>";
if ($cf_horas) echo "Horas: ".$cf_horas."<br>";

 
El contenido de los campos personalizados te aparecerá al final de cada entrada, tal como se muestra a continuación:

Mostrar campos personalizados en el front-end theme Twentyseventeen

 
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Campos personalizados en productos de WooCommerceCampos personalizados en productos de WooCommerce
  • Formulario de login mejorado sin plugins en WordPressFormulario de login mejorado sin plugins en WordPress
  • Manejo de Sesiones en WordPressManejo de Sesiones en WordPress
  • Diferencias entre entradas y páginas WordPressDiferencias entre entradas y páginas en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (6 votos, promedio: 4,83 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. joaquin

    12 marzo, 2019

    Hola John¡¡
    Muy bueno el post y el blog en general, que acabo de descubrir. Aunque veo que hay un nivel bastante superior a mis conocimientos acabas de ganar un fiel seguidor.

    Un saludo

  2. daniel

    24 septiembre, 2019

    Hola y si quiero mostrar todos los post en una solo pagina y que me muestre todos los campos personalizados de cada post como seria el código.

    • Jhon Marreros Guzmán

      28 septiembre, 2019

      Hola, en ese caso tienes que buscar el archivo .php de tu theme que lista las entradas, posiblemente sea: category.php, archive.php o index.php, puedes revisar: https://decodecms.com/jerarquia-de-archivos-de-plantilla-en-wordpress/

  3. Elena

    28 marzo, 2020

    Buenas tardes, necesito visualizar estos campos personalizados en el escritorio, cuando visualizo todas las páginas, y poner como columna los campos personalizados y que entren dentro del criterio de búsqueda.

    • Jhon Marreros Guzmán

      29 marzo, 2020

      Hola, revisa el siguiente enlace para agregar campos adicionales al listado de entradas: https://support.advancedcustomfields.com/forums/topic/adding-acf-fields-to-post-listing-wp-adminedit-php/ , es usando el plugin ACF, pero es similar con campos personalizados de WordPress.

  4. IngenieriaReal.com

    3 mayo, 2020

    Muchas gracias me ha servido de mucho, ¿se puede facilitar esto con algún plugin recomendado?

    • Jhon Marreros Guzmán

      3 mayo, 2020

      Hola, podrías probar Advanced Custom Fields ( ACF) , revisa este artículo relacionado: https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/

  5. José Luisataxi

    27 septiembre, 2020

    Hola, muchas gracias por compartir tus conocimientos, me ayudas con una consulta, he logrado mostrar en mis productos los campos adicionales, pero cuando ya hago una compra estos datos no llegan en mi pedido, me falta algo por hacer? si puedes ayudarme te agradezco mucho.

    UN fuerte abrazo

    • Jhon Marreros Guzmán

      27 septiembre, 2020

      Hola, revisa el siguiente enlace para agregar información adicional a los correos de órdenes de WooCommerce: https://docs.woocommerce.com/document/add-a-custom-field-in-an-order-to-the-emails/

  6. Francisco

    28 noviembre, 2020

    Hola!

    Excelente post! Pero tengo una gran inquietud. Cuando voy a “Opciones de pantalla” (como explicas en el punto N° 1- Generalidades) no encuentro la opción de “Campos personalizados”, por lo tanto no puedo habilitarla y no puedo trabajar con ellos.
    Sabes por qué puede pasar esto? Cómo puedo solucionarlo?

    Espero puedas ayudarme.
    Desde ya muchísimas gracias.
    Abrazo!

    • Jhon Marreros Guzmán

      3 diciembre, 2020

      Hola, ingresa a una entrada específica, si estas usando Gutenberg posiblemente tengas que usar el icono de tres botones verticales (en la parte superior derecha), luego en opciones, en la parte final del popup en la sección de Paneles avanzados, verás que aparece para que habilites campos personalizados.

  7. Mauricio

    18 abril, 2021

    Hola,.muy práctico tu ejemplo. Ahora, si es posible, me puedes guiar para mostrar un promedio de un campo personalizado compuesto por un número. Específicamente sacar del promedio de ese campo perteneciente a varios CPT.. muchas gracias. Suerte.

    • Jhon Marreros Guzmán

      21 abril, 2021

      Hola, de manera general, tendrías que hacer un bucle para recorrer todas las entradas y realizar el cálculo del promedio.
      Sin embargo creo que lo más práctico sería que guardes el promedio de manera global en wp_options, y luego lo actualices cada vez que guardes una entrada.

  8. Aroa

    23 junio, 2021

    Hola, muy bien artículo. ¿Si quisiera hacer esto mismo pero en la página de producto. que archivo .php debería modificar? Gracias

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Mostrar mensaje al seleccionar envío Recogida en Local en WooCommerce

Tareas automáticas con wp-cron en WordPress

¿Cómo usar Dashicons en WordPress?

Insertar Font Awesome en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2022 Todos los derechos reservados