2

Crea un portfolio en WordPress responsive

PrincipalHoy nos hacemos eco del tutorial de Joe Casabona, quien nos explica cómo crear un tema y plugin para un portfolio en WordPress responsive.

 

Vamos a trabajar con dos plantillas: una página de archivo, donde figurarán todos los proyectos recientes, y una sola página, que mostrará un proyecto específico. La página de archivo del portfolio, es bastante simple con una cabecera y tres columnas de proyectos con el ancho completo que se irán reduciendo hasta una columna, según la pantalla del dispositivo desde donde se visualice.

 

El código HTML y el CSS están disponibles aquí. Cada proyecto en la página tendrá la siguiente estructura (este es el código HTML que se generará por el Loop de WordPress):

 1

 

La página que va sola tendrá un diseño similar, envolviendo todo el texto en un contenedor llamado .project en vez de .card. Como podrás observar, Casabona ha insertado en el sitio de los archivos un archivo style.scss. Todo el CSS ha sido desarrollado mediante Sass, pero no te preocupes: la generatedstyle.css está compilada para que sea legible.

  

La creación de un nuevo tipo de post personalizado

Un tipo personalizado de post es un objeto de WordPress que te permite añadir cualquier tipo de contenido desde el editor y tratarlos de la misma manera que las entradas. En una nueva instalación de WordPress hay opciones de menú para Entradas y Páginas. Ambas son considerados como tipos de entradas que manejan contenido de forma diferente.

 

Con los tipos personalizados de post puedes añadir opciones para la creación de nuevos tipos de contenido al menú de administración de WordPress. A continuación, crearemos un tipo personalizado de post llamado Portfolio.

  

Vamos a desarrollar este tipo personalizado de post como parte de un plugin WordPress más grande para los proyectos de portfolios. El contenido está ligado al diseño y por eso, para no perder el portfolio al cambiar el theme, lo haremos mediante dos métodos: plantillas, etiquetas de plantillas y shortcodes que puedan ser usados por el editor.

 

El primer paso es definir el plugin. Para ello, crea una carpeta en wp-content /plugins y nómbrala como te parezca. En este caso Joe la ha nombrado como / jlc-projects /. Dentro de esa carpeta, tienes que crear un archivo con el mismo nombre (por ejemplo, jlc-projects.php) y agregar este código:

.2

 En este ejemplo, Joe Casabona ha optado por utilizar el prefijo jlc- para todo. Tú tienes que elegir tu propio prefijo teniendo en cuenta de que el nombre no entre en conflicto con otros plugins.

 3

La página de administración para agregar un nuevo proyecto. Presta especial atención a la sección ‘Enlace de proyecto’.

 

Antes de saltar a JLC-proyecto-cpt.php, inserta el código que aparece a continuación para crear un nuevo tamaño de la imagen, que usarás en tu tipo personalizado de post.

 4

 

Ahora es el momento de crear jlc-project-cpt.php (o como tú lo hayas llamado): Hablaremos solo de la parte importante, pero puedes encontrar el código al completo en la repo de GitHub: primero (después de la apertura <?php tag) definimos el tipo personalizado de post.

 5

 

Ésta es tu función estándar de tipo personalizado de post. Añade una acción para llamarla en init y, a continuación, envía la lista de argumentos a register_post_type(), junto con la indicación del tipo, que será «portfolio».

 

Después de registrar el tipo de post, registra la taxonomía personalizada para el tipo de post. Es importante mantener estas dos funciones juntas. Si no lo haces, y la taxonomía de alguna forma se registra primero, WordPress generará un error.

 

Un tipo personalizado de post contiene un título, el editor (que servirá como el texto del cuerpo), y una miniatura, que es donde irá la imagen. Tampoco está de más añadir una URL a la página web que se está mostrando. Para ello, es necesario crear la función que añadirá esta caja en el administrador:

 

6 

Estas funciones son bastante sencillas. Cuando inicies el administrador, utiliza la función jlc_projects_admin_init función() que creará una nueva caja de metas para los artículos del portfolio. Para hacer esta caja se necesita una nueva función denominada jlc_projects_options().

 

Una vez dentro de la función ‘opciones’, simplemente coge el linkvalue, llamado jlc_projects_link, y publícalo. Pero en primer lugar, asegúrate de que no se está realizando una copia de seguridad automática. Después, tenemos que guardar los metadatos cuando se guarde el post:

 

7

 

Una vez creada la sección para el tipo personalizado de post, llega el momento de añadir algunas funcionalidades ‘front end’ que ayuden a mostrar los proyectos a tus visitantes: consiste en una plantilla de archivo, una única plantilla de página y un shortcode (no incluido en el tutorial). Pero antes de hacer esto, hay otra función que tienes que crear para la visualización de imágenes: picturefill.js.

 

Esta parte de JavaScript (puede encontrar el repo GitHub aquí) te permite definir un conjunto de media queries para cambiar una imagen por una versión responsive. Esto también tiene implicaciones para el tiempo de carga, ya que asumimos que una pantalla más pequeña puede deberse a un dispositivo móvil con 4G, 3G o incluso EDGE (aunque no siempre sea el caso).

  8

La plantilla HTML utiliza aquí, a lo ancho. Es un encabezado simple con tres columnas de proyectos.

 

Puedes ver el patrón marcado por un elemento picturefill estándar en el repo GitHub. Puedes tener un número ilimitado de elementos <span> para cada tamaño de la imagen que tengas. También hay una reserva para los usuarios sin JavaScript.

  

Como imaginas, WordPress crea múltiples versiones de cada imagen que cargamos usando el Uploader Media, así que se presta muy bien a picturefill.js. Lo primero que debes hacer es cargar el script que se encuentra en la carpeta / js /, dentro del directorio de tu plugin. Y, después, añade el siguiente código para jlc-projects.php:

 9

 

Esto cargará tu JavaScript con los scripts que están cargando los otros plugins y también se asegurará de que no estás cargando picturefill.js más de una vez.

.

Ya los proyectos van a utilizar la sección de imagen ofrecida para mostrar la pantalla, puedes sustituir el valor por defecto que aparece en la imagen utilizando el filtro post_thumbnail_html.

 

Ten en cuenta que esta función reemplazará todas las secciones de imágenes que aparecen en el sitio. Si ello causara problemas, debes agregar algunas condiciones a tu plugin para asegurarte de que este filtro sólo se utiliza en las páginas del portfolio.

 10

 

La función tiene una matriz de todos los tamaños de imagen en WordPress que quieres usar. Si tienes tus propios tamaños definidos, tendrás que añadirlos aquí.

 

Después de la configuración (definición de los tamaños de la imagen, apertura del elemento picturefill, etc.), el picturefill se mueve a través de los tamaños, publicando una imagen para cada entrada.

 

Para cada entrada, wp_get_attachment_image_src() tienes que coger la URL de la imagen basándote en el ID de la imagen (donde get_post_thumbnail_id() está basado en el ID del post) y en su tamaño. wp_get_attachment_ image_src() devuelve una matriz que incluye la imagen, el alto, el ancho y si está o no recortada.

 

Ahora, cada vez que cojamos la miniatura del post, el HTML devuelto será el de tu propia función.

 

Es posible que en el futuro ampliemos con más información. Por el momento, ¡ya podéis ir empezando! 😉 ¿Ya tienes un portfolio en WordPress responsive? Si te ha quedado alguna duda, puedes dejar un comentario y trataremos de ayudarte.

Andrea Barreiro

Andrea Barreiro

Andrea trabaja en Host Europe desde 2012. Es parte del equipo de marketing y supervisa la actividad en redes, el blog, actualiza la web, gestiona el email marketing y desarrolla otras iniciativas con nuestros clientes.

More Posts

Comentarios sobre "Crea un portfolio en WordPress responsive"

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *