Anatomien til GamePress - Del 1 (oppdatert)

GamePress er et tema for "Gaming News & Reviews" for WordPress og er nå et av de mest populære temaene på ThemeForest. Det er det mest avanserte temaet jeg har laget så langt, og virkelig skyver hva WordPress-motoren kan gjøre!


Har du allerede lest denne artikkelen? Fortsett videre til del 2.

Denne todelte serien vil fokusere på flere viktige områder av temaet som synes å være noen av de største salgsargumentene. Jeg vil også inkludere eksempler på en hvilken som helst viktig kode som brukes og gi lenker til ulike opplæringsprogrammer som beskriver lignende teknikker.

hjemmeside

Funksjoner Slider

Øverst på hjemmesiden er en av mine favorittdeler av temaet - Funksjonsskyderen. Det er inspirert av Flash-glideren på GameSpot - bortsett fra at dette er opprettet med jQuery's Tabs-plugin og CSS.

Koden for å opprette dette er i utgangspunktet en kombinasjon av "Create A Tabbed Interface" ved hjelp av jQuery-opplæringen her på NETTUTS (for tabulatorene) og Chris Coyiers "Opprette en slick automatisk avspilling av innholdsruten" på CSS-Tricks (for over- legge tekst på et bilde).

Faktisk var den eneste jQuery-koden jeg skrev for dette:

 $ (dokument) .ready (funksjon () $ ('.funksjoner> ul') .faner (fx: opacity: 'toggle', event: 'mouseover') ;);

Som vil forsvinne området når en fane er svevet over. Flikene vil også automatisk rotere hvert femte sekund - hvem trenger Flash? ;)

Igjen, er den faktiske WordPress-koden for å trekke disse innleggene fra en 'Funksjoner' -kategori basert på kode som er tilgjengelig i min "Opprett en utvalgt innleggsseksjon for Wordpress" opplæring:

 

Siste overskrifter

Denne delen er i utgangspunktet hva du vil se på et annet WordPress-tema. Men det er også et bilde som følger med hvert innlegg. Dette oppnås ved å bruke "Custom Fields" -alternativet når du skriver et innlegg:

Hvis du vil opprette et innleggsbilde med tilpassede felt på ditt eget tema, kan du bruke følgende kode i WordPress Loop:

 ID, 'postimg', sant); ?> 

Koden ovenfor kontrollerer om et egendefinert felt med nøkkelen til postimg eksisterer for det nåværende innlegget, og hvis så legger linken til et bildemerke sammen med resten av innlegget.

For mer informasjon om bruk av egendefinerte felt, sjekk ut "WordPress Custom Fields" av Justin Tadlock; og du kan også være interessert i "5 raske måter å forbedre WordPress Theme" over på ThemeForest Blog.

Eldre Nyheter

Nyhetsoversikten viser et brukerdefinert antall innlegg, og under denne er en mer grunnleggende liste over «eldre» innlegg:

Dette oppnås ved å kompensere for antall innlegg får, ved hjelp av følgende kode i stedet for normal WordPress Loop:

 

$ gp_latest_headlines er antall innlegg som er oppført i avsnittet Siste overskrifter.

Du kan gjøre mye med query_posts (), sjekk ut WordPress Codex for full dokumentasjon på den.

Anmeldelser Side

En av hovedtrekkene er Review Page Template, som viser alle vurderinger i en liste, men også "utvider" den første anmeldelsen for å gi mer detaljer om det:

Metadataene i den første anmeldelsen (Format, Release, Rating etc.) hentes alt fra et antall egendefinerte felt i innlegget:

Dette er et perfekt eksempel på de mange måtene du kan bruke egendefinerte felt - som er veldig enkle å bruke i ditt eget tema! For eksempel er følgende kode hva som brukes til å hente utgivelse (dato) felt:

 ID, "slipp", sant); ?>

Selvfølgelig er hvert felt helt valgfritt. Hvis det ikke ble fylt ut, vil det ikke vise:

  

Utgivelse:

Vi vil se nærmere på maler for anmeldelser og forhåndsvisning i del 2.

Nyhetsside

En annen sidemal som er utstyrt med GamePress, lager en hovednyhetsside som ligner på Siste overskrifter på hjemmesiden. Imidlertid møtte jeg et problem: "Hvordan inkluderer jeg et arkivområde for å hjelpe sortere innlegg etter dato, kategori og tag?"
Jeg ville ikke tvinge administratoren til nettstedet til å bruke en widget i sidefeltet, da jeg ikke ville at GamePress skulle føles som en "blogg".

Etter mye tanker bestemte jeg meg for at jeg trengte en slags Arkiv-seksjon øverst på nyhetssiden. Men det tok for mye verdifullt "skjerm fast eiendom":

Min løsning var å bare vise tittelboksen 'Arkiv', som når du klikker, vil føre til at arkivlister glir ut nedenfor. Legg merke til at jeg også erstattet det normale " i tittelbokser til en + for å legge til en subtile hint at boksen er "klikkbar"

Del to

Denne artikkelen fortsetter over på ThemeForest Blog hvor vi vil se på:

  • Temaalternativer
  • To fargeskjemaer
  • Enkelt sider
  • Arkiv
  • Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.