Cómo crear un custom post type con meta boxes

Inicio » Tecnología » Diseño Web » Cómo crear un custom post type con meta boxes

Que mejor forma de explicar la creación de custom post type si es con un ejemplo práctico, anteriormente les mencionaba que estoy diseñando una web para un colega de Chile, y uno de los requerimientos era incluir las entradas de la fan page de facebook en la web, la solución en este caso que me proporcionaron era utilizar el plugin facebook, para wordpress, desde el cual además de colocar el clásico botón me gusta, compartir o enviar, también incluía la incrustación de entradas de facebook en wordpress.

Yo no me quize quedar allí, la verdad es que no soy mucho de estar llenando de plugins una web, de preferencia me gusta utilizar funciones integradas al theme, los plugin son la última opción.

Ante este requerimiento pensé en algunas soluciones, como por ejemplo, utilizar custom fields, meta boxes y shortcodes; sin embargo luego de analizarlo opté por elaborar un custom post type específicamente para las entradas de facebook.

Si me preguntan los motivos por los que decidí utilizar custom post types, les puedo decir que es por la organización de las entradas. Hay que tener en cuenta que el usuario final puede no tener muchos conocimientos sobre el uso de shortcodes o campos personalizados, y mucho más si para utilizar las entradas normales tendríamos que crear una categoría específica para este tipo de entradas (esto es lo que he estado haciendo casi siempre); si esto es así, por que mejor no crear un apartado para las entradas de facebook.

Lo primero que debemos hacer es declarar el custom post type:

Esto sería básicamente la declaración de nuestro post type, al que le hemos llamado “facebook”, ahora lo que demos hacer es indicarle los diferentes argumentos que mostrarán este tipo de entrada especial en nuestra administración:

Con esto ya hemos creado el custom post type y podemos utilizarlo, sin embargo hay que personalizarlo un poco más.

Con el bloque de código anterior crearemos los mensajes que se mostrarán luego de alguna acción, como, publicar, actualizar, programar entradas, etc.

Y este último bloque de código lo que hace es mostrar el menú de ayuda en la parte superior, el mio es algo simple no lo creen.
Hasta aquí lo que hemos hecho es realizar un custom post type con el cual vamos a separar las entradas de facebook de las entradas normales, sin embargo hasta el momento lo único que podemos ingresar es el título de la entrada, faltaría agregarle los campos necesarios para mostrar el ID de la entrada de facebook y esas cosas, para saber lo que necesitamos, tendríamos que ver la estructura del código para insertar una entrada o publicación de una página de facebook en nuestra web.
Para ello vamos a cualquier página de facebook donde haya publicaciones, en la parte superior derecha del bloque de la publicación, al pasar el puntero del mouse se muestra una flechita hacia abajo, pulsan allí y en la última opción dice “Insertar Publicación”, pulsan allí y les mostrará una ventana con el código para insertar y la previsualización de la entrada.

Algo que podemos rescatar de este código es que tiene la URL completa de la publicación, la URL de la página y el nombre de la página. Ahora lo que nos toca hacer es crear los metabox para estos tres datos:

Aquí estamos indicando el ID del primer campo de los metabox que será la URL o ID de la publicación, donde dice ‘facebook’ especificamos el slug del custom post type que indicamos anteriormente, en “normal” indicamos la ubicación del bloque del metabox, en este caso estará en la parte principal de la página de publicación.
Ahora lo que haremos es agregar los campos que se mostrarán en el metabox, puede que existan otras formas pero esta es la que más me sirvió, ya que me permite personalizar cada uno de los campos del metabox.

Nótese que cuando asignamos los campos les creamos un ID a cada uno, los mismos que se indicarán en cada uno de los campos de texto para tomar los datos.
Ahora nos queda únicamente el bloque de código que nos permitirá guarda el metabox.

Y esto es todo el código necesario que hace funcionar nuestro custom post type con sus metabox.

Cómo cargar el contenido del Custom Post Type

Ahora para mostrar el custom post type, en cualquier página sería de la siguiente manera:

Sin embargo, hay que tener en cuenta que si queremos que los custom post types se muestren en una página especial con sus propios formatos, etc., podemos crear una plantilla personalizada, lo cual nos permitirá crear una página donde podremos mostrar el contenido; para hacer esto debemos sacar una copia del index.php, page.php ó el archivo que nos pueda servir para este menester, lo importante a tener en cuenta es que saber que tipo de página será, por ejemplo si se van a mostrar un listado de entradas personalizadas, tendremos que utilizar una copia del index.php o el archivo que liste las entradas, en cambio si vamos a mostrar algo en concreto, como por ejemplo una galería de imágenes, la plantilla que podríamos utilizar vendría a ser la del page.php; una vez copiado el archivo hay que renombrarlo, en este caso en particular le llamaríamos “facebook.php” ó “archive-facebook.php”
Para crear una plantilla personalizada lo único que debemos hacer es modificar el encabezado del archivo; un archivo normal de wordpress, page.php, single.php, archive.php, page.php, etc., tiene una llamada a la cabecera de la siguiente manera:

Mostrar las entradas personalizadas de un Custom Post Type

Ya hemos creado custom post type o entradas personalizadas, hemos creado una página personalizada para mostrar el listado de las entradas personalizadas, sin embargo, mostrar una entrada simple no es lo mismo utilizando el archivo single.php; para hacer esto, lo que debemos hacer es sacar una copia del archivo single.php y renombrarlo a single-post_type.php, en nuestro caso sería: single-facebook.php

Solucionar error 404 al mostrar entradas personalizadas de un custom post type:

Sin embargo, puede a muchos les resulte un error 404 al momento de cargar una entrada personalizada, y la solución es cambiar la estructura de nuestros enlaces permanentes:

http://tba.cl/web/flickr/atomic-age-of-the-self-tanner/

El enlace anterior corresponde a una entrada personalizada de una galería con flickr que acabo de crear como custom post type (cómo hacer la galería lo veremos en un nuevo post).
Irónicamente mientras hacía esta publicación, me percaté que bien podía únicamente habilitar el editor de wordpress y que el cliente pegara el código de inserción de facebook en el panel de texto (HTML), sin embargo ya que hice el código creí necesario publicarlo para que tengan una idea de como asignar metaboxes a un custom post type.

Y como dicen que las imágenes valen más que mil palabras, les dejo unas capturas:

Menu de entradas de facebook

Listado de entradas de facebook

Página de edición/creación de entradas de facebook

Entrada de facebook publicada

Probando si se muestra seleccin de Google Adsense

Una respuesta a “Cómo crear un custom post type con meta boxes”

  1. […] cuando les hice un tutorial para crear custom post types, aprendimos como elaborar custom post types personalizados y además mostrar una lista de ello, si […]

Deja un comentario