Construire un thème de journal avec WP_Query et le framework CSS 960

WP_Query est un outil puissant pour contrôler ce qui sort de votre boucle. Aujourd'hui, je vais vous enseigner à tous comment l'utiliser pour créer un thème de journal à 3 colonnes contenant tous les articles de votre blog principal dans la colonne principale, ainsi qu'un ensemble d'articles de cette catégorie. Nous allons utiliser le 960 framework CSS pour la mise en page de base et la réinitialisation de notre thème, cela nous demandera beaucoup de travail!

Préface

Notre plan d’attaque consiste à supprimer tous les postes appartenant à une catégorie partagée, et
placez-les sur le côté séparé des postes principaux. Nous allons aussi regarder une méthode
pour créer un "article en vedette" sans utiliser jQuery ou JavaScript! J'ai également créé un fichier .psd (à l'aide des modèles fournis par 960 lors du téléchargement) de ce que
nous visons à atteindre aujourd'hui. Téléchargez le .psd ici.

Nous supposons que vous avez une installation WordPress en direct, qu’elle soit locale ou hébergée. Si vous avez besoin d’un peu d’aide, commencez par apprendre à installer WordPress localement sous Windows ou OS X..

Étape 1: les nécessités

Très bien. Donc, mis à part le besoin évident d'une installation WordPress, nous allons
avoir besoin de quelques choses supplémentaires aussi. J'ai tout un tas de fichiers que tu vas devoir
avoir dans votre dossier de thème.

• Tout doit aller dans un dossier de thème avec wp-content / thèmes /, alors créez
  un dossier nommé triColumnNews et placez-y tout ce qui s'y passe!
• 960 Framework CSS - C'est un peu évident aussi. Dans votre triColumnNews
  dossier, créez un autre dossier nommé 960. Rendez-vous sur
  960 Grid System et récupérez une copie du framework. Dans le téléchargement, vous allez
  trouver des dossiers. Ouvrez le dossier "code" et copiez les 3 fichiers CSS (960.css,
  reset.css et text.css) dans le dossier 960 que vous avez créé un deuxième
  depuis. C'est tout doux maintenant.
• functions.php - Nous allons avoir besoin d'une barre latérale, donc nous avons besoin functions.php
  l'enregistrer.
• dossier images - Eh bien duh… Chaque thème décent a des images! Créer
  les images de dossier, et place
  bodyBg.png et
  searchBg.png dedans.
• index.php - Un concept évident… Nous travaillerons principalement sur ce sujet.
• page.php et single.php - Notre page d'index aura 3 colonnes non? Mais
  Je ne pense pas que les pages individuelles nécessitent 3 colonnes. Nous changeons les pages de sous-modèles
  à la toute fin, de sorte que si vous allez à une page, tout n'est pas confus en raison de la
  WP_Query incorrect sur l'index (incorrect pour la page spécifique, pas pour l'index).
• style.css
  - Copiez-le et modifiez-le en conséquence si vous le souhaitez..

Vous avez tout ça? Bien. Vous devriez être prêt pour le reste du tutoriel maintenant! N'oublie pas
activer le thème dans WP-admin (wp-admin / themes.php).

Étape 2 - HTML et de base WordPress Code

Je ne vais pas vous donner tout le code WordPress pour l'instant. Je vais te donner
tout le code WordPress dont vous avez besoin, à l'exclusion des WP_Query. Ils vont faire un pas en
leur propre, parce qu'ils ont vraiment besoin d'explication! Cela remplirait aussi la page
beaucoup, donc j'ai tout inclus dans un fichier .txt plutôt qu'ici.
Téléchargez-le et copiez-le dans index.php. Ou tapez-le, comme bon vous semble. Dactylographie
vous aide à vous rappeler ce que vous faites!

Quelques choses à noter

C'est beaucoup de code à traiter, donc je vais juste arracher les parties intéressantes
pour vous et expliquez-les.

• tête - Ceci est juste des trucs WordPress. Feuille de style, lien RSS2 et certains
  Trucs de WP.
• #date et l'heure - Avez-vous déjà lu un journal qui n'a pas la date
  là-haut? Moi non plus. Ne commençons pas maintenant, hm? Cela affiche la date au format:
  (Jeu 17 juillet 08). Nous allons flotter de cette façon en haut pour qu'il reste dans la fenêtre du navigateur
  de tout temps! Juste parce que…
• forme - Ceci est le formulaire de recherche pour le blog! Je viens de coincé
  un pour remplir l'espace et le rendre plus convaincant!
• barre dynamique - Cela explique fondamentalement… c'est la barre latérale que nous voulons,
  nommé triNews afin qu'il puisse être identifié dans le tableau de bord.
• Remarque - Vous pouvez voir que cela commence déjà à prendre forme dans
  termes de mise en page (une mise en page très squewif, mais pas la réinitialisation!) - J'ai importé le
  960 fichiers utilisant un @import dans style.css, pour enregistrer HTTPRequests, et il donne également
  notre code pouvoir parent sur le code 960.
• Toutes les petites classes amusantes… Lire la suite.

Les 960 classes

Donc, je parie que vous remarquez toutes ces petites classes 'grid_5' et 'container_12' et
va ce que diable est-ce? Eh bien, laissez-moi vous expliquer. Le nombre suivant 'grid_'
est le nombre de colonnes que nous voulons que select soit. Parce que nous voulons 12 colonnes,
nous enveloppons le tout (en utilisant div # wrapper) avec la classe 'conteneur_12'.
Dans le CSS de base que je vous ai fourni, il contient les importations pour les trois 960 fichiers.,
donc nous avons déjà la moitié d'une mise en page quand nous n'avons pas du tout codé CSS!

Cela n'aura pas l'air trop flashy. Il n'a pas été stylé et il n'a même pas de contenu:

Étape 3 - WP_Querys

C'est là que toute la magie se produit! On a Trois WP_Querys:

• leurs nouvelles - Nous avons donc partagé les nouvelles, non? Nous voulons que cette section ne
  affiche les messages avec la catégorie 'leurNouvelles'. De mon côté, (de mon blog de test) j'ai donné
  environ 7 de mes messages de cette catégorie. Tu devrais aller leur en donner aussi. Tu as aussi besoin
  pour trouver l'ID de catégorie de leur catégorie Nouvelles, mais je vais rapidement vous guider
  comment trouver ça plus tard.
• En vedette - N'oubliez pas que j'ai dit que je vais vous montrer comment créer un article sans
  jQuery? Voici la solution en quelques mots: ne montrer que le post le plus récent à ce jour
  dans sa propre boucle de requête.
• principale - L'astuce avec ceci est que nous ne voulons pas de la catégorie de leurs Nouvelles
  ici, nous ne voulons pas non plus le premier post. C'est facile, vous verrez dans une minute.

Étape 3: 1 - leurs nouvelles

Nous voulons donc une colonne de contenu WordPress d'une seule catégorie. Comment pouvons-nous
faire ça? En utilisant le vaste gamme de paramètres fournie par WP_Query
avec, c'est facile à faire. Remplacez le commentaire itsNews dans index.php par:

query ('category_name = leursNews & showposts = 7'); tandis que ($ leursNews-> have_posts ()): $ leurNews-> the_post (); ?>  

Question! Sautons droit au but.

• $ leursNews est la requête variable que nous allons utiliser pour la section 'leurNews'.
  Ceci définit une nouvelle requête, toute la base de WP_Query.
• question(); - Voici nos paramètres spécifiques. Nous voulons seulement montrer le maximum
  7 messages, tous sous le nom de catégorie 'leurNews'. Vous pouvez changer ces variables
  autour de bien sûr, 7 est juste le nombre de postes que j'ai la catégorie attribuée à.
• Le reste du code est une boucle raccourcie, spécifiée à l'aide de notre $ leursNews
  variable.

Nous avons besoin d'un code de boucle spécifique.

 
 
 
 Lire l'article complet '); ?> 
 

Tout simplement le titre enveloppé dans un h4 tag, avec le contenu enveloppé dans un div
classé 'entrée'. Génial! Vous avez fait votre premier WP_Query sur les 3, cela devrait
liste maintenant seulement les catégories avec le nom 'leurNews'

Étape 3: 2 - En vedette

Nous voulons seulement afficher 1 article qui n'a pas la catégorie 'leursNews'. Seulement 1.
Puisque vous comprenez maintenant les bases de WP_Query, je vous donnerai le code complet.
(remplacez le commentaire FEATURED POST par):

 query ('showposts = 1 & cat = -59'); while ($ en vedette-> have_posts ()): $ en vedette-> the_post (); ?> 
 Publié sous . 
  
  

Ce est notre article en vedette, alors j’ai judicieusement nommé le div "FeaturedPost",
mais parce que plus tard, nous voudrons aussi des styles de posts réguliers, j'ai inclus le
classe 'post'.

Même affaire avec le WP_Query. Cette fois, les paramètres ne montrent que 1 messages qui ne sont pas
de la catégorie 59. La catégorie 59 est l'ID de la catégorie 'leurNouvelles'. j'ai besoin
pour vous dire comment l'obtenir!

1. Ouvrez WP-Admin.
2. Cliquez sur gérer.
3. Cliquez sur Catégories.
4. Cliquez sur la catégorie 'leurNews' (ou ce que vous avez appelé).
5. Vérifiez l'URL de la page. Cela devrait être quelque chose comme ça:

   Voyez comment ça se passe & cat_ID = 59 à la fin? Ceci est votre numéro de catégorie.
   Le mien a 59 ans, assurez-vous de le remplacer par n'importe quel identifiant de votre catégorie "leurNews"!

6. Rappelez-vous ce nombre, nous en aurons aussi besoin dans la prochaine requête.

La différence avec le post présenté est principalement le h2. Parce que c'est le
deuxième en-tête le plus grand de la page. Tout en haut dans la section "leurNews" nous avons enveloppé
dans un h4 élément, car après les messages de la colonne principale ce sera la
En-tête suivant sur la page. Tout pour le style.

Étape 3: 3 - principale

Notre dernier WP_Query. Celui-ci sera tout messages excluant les messages contenus
par la catégorie 'leurNews' (vous avez besoin de la carte d'identité. La mienne avait 59 ans, vous souvenez-vous de la vôtre?).
Mais parce que nous montrons déjà le premier post en général (la fonctionnalité
post), nous ne voulons pas le montrer à nouveau, non? Nous avons donc besoin de compenser les messages par
1 - facile à faire avec les puissants paramètres de WP_Query.Remplace le commentaire MAIN WP QUERY
dans index.php avec ceci:

query ('posts_per_page = 5 & offset = 1 & cat = -59'); while ($ main-> have_posts ()): $ main-> the_post (); ?> 
 
 Publié sous . 
 Lire l'article complet '); ?> 
 
 

• posts_per_page - Est-ce exactement ce que c'est… Quand on commence à ajouter
  et les pages précédentes, il remplace ce que vous avez défini dans WP-Admin. J'ai 3 par défaut,
  et ne pouvait pas être dérangé changer alors je l'ai fait 5 pour la colonne principale.
• décalage - Rappelez-vous comment j'ai dit que nous ne devons pas montrer le premier post, parce que
  nous l'avons déjà dans la section des articles en vedette.
• chat = -59 - Nous devons spécifier quelle catégorie ne pas inclure - leurs Nouvelles
  - et pour moi, il a l'ID de 59. Le '-' juste avant le nombre compte essentiellement
  pour l'exclusion.

Voilà donc tout le code HTML et WordPress dont nous avons besoin. Il semblera toujours basique, mais
il aura la disposition générale de 3 colonnes, nous sommes après!

Étape 4 - CSS

Maintenant, parce que toute notre mise en page est à peu près terminée, il s’agit principalement du style
nécessaire! Télécharger
tous ces CSS, et collez-les dans votre style.css. Il y a quelques choses qui
remplacer le code 960 par défaut. Nous n'avons pas besoin d'utiliser !IMPORTANT parce que
le nouveau code est en fait plus haut dans l’échelle hiérarchique que le code 960. nous
utilisez le code 960 comme une sorte de "base" à partir de laquelle nous nous sommes construits. Si vous décorez le
fondations d'une maison, voyez-vous encore les fondations brutes? Cette 'décoration'
est principalement sur les en-têtes, mais un style général est utilisé pour le contenu du texte, etc.
Majoration majeure est la police de corps. Nous spécifions Georgia, lorsque la valeur par défaut est réellement
Helvetica. Les polices sont vraiment à votre goût, je viens d'utiliser Georgia pour être
différent! Une fois que vous avez collé et lu tout le CSS, la page d'accueil doit
avoir l'air complet!

Étape 5 - Fichiers de sous-modèle (facultatif)

J'inclus seulement cette section afin que je ne reçois pas un zillion de questions demandant pourquoi
les pages renvoient les informations qui devraient figurer sur la page principale! Donc notre indice
la page contient 3 colonnes - Mais que remplissez-vous avec 3 colonnes dans un seul
page? Tout ce que vous voulez! Bien que je suggère le contenu du post… Alors je vais
pour expliquer à quel point page.php et single.php travailler, au cas où vous
vouloir étendre le thème. Si vous voulez diviser index.php en en-tête, sidebar et
footer, faites-le maintenant! Sinon, nous allons à la vapeur:

1. Ouvrez single.php.
2. Copiez tout le code de index.php dans single.php.
3. Faites défiler jusqu'à ce que vous arrivez à div # leur.
4. Supprimer tout le div. Pendant que vous y êtes, supprimez aussi le message présenté.!
5. Tout ce que tu aurais dû laisser c'est div # main.grid_5. Changez le 5 en 9 pour compenser
   pour les 4 colonnes que nous venons de nous débarrasser de.
6. N'oubliez pas de changer le commentaire de fin div afin de ne pas vous perdre plus tard!

Alors maintenant, vous devriez avoir une colonne principale vide. Nous allons remplir cela avec un
boucle régulière:

 
 
 Publié sous . 
  
 
  

Naw… La vieille boucle ennuyeuse. N'hésitez pas à ajouter cette page à tout ce que vous voulez
vous veux que vos messages simples ressemblent. Cela fournit la base
modèle pour WordPress pour afficher un seul post.

Étape 5 Partie 2

Donc, c'est un seul post, mais nous avons toujours des liens vers single des pages dans le
navigation et pied de page. Si vous cliquez dessus, ils retourneront la même chose que l'index.
Pas cool. Tout ce que nous avons à faire est de tout copier d'un fichier à un autre page.php,
et ça devrait être doux. Facile hein? Ces pages devraient ressembler à ceci:

Emballer

Vous venez donc d'avoir un aperçu de ce que WP_Query peut faire. Je suggère fortement de visiter
la page de documentation de la requête, qui contient tous les mêmes paramètres que WP_Query. Vous pouvez restreindre votre boucle à n’importe quel message en utilisant toute combinaison de paramètres séparés par un
Et.

J'espère que vous avez eu autant de plaisir que j'ai créé un thème de journal!
Vous pouvez voir le produit final ici! Prendre plaisir!