• 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
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 ] [ 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

  • Mostrar mensajes en la administración de WordPress y en Gutenberg Mostrar mensajes en la administración de WordPress y en Gutenberg
  • Configura el theme Twenty Twenty de WordPress Configura el theme Twenty Twenty de WordPress
  • Mostrar el nombre del archivo que esta usando un tema sin usar plugins Mostrar el nombre del archivo que esta usando un tema sin usar plugins
  • Archivo HTML como página de inicio en WordPress Archivo HTML como página de inicio en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 5,00 de 5)
Cargando…

Interacciones del lector

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/

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

*

* Gravatar habilitado

Barra lateral primaria

Únete a DecodeCMS

Recibirás como regalo:

Fundamentos de programación:
Guía base para entender la estructura de WordPress.

Mini curso en video de:
Cómo construir un plugin de entradas populares.

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Limitar a los autores a ver su propio contenido en WordPress

Entradas relacionadas mejoradas sin plugins en WordPress

Posts relacionados sin plugins en WordPress

Agregar animaciones de aparición sin plugins en WordPress

Recientes

  • Mostrar mensajes en la administración de WordPress y en Gutenberg
  • Configura el theme Twenty Twenty de WordPress
  • Mostrar el nombre del archivo que esta usando un tema sin usar plugins
  • Archivo HTML como página de inicio en WordPress
alojamiento wordpress

© logo decode pie Copyright 2019 | Todos los derechos reservados | Política de Privacidad