Share
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 les 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 construir un proyecto usando CPT desde cero? Haremos todo lo posible, desde la creación del tipo personalizado hasta el estilo para su uso en 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.!
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:
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 ti? Considera el uso final de tu 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 el uso de muchas personas, probablemente querrá incluir su tipo de publicación personalizada. como un archivo independiente que las personas pueden llevar consigo sin tener que investigar mucho su código.
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 incluyendo 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!
Como mencioné anteriormente, agregaremos esto a nuestro tema actual (estoy usando mi propio tema personalizado), por lo que lo primero que debemos hacer es ir a nuestro tema y abrir el funciones.php expediente. Pondremos nuestro código de tipo de publicación personalizado en un archivo diferente (solo 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:
Accentsconagua
require_once ('portfolio-type.php'); 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.
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:
if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (280, 210, true); // Miniaturas de publicaciones normales add_image_size ('screen-shot', 720, 540); // Pantalla de tamaño completo 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 lo sugiere su nombre, establecerá el tamaño predeterminado para la miniatura. La siguiente línea (add_image_size () Creará otra imagen que podemos llamar llamada 'captura de pantalla', que será de 720x540. Usaremos estas imágenes al mostrar nuestro portafolio..
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:
add_action ('init', 'portfolio_register'); function portfolio_register () $ args = array ('label' => __ ('Portfolio'), 'singular_label' => __ ('Project'), 'public' => true, 'show_ui' => true, 'capacity_type '=>' post ',' hierarchical '=> false,' rewrite '=> true,' support '=> array (' title ',' editor ',' thumbnail ')); register_post_type ('portfolio', $ args); 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 un conjunto 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. Puedes 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 ().
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:
register_taxonomy ("project-type", array ("portfolio"), array ("hierarchical" => true, "label" => "Project Types", "singular_label" => "Project Type", "rewrite" => true )); 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í.
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:
add_action ("admin_init", "portfolio_meta_box"); function portfolio_meta_box () add_meta_box ("projInfo-meta", "Opciones del proyecto", "portfolio_meta_options", "portfolio", "side", "low"); function portfolio_meta_options () global $ post; if (definido ('DOING_AUTOSAVE') && DOING_AUTOSAVE) devuelve $ post_id; $ custom = get_post_custom ($ post-> ID); $ link = $ custom ["projLink"] [0]; ?> 
Este código creará el cuadro de "Opciones de Proyecto" que vemos aquí. Primero usamos el gancho de WordPress admin_init 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 denomina. 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 lo global. $ post array 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 con esa información. $ personalizado (lo que se devuelve de get_post_custom () es una matriz 2D donde la clave es lo que llamamos el campo de formulario para nuestra costumbre. Mire nuestro cuadro de texto para ver el enlace. Notarás que el nombre coincide con el índice que llamamos en nuestro $ personalizado formación. 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:
add_action ('save_post', 'save_project_link'); function save_project_link () global $ post; if (definido ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; else update_post_meta ($ post-> ID, "projLink", $ _POST ["projLink"]); Primero, como de costumbre, tenemos nuestro gancho, esta vez para llamar a nuestra función cuando se guarda la publicación. En la propia función, volvemos a agarrar el $ post matriz para que podamos obtener la ID de la publicación y comprobar si la publicación se guarda automáticamente. Si no incluimos esta línea, lo haremos. perder nuestros datos, así que es importante que mantengamos eso.
Si la publicación no se está actualizando, guardamos nuestros campos personalizados usando update_post_meta (), enviar la ID 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:
add_filter ("manage_edit-portfolio_columns", "project_edit_columns"); función project_edit_columns ($ columnas) $ columnas = matriz ("cb" => ""," title "=>" Project "," description "=>" Description "," link "=>" Link "," type "=>" Type of Project ",); return $ columns; add_action (" manage_posts_custom_column "," project_custom_columns "); function project_custom_columns ($ column) global $ post; switch ($ column) case" description ": the_excerpt (); break; case" link ": $ custom = get_post_custom (); echo $ custom ["projLink"] [0]; break; case "type": echo get_the_term_list ($ post-> ID, 'project-type', ", ',',"); break; 
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 basarnos en ella. Como puede ver, al igual que en la sección anterior, obtenemos el $ post para que podamos obtener la ID de la publicación para mostrar correctamente cualquier información personalizada, como nuestro enlace y taxonomía.
Probablemente haya notado que el número de casos no coincide con el número de columnas en nuestro $ columnas formación. Eso 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:
add_filter ('excerpt_length', 'my_excerpt_length'); function my_excerpt_length ($ length) return 25; add_filter ('excerpt_more', 'new_excerpt_more'); function new_excerpt_more ($ text) return "; function portfolio_thumbnail_url ($ pid) $ image_id = get_post_thumbnail_id ($ pid); $ image_url = wp_get_att_attachment_image_src ($ image_id '); 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. Siguiendo con 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 de la cartera de tipos. Lo siguiente que hay que hacer es mostrarlos. Agregue este código a su archivo page-portfolio.php:
Cartera de trabajo
: "rel =" lightbox [trabajo] "href ="ID)?> "> : : "rel =" lightbox [trabajo] "href ="ID)?> "> (Más)
"> Visitar el sitio
Enlace en vivo no disponible
Notarás 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, podemos 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. Puedes permitir a los usuarios acceder a otras publicaciones usando posts_nav_link (), si así lo eliges.
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í mi propia.
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. Sólo asegúrese de usar @importar para llamar a portfolio.css en la parte superior de style.css de su tema (no funcionará en ningún otro lugar):
.item float: left; margen: 5px; ancho: 310px; fondo: #EFEFEF; -moz-border-radius: 7px; -webkit-border-radius: 7px; radio del borde: 7px; text-align: center; -moz-box-shadow: 0px 0px 6px # 999; -webkit-box-shadow: 0px 0px 6px # 999; cuadro de sombra: 0px 0px 6px # 999; .item p text-align: left; .item p a text-align: left; font-weight: negrita; .item img margin-top: 5px; text-align: center; borde: 1px sólido # 000000; max-width: 280px; / * auto-clear floats * / .group: after content: "."; bloqueo de pantalla; altura: 0; Limpia los dos; visibilidad: oculta;
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. Como no hay dos temas iguales, es posible que tengas que modificar un poco tu propio CSS, pero este es un buen punto de partida para ti. 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 entradas de blog.
