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 por completo la funcionalidad y la utilidad de una publicación o página. Queremos ayudarte a entender los fundamentos. Vamos a discutir qué es un campo personalizado, por qué son útiles y brindaremos algunos ejemplos del mundo real de cómo se usan.
Suscríbete a nuestro canal de Youtube
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, autor o biografía del autor, tal vez una calificación o incluso algo como, como dice la entrada del Codex en los campos personalizados, el estado de ánimo, la lectura actual, la escucha o los cuadros meteorológicos.
Estos campos conforman 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 metacuadros para información genérica, como etiquetas, categorías, enlaces permanentes, imágenes destacadas, etc. Si desea agregar más, utilizará campos personalizados.
Incluso es posible que 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 la página y el editor de publicaciones. Si está utilizando el Editor de bloques, es fácil habilitarlos. Simplemente haga clic en el icono de engranaje en la esquina superior derecha de la pantalla. Seleccione Opciones .
Luego elija habilitar 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 recargado, sus meta-cuadros 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 lo guiaremos a través de cómo ponerlos en marcha. 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 cómo agregar los campos personalizados de WordPress a la interfaz de su tema. Eso se aplica a los campos predeterminados, así como a los generados por complementos como Campos personalizados avanzados .
Uso del complemento de campos personalizados avanzados
Como 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 el PHP y acceder al código, puede hacerlo en Apariencia – Editor de temas . Aquí está la página de 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 usar el complemento Advanced Custom Fields en lugar de modificar el código. El complemento permite todo lo que desea de los campos personalizados (y algo más), por lo que no sentimos la necesidad de reinventar la rueda. Cuando funciona, funciona. úsalo
Una vez que se haya instalado y activado ACF, verá una entrada de Campos personalizados en la barra lateral izquierda del panel de administración de WordPress. Viene con tres opciones: Grupos de campo , Agregar nuevo y Herramientas .
Los grupos de campos se pueden considerar como conjuntos. Todo lo que quieras que aparezca en el mismo cuadro, lo incluirás en el mismo grupo. Agregar nuevo le permitirá agregar un nuevo grupo y un nuevo campo personalizado. Mientras que Tools es donde va a 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 campos . 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, haga clic en el botón Agregar campo . Haga esto cada vez que desee un campo diferente en el mismo meta-box. 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 la Configuración para el campo en sí. Lo que va a hacer y la función que cumplirá en el sitio.
Básicamente, elige su 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 Hide on Screen es la más interesante. Dependiendo de cómo necesite usar sus campos personalizados, puede excluir todos y cada uno de los 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 te preocuparás por esto.
Creación de campos personalizados con ACF
Una vez que haya nombrado su grupo de campos, puede hacer clic en el botón Agregar campo . Puede tener cualquier cantidad 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 que los campos personalizados muestren una calificación, para indicar 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 diferentes campos. Como puede ver arriba, ¿Is It Streaming? El campo está configurado para ser un botón de opción con un selector 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 opción Lógica condicional habilitada, solo necesita seleccionar a qué campo está sujeto y cuál debe ser el valor. En este caso, ¿está transmitiendo? debe ser igual a Sí.
En el editor de publicaciones, la entrada de los 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. Usted 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 ingresado no aparecerán en la parte frontal de su sitio sin un pequeño ajuste. Después de todo, ¿dónde aparecería? Muchas veces, su tema tendrá una forma de mostrar metadatos y campos personalizados, pero 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 abreviados ACF incorporados . Si bien ACF no tiene un personalizador ni un generador integrado, 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 incorporado que muestra el campo personalizado exactamente como lo diseña en el generador.
Pero como dijimos, muchos temas vienen repletos de 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 abreviados, como mencionamos anteriormente.
Para nuestro ejemplo anterior que usa lógica condicional y botones de radio, usaremos la función de contenido dinámico de Divi . También es muy fácil de usar. Le mostraremos esto a través de Divi Theme Builder , pero puede usarlo literalmente en cualquier módulo que lo admita en el Divi Builder normal. Haga clic en el + negro y seleccione el módulo que desee. Para esto, 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 del menú desplegable todos los tipos de contenido dinámico disponibles, incluidos todos los campos personalizados. Pueden estar en el fondo.
Divi te da la opción de agregar básicamente etiquetas antes/después al contenido de tu campo. Queremos que la nuestra 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. Tenga en cuenta, sin embargo, que aunque el campo personalizado es condicional, el módulo Divi no lo es . Entonces, si usa una etiqueta 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 procesar permitirá que se represente cualquier código que ingrese en el campo ACF, como enlaces a las diversas plataformas, etc.
Terminando
Como puede ver, a pesar de parecer bastante complicado, los campos personalizados de WordPress son una característica que no necesita ser desarrollador para hacerlo bien. Simplemente instale ACF y comience a personalizar la forma en que usted y su equipo ingresan la información. Ya sea que se trate de un sitio de reseñas, un mercado de comercio electrónico o simplemente un blog amigable en el que desea compartir lo que sucede en su vida, poder modificar 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