La anatomía de GamePress - Parte 1 (Actualizado)

GamePress es un tema de "Noticias y comentarios de juegos" para WordPress y actualmente es uno de los temas más populares en ThemeForest. Es el tema más avanzado que he creado hasta ahora, y realmente impulsa lo que puede hacer el motor de WordPress!


¿Ya has leído este artículo? Continuar con la Parte 2.

Esta serie de dos partes se centrará en varias áreas clave del tema que parecen ser algunos de los principales puntos de venta. También incluiré ejemplos de cualquier código importante utilizado y proporcionaré enlaces a varios tutoriales que detallan técnicas similares..

Página principal

Funciones deslizante

En la parte superior de la página de inicio se encuentra una de mis partes favoritas del tema: el deslizador de características. Está inspirado en el control deslizante Flash en GameSpot, excepto que se crea con el complemento Tabs de jQuery y CSS.

El código para crear esto es básicamente una combinación de mi tutorial "Crear una interfaz con pestañas usando jQuery" aquí en NETTUTS (para las pestañas) y "Creando un control deslizante de contenido destacado de reproducción automática de Chris Coyier" en CSS-Tricks (para más de colocar texto sobre una imagen).

De hecho, el único código jQuery que escribí para esto fue:

 $ (document) .ready (function () $ ('. features> ul'). tabs (fx: opacity: 'toggle', evento: 'mouseover'). tabs ('rotate', 5000) ;);

Lo que desvanecerá el área cuando una pestaña esté sobre. Las pestañas también girarán automáticamente cada cinco segundos, ¿quién necesita Flash? ;)

Una vez más, el código de WordPress real para extraer estas publicaciones de una categoría de 'Características' se basa en el código disponible en mi tutorial "Crear una sección de publicaciones destacadas para Wordpress":

 

Titulares más recientes

Esta sección es básicamente lo que verías en cualquier otro tema de WordPress. Pero también hay una imagen que acompaña a cada publicación. Esto se logra haciendo uso de la opción 'Campos personalizados' al escribir una publicación:

Para crear una imagen de publicación con campos personalizados en su propio tema, puede usar el siguiente código dentro de su bucle de WordPress:

 ID, 'postimg', verdadero); ?> 

El código anterior verifica si un campo personalizado con la clave de postimg existe para la publicación actual, y si es así inserta el enlace en una etiqueta de imagen junto con el resto de la publicación.

Para obtener más información sobre el uso de campos personalizados, consulte "Campos personalizados de WordPress" de Justin Tadlock; y también puede estar interesado en "5 maneras rápidas de mejorar su tema de WordPress" en el blog ThemeForest.

Noticias anteriores

La sección Últimos titulares muestra un número de publicaciones definido por el usuario, y debajo hay una lista más básica de publicaciones "más antiguas":

Esto se logra al compensar la cantidad de publicaciones que se obtienen, utilizando el siguiente código en lugar de su bucle normal de WordPress:

 

$ gp_latest_headlines es el número de publicaciones enumeradas en la sección Últimos titulares.

Puedes hacer mucho con query_posts (), Echa un vistazo al WordPress Codex para la documentación completa sobre él.

Página de comentarios

Una de las características principales es la Plantilla de la página Revisiones, que muestra todas las revisiones en una lista, pero también "expande" la primera revisión para brindar más detalles:

Los metadatos de la primera revisión (Formato, Publicación, Clasificación, etc.) se recuperan de una serie de Campos personalizados en la publicación:

Este es un ejemplo perfecto de las numerosas formas en que puede usar los Campos personalizados, que son muy fáciles de usar en su propio tema. Por ejemplo, el siguiente código es lo que se usa para recuperar el lanzamiento campo (fecha):

 ID, 'release', verdadero); ?>

Por supuesto, cada campo es completamente opcional. Si no se completó, no se mostrará:

  

Lanzamiento:

Veremos más en las plantillas de revisiones y vistas previas en la Parte 2.

Página de noticias

Otra plantilla de página provista con GamePress crea una página de noticias principal muy similar a la sección Últimos titulares en la página de inicio. Sin embargo, tuve un problema: "¿Cómo incluyo un área de archivos para ayudar a ordenar las publicaciones por fecha, categoría y etiqueta?"
No quería forzar al administrador del sitio a usar un widget en la barra lateral, ya que no quería que GamePress se sintiera como un 'blog'.

Después de pensarlo mucho, decidí que necesitaba algún tipo de sección de 'Archivos' en la parte superior de la página de Noticias. Pero, tomó demasiado valiosa 'pantalla de bienes raíces':

Mi solución fue mostrar solo el cuadro de título 'Archivos', que al hacer clic, hará que las listas de archivos se deslicen a continuación. Fíjate que también sustituí la normal. " en cajas de título a un + para agregar una pista sutil de que el cuadro es 'pulsable'

La segunda parte

Este artículo continúa en el blog de ThemeForest, donde veremos:

  • Opciones de tema
  • Dos esquemas de color
  • Páginas individuales
  • Archivo
  • Suscríbase a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios..