La guía esencial para los campos personalizados de WordPress

Si hay una característica de WordPress que lo distingue de otros sistemas de administración de contenido (CMS), es la personalización. Los campos personalizados en WordPress son una parte integrada del CMS que le permite expandir no solo los metadatos y la información que muestra, sino también cambiar completamente la funcionalidad y utilidad de una publicación o página. Queremos ayudarlo a comprender los fundamentos. Vamos a discutir qué es un campo personalizado, por qué son útiles y proporcionar algunos ejemplos del mundo real de cómo se utilizan.

Suscríbete a nuestro canal de Youtube

¿Qué son los campos personalizados de WordPress?

En resumen, los campos personalizados de WordPress le brindan una forma de agregar elementos específicos a las páginas. Puede ser un tipo específico de imagen o título o biografía del autor, tal vez una calificación o incluso algo como, como dice la entrada del Codex en los campos personalizados, estado de ánimo, lectura actual, escuchando o cuadros meteorológicos.

Estos campos componen lo que se llama metadatos para su publicación (básicamente cualquier cosa que no esté incluida en el contenido principal de su artículo). De forma predeterminada, WordPress tiene metacajas para información genérica, como etiquetas, categorías, enlaces permanentes, imágenes destacadas, etc. Si desea agregar más, utilizará campos personalizados.

Es posible que incluso desee agregar información que cada uno de los escritores de su equipo debe completar para publicar una publicación.

Puede crear un campo obligatorio que no permitirá que la publicación se publique hasta que se marquen ciertos criterios. Así que tenga en cuenta que estos campos personalizados no son solo para información en el front-end. También pueden ser útiles para el back-end.

Agregar campos personalizados a una publicación de WordPress

De forma predeterminada, los campos personalizados de WordPress están deshabilitados en el editor de páginas y publicaciones. Si está utilizando el Editor de bloques, es fácil habilitarlos. Simplemente haga clic en el ícono de engranaje en la esquina superior derecha de la pantalla. Seleccione Opciones .

Luego, elija habilitar los campos personalizados cerca de la parte inferior de la pantalla que aparece. Tendrá que volver a cargar la página, así que asegúrese de guardar su trabajo primero.

Una vez que haya habilitado y vuelto a cargar, sus metacajas de campos personalizados aparecerán en la parte inferior de la pantalla. Debajo de la parte del editor de contenido de la pantalla.

Si bien los campos personalizados de WordPress son increíblemente poderosos, los predeterminados están limitados a un valor de texto. Se necesita PHP y desarrollo para hacerlos más robustos. Afortunadamente, hay complementos que hacen ese trabajo por usted, y le mostraremos cómo ponerlos en funcionamiento. Si todo lo que necesita es un campo de texto en algunas publicaciones y no desea un complemento, no dude en omitir a continuación sobre cómo agregar los campos personalizados de WordPress a la interfaz de su tema. Eso se aplica tanto a los campos predeterminados como a los generados por complementos como Campos personalizados avanzados.

Uso del complemento de campos personalizados avanzados

Como ocurre con la mayoría de las cosas en WordPress, tiene dos opciones de implementación. Puede editar manualmente los archivos PHP para agregar la funcionalidad de campo personalizado, o puede usar un complemento. En este caso, recomendamos encarecidamente seguir la ruta del complemento. Sin embargo, si siente la necesidad de editar PHP e ingresar al código, puede hacerlo en Apariencia - Editor de temas . Aquí está la página WP Codex sobre campos personalizados para que pueda comenzar. Se vincula a las diversas etiquetas de plantilla y ganchos que necesitará para que funcione.

Pero nuevamente, recomendamos encarecidamente utilizar el complemento Advanced Custom Fields en lugar de modificar el código. El complemento permite todo lo que desee de los campos personalizados (y algo más), por lo que no sentimos la necesidad de reinventar la rueda. Cuando funciona, funciona. Úselo.

Una vez que ACF se haya instalado y activado, verá una entrada de Campos personalizados en la barra lateral izquierda del panel de administración de WordPress. Viene con tres opciones: Grupos de campos , Agregar nuevo y Herramientas .

Los grupos de campo se pueden considerar conjuntos. Todo lo que desee que aparezca en el mismo cuadro, lo incluirá en el mismo grupo. Agregar nuevo le permitirá agregar un nuevo grupo y un nuevo campo personalizado. Mientras que Herramientas es el lugar donde puede importar y exportar diferentes conjuntos existentes de campos personalizados de otros sitios de WordPress.

Los fundamentos de ACF

Crear los campos en sí es bastante sencillo. Vaya a la ventana Agregar nuevo .

Pase lo que pase, los campos personalizados de ACF se incluirán en un grupo de campo . Esto solo significa los campos específicos contenidos en el mismo cuadro. Así que puedes nombrarlo como quieras que aparezca en el editor de publicaciones. Cada vez que desee agregar una entrada individual al grupo, hará clic en el botón Agregar campo . Haga esto cada vez que desee un campo diferente en el mismo cuadro de meta. Las reglas de ubicación determinan dónde y cuándo aparecerá el cuadro. En este ejemplo, dado que el tipo de publicación es igual a la publicación , eso significa que solo aparecerá en las publicaciones. No páginas u otros tipos de publicaciones personalizadas.

A continuación, puede elegir realmente la Configuración para el campo en sí. Qué va a hacer y la función que cumplirá en el sitio.

Básicamente, eliges tu ubicación (debajo del contenido de la publicación en el editor, la barra lateral, encima del contenido, etc.), así como la ubicación del texto y los campos. El área Ocultar en pantalla es la más interesante. Dependiendo de cómo necesite usar sus campos personalizados, puede excluir cualquiera y todos los demás meta-cuadros de sus borradores. Seleccione las condiciones para la apariencia de este campo personalizado y luego determine qué otros cuadros aparecen con él, si corresponde. Muchas veces ni siquiera se preocupará por esto.

Creación de campos personalizados con ACF

Una vez que haya nombrado su grupo de campo, puede hacer clic en el botón Agregar campo . Puede tener cualquier número de campos dentro del mismo grupo, pero asegúrese de mantenerlos todos relacionados entre sí. Puede crear casi cualquier tipo de campo de entrada que pueda imaginar con ACF.

Para este ejemplo, supongamos que estamos ejecutando un sitio de WordPress de cultura pop que mira películas y desea campos personalizados para mostrar una calificación, para enumerar si la película se está transmitiendo y, de ser así, dónde encontrarla.

Estos estarían todos bajo el mismo grupo de campo, pero campos diferentes. Como puede ver arriba, el Is It Streaming? El campo está configurado para ser un botón de opción con un selector de sí / no que se requiere antes de la publicación. Además, queremos que aparezca un campo condicional si el campo está marcado como Sí. Esto se hace simplemente presionando Agregar campo nuevamente.

Con la palanca de Lógica condicional habilitada, solo necesita seleccionar a qué campo está sujeto y cuál debe ser el valor. En este caso, ¿se está transmitiendo? debe ser igual a Sí.

En el editor de publicaciones, la entrada de campos personalizados se verá así:

Y cuando publique su publicación, los metadatos que ingresó serán parte de la publicación. Pero todavía hay un problema. No puede verlo, ni tampoco sus visitantes.

Cómo mostrar campos personalizados en el front-end de WordPress

Incluso si ha hecho todo esto a la perfección, los datos que ha introducido no aparecerán en la parte frontal de su sitio sin unos pequeños ajustes. Después de todo, ¿dónde aparecería? Muchas veces, su tema tendrá una forma de mostrar metadatos y campos personalizados, pero estos difieren tema por tema. Verifique las opciones de su tema para la documentación.

Otra forma de mostrar campos personalizados en la interfaz son los códigos cortos ACF incorporados. Si bien no hay un personalizador o constructor integrado en ACF, puede usar el siguiente código abreviado solo para campos de texto .

Pero debido a que está limitado a campos de texto, puede tener un uso limitado para muchas personas. También puede ingresar a PHP y usar el código ACF, como en sus ejemplos de documentación. También puede actualizar a ACF Pro y obtener acceso al bloque Gutenberg integrado que muestra el campo personalizado exactamente como lo diseña en el constructor.

Pero como dijimos, muchos temas vienen con integración de campos personalizados en estos días, y le mostraremos cómo se maneja eso en Divi.

Cómo mostrar campos personalizados en el front-end usando Divi

Primero, recuerde que muchos módulos Divi pueden generar códigos cortos. Muchas veces sus campos personalizados de texto creados en ACF pueden simplemente insertarse usando sus códigos cortos, como mencionamos anteriormente.

Para nuestro ejemplo anterior que usa lógica condicional y botones de opción, usaremos la función de contenido dinámico de Divi. También es muy fácil de usar. Le mostraremos esto a través del Divi Theme Builder, pero puede usarlo literalmente en cualquier módulo que lo admita en el Divi Builder normal. Haga clic en Black + y seleccione el módulo que desee. Para ello, es el Módulo de texto .

A continuación, busque la parte del módulo en la que desea insertar el campo personalizado. Busque el icono de contenido dinámico en el lado derecho de cualquier lugar que admita la función.

Haga clic en él para seleccionar en el menú desplegable todos los tipos de contenido dinámico disponibles, incluidos todos los campos personalizados. Pueden estar en la parte inferior.

Divi te da la opción de agregar básicamente etiquetas antes / después al contenido de tu campo. Queremos que el nuestro se lea de forma natural como parte de la publicación, entonces, ¿esta película está disponible para transmitir en línea? se colocará antes del valor cuando se represente el campo. Además, agregamos un espacio final al final para separar nuestra etiqueta del valor ACF.

Dado que solo puede tener una pieza de contenido dinámico por área de módulo, repita este proceso para otros campos. Sin embargo, tenga en cuenta que aunque el campo personalizado es condicional, el módulo Divi no lo es . Entonces, si usa una etiqueta de antes / después en un campo condicional, aún verá esa etiqueta. Si los deja en blanco, no se representará ningún valor.

Además, la opción Habilitar HTML sin formato permitirá que se procese cualquier código que ingrese en el campo ACF, como enlaces a las distintas plataformas, etc.

Terminando

Como puede ver, a pesar de que parece bastante complicado, los campos personalizados de WordPress son una característica que no necesita un desarrollador para hacerlo bien. Simplemente instale ACF y comience a personalizar cómo usted y su equipo ingresan la información. Ya sea un sitio de reseñas, un mercado de comercio electrónico o incluso un blog amigable donde desea compartir lo que está sucediendo en su vida, poder ajustar y perfeccionar los metadatos de sus publicaciones y páginas puede elevar su sitio web a nuevos niveles.

¿Para qué usas los campos personalizados de WordPress?

Imagen destacada de SurfsUp / shutterstock.com