Share
Wordpress, como sistema de gestión de contenido, se utiliza a menudo para crear sitios web de cartera. Con la evolución del diseño y las funcionalidades de la interfaz de usuario, ha surgido una nueva tendencia: mostrar los elementos de la cartera en diferentes diseños. Este tutorial detalla el proceso de creación de una sección de cartera dedicada en el backend de WordPress, y el uso de jQuery y CSS3 para mostrar la cartera de una manera elegante..
En este tutorial, usaremos ampliamente las potentes funciones de WordPress, como publicaciones personalizadas, taxonomías personalizadas, y también escribiremos una función para obtener nuestros propios extractos personalizados..
El primer paso para crear nuestro sitio web de cartera es instalar Wordpress. Esta es una tarea simple y, lo que es mejor, la mayoría de los hosts web ofrecen instaladores con un clic. Sin embargo, si eres nuevo en esto, aquí hay una guía increíble para ayudarte con la instalación..
Una vez que se haya completado la instalación, deberíamos crear nuestro tema personalizado que mostrará nuestro portafolio. Hay varios métodos para crear temas personalizados. Algunos prefieren crear una nueva plantilla blanca en blanco, mientras que otros optan por crear temas secundarios de la nueva plantilla TwentyTen. Para este tutorial, usaremos el tema de Starker, de Elliot Jay Stocks. Es un tema completamente en blanco sin estilo. Es una gran base para construir nuestro tema. Editar el estilos.css y cambie el nombre del tema al que se hace referencia en la parte superior. Para instalar el tema, simplemente pegue la carpeta del tema en elwp-contenido> temas carpeta. Una vez que el tema está instalado, puede activarlo yendo a la temas página.
Nuestro sitio de cartera no contendrá muchos datos. Un sitio de portafolio básico contiene imágenes de los proyectos, algunas etiquetas para identificar los proyectos y una breve descripción de cada uno. El tema de diseño múltiple funcionará de tal manera que el usuario pueda seleccionar entre un diseño de cuadrícula y de lista. Al igual que muchos sitios web de diseño múltiple disponibles, no vamos a cargar una página diferente cuando el usuario haga clic en la vista de lista o en la vista de cuadrícula. En su lugar, utilizaremos AJAX para cargar de forma asíncrona en el nuevo visor. Este es el diseño básico de cómo aparecerá nuestro sitio de cartera en modo de cuadrícula:
Una vez que el usuario haga clic en el control de vista de lista, todo el diseño cambiará suavemente a una vista de lista que contendrá el título del proyecto, las etiquetas asociadas con él y una breve descripción..
Para nuestra cartera, debemos registrar un tipo de publicación personalizada, llamada "proyecto". Podemos personalizar cada aspecto de una publicación de WordPress. Por ejemplo, podemos cambiar las etiquetas involucradas, seleccionar varias funciones para la publicación, como comentarios, miniaturas, extractos, etc..
Para implementar una publicación personalizada, edita la funciones.php archivo ubicado dentro del tema carpeta. Contiene una gran cantidad de código predefinido, ya que el tema desnudo de Starkers proporciona algunas funcionalidades de la plantilla TwentyTen predeterminada. No te asustes ni te confundas; Puede agregar el siguiente código en la parte inferior o superior de la funciones.php expediente.
No deje ningún espacio vacío al final de la
funciones.phpexpediente.
Enganchamos nuestra función personalizada a la inicialización (en eso) Acción de la siguiente manera:
Accentsconagua
/ * --- Creando tipo de publicación personalizada para el proyecto - * / add_action ('init', 'project_custom_init'); Esta project_custom_init El método se utilizará para registrar el tipo de publicación personalizada en la base de datos de WordPress.
Puede aprender en detalle sobre el método involucrado en el registro de un tipo de publicación personalizada aquí.
los register_post_type El método requiere un nombre para la publicación personalizada y un conjunto de argumentos que definen las características de la publicación personalizada. En primer lugar, necesitamos definir las etiquetas para la publicación personalizada. Estas etiquetas se utilizarán para la publicación personalizada en el administrador de WordPress.
/ * - Inicio de inicio personalizado Comenzar - * / function project_custom_init () $ labels = array ('name' => _x ('Projects', 'post type general name'), 'singular_name' => _x ('Project ',' nombre tipo de publicación singular '),' add_new '=> _x (' Add New ',' project '),' add_new_item '=> __ (' Add New Project '),' edit_item '=> __ (' Edit Proyecto '),' new_item '=> __ (' New Project '),' view_item '=> __ (' View Project '),' search_items '=> __ (' Search Projects '),' not_found '=> __ ( 'No se encontraron proyectos'), 'not_found_in_trash' => __ ('No se encontraron proyectos en la Papelera'), 'parent_item_colon' => ", 'menu_name' => 'Proyecto'); Una vez que hayamos definido las etiquetas, debemos definir el conjunto de argumentos para el tipo de publicación personalizada. La matriz de etiquetas definida anteriormente también será un argumento. Una vez que se definen los argumentos, registramos el tipo de publicación personalizada como "proyecto".
$ args = array ('labels' => $ labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'reescribir '=> true,' capacity_type '=>' post ',' has_archive '=> true,' hierarchical '=> false,' menu_position '=> null,' support '=> array (' title ',' editor ', 'autor', 'miniatura', 'extracto', 'comentarios')); // El siguiente es el paso principal donde registramos la publicación. register_post_type ('project', $ args); / * - Finaliza el inicio de la publicación personalizada - * / También podemos agregar opcionalmente mensajes personalizados para el tipo de publicación personalizada. Estos mensajes se mostrarán en el panel de WordPress cuando editemos o actualizamos la publicación personalizada. Podemos hacer esto creando un filtro para los mensajes actualizados de la siguiente manera:
// Agregar filtro para garantizar que el texto Proyecto, o proyecto, se muestre cuando un usuario actualiza un libro add_filter ('post_updated_messages', 'project_updated_messages'); función project_updated_messages ($ messages) global $ post, $ post_ID; $ messages ['project'] = array (0 => ", // No utilizado. Los mensajes comienzan en el índice 1. 1 => sprintf (__ ('Project updated. View project'), esc_url (get_permalink ($ post_ID))) , 2 => __ ('Campo personalizado actualizado.'), 3 => __ ('Campo personalizado eliminado.'), 4 => __ ('Proyecto actualizado.'), / * Traductores:% s: fecha y hora de la revisión * / 5 => isset ($ _ GET ['revision'])? sprintf (__ ('Proyecto restaurado a revisión desde% s'), wp_post_revision_title ((int) $ _GET ['revision'], falso)): falso, 6 => sprintf (__ ('Proyecto publicado. Ver proyecto'), esc_url (get_permalink ($ post_ID)), 7 => __ ('Proyecto guardado.'), 8 => sprintf (__ ('Proyecto presentado . Vista previa del proyecto '), esc_url (add_query_arg (' preview ',' true ', get_permalink ($ post_ID))), 9 => sprintf (__ (' Proyecto programado para: % 1 $ s. Vista previa del proyecto '), // traductores: publique el formato de fecha del cuadro, consulte http://php.net/date date_i18n (__ (' M j, Y @ G: i '), strtotime ($ post-> post_date)), esc_url (get_permalink ($ post_ID)), 10 => sprintf (__ ('borrador del proyecto actualizado. Vista previa del proyecto'), esc_url (add_query_arg ('preview', 'true', get_permalink ($ post_ID))))); devuelve $ mensajes; A continuación, debemos definir una taxonomía personalizada para las etiquetas que se utilizarán con cada uno de los elementos de la cartera. Puede aprender más sobre el método de taxonomía de registro aquí.
// Inicializar nuevas etiquetas de taxonomía $ labels = array ('name' => _x ('Tags', 'taxonomy general name'), 'singular_name' => _x ('Tag', 'taxonomy singular name'), 'search_items' => __ ('Tipos de búsqueda'), 'all_items' => __ ('Todas las etiquetas'), 'parent_item' => __ ('Etiqueta de los padres'), 'parent_item_colon' => __ ('Etiqueta de los padres:'), 'edit_item' => __ ('Editar etiquetas'), 'update_item' => __ ('Actualizar etiqueta'), 'add_new_item' => __ ('Agregar nueva etiqueta'), 'new_item_name' => __ ('Nueva etiqueta Nombre' ), ); // Taxonomía personalizada para etiquetas de proyecto register_taxonomy ('tag', array ('project'), array ('hierarchical' => false, 'labels' => $ labels, 'show_ui' => true, 'query_var' => true , 'rewrite' => array ('slug' => 'tag'),)); Vuelva a su panel de WordPress y abra la configuración de medios desde la ajustes lengüeta. Aquí, debe establecer el tamaño predeterminado para las miniaturas de la imagen de la cartera. También notará en la barra lateral que el tipo de publicación personalizada "Proyecto" se ha registrado correctamente, junto con la taxonomía personalizada, "etiquetas". Podemos registrar el tamaño de miniatura predeterminado usando la set_post_thumbnail Método, pero voy a demostrar otra forma de lograr esto. Puede obtener más información sobre cómo establecer tamaños de miniaturas de publicaciones mediante programación aquí.
Crear algunos elementos de la cartera de demostración yendo a proyectos y haciendo clic en añadir nuevo. Necesitamos un título para el proyecto, el contenido y una miniatura. Podemos ver que también apareció una sección de etiquetas y confirma que nuestra taxonomía personalizada se registró correctamente. Añadir algunas etiquetas para los elementos de la cartera, también.
Para crear el tema, primero crearemos una plantilla HTML / CSS3 estática para el sitio web. Esto separa las dos tareas de hacer que el sitio web se vea coherente con el diseño y recuperar el contenido de la base de datos. Codificar el tema directamente puede ser un poco confuso para los principiantes a veces, especialmente si hay mucho contenido presente en el tema. Crea tres carpetas, nombradas
"css", "imágenes" y "js", respectivamente. La estructura general del área de contenido principal será así:
Cuadrícula Lista
Ver detalles
Título del Proyecto
Etiquetas, EtiquetasLa Descripción del Proyecto / Extracto
El estilo de la plantilla depende de usted. Puedes experimentar con diferentes colores e imágenes para satisfacer tus necesidades. Pero para esta plantilla, vamos a crear un tema de grunge oscuro y utilizaremos algunos CSS3 divertidos para lograr esos sutiles efectos de desplazamiento y transparencia. La división del diseño en imágenes es más bien. Como tal, no voy a repasar los detalles aquí..
body background: # 5a5a5a url ('images / bg.jpg') no-repetir centro superior; altura: 100%; a texto-decoración: ninguno; color: # C2FC48; a: hover color: #fff; .clear claro: ambos; # page-wrap width: 960px; posición: relativa; margen: 0 auto 40px; #header altura: 111px; relleno: 0 10px 0 50px; #header h1 float: left; #header h1 a font-family: Georgia, Arial, Helvetica, sans-serif; tamaño de fuente: 48px; posición: relativa; texto-decoración: ninguno; text-shadow: 2px 2px 1px # 000000; arriba: 64px; ancho: auto; índice z: 1000; -moz-transición: todos los 0.3s de facilidad de entrada-en-salida; -webkit-transición: todos los 0,3s de facilidad de entrada; -o-transición: todos los 0,3s de facilidad de entrada; transición: todos los 0,3s de facilidad de entrada; #header h1 a: hover color: # f4f6f0; ul # social float: derecha; arriba: 95px; posición: relativa; ul # social li float: left; margen derecho: 10px; pantalla: en línea; ul # social li a width: 16px; altura: 16px; bloqueo de pantalla; imagen de fondo: url ('images / layout-icons.png'); texto-sangría: -99999px; ul # social li a.feed background-position: -16px 32px; ul # social li a.facebook background-position: 0 32px; ul # social li a.twitter background-position: 0 16px; El estilo básico para el contenedor principal y los controles de diseño son los siguientes
/ * - Estilos de contenido principal Comience aquí - * / # main-content relleno: 50px 50px 28px 50px; color de fondo: # 000; borde inferior: 1px # 696969 sólido; borde izquierdo: 1px # 696969 sólido; borde derecho: 1px # 696969 sólido; / * Retroceso para los navegadores web que no admiten RGBa * / background: rgb (0, 0, 0); / * RGBa con opacidad de 0.3 * / fondo: rgba (0, 0, 0, 0.3); Familia tipográfica: Helvetica, Arial, sans-serif; tamaño de fuente: 12px; color: # c7c7c7; línea de altura: 16px; # main-content a: hover color: #fff; # layout-controls margin-bottom: 15px; # layout-controls span width: 20px; altura: 26px; bloqueo de pantalla; imagen de fondo: url ('images / layout-icons.png'); -moz-transición: todos los 0.3s de facilidad de entrada-en-salida; -webkit-transición: todos los 0,3s de facilidad de entrada; -o-transición: todos los 0,3s de facilidad de entrada; transición: todos los 0,3s de facilidad de entrada; texto-sangría: -99999px; # layout-controla un ancho: 20px; altura: 26px; bloqueo de pantalla; flotador izquierdo; imagen de fondo: url ('images / layout-icons.png'); margen derecho: 10px; pantalla: en línea; # layout-controls a.grid span background-position: left 0; # layout-controls a.grid background-position: left -26px; # layout-controls a.list span background-position: right 0; # layout-controls a.list background-position: right -26px; # layout-controla a: hover span opacity: 0; / * otros navegadores * / filter: progid: DXImageTransform.Microsoft.Alpha (opacidad = 0); / * esto funciona en IE6, IE7 e IE8 * / Los siguientes son los estilos generales para la lista de proyectos. Más adelante realizaremos un estilo específico para cada modo de diseño de cuadrícula y un modo de diseño de lista en función de la clase actual de la lista de publicaciones..
/ * ------------- Los estilos de folios generales comienzan aquí --------------- * / ul # folio li a -moz-transición: todos 0.3 s facilidad de entrada -webkit-transición: todos los 0,3s de facilidad de entrada; -o-transición: todos los 0,3s de facilidad de entrada; transición: todos los 0,3s de facilidad de entrada; ul # folio li / * Fallback para navegadores web que no son compatibles con RGBa * / background: rgb (0, 0, 0); / * RGBa con opacidad de 0.3 * / fondo: rgba (0, 0, 0, 0.3); relleno: 20px; borde: 1px # 4c4c4c sólido; margen inferior: 22px; -moz-transición: todos los 0.3s de facilidad de entrada-en-salida; -webkit-transición: todos los 0,3s de facilidad de entrada; -o-transición: todos los 0,3s de facilidad de entrada; transición: todos los 0,3s de facilidad de entrada; ul # folio li: hover / * Retroceso para navegadores web que no son compatibles con RGBa * / background: rgb (0, 0, 0); / * RGBa con 0,3 opacidad * / fondo: rgba (0, 0, 0, 0,1); ul # folio li .image text-align: center; ul # folio li .imagen span ancho: 158px; altura: 116px; bloqueo de pantalla; desbordamiento: oculto; color de fondo: #fff; margen inferior: 10px; ul # folio li .imagen abarca un ancho: 158px; altura: 116px; bloqueo de pantalla; ul # folio li .image a font-weight: bold;
También tenga en cuenta que no estamos utilizando el método general de opacidad para lograr la transparencia utilizando CSS3. El uso del método de opacidad también afecta a los elementos secundarios del contenedor principal en el que se aplica la opacidad. En su lugar, estamos utilizando el método RGBa para agregar colores de fondo al contenedor y al valor alfa para controlar la transparencia del contenedor..
Puedes leer más sobre la propiedad RGBa en este impresionante artículo.
Esto no afecta a la transparencia de los elementos infantiles. También necesitamos crear un código CSS específico de IE para admitir la transparencia alfa.
En la estructura HTML, notará que hay una clase dada a la lista de portafolio.
Básicamente, la clase "cuadrícula" se usa para mostrar la lista en una vista de cuadrícula y la clase "lista" se usa para mostrar la lista en una vista de lista. En el modo de cuadrícula, todo el contenido adicional está oculto para el usuario, y en el modo de lista, todo el contenido es visible para el usuario. Tenemos dos conjuntos separados de estilos para cada modo. Los estilos para el modo de cuadrícula son los siguientes:
/ * ------------------ El diseño de cuadrícula comienza aquí ------------------- * / ul # folio.grid li ancho: 158px; altura: 130px; flotador izquierdo; margen derecho: 19px; pantalla: en línea; ul # folio.grid li .content display: none; ul # folio.grid li .imagen abarcan un ancho: 158 px; altura: 116px; bloqueo de pantalla; ul # folio.grid li.rightmost margin-right: 0;
Los estilos de modo de lista son los siguientes. En cualquier momento, solo uno de los estilos de cuadrícula o lista está activo.
/ * ------------------ El diseño de la lista comienza aquí ------------------- * / ul # folio.list li display: block; ul # folio.list li .image, ul # folio li.details .image width: 158px; altura: 130px; flotador izquierdo; ul # folio.list li .content float: left; relleno: 0 10px 0 40px; ancho: 598px; ul # folio.list li .content h2, ul # folio li.details .content h2 font-size: 24px; color: # C2FC48; margen inferior: 6px; Familia tipográfica: Georgia, Arial, Helvetica, sans-serif; ul # folio.list li .content span.tags, ul # folio li.details .content span.tags color: #fff; tamaño de fuente: 11px; estilo de letra: cursiva; margen inferior: 10px; bloqueo de pantalla;
A continuación, utilizaremos la interfaz de usuario de jQuery para cambiar la clase de la lista de publicaciones con respecto al botón de diseño que el usuario ha hecho clic. Estamos detectando el evento de clic de los botones de control de diseño, recuperando la clase actual y la nueva clase que se activará, y luego usaremos añadir y retirar Métodos de clase para cambiar las clases. También tenemos un conjunto de parámetros que definen la velocidad de los eventos que tienen lugar.
var animateSpeed = 500; jQuery ("# layout-controla a"). click (function () var folio = jQuery ('# folio'), curClass = folio.attr ('class'), newClass = jQuery (this) .attr ('class '); folio.fadeOut (animateSpeed, function () folio .removeClass (curClass, animateSpeed); .addClass (newClass, animateSpeed);). fadeIn (animateSpeed); return false;); Ahora que hemos completado la versión estática del sitio, podemos integrarlo con el tema de WordPress en cuestión de minutos. Todo lo que tenemos que hacer es recorrer las publicaciones usando un wp_query Objeto con una consulta para el tipo de mensaje personalizado. Luego, colocamos el contenido en la posición respectiva en la plantilla..
header.php Primero, necesitamos modificar el header.php plantilla, e incluir nuestros archivos personalizados de JavaScript. En este tutorial, incluiremos jQuery utilizando la versión CDN de Google. Anularemos el registro de jQuery proporcionado por WordPress y registraremos la versión CDN de Google de jQuery. Pega el siguiente fragmento en tu funciones.php expediente.
Mueve el css, js y imagenes carpetas, que creó anteriormente para la plantilla estática, en la carpeta de temas de WordPress. Inserte el archivo personalizado de jQuery UI y el archivo de script principal en el encabezado. Asegúrese de que se inserta debajo de la wp_head método.
Ahora, puede crear otra plantilla en el tema, por ejemplo, page-home.php - o puedes modificar el index.php Ya presente en la carpeta de temas. Si elige el método anterior, entonces:
ajustes lengüeta. 
La plantilla contendrá primero el encabezado, al que puede llamar usando el get_header () Método, luego el contenido principal, que codificarás dentro de la propia plantilla. Por último, el pie de página, que puede ser incluido, a través de la get_footer () método.
El siguiente código muestra cómo puede crear una consulta personalizada utilizando la wp_query objeto.
'proyecto', 'posts_per_página' => -1)); $ cuenta = 0; ?>
Estamos usando una variable, contar para contar el número de elementos en la lista. Necesitamos esto porque mantendremos solo cuatro artículos en cada fila y asignaremos un 'la derecha'clase a cada cuarto elemento de la lista. Los 'la derecha'clase elimina cualquier margen derecho a los elementos de la lista. Alternativamente, podríamos, en nuestro archivo CSS, utilizar el li: nth-child (4n) selector.
El siguiente código muestra cómo podemos recorrer las publicaciones e insertar el contenido, según sea necesario..
Dentro del bucle, insertamos el contenido en la forma normal de WordPress, usando el $ bucle wp_query objeto, por supuesto. El siguiente código muestra cómo podemos obtener la miniatura de la publicación del proyecto e insertarla en la plantilla. Tome nota de cómo usamos el $ cuenta Variable para insertar el 'la derecha'clase en cada cuarto elemento de la lista.
Ahora viene la sección de contenido en la que necesitamos insertar el título, las etiquetas, una breve descripción y obtener el extracto de la publicación con un método de extracto personalizado. Insertar el título es bastante fácil, como lo son las etiquetas. Recuerde, previamente creamos una taxonomía personalizada por el nombre de las etiquetas.
">
'nombre', 'orden' => 'ASC', 'campos' => 'nombres'); echo implode (wp_get_object_terms ($ post-> ID, 'tag', $ args), ','); ?>
Te darás cuenta de que no estamos utilizando el general. el extracto() Método, proporcionado por WordPress. En su lugar, estamos definiendo nuestro propio método personalizado agregando algunos filtros. El método de extracto general devuelve una mayor longitud de extracto que lo que requerimos. Por lo tanto, la versión personalizada. También estamos modificando el '¿Seguir leyendo? 'texto agregado al final del extracto predeterminado, y reemplazándolo con' Leer más '. El siguiente fragmento sirve a nuestro propósito. Este método de extracto personalizado es útil para muchas situaciones..
Lee mas'; function folio_excerpt ($ length_callback = ", $ more_callback =") global $ post; if (function_exists ($ length_callback)) add_filter ('excerpt_length', $ length_callback); if (function_exists ($ more_callback)) add_filter ('excerpt_more', $ more_callback); $ output = get_the_excerpt (); $ output = apply_filters ('wptexturize', $ output); $ output = apply_filters ('convert_chars', $ output); $ output = ''. $ salida.'
'; echo $ output; ?> El método anterior para crear una cartera de diseño múltiple es bastante simple y utiliza trucos básicos de CSS y jQuery para lograr el resultado. Aún mejor, estas técnicas se pueden aplicar a una variedad de proyectos. Otras técnicas en este tutorial, como tipos de publicaciones personalizadas, taxonomías personalizadas y agregar filtros al método del extracto, también pueden usarse de varias otras formas innovadoras.!
