The Anatomy of GamePress - Part 1 (Updated)

GamePress è un tema "Notizie di gioco e recensioni" per WordPress e attualmente uno dei temi più popolari su ThemeForest. È il tema più avanzato che ho creato finora e spinge davvero ciò che il motore WordPress può fare!


Hai già letto questo articolo? Continua alla Parte 2.

Questa serie in due parti si concentrerà su diverse aree chiave del tema che sembrano essere alcuni dei principali punti di forza. Includerò anche esempi di qualsiasi codice importante utilizzato e fornirò collegamenti a vari tutorial che descrivono tecniche simili.

Homepage

Caratteristiche Slider

Nella parte superiore della home page è una delle mie parti preferite del tema: il cursore delle funzioni. È ispirato al dispositivo di scorrimento Flash su GameSpot, tranne per il fatto che è stato creato con il plugin Tabs e CSS di jQuery.

Il codice per la creazione di questo è fondamentalmente una combinazione del mio tutorial "Crea un'interfaccia a schede usando jQuery" qui su NETTUTS (per le schede) e "Creazione di uno scorrevole dispositivo di scorrimento dei contenuti" di Chris Coyier presso CSS-Tricks (per posa del testo su un'immagine).

In effetti, l'unico codice jQuery che ho scritto per questo era:

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

Che svanirà l'area quando si passa con il mouse su una scheda. Le schede verranno inoltre automaticamente ruotate ogni cinque secondi: chi ha bisogno di Flash? ;)

Ancora una volta, il codice WordPress effettivo per estrarre questi post da una categoria "Funzionalità" si basa sul codice disponibile nel mio tutorial "Costruisci una sezione post in evidenza per Wordpress":

 

Ultime notizie

Questa sezione è fondamentalmente ciò che vedresti su qualsiasi altro tema WordPress. Ma c'è anche un'immagine che accompagna ogni post. Ciò si ottiene facendo uso dell'opzione "Campi personalizzati" quando si scrive un post:

Per creare un'immagine post con campi personalizzati sul tuo tema, puoi utilizzare il seguente codice all'interno del tuo loop WordPress:

 ID, 'postimg', vero); ?> 

Il codice sopra controlla se un campo personalizzato con la chiave di postimg esiste per il post corrente e, in tal caso, inserisce il link in un tag immagine insieme al resto del post.

Per ulteriori informazioni sull'utilizzo di campi personalizzati, controlla "Campi personalizzati WordPress" di Justin Tadlock; e potresti anche essere interessato a "5 modi veloci per migliorare il tuo tema WordPress" sul Blog ThemeForest.

Notizie precedenti

La sezione Ultime intestazioni mostra un numero di post definito dall'utente, e sotto di esso c'è un elenco più semplice di post "più vecchi":

Ciò si ottiene compensando il numero di post ottenuti, utilizzando il seguente codice al posto del normale ciclo WordPress:

 

$ gp_latest_headlines è il numero di post elencati nella sezione Ultimi titoli.

Puoi fare molto con query_posts (), controlla il codice WordPress per la documentazione completa su di esso.

Pagina delle recensioni

Una delle caratteristiche principali è il modello di pagina Recensioni, che visualizza tutte le recensioni in una lista, ma anche 'espande' la prima recensione per fornire maggiori dettagli a riguardo:

I meta-dati della prima recensione (Format, Release, Rating ecc.) Sono tutti recuperati da un numero di campi personalizzati nel post:

Questo è un perfetto esempio dei numerosi modi in cui puoi utilizzare i campi personalizzati - che sono molto facili da usare nel tuo tema! Ad esempio, il codice seguente è ciò che viene utilizzato per recuperare il pubblicazione (data) campo:

 ID, 'release', true); ?>

Naturalmente, ogni campo è del tutto opzionale. Se non è stato compilato, non mostrerà:

  

Pubblicazione:

Vedremo più nei modelli Recensioni e Anteprime nella Parte 2.

Pagina delle notizie

Un altro modello di pagina fornito con GamePress crea una pagina di notizie principale molto simile alla sezione Ultimi titoli sulla home page. Tuttavia, ho affrontato un problema: "Come posso includere un'area di archivi per aiutare a ordinare i post per data, categoria e tag?"
Non volevo forzare l'amministratore del sito a utilizzare un widget nella barra laterale perché non volevo che GamePress si sentisse come un "blog".

Dopo un sacco di pensieri, ho deciso che avevo bisogno di una sorta di sezione "Archivi" in cima alla pagina delle notizie. Ma, ha preso troppo prezioso 'schermo immobiliare':

La mia soluzione era di mostrare solo la title-box 'Archives', che, una volta cliccata, farà scorrere gli elenchi degli archivi sotto. Si noti che ho anche sostituito il normale " in title-box a a + per aggiungere un sottile suggerimento che la scatola è "cliccabile"

Seconda parte

Questo articolo continua sul blog di ThemeForest in cui vedremo:

  • Opzioni del tema
  • Due combinazioni di colori
  • Pagine singole
  • archivio
  • Iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.