Los CPT, o Custom Post Types son una parte esencial de cualquier proyecto construido en WordPress, y que nos permite expandir las funciones y contenidos que podemos crear solo con las entradas. Además de ayudarnos a categorizar el contenido de nuestra web y permitirnos. Y con el recién bautizado Site Editor, añadir estos CPT a cualquier página o plantilla en WordPress es más sencillo que nunca. Eso sí, tiene algunos trucos para que se muestre de forma correcta, y que hoy os queremos mostrar.
Estos CPT pueden albergar cualquier tipo de contenido. Seguro que habéis visto algún ejemplo como listado de películas, libros, testimonios, portfolios… Incluso los productos de WooCommerce son una clase de CPT. Para el ejemplo de este artículo, queremos diseñar la homepage de un arquitecto, que va a tener una sección donde se va a mostrar sus últimos trabajos, su portfolio. Y como esta web ya tiene su propio blog, y por cuestiones de SEO también es apropiado, crearemos un CPT que va a llevar todo el contenido del portfolio.
Creando nuestro Custom Post Type
Existen múltiples maneras de crear un CPT. En nuestro artículo sobre Custom Post Types, Ricardo nos enseñaba algunas de ellas, sobre todo mediante el uso de plugins WordPress. Podéis echarle un vistazo por si veis alguna que os guste.
En este ejemplo os proponemos una alternativa más, y vamos a usar Post Type Generator de GenerateWP. Post Type Generator nos va a permitir crear todo el código necesario sin escribir nada de código, simplemente rellenando campos de texto y marcando checkboxes según nuestras necesidades: el nombre de nuestro CPT, si queremos que haya campos como el autor o el texto destacado. Además de poder añadir un icono personalizado para el panel de administración de WordPress, o traducir las etiquetas que aparece, ya que por defecto están en inglés).
Según lo que vayamos escribiendo, iremos pulsando el botón de Update Code para que, como su propio nombre indica, se vaya actualizando el código de nuestro CPT. Eso sí, no debemos olvidar marcar una opción, y que es clave para que no tengamos problemas en el futuro al añadir en CPT en nuestro diseño desde el Site Editor. Veremos que la última pestaña de la web de Post Type Generator se llama Rest API. Entramos en ella, y en la opción Show in Rest marcamos Yes. Con esta opción, hemos añadido la siguiente línea de código a nuestros arreglos en el PHP:
show_in_rest => true,
Con esta línea vamos a conseguir que el CPT sea visible para el editor de WordPress, y que podamos añadirlo en cualquier página o plantilla. Pues bien, una vez tengamos nuestro código listo, solo nos queda añadirlo a WordPress.
Añadir el CPT a WordPress
Para añadir el CPT que acabamos de crear a nuestro WordPress también existen varios métodos. El más limpio es irnos al archivo functions.php del tema que estemos usando, y pegar el código ahí. Si no estás acostumbrado a tocar archivos de WordPress, o prefieres no hacer no vaya a ser que cambiemos cosas de más y vayamos a liarla, existen otras opciones. Mi preferida es usar el plugin Code Snippets. Una vez lo tengamos instalado, es tan sencillo como crear un nuevo Fragmento de código, darle un título lo suficientemente descriptivo como para localizarlo sin problema, y pegar en él todo el código PHP que hemos obtenido en la web de Post Type Generator.
Una vez creado el fragmento de código, y comprobar que está activo, nos vamos a la página principal del panel de administración de WordPress y ya tendremos ahí nuestro CPT listo para usar. Y eso es lo que vamos a hacer, añadiremos algunas entradas a nuestro CPT Portfolio para tener ya un contenido preparado en el momento de añadirlo a nuestro diseño.
Insertando nuestro CPT a una plantilla en WordPress
Una vez ya tenemos listo nuestro CPT y le hemos dado algo de contenido, vamos a añadirlo a nuestro homepage. Como vamos a usar el tema Twenty Twenty-Three añadido en WordPress 6.1, editaremos la plantilla que usa como página de inicio, para añadirle una nueva sección donde colocaremos los últimos elementos del portfolio. Por lo tanto, vamos a Apariencia > Editor, y entramos en la plantilla llamada Inicio.
Si nos fijamos en la vista de lista de la plantilla de la parte izquierda, veremos como existe un bloque llamado Lista de contenidos. Este bloque es el que nos permite visualizar diferente tipo de contenido de nuestra web, como entradas o páginas. El que está en esta plantilla sirve para mostrar las últimas entradas, pero también permite mostrar cualquier CPT que tengamos en nuestro WordPress. Lo primero, añadiremos un nuevo bloque Lista de contenido, y lo insertamos donde queremos. Yo voy a hacerlo justo debajo de donde se muestran las ultimas entradas del blog. Una vez que lo tengamos, nos pedirá elegir un diseño para el mismo. Podemos optar por el que queramos, pero sabiendo que más adelante se podrá cambiar su diseño, así que no pierdas mucho tiempo en esta decisión.
Tras esto, vemos que nuestro bloque muestra las últimas entradas en vez de el contenido de nuestro CPT Portfolio. No nos preocupemos. Con el bloque Lista de contenido seleccionado, en sus ajustes en la barra lateral derecha vamos a la sección Heredar la consulta de la plantilla, y la desactivamos. Al hacer esto, se nos mostrará una nueva opción llamada Tipo de contenido con un menú desplegable. Al abrir esté menú tendremos entradas, páginas y nuestro CPT Portfolio. Si elegimos este último, automáticamente nuestro bloque pasará de mostrar las últimas entradas del blog, a mostrar el contenido del CPT Portfolio. Si tuviésemos más Custom Post Types en nuestro WordPress, también aparecerían en este listado.
Si por algún motivo no en el menú desplegable de Tipo de contenido no se nos muestra el CPT, seguramente no hayamos añadido bien en nuestro archivo PHP la línea de código show_in_rest => true,. Así que volveremos a repasar este código para ver que está todo correctamente y que tenemos esta línea, y volveremos a la plantilla para ver si ya aparece.
Una vez tengamos nuestra nueva sección en la plantilla, podemos cambiar su estilo y el contenido que se va a mostrar: título, imagen destacada, etiquetas, fecha… Además, conforme vayamos añadiendo nuevo contenido al CPT Portfolio, este va a ir apareciendo en esta sección, como pasaría al crear una nueva entrada en el blog.
Así es como ha quedado nuestro diseño final tras algunos retoques. Se le ha añadido un fondo de color gris claro, le hemos cambiado el tamaños de los titulos y su color, añadida la fecha con un formato diferente, y a las imágenes les hemos dado un formato circular, además de hacer que se muestren en blanco y negro. Y por último, un botón para ir a la página donde se van a mostrar todos los elementos del portfolio.
Conclusiones
Crear un Custom Post Type y visualizarlo en nuestro WordPress es ahora más sencillo que nunca. Y gracias al Site Editor y el editor de bloques, podemos cambiar el estilo del mismo, y el tipo de contenido que se va a mostrar. Eso sí, hay que estar pendientes de añadir la línea de código show_in_rest => true, en el archivo donde vaya estar nuestro CPT, ya que esta línea es la que nos va a permitir que el Custom Post Type sea reconocido por el editor de bloques, y podamos añadirlo a nuestra plantilla.
Con esto terminamos. Esperamos que os haya servido de ayuda este pequeño tutorial. Y como siempre, ten;eis disponibles los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias sobre este tema.
