Saltar al contenido

3 formas de utilizar campos personalizados avanzados para WordPress

15/06/2021

El plugin Advanced Custom Fields es una poderosa herramienta gratuita e intuitiva que le permite agregar campos especiales y recurrentes a sus publicaciones de WordPress . Dependiendo del tema de tu blog o tu sitio, es posible que necesites estos famosos campos que harán que tu WordPress sea totalmente único …

Generalmente «reservado para desarrolladores», le sugiero que descubra tres formas fáciles de usarlo. Para esto veremos:

Parte 1: Cómo configurar ACF

Parte 2: Cómo mostrar campos personalizados en su sitio

 

 

Parte 1: Configurar campos personalizados avanzados

Primero, nos centraremos en el plugin Campos personalizados avanzados y crearemos nuestros diferentes campos en solo cuatro pasos:

Paso 1: instalar campos personalizados avanzados

Lo primero que debe hacer será instalarlo en su sitio de WordPress.

Para hacer esto, vaya a la pestaña EXTENSIÓN de su back office, haga clic en AÑADIR y busque Campos personalizados avanzados . Como hay varios, seleccione el de Elliot Condon . Luego haga clic en INSTALAR AHORA y actívelo.

Paso 2: crear un grupo de campo

Una vez instalado, encontrará ACF en el menú de la izquierda. Vaya a ACF> GRUPO DE CAMPO> AÑADIR. En el ejemplo dado, agregué un grupo de controles llamado «Bienes raíces».

Paso 3: agregue campos a su grupo

Campos personalizados avanzados ofrece una cantidad considerable de campos diferentes a los que puede llamar, incluidos los campos TEXTO, CORREO, CONTRASEÑA, IMAGEN, LISTA DE ELECCIÓN, MAPA DE GOOGLE, etc.

A continuación, puede asociar los distintos campos con el grupo creado en el paso 2 haciendo clic en el botón «+ AÑADIR». Asegúrese de seguir las diferentes instrucciones. Una vez que haya completado el campo, puede hacer clic en CERRAR CAMPO y luego agregar uno nuevo si es necesario. Puede crear un número ilimitado de campos. En mi ejemplo, creé seis (foto, precio, área, distrito, número de habitaciones y descripción).

Paso 4: Asignar el grupo de controles y configurar las opciones



Ahora que sus campos están creados, va a elegir dónde hacer que aparezcan.
Esta es la pantalla del lado del administrador de la que dependerá la pantalla del lado del visitante, como veremos más adelante (Parte 2) …

La pestaña ASIGNAR ESTE GRUPO DE CAMPOS le permite proporcionar condiciones únicas o múltiples a través de menús desplegables. Esto le permitirá decidir si desea que el grupo de controles aparezca en un artículo, en una página, etc. Puede agregar reglas usando los botones Y y O. En el caso de mi ejemplo, asigné el grupo de controles a una PLANTILLA DE PÁGINA específica que llamé INMOBILIARIA y de la cual veremos el procedimiento a seguir (Parte 2 – Opción 1).

La pestaña OPCIÓN le permite configurar el número de pedido , la posición en su publicación en el lado del backoffice, el estilo y los campos para ocultar .

Por último, no olvide hacer clic en PUBLICAR como lo haría normalmente para una página o un artículo.

Parte 2: muestre los campos personalizados en su sitio.

Una vez que se haya completado la creación de sus Campos de Aduana, naturalmente tendrá la tentación de ir a su nueva página o nuevo artículo para completar todos sus nuevos campos … ¡Desafortunadamente, podría sentirse decepcionado! De hecho, por el momento en que solo los haya creado, ahora tendrá que hacerlos visibles para el visitante.

Para lograr esto, necesitará crear un archivo usando un editor de texto como Sublim Text, por ejemplo. Puede nombrar este archivo como mejor le parezca, para mi ejemplo, lo llamé CONTENT-IMMOBILIER.PHP

Este archivo debe incluir:

  • Etiquetas PHP que incluyen la función GET_FIELDS como se muestra en las líneas 1-11 en la captura de pantalla anterior
  • Etiquetas HTML (líneas 13 a 26) que te permitirán organizar tu contenido. Para mi ejemplo, puse una etiqueta de título (<h1>), una etiqueta de imagen (<img>), una lista (<ul>) y algunos párrafos (<p>)
  • las funciones PHP de ACF denominadas “the_field” que te permitirán insertar cada campo creado previamente. Normalmente, los insertará dentro de sus etiquetas HTML de la siguiente manera: <h1> <? Php the_field (‘field_name’); ?> </h1>. Para obtener más información, consulte los recursos de ACF

Luego, todo lo que tiene que hacer es guardar su archivo y enviarlo a la carpeta de su tema a través de FTP.

Nota: para personalizar mejor la representación visual final, puede agregar clases a sus etiquetas HTML que usará en su archivo style.CSS más adelante.

Ahora que se han creado sus campos personalizados y el «archivo base», veremos tres formas diferentes de hacer que aparezcan en su sitio:

Opción 1: en una plantilla de página

Una plantilla de página, o plantilla de página en francés , es un tipo específico de página que da como resultado una presentación diferente de las otras páginas de su tema. Si está utilizando un tema premium, es posible que tenga dos o tres plantillas diferentes. A menudo hay plantillas específicas para la página de inicio y / o la página de contacto … ¿Pero sabías que puedes crear tu propia plantilla de página en la mitad del tiempo que lleva decirla? Le sugiero que cree una plantilla de página específica aquí para mostrar sus Campos personalizados avanzados:

    1. Vaya a la carpeta de su tema (a través de FTP) para encontrar el archivo llamado PAGE.PHP.
    2. Duplíquelo y cámbiele el nombre en PAGE-IMMOBILIER.PHP, por ejemplo.
    3. Usando un editor de texto, edite las líneas entre / * y * / ubicadas en la parte superior del archivo justo debajo de la etiqueta <? Php : aquí, reemplace el contenido con el Nombre de la plantilla: INMOBILER . Obtenga más información sobre JERARQUÍA DE ARCHIVOS MODELO , PÁGINAS y PÁGINAS DE PLANTILLA
    4. Pero también la línea get_template_part (‘template-parts / content’, ‘page’); por get_template_part (‘content-inmobilier’); . Obtenga más información sobre la función GET_TEMPLATE_PART

    1. Termine guardando el archivo y enviándolo a su tema en el mismo nivel que el archivo PAGE.PHP
    2. Ahora regrese a la oficina administrativa de su sitio, agregue una nueva página que debería permitirle configurar el MODELO en BIENES RAÍCES (vea en la pestaña de la barra lateral ATRIBUTO DE LA PÁGINA a la derecha) como puede ver en la captura de pantalla a continuación. Los campos personalizados aparecerán en su página donde los habrá configurado durante la Parte 1 – Paso 4 (OPCIÓN> pestaña POSICIÓN).

    1. Una vez que se ha publicado su página, puede ir al lado del visitante para comprobar la visualización de los campos personalizados. A partir de ahí, todo es cuestión de HTML y CSS para hacer que su página sea un poco más atractiva.

 

Opción 2: en un tipo de publicación personalizada

Por defecto, WordPress ofrece cuatro tipos de publicaciones, a saber: PUBLICACIONES, PÁGINAS, ADJUNTOS y REVISIONES. Sin embargo, esto puede parecer limitado según el tipo de sitio que desee crear. Dependiendo de su actividad o su pasión, es posible que desee crear nuevos tipos de contenido que desea diferenciarse de sus páginas y artículos, por ejemplo: una cartera, anuncios, promociones, recetas, ensayos sobre el producto, etc … Sugiero descubre cómo crear sus propios tipos de contenido para mostrar sus campos personalizados avanzados:

Paso 1: crea un tipo de publicación personalizada

De esta forma se requiere la instalación y configuración del plugin CUSTOM POST TYPE UI (CPTUI) . Este plugin, ofrecido por WebDevStudio , es gratuito e ideal para hacer que su sitio sea totalmente único. La interfaz de usuario de tipo de publicación personalizada y los campos personalizados avanzados son totalmente compatibles y complementarios, aunque se pueden usar de forma independiente entre sí.

CPTUI permite, entre otras cosas, crear nuevos tipos de publicaciones y taxonomías y te sugiero que repases rápidamente cómo usarlo:

    1. Primero, instalará el plugin y luego lo activará. Luego, en su panel de administración, encontrará el menú de la interfaz de usuario de CPT que le permitirá iniciar la configuración.

    1. Luego haga clic en AGREGAR / EDITAR TIPOS DE POSTES
    2. En los AJUSTES BÁSICOS, ingrese el TIPO DE POSTE SLUG, la ETIQUETA PLURAL y la ETIQUETA SINGULAR. Ojo, sigue las recomendaciones escritas en cada campo, esto es muy importante, especialmente para el POST TYPE SLUG que no debe contener acento ni número y cuyos espacios deben ser reemplazados por guiones (-) o guiones bajos (_).
    3. En las ETIQUETAS ADICIONALES, puede completar toda la información que se utilizará en su panel de administración.

    1. En la pestaña AJUSTES, puede establecer las distintas opciones en VERDADERO o FALSO sin olvidar marcar la opción SOPORTE: CAMPOS PERSONALIZADOS. Finalmente terminarás haciendo clic en el botón AGREGAR TIPO DE POSTES ubicado en la parte inferior izquierda.

    1. Después de crear el Tipo de publicación, recibirá un mensaje de éxito y verá aparecer un nuevo menú en su tablero. Para mi ejemplo, esta es la pestaña ADS.

Paso 2: Asignar ACF al nuevo tipo de publicación personalizada

Ahora que su nuevo tipo de publicación se ha creado a través de CPTUI, lo invito a regresar al menú Campos personalizados avanzados para modificar la asignación de su grupo de campos (el creado en la Parte 1 / Paso 2 de este artículo). Solo tendrás que agregar una regla donde el TIPO DE PUBLICACIÓN sea igual a ANNONCE_IMMOBILIERE (en el caso de mi ejemplo).

Paso 3: crea un nuevo archivo basado en SINGLE.PHP

  1. Vaya a la carpeta de su tema, busque el archivo SINGLE.PHP que duplicará y luego modifique con un editor de texto.
  2. Nombra este archivo SINGLE-the_name_of_your_post_type_slug.PHP : POST TYPE SLUG es el identificador que ingresaste al crear tu tipo de publicación personalizada. En mi ejemplo, es Annonces_immobiliere.
  3. Simplemente reemplace la línea get_template_part (‘template-parts / content’, ‘page’); por get_template_part (‘content-inmobilier’); (línea 19 en la captura de pantalla anterior).
  4. Devuelva, a través de FTP, este archivo en su tema al mismo nivel que el archivo SINGLE.PHP

Paso 4: publique un nuevo anuncio

    1. Regrese a la sección ADMINISTRADOR de su sitio.
    2. Agregue un nuevo anuncio tal como lo hace cuando agrega un nuevo artículo.
    3. Complete los campos personalizados creados con ACF y luego publíquelos.

    1. En el lado del visitante, compruebe el renderizado visual que sin duda tendrá que mejorar para hacerlo más “sexy”.

 

Opción 3: en una categoría de artículo específica

Es posible que solo necesite campos personalizados en publicaciones con una categoría específica. Por ejemplo, si eres un blogger de comida, es posible que necesites diferentes campos dependiendo de si tus artículos están en la categoría RECETA o en la categoría DEGUSTACIÓN. Lógico, ¿verdad? Le sugiero que vea cómo mostrar sus campos personalizados avanzados solo en una categoría:

    1. En su parte ADMINISTRADOR, comience creando una nueva categoría de artículos yendo a ARTÍCULO> CATEGORÍA> AGREGAR (en mi ejemplo, agregué una categoría llamada VENTAS INMOBILIARIAS).
    2. Regrese a la pestaña ACF, dé una nueva regla a su grupo de campos donde CATEGORÍA es igual a VENTAS INMOBILIARIAS (en el caso de mi ejemplo). No olvide actualizar su grupo de campo.

    1. Vaya a la carpeta de su tema, busque el archivo SINGLE.PHP que modificará con un editor de texto. No lo duplique, simplemente lo cambiaremos … Simplemente reemplace la línea get_template_part (‘template-parts / content’, ‘single’); por if (in_category (‘vente-immobilieres’)) {get_template_part (‘content-inmobilier’);} else {get_template_part (‘template-parts / content’, ‘single’);} como puede ver en la pantalla de captura de pantalla ‘ debajo. No olvide guardarlo.

    1. Finalmente, cree un nuevo artículo desde el back office de su sitio y asígnele la categoría donde se asignan los ACF (en mi ejemplo, esta es la categoría “vente-immobiliere”).
    2. Vaya al lado del visitante para comprobar que los campos ACF aparecen en el artículo que acabamos de crear. Como puede ver en la captura de pantalla a continuación, la visualización es diferente según la categoría del artículo.

 

En conclusión

Este artículo es solo una muestra de lo que se puede lograr con los campos personalizados avanzados (y su asociación con CPTUI). El plugin es muy grande y muy maleable dependiendo de las condiciones y creaciones que solo necesitas un poco de imaginación para usarlo sabiamente.

Sin embargo, para no sobrecargar las explicaciones de este tutorial, omití deliberadamente hablar sobre la creación necesaria de un tema hijo . De hecho, es consciente de que al modificar un tema, se recomienda colocar las modificaciones en un tema secundario, ¡esto lo protegerá de la pérdida de sus datos durante una próxima actualización!