L'anatomie de GamePress - Partie 1 (mise à jour)

GamePress est un thème "Nouvelles et critiques de jeux" pour WordPress et est actuellement l'un des thèmes les plus populaires sur ThemeForest. C’est le thème le plus avancé que j’ai créé jusqu’à présent, et il met vraiment en avant ce que le moteur WordPress peut faire.!


Déjà lu cet article? Continuez à la partie 2.

Cette série en deux parties se concentrera sur plusieurs domaines clés du thème qui semblent constituer certains des principaux arguments de vente. Je vais également inclure des exemples de tout code important utilisé et fournir des liens vers divers tutoriels détaillant des techniques similaires..

Page d'accueil

Caractéristiques Curseur

En haut de la page d'accueil se trouve l'une de mes parties préférées du thème - le curseur de fonctions. Il s’inspire du curseur Flash de GameSpot - sauf qu’il est créé avec le plugin jQuery Tabs et CSS.

Le code permettant de créer ceci est essentiellement une combinaison de mon tutoriel "Créer une interface à onglets avec jQuery" ici, sous NETTUTS (pour les onglets), et de "Création d'un slider de contenu vedette" avec Chris Coyier, dans CSS-Tricks (pour pose de texte sur une image).

En fait, le seul code jQuery que j'ai écrit pour cela était:

 $ (document) .ready (function () $ ('. features> ul'). tabs (fx: opacity: 'bascule', événement: 'mouseover'). tabs ('rotation', 5000) ;);

Ce qui va s'estomper la zone quand un onglet est survolé. Les onglets pivoteront également toutes les cinq secondes. Qui a besoin de Flash? ;)

Encore une fois, le code WordPress utilisé pour extraire ces publications de la catégorie "Fonctionnalités" est basé sur le code disponible dans mon tutoriel "Créer une section de publications en vedette pour Wordpress":

 

Derniers titres

Cette section est essentiellement ce que vous verriez sur n’importe quel autre thème WordPress. Mais chaque article est accompagné d'une image. Pour ce faire, utilisez l'option "Champs personnalisés" lors de la rédaction d'un message:

Pour créer une image de publication avec des champs personnalisés sur votre propre thème, vous pouvez utiliser le code suivant dans votre boucle WordPress:

 ID, 'postimg', true); ?> 

Le code ci-dessus vérifie si un champ personnalisé avec la clé de postimg existe pour le message en cours et, le cas échéant, insère le lien dans une balise d'image à côté du reste du message.

Pour plus d'informations sur l'utilisation des champs personnalisés, consultez «WordPress Custom Fields» de Justin Tadlock; et vous pouvez également être intéressé par "5 façons rapides d'améliorer votre thème WordPress" sur le blog ThemeForest.

Nouvelles plus anciennes

La section Derniers titres affiche un nombre de messages défini par l'utilisateur. Ci-dessous, vous trouverez une liste plus basique de messages "plus anciens":

Ceci est réalisé en compensant le nombre de publications, en utilisant le code suivant à la place de votre boucle WordPress normale:

 

$ gp_latest_headlines est le nombre de publications répertoriées dans la section Derniers titres..

Vous pouvez faire beaucoup avec query_posts (), consultez le Codex WordPress pour la documentation complète à ce sujet.

Avis page

L'une des principales caractéristiques est le modèle de page d'avis, qui affiche tous les commentaires dans une liste, mais «étend» également le premier commentaire pour en donner davantage de détails:

Les métadonnées de la première révision (Format, Publication, Notation, etc.) sont toutes extraites d'un certain nombre de champs personnalisés de la publication:

Ceci est un exemple parfait des nombreuses façons dont vous pouvez utiliser les champs personnalisés - qui sont très faciles à utiliser dans votre propre thème! Par exemple, le code suivant est ce qui est utilisé pour récupérer le Libération (date) champ:

 ID, 'release', true); ?>

Bien entendu, chaque champ est entièrement optionnel. S'il n'a pas été rempli, il ne s'affichera pas:

  

Libération:

Nous examinerons plus en détail les modèles Avis et aperçus de la deuxième partie..

Nouvelles page

Un autre modèle de page fourni avec GamePress crée une page principale d'information très similaire à la section Derniers titres de la page d'accueil. Cependant, j'ai rencontré un problème: "Comment inclure une zone d'archives pour aider à trier les articles par date, catégorie et tag?"
Je ne voulais pas obliger l'administrateur du site à utiliser un widget dans la barre latérale, car je ne voulais pas que GamePress se sente comme un "blog"..

Après mûre réflexion, j'ai décidé que j'avais besoin d'une sorte de section "Archives" en haut de la page Actualités. Mais, cela prenait trop de 'biens immobiliers à l'écran':

Ma solution consistait uniquement à afficher la boîte de titre 'Archives', qui, une fois cliquée, entraînerait le glissement des listes d'archives ci-dessous. Notez que j'ai aussi remplacé la normale " dans les boîtes de titre à un + afin d'ajouter un soupçon subtil que la boîte est 'cliquable'

Deuxième partie

Cet article continue sur le blog ThemeForest où nous allons examiner:

  • Options du thème
  • Deux couleurs
  • Pages simples
  • Les archives
  • Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.