Die Anatomie von GamePress - Teil 1 (aktualisiert)

GamePress ist ein "Gaming News & Reviews" -Thema für WordPress und derzeit eines der beliebtesten Themen bei ThemeForest. Es ist das am weitesten entwickelte Thema, das ich bisher erstellt habe, und treibt die Möglichkeiten der WordPress-Engine voran!


Diesen Artikel bereits gelesen? Fahren Sie mit Teil 2 fort.

Diese zweiteilige Serie konzentriert sich auf mehrere Schlüsselbereiche des Themas, die einige der wichtigsten Verkaufsargumente zu sein scheinen. Ich füge auch Beispiele für alle wichtigen verwendeten Codes hinzu und gebe Links zu verschiedenen Tutorials mit ähnlichen Techniken.

Startseite

Funktionsschieberegler

Oben auf der Startseite befindet sich einer meiner Lieblingsteile des Themas - der Features-Schieberegler. Der Flash-Slider von GameSpot inspiriert ihn - außer, dass er mit dem Tabs-Plugin von jQuery und CSS erstellt wird.

Der Code zum Erstellen ist im Wesentlichen eine Kombination aus meinem Tutorial "Erstellen eines Registers mit Registerkarten mithilfe von jQuery" hier bei NETTUTS (für die Registerkarten) und Chris Coyiers "Erstellen eines Slick-Sliders für das automatische Abspielen von vorgestellten Inhalten" bei CSS-Tricks Text auf ein Bild legen).

Der einzige jQuery-Code, den ich dafür geschrieben habe, war:

 $ (document) .ready (function () $ ('. features> ul'). tabs (fx: Deckkraft: 'toggle', Ereignis: 'mouseover'). tabs ('drehen', 5000) ;);

Welcher Bereich wird ausgeblendet, wenn eine Registerkarte darüber bewegt wird. Die Registerkarten drehen sich auch alle fünf Sekunden automatisch - wer benötigt Flash? ;)

Der eigentliche WordPress-Code zum Abrufen dieser Beiträge aus einer Kategorie "Features" basiert auf Code, der in meinem Lernprogramm "Einen Beitragsabschnitt für Wordpress erstellen" verfügbar ist:

 

Neuste Schlagzeilen

Dieser Abschnitt ist im Wesentlichen das, was Sie in jedem anderen WordPress-Theme sehen würden. Zu jedem Beitrag gehört aber auch ein Bild. Dies wird durch die Verwendung der Option 'Benutzerdefinierte Felder' beim Schreiben eines Beitrags erreicht:

Um ein Beitragsbild mit benutzerdefinierten Feldern in Ihrem eigenen Design zu erstellen, können Sie den folgenden Code in Ihrer WordPress-Schleife verwenden:

 ID, 'postimg', wahr); ?> 

Der obige Code prüft, ob ein benutzerdefiniertes Feld mit dem Schlüssel von postimg existiert für den aktuellen Beitrag, und falls dies der Fall ist, wird der Link neben dem restlichen Beitrag in ein Bild-Tag eingefügt.

Weitere Informationen zur Verwendung benutzerdefinierter Felder finden Sie unter "Benutzerdefinierte WordPress-Felder" von Justin Tadlock. Möglicherweise interessieren Sie sich auch für "5 schnelle Möglichkeiten, Ihr WordPress-Theme zu verbessern" im ThemeForest-Blog.

Ältere Nachrichten

Der Bereich Neueste Schlagzeilen zeigt eine benutzerdefinierte Anzahl von Beiträgen an. Unterhalb davon finden Sie eine einfachere Liste der "älteren" Beiträge:

Dies wird erreicht, indem die Anzahl der Beiträge, die abgerufen werden, versetzt wird, indem der folgende Code anstelle der normalen WordPress-Schleife verwendet wird:

 

$ gp_latest_headlines ist die Anzahl der im Abschnitt "Neueste Schlagzeilen" aufgeführten Beiträge.

Mit kann man viel machen query_posts (), Im WordPress-Codex finden Sie die vollständige Dokumentation dazu.

Bewertungen Seite

Eine der Hauptfunktionen ist die Überprüfungsseitenvorlage, die alle Überprüfungen in einer Liste anzeigt, aber auch die erste Überprüfung "erweitert", um mehr Details darüber zu erfahren:

Die Metadaten der ersten Überprüfung (Format, Freigabe, Bewertung usw.) werden alle aus einer Reihe von benutzerdefinierten Feldern im Beitrag abgerufen:

Dies ist ein perfektes Beispiel für die zahlreichen Verwendungsmöglichkeiten von benutzerdefinierten Feldern, die sehr einfach in Ihrem eigenen Design verwendet werden können. Beispielsweise wird der folgende Code zum Abrufen von verwendet Veröffentlichung (Datum) Feld:

 ID, 'release', true); ?>

Natürlich ist jedes Feld vollständig optional. Wenn es nicht ausgefüllt wurde, wird es nicht angezeigt:

  

Veröffentlichung:

Wir werden uns die Test- und Previews-Vorlagen in Teil 2 genauer ansehen.

News Seite

Eine andere Seitenvorlage, die mit GamePress bereitgestellt wird, erstellt eine Hauptseite, die dem Abschnitt "Neueste Schlagzeilen" auf der Startseite ähnelt. Ich hatte jedoch ein Problem: "Wie füge ich einen Archivbereich hinzu, um Beiträge nach Datum, Kategorie und Tag zu sortieren?"
Ich wollte den Administrator der Site nicht dazu zwingen, ein Widget in der Seitenleiste zu verwenden, da ich nicht wollte, dass sich GamePress wie ein "Blog" anfühlt..

Nach langem Nachdenken entschied ich, dass ich eine Art Archiv-Bereich oben auf der News-Seite brauchte. Aber es kostete zu viel wertvolle "Bildschirmimmobilien":

Meine Lösung bestand darin, nur das Titelfeld "Archives" anzuzeigen, das beim Anklicken dazu führt, dass die Archivlisten nach unten verschoben werden. Beachten Sie, dass ich auch das normale ersetzt habe " in Titelboxen an a + um einen subtilen Hinweis hinzuzufügen, dass die Box "anklickbar" ist

Zweiter Teil

Dieser Artikel wird im ThemeForest-Blog fortgesetzt, in dem wir folgende Themen betrachten:

  • Theme-Optionen
  • Zwei Farbschemata
  • Einzelseiten
  • Archiv
  • Abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.