Haz una ruta de lectura en tu blog con Advanced Custom Fields

Por Ernesto Jiménez · 31 julio, 2014
Publicado en Tutoriales

¿Sabes cuándo me di cuenta de que WordPress era un sistema genial para hacer casi cualquier tipo de sitio web? Cuando aprendí a trabajar con los campos personalizados. Ahí me di cuenta de que me podría servir para construir lo que quisiera.

Hasta ese momento creaba las webs con CMS desarrollados a medida desde cero. Ninguna pega pero era demasiado esfuerzo en la parte “de atrás”, en algo que el cliente simplemente espera “que funcione”. Es, si lo piensas, una labor muy poco agradecida.

Con los campos personalizados (y los tipos de post personalizados) los límites de WordPress como sistema de blogs quedaban pulverizados.

Hace unos días hablaba de las bondades de Advanced Custom Fields en el desarrollo de temas de WordPress personalizados.
Las posibilidades son infinitas, más que un plugin que haga cosas es un plugin que sirve para hacer cosas. Gracias a ACF puedes ahorrarte la instalación de un montón de plugins con muy poco trabajo.

Post sugerido o recomendado o sigue leyendo, como quieras llamarlo
¿Cuántos plugins hay de posts relacionados? ¿100, 1000, 10000? ¿Cuál es el mejor? Bah, da igual. Con ACF puedes crear en un momento un sistema para relacionar un post con otro artículo. Nada de recomendaciones automáticas por etiquetas o categorías que pocas veces guían al usuario correctamente. Cuando tienes una colección de cierto tamaño de artículos es muy interesante que diseñes rutas de lectura: estableciendo un orden de lectura que permita a tu lector profundizar en tus contenidos con cierto sentido.

En la edición de posts de este blog tengo esta sección bajo el editor en la que busco y selecciono el artículo en la columna de la izquierda:

acf_post-relacionado

Paso 1. Instala ACF

Paso absurdamente obvio, si quieres usar ACF, instálalo.

Paso 2. Crea el grupo de campos

En Custom Fields > Fields > Añadir grupo

acf_field_groups-grupos-campos

El campo para artículos relacionados lo tengo en el grupo «Datos post», nombre bastante aclaratorio.

3. Crea el campo

En el formulario para crear el campo definimos el nombre (lo usaremos después para mostrarlo en nuestro tema) y el tipo de campo. En este caso es de tipo «Relación» y queremos trabajar con los elementos «Post», con un máximo de 1 elemento relacionado. Guardamos el campo.

Así es como lo tengo:

edit-custom-field

Paso 4. Utiliza el nuevo campo

Edita algún post o crea uno nuevo y asigna otro artículo como elemento relacionado.

Paso 5. Muestra el post relacionado en el tema

Recuperar datos guardados con ACF es muy sencillo. En el archivo del tema en el que quieras mostrar el post relacionado, en este caso sería en single.php:


<?php 
  $featured_post = get_field('featured_related_post');
?>

Fácil, ¿eh? Si echas un vistazo al formulario de creación del capo personalizado de arriba, verás que indicamos que devolviera un objeto «Post» en lugar de las ids. Para mostrar los datos del post, por ejemplo el título haríamos:


<?php
  if( $featured_post ){
    foreach( $featured_post as $post ){
      setup_postdata($post);
      ?>
      <h2><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h2>
      <?
    }
  }  
?>
  

Con este código generamos un título h2 con un enlace al post relacionado. Las posibilidades que tenemos con este esquema de relación son infinitas, por ejemplo:

  • relacionar músicos de un festival (tipo de post personalizado) con sus discos
  • relacionar autores con libros en un sitio de críticas
  • seleccionar el artículo destacado en la página de inicio
  • vincular lecciones a un curso en un sitio de formación
  • etc

Todo el código para gestionar los campos personalizados lo escribía a mano hasta que me paré a probar este plugin en detalle. Es de los que merecen la pena. En otro post hablaré de cómo usar ACF, el tipo repeater y shortcodes para darle a tu cliente un mayor control sobre la maqueta del sitio y sus contenidos.

Si tienes cualquier duda o comentario, me tienes en Twitter.

 

¿Te ha gustado el post? Puedes seguirme en Twitter o en Facebook donde seguimos hablando de diseño web