Share
GamePress är ett "Gaming News & Reviews" -tema för WordPress och är för närvarande en av de mest populära teman på ThemeForest. Det är det mest avancerade temat jag har skapat hittills, och driver verkligen vad WordPress-motorn kan göra!
Läs den här artikeln redan? Fortsätt till del 2.
Denna tvådelade serie kommer att fokusera på flera viktiga områden av temat som verkar vara några av de stora försäljningsställena. Jag kommer också att inkludera exempel på vilken viktig kod som används och ge länkar till olika handledning som beskriver liknande tekniker.
Överst på hemsidan är en av mina favorit delar av temat - Funktionsreglaget. Det är inspirerat av Flash-reglaget på GameSpot - förutom att det här skapas med jQuery's Tabs plugin och CSS.
Koden för att skapa detta är i grund och botten en kombination av mitt "Skapa ett flikad gränssnitt med hjälp av jQuery" -tutorial här på NETTUTS (för flikarna) och Chris Coyiers "Skapa en Slick Auto Playing Featured Content Slider" på CSS-Tricks (för över- lägger text på en bild).
Faktum är att den enda jQuery-koden jag skrev för detta var:
Accentsconagua
$ (dokument) .ready (funktion () $ ('.funktioner> ul'). flikar (fx: opacity: 'toggle', händelse: 'mouseover') ;); Vilket bleknar området när en flik svävar över. Flikarna kommer också att rotera vart femte sekund - vem behöver Flash? ;)
Återigen är den faktiska WordPress-koden för att dra dessa inlägg från en "Egenskaper" -kategori baserad på kod som finns tillgänglig i min "Skapa en utvalda postavdelning för Wordpress" handledning:
Detta avsnitt är i grunden vad du skulle se på något annat WordPress-tema. Men det finns också en bild som åtföljer varje inlägg. Detta uppnås genom att använda "Custom Fields" alternativet när du skriver ett inlägg:
För att skapa en postbild med anpassade fält i ditt eget tema kan du använda följande kod i ditt WordPress Loop:
ID, "postimg", sant); ?>
Ovanstående kod kontrollerar om ett anpassat fält med nyckeln till postimg existerar för det aktuella inlägget och lägger i så fall länken in i en bildtagg längs resten av posten.
För mer information om användande av anpassade fält, kolla in "WordPress Custom Fields" av Justin Tadlock; och du kan också vara intresserad av "5 snabba sätt att förbättra din WordPress Theme" över på ThemeForest Blog.
Avsnittet Senaste rubriken visar ett användardefinierat antal inlägg, och under den är en mer grundläggande lista över "äldre" inlägg:
Detta uppnås genom att kompensera antalet inlägg, med hjälp av följande kod istället för din vanliga WordPress Loop:
$ gp_latest_headlines är antalet tjänster som listas i avsnittet Senaste rubrikerna.
Du kan göra mycket med query_posts (), kolla in WordPress Codex för fullständig dokumentation på den.
En av de viktigaste funktionerna är mallet för recensioner, som visar alla recensioner i en lista, men också "expanderar" den första översynen för att ge detaljer om det:
Metadata från den första översynen (Format, Release, Rating etc.) hämtas alla från ett antal Anpassade fält i posten:
Detta är ett perfekt exempel på de många sätten du kan använda Anpassade fält - som är väldigt lätt att använda i ditt eget tema! Till exempel är följande kod vad som används för att hämta släpp (datum) fält:
ID, "release", true); ?>
Naturligtvis är varje fält helt valfritt. Om det inte fylldes i visas det inte:
Släpp:
Vi kommer att se mer på mallarna Recensioner och förhandsgranskningar i del 2.
En annan sidmall med GamePress skapar en huvudnyhetssida som mycket liknar avsnittet Senaste rubrikerna på hemsidan. Jag stod dock inför ett problem: "Hur tar jag med ett arkivområde för att hjälpa till att sortera inlägg efter datum, kategori och tagg?"
Jag ville inte tvinga administratören på webbplatsen att använda en widget i sidofältet eftersom jag inte vill att GamePress ska känna sig som en "blogg".
Efter en hel del trodde jag att jag behövde någon form av arkiv på toppen av News-sidan. Men det tog upp för mycket värdefullt "skärmfastigheter":
Min lösning var att bara visa titeln "Arkiv", som när den klickas, kommer att leda till att arkivlistorna glider ut nedan. Observera att jag också bytt ut det normala " i rubriker till en + för att lägga till en subtil hint att rutan är "klickbar"
Den här artikeln fortsätter över på ThemeForest Blog där vi kommer att titta på:
