Advertisement
  1. Code
  2. Widgets

Uso de tipos de publicaciones personalizados para crear una cartera Killer

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Posiblemente la mejor adición a WordPress 3.0 fue la de los tipos de correos personalizados. Esto hizo que WordPress se convirtiera en un CMS que puede administrar publicaciones y páginas para poder administrar cualquier cosa que el usuario pueda pensar con bastante facilidad. Ya no tiene que agregar campos personalizados a las publicaciones, puede agregar soporte de alto nivel a sus propios tipos, creando sus propios archivos de página de tema y áreas de administración. Una de las primeras cosas que hice con los tipos de publicaciones personalizadas fue renovar mi cartera y hoy te mostraré cómo lo hice.

Recientemente le mostramos algunas herramientas ingeniosas para crear tipos de publicaciones personalizadas "instantáneas". Hoy en día, se trata de crear un proyecto utilizando CPT desde cero ... Haremos todo lo posible, desde crear el tipo personalizado hasta su estilo para el tema. El CSS (y CSS3!) Que uso debería ser lo suficientemente genérico para la mayoría de los temas, pero en caso de que no lo sea, ¡siéntase libre de cambiarlo! Está pensado para ser utilizado como punto de lanzamiento para todos, ¡así que siéntase libre de ser creativo!


Empezando algunos pensamientos

Lo primero a tener en cuenta es que al crear un tipo de publicación personalizada, tenemos un par de opciones en cuanto a cómo queremos abordarlas; Las dos implementaciones principales que podría considerar son:

  1. Como parte del tema actual (generalmente a través del archivo functions.php)
  2. Como su propio plugin independiente.

Para cada uno hay pros y contras. En este tutorial, ya que nos estamos integrando con nuestro tema, lo haremos parte del tema, llamando a todo lo que necesitamos a través del archivo functions.php.

Nota para el desarrollador: porque estaremos incorporando esto directamente en nuestro tema, eso no significa que esta sea la forma correcta para usted, aunque ... considere el uso final de su tema. Si existe una buena posibilidad de que sus usuarios cambien de tema en el futuro, o está lanzando su tema como un producto público o premium para que la use mucha gente, probablemente querrá incluir su tipo de publicación personalizada. como un archivo independiente que la gente puede llevar con ellos sin investigar mucho su código.

Solo piénselo de esta manera, si su tema es lo único que está cargando sus tipos de publicación personalizados y usted cambia de tema, los datos del tipo de publicación personalizada no serán utilizables. Seguirá existiendo en la base de datos, pero no aparecerá en nuevos temas de manera significativa. A veces esto no es posible si realmente está revisando un tema para usar un CPT al incluir muchas personalizaciones y plantillas, pero al menos considere lo que los usuarios podrían necesitar para preservar el uso de sus datos a largo plazo.

¡Comencemos entonces!


Lo que vamos a crear

Paso 1 Configuración

Como dije anteriormente, agregaremos esto a nuestro tema actual (estoy usando mi propio tema personalizado), así que lo primero que debemos hacer es ir a nuestro tema y abrir el archivo functions.php. Pondremos nuestro código de tipo de publicación personalizado en un archivo diferente (para que sea más fácil de leer / administrar), así que llamaremos a ese archivo en la parte superior de nuestro archivo de funciones:

Ahora vamos a agregar dos archivos a nuestro tema: portfolio-type.php y portfolio.css. Como probablemente pueda adivinar, todo nuestro CSS para el nuevo tipo entrará en el último archivo.


Paso 2 Registro del nuevo tipo

Miniatura y soporte de imágenes destacadas

Antes de registrar el nuevo tipo, debemos agregar soporte para una parte integral de las imágenes presentadas por la presentación del portafolio. Después de agregar las etiquetas de apertura y cierre de php a portfolio-type.php, agregue el siguiente código:

Estas líneas, después de verificar que su instalación particular sea compatible con las miniaturas posteriores, las agregarán a su tema actual y luego establecerán un par de tamaños predeterminados. set_post_thumbnail_size (), como su nombre indica, establecerá el tamaño predeterminado para la miniatura. La siguiente línea (add_image_size () creará otra imagen que podremos llamar llamada 'captura de pantalla', que será de 720 x 540. Usaremos estas imágenes cuando mostremos nuestro portafolio.

Creación de un nuevo tipo de publicación

Aquí es donde ocurre la magia: ahora le contaremos a WordPress sobre nuestro nuevo tipo de publicación. Agregue el siguiente código a portfolio-type.php:

La primera línea aquí es un gancho en WordPress que llamará a nuestra función, portfolio_register () en la inicialización. La función en sí configura una serie de argumentos para enviar con nuestro tipo de publicación personalizada. En particular, estamos configurando nuestras etiquetas de administrador, dando a este tipo todas las capacidades de una publicación estándar de WordPress, permitiendo la reescritura de URL (para enlaces permanentes), y agregando soporte para el título, el editor y los campos de imagen destacados. Puede leer más sobre todos los argumentos para register_post_type () aquí.

Después de configurar la matriz de argumentos ($ args), la pasamos junto con el nombre de tipo a la función register_post_type ().

Añadiendo una taxonomía personalizada

Lo último que haremos en esta sección es crear una taxonomía personalizada para nuestro nuevo tipo. Agregue la siguiente línea de código a su archivo portfolio-type.php:

Esto creará la nueva taxonomía 'proyecto-tipo' y la aplicará al tipo de publicación 'cartera'. Puedes leer más sobre register_taxonomy () aquí.


Paso 3 Agregando Campos Personalizados

Creación del cuadro de campo personalizado

No tendríamos mucho de un tipo personalizado sin tener alguna información adicional para agregar a la publicación. Agregaremos esa información en forma de campos personalizados. Específicamente, agregaremos un campo adicional para un enlace a más información sobre el proyecto o al proyecto en sí. Agregue el siguiente código a su archivo portfolio-type.php:


Este código creará el cuadro de "Opciones de proyecto" que vemos aquí.

Primero usamos el enganche admin_init de WordPress para llamar a nuestra función portfolio_meta_box () cuando se crea el administrador de WordPress. Nuestra función agregará otro cuadro a nuestro tipo de cartera, que se puede rellenar con cualquier cosa. Lo que se rellena con el cuadro está cubierto por el tercer argumento, que es una función de devolución de llamada. En este caso, nuestra función se llama portfolio_meta_options ().

En portfolio_meta_options () crearemos un campo de formulario que se utilizará para capturar el enlace del proyecto. Lo primero que hacemos es agarrar la matriz global de $ post para que podamos obtener los campos personalizados para cualquier publicación que estemos editando. En nuestra siguiente línea, estamos comprobando que WordPress no esté guardando la publicación o los campos personalizados; si es así, es posible que veamos resultados inexactos cuando obtengamos los datos personalizados.

Si WordPress no está haciendo un guardado, tomamos los campos personalizados para la publicación actual y creamos un campo de formulario utilizando esa información. $ custom (lo que se obtiene de get_post_custom () es una matriz 2D en la que la clave es lo que llamamos el campo del formulario para nuestra costumbre en). Mire nuestro cuadro de texto para ver el enlace. Notará que el nombre coincide con el índice que llamamos en nuestra matriz $ custom. También notará que no tenemos un formulario separado o botón de envío. Este campo se agrega al formulario utilizado para editar la publicación completa.

Aunque solo creamos uno aquí, obviamente puedes crear tantos como quieras.

Guardar los datos personalizados

Ahora que hemos creado nuestro meta box personalizado, es hora de crear una función que guarde la información. Agregue las siguientes líneas de código a su archivo portfolio-type.php:

Primero, como de costumbre, tenemos nuestro gancho, esta vez para llamar a nuestra función cuando se guarda la publicación. En la función en sí, nuevamente tomamos la matriz $ post para que podamos obtener la ID de la publicación y verificar si la publicación se está guardando automáticamente. Si no incluimos esta línea, perderemos nuestros datos, por lo que es importante que la mantengamos.

Si la publicación no se está actualizando, guardamos nuestros campos personalizados utilizando update_post_meta (), enviando la identificación de la publicación, el nombre del campo personalizado y el nuevo valor.


¡Así es como se ve todo el kit y el caboodle!

Paso 4 de personalización de las columnas de administración

Aquí vamos a personalizar la lista mostrando todos nuestros proyectos. Agregue el siguiente código a su archivo portfolio-type.php:


Aquí está nuestra lista de proyectos recién modificada.

Después de nuestro gancho para la primera función (project_edit_columns ()), hacemos algo bastante interesante en términos de editar las columnas. WordPress coloca las columnas para la lista de visualización de un tipo de publicación en una matriz con una clave y un valor. Creamos esos pares clave-valor en esta función. En la siguiente función (project_custom_columns ()), usamos una instrucción de cambio para agarrar la clave y luego mostrar la información que queremos en base a ella. Como puede ver, al igual que en la sección anterior, obtenemos la matriz global $ post para que podamos obtener la ID de la publicación para mostrar correctamente cualquier información personalizada, como nuestro enlace y nuestra taxonomía.

Probablemente haya notado que el número de casos no coincide con el número de columnas en nuestra matriz de $ columnas. Esto se debe a que para ciertas teclas, como cb y title, WordPress tiene valores predeterminados que no queremos sobrescribir.


Paso 5 Agregar algunas funciones de visualización

Antes de crear una página de plantilla, quiero darle algunas funciones que incluí para mostrar los proyectos de manera correcta. Abra su archivo functions.php y agregue los siguientes tres componentes:

Los primeros dos pares gancho / función son comunes en WordPress, simplemente cambian la longitud del extracto y el indicador de "más texto", que he reemplazado con solo un espacio. Tenga en cuenta que esto sucederá con todas las publicaciones, no solo con la publicación de la cartera, y que si está utilizando un tema secundario, es posible que esto no funcione.

La función personalizada, portfolio_thumbnail_url () toma el ID de una publicación como argumento y toma la versión de captura de pantalla de la imagen que subimos. Lo llamaremos en nuestra página de plantillas, ¡así que estén atentos!


Paso 6 Crear una página de plantilla

Ahora que tenemos nuestro tipo de publicación personalizado configurado en el administrador, es hora de crear una página de tema para que podamos mostrarlos. Para lograr esto, crearemos una plantilla con el nombre "Cartera" y luego asignaremos la plantilla a una página en WordPress. Si bien también podemos crear archives-portfolio.php para lograr lo mismo, no podremos agregar esa página a un menú del administrador de WordPress, por lo que esta es la mejor ruta. Manteniendo las convenciones de nomenclatura de WordPress, cree un nuevo archivo llamado page-portfolio.php y agregue el siguiente código:


Esto creará la plantilla 'Portafolio'.

Estas pocas líneas establecen las partes más importantes de la página. La primera línea le permite a WordPress saber que esta es una plantilla de página que debe ir con el nombre "Portafolio" Luego, después de llamar al encabezado del tema, configuramos la consulta para capturar las últimas 9 publicaciones del tipo portafolio. Lo siguiente que hay que hacer es mostrarlos. Agregue este código a su archivo page-portfolio.php:

Notará algunas cosas aquí: primero, después de que estemos en el circuito, debemos recortar caracteres "" 'extraños de nuestro título y contenido usando str_ireplace (). No estoy exactamente seguro de por qué aparecen aquí, pero por lo que puedo decir, este es un paso necesario. También deberías notar que estamos usando lightbox. Si bien podríamos agregarlo nosotros mismos (lo cual probablemente recomendaría si se tratara de un complemento), ya que estamos modificando nuestro propio tema, podríamos descargar uno de los muchos complementos de lightbox disponibles en el repositorio de WordPress. ¡Solo elige tu favorito!

Aparte de eso, esto debería ser familiar para todos los que trabajaron con el bucle de WordPress. Lo que estamos haciendo aquí es crear bloques con nuestras miniaturas y descripciones, que enlazan a (usando lightbox) la captura de pantalla para cada uno de los 9 proyectos. No incluí enlaces a otras páginas (en caso de que tenga más de 9 proyectos) porque solo quiero que mis usuarios vean los últimos 9 proyectos. Puede permitir que los usuarios accedan a otras publicaciones utilizando posts_nav_link (), si así lo desea.

También debo tener en cuenta que eliminé el enlace más predeterminado de WordPress porque estaba vinculado a una sola página de publicación, y quería usar lightbox, así que construí la mía.


Paso 7 Estilo de nuestro tipo de cartera

Aquí está la parte divertida: hacer que nuestro tipo de cartera se vea bonito. Aquí hay algunos CSS que he incluido: puede agregarlos al final de su hoja de style.css, o en nuestro archivo portfolio.css recién creado. Solo asegúrese de usar @import para llamar a portfolio.css en la parte superior de style.css de su tema (no funcionará en ningún otro lugar):

Si va a hacer referencia a nuestra página de plantillas, verá que cada proyecto está envuelto en un div llamado "elemento", al que ahora aplicamos CSS. Dado que no hay dos temas iguales, es posible que deba modificar un poco su propio CSS, pero este es un buen punto de partida para usted. También he incluido una clase para flotadores de auto-limpieza. Esta es una técnica que obtuve de Dan Cederholm, y creo que es un poco más elegante que el método estándar "clearfix" para borrar el contenido después de divs flotantes.


Conclusión

¡Eso es! Ahora tienes un portafolio simple usando tipos de correos personalizados. Si bien fue creado para satisfacer mis necesidades y quería simplificar las cosas, las posibilidades son infinitas, ya que puede adaptarlo para cualquier tipo de portafolio que tenga (escritura / artículos, fotografía, diseño gráfico, etc.). Si no desea utilizar lightbox para mostrar el proyecto individual, también puede crear una página de tema con el nombre de single-portfolio.php, que luego aplicará el código a cada proyecto individual, al igual que lo hace single.php para publicaciones en el blog.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.