• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

Montando Sites

Recursos y Tutoriales de Desarrollo Web con WordPress y Genesis Framework

  • Empieza aquí
  • Tutoriales

Crear Campos Personalizados o Custom Fields con WordPress y sin Plugins

10 octubre, 2019 por Gerber Cucurell

De la misma forma que en el editor de WordPress encontramos un campo de título, un editor de texto, una imagen destacada o un extracto, los campos personalizados (o Custom Fields) nos permiten añadir información adicional personalizada a cualquier parte de nuestras páginas o entradas.

INFO: Para entender mejor éste tutorial es recomendable tener algunos conocimientos básicos de PHP y dominar la estructura de archivos de WordPress.

¿Para que se utilizan los Campos Personalizados en WordPress?

El patrón clásico para enseñar a utilizar Campos Personalizados es el de crear una ficha de información para un curso, un libro o una receta, donde se añade, por ejemplo: título, descripción, fechas, autor, duración, color, etc.

Pero los Campos Personalizados nos permiten ir muchos más lejos: puedes incrustar fragmentos de código en el head, agregar clases CSS para páginas concretas, añadir imágenes adicionales fuera del contenedor principal, etc. Imaginación al poder.


Cómo crear los Campos Personalizados en 3 pasos

Para crear Campos Personalizados hay dos formas: con un plugin llamado Advanced Custom Fields o con WordPress nativo. No es que el plugin sea un atajo especialmente sencillo, pero sí es muy completo. En cualquier caso, ahora nos vamos a centrar en los Custom Fields nativos de WordPress, que son algo más sencillos.

01. Activa los Campos Personalizados en el editor de WordPress

En Gutenberg le das al botón más herramientas > Opciones y en Paneles Avanzados activas Campos Personalizados. Se va a recargar la página y los Campos Personalizados te van a aparecer a la parte inferior del editor.

Campos Personalizados en Gutenberg

02. Añade un Campo Personalizado

Creas un nombre para el campo (en minúsculas y sin tildes ni espacios) y le das un valor. Luego haces click en “Añadir campo personalizado” y finalmente le das a “Publicar” o “Actualizar” la página (o entrada).

Una vez creado el campo se te quedará guardado y lo podrás seleccionar des de otras páginas sin tener que escribirlo de nuevo.

Seleccionar Campo Personalizado

03. Muestra el valor en el Front End

Tu campo personalizado ya está guardado en la base de datos, ahora vamos a ver como mostrar su valor en el front end. El código básico es el siguiente:

echo get_post_meta( get_the_ID(), 'campo_de_ejemplo', true ); 

Lo único que hace este código mostrar el valor del campo_de_ejemplo. Ahora tienes que decidir dónde ponerlo. Si utilizas Genesis Framework esto es sencillo utilizando hooks de PHP. Si utilizas cualquier otro theme tendrás que buscar el archivo donde quieras que se muestre: page.php, single.php, archive.php, etc, e incrustar el código dónde te interese.


Cómo actualizar valores

Si cambias el valor del campo personalizado y le das a “actualizar página” directamente, no te va a actualizar nada. Después de hacer el cambio le tienes que dar al botón “Actualizar” situado debajo del nombre del campo, esperar a que toda la caja se ponga de color amarillo y finalmente darle a actualizar página.

Actualizar Custom Fields

¿Se me van a borrar los Campos Personalizados si cambio de Theme?

No. Aunque dejarás de verlos quedarán guardados en la base de datos. Lo único es que tendrás que hacer es volver añadir el código que muestra el valor de los campos en el nuevo Theme para que vuelvan a aparecer.


Destacado:
Consigue un 100 en Google PageSpeed Insights con WordPress

Archivado en:Campos personalizados, WordPress

Acerca de Gerber Cucurell

Desarrollador Web especializado en WordPress + Genesis Framework, Director de Arte y Técnico Superior en Multimedia Interactiva. Más info…

Barra lateral primaria

Categorías

  • CSS
    • Iconos
    • Menus
    • Retículas y Columnas
  • Genesis Framework
    • Custom Posts
    • Footer
    • Header
    • Imágenes Destacadas
    • Page Template
    • Widgets
  • Javascript
  • SEO
    • 404
    • Imágenes
    • Optimización Web
  • WordPress
    • Admin
    • Campos personalizados
    • Clases CSS
    • Google Fonts
    • Gutenberg
    • PHP
    • Plugins
    • Search
    • Shortcodes
    • Temas de WordPress
    • Traducciones
    • WPML
  • Recursos rápidos
  • Info
  • Aviso Legal
  • Contacto

Usamos cookies para asegurar que te damos la mejor experiencia en nuestra web. Si continúas usando este sitio, asumiremos que estás de acuerdo con ello.Aceptar