Tout au long de cette série en six parties, du débutant au maître, nous utiliserons les fonctionnalités avancées de WordPress pour créer notre propre portfolio et blog, avec une page d'options, plusieurs styles et la prise en charge des nouvelles fonctionnalités de WordPress 2.7. Aujourd'hui, nous créons notre page d'accueil.

Aussi disponible dans cette série:

1. WordPress: Débutant à maîtriser, 1ère partie
2. WordPress: Débutant à maîtriser, partie 2
3. WordPress: Débutant à maître, Partie 3
4. WordPress: Débutant à maître, Partie 4
5. WordPress: Débutant à maîtriser, Partie 5
6. WordPress: Débutant à maître, Partie 6

Aller à une section

• Commencer
•   - Contour
• Header.php
•   -
•   - Jeux de couleurs et feuilles de style
•   - div # tête
•   - div # nav
• Styliser l'en-tête
•   - Styles généraux
•   - Style d'en-tête
•   - Style de navigation
•   - Un peu de couleur
• Articles du portefeuille
• La page d'accueil
•   - Soins de beauté
• Zone Widgetised
• Bas de page
• Résumé

Commencer

Dans cette partie, nous allons créer la page de couverture de notre portefeuille, en utilisant notre page d'options et en gérant les champs personnalisés dans les publications. Avant de commencer, créez les fichiers et dossiers suivants dans le répertoire / wp-content / themes /innovation/ dossier que vous avez créé précédemment:

• / inc /
  • / cache /
• header.php
• footer.php
• sidebar.php

Enregistrez également ce script TimThumb PHP Image Resizer en tant que thumb.php à l'intérieur de / inc / dossier. TimThumb est un script 'intelligent' de redimensionneur d'image PHP par Darren Hoyt.

Contour

Vous trouverez ci-dessous un aperçu de notre page d'accueil:

Notre header.php le fichier contiendra le #tête et #nav sections - y compris les balises d'ouverture pour #emballage, #contenu et .Content Wrap.

footer.php contiendra alors le #bas de page section, et les balises de fermeture pour #contenu et la dernière section au-dessus (cela pourrait être soit .Content Wrap, .extraswrap ou #sidebar selon la page).

le .Content Wrap zone contiendra les deux derniers messages de notre catégorie Portfolio, et .extraswrap sera une zone prête pour les widgets où nous pouvons placer des widgets à partir du tableau de bord.

Header.php

Au sommet de la header.php fichier, inclure le code suivant.

  >   

Comme vous pouvez le constater, il s’agit principalement du code que vous souhaitez inclure en haut de tout document xHTML Strict. Seules certaines sections ont été remplacées par une fonction WordPress qui produira le code approprié en fonction du langage utilisé par WordPress.

À la fin du code se trouve notre balise de titre qui, encore une fois, utilise les fonctions WordPress pour obtenir le nom de la page en cours et le nom du site..

Jeux de couleurs et feuilles de style

Ensuite, nous incluons notre style.css fichier en utilisant WordPress bloginfo (); une fonction. Il est important d’utiliser cette fonction pour inclure la feuille de style principale, au lieu de saisir directement le chemin du fichier..

Vient ensuite le code permettant de saisir la feuille de style de schéma de couleurs correcte sélectionnée dans les options que nous avons créées dans la partie précédente:

Le tableau ci-dessous explique ce que fait le code ci-dessus:

Nous vérifions si notre option de jeu de couleurs ($ ts_colourscheme) existe depuis la page d’options, et qu’il a été défini correctement (c’est-à-dire qu’il ne reste pas "Choisir un jeu de couleurs:"). Si l’option n’est pas définie correctement ou n’existe pas, elle utilisera par défaut le deepblue.css jeu de couleurs; sinon, nous utilisons la feuille de style sélectionnée à partir de la page des options.

Pour continuer, nous incluons nos flux RSS et Atom et ouvrons la balise body:

#tête

Le code suivant est beaucoup plus simple que la section précédente. Comme indiqué dans l'image ci-dessus, nous utiliserons davantage de fonctions WordPress pour extraire des informations de la base de données WordPress:

le bloginfo ('nom'); et bloginfo ('description'); Ces fonctions permettent de récupérer les paramètres appropriés à partir de la page "Paramètres généraux" du tableau de bord WordPress:

#nav

Récupérer une liste de pages de la base de données est également très facile. Nous utilisons le wp_list_pages (); une fonction. Notez que nous incluons aussi un title_li = argumentation Ceci empêche la fonction de créer un élément de liste supplémentaire appelé 'Navigation:' avant de lister les pages.

Nous avons également ouvert les divisions et enveloppes appropriées pour la section suivante..

Styliser l'en-tête

Si vous avez maintenant votre installation WordPress, cela ressemblera à ceci:

N'oubliez pas que nous inclurons tous les styles de couleur à l'intérieur deepblue.css afin que nous puissions facilement créer différents jeux de couleurs plus tard. Tout le reste ira dans style.css.

Styles généraux

La première chose que j'inclus toujours dans ma feuille de style est une réinitialisation du navigateur, suivie d'un style de base pour les paragraphes, les listes, les en-têtes et les liens..

 * padding: 0; margin: 0; body font-family: Arial, Helvetica, sans-serif;  p taille de la police: 0.9em; hauteur de ligne: 1.5em; marge inférieure: 10px;  ul, ol margin: 0 0 10px 10px;  li taille de la police: 0.9em; hauteur de ligne: 1.5em; list-style-position: à l'intérieur; marge inférieure: 3px;  img border: none;  h1, h2, h3, h4, h5, h6 poids de la police: normal;  h3, h4 marge: 15px 0 2px 0;  h4, h5, h6 font-weight: gras;  a: lien, a: visité text-decoration: none;  a: survol, a: actif, a: focus text-decoration: underline; contour: aucun; 

Cela devrait sembler très simple pour quiconque possède une connaissance de base du HTML et du CSS. Nous avons défini la valeur 0 sur les marges et le remplissage de tous les éléments (*) afin de remplacer les styles par défaut appliqués par chaque navigateur à une page. Nous incluons ensuite de nouvelles marges, tailles de police et hauteurs de ligne pour les éléments principaux afin d’augmenter leur lisibilité..

Style d'en-tête

Ensuite, nous créons un peu une mise en page:

#wrap margin: 0 auto; largeur: 980px;  #head margin: 25px 0; débordement caché;  #head h1 float: left; marge gauche: 20px;  #head h3 font-family: Géorgie, "Times New Roman", Times, serif; taille de police: 0.8em; style de police: italique; Flotter à droite; hauteur de ligne: 1.7em; text-align: right; marge: 0 20 px 0 0; largeur: 500px; 

le #emballage L'élément est le conteneur qui contient tout. Nous utilisons une largeur de 980px (c'est à peu près aussi haut que nous pouvons aller tout en nous accommodant pour des résolutions 1024x768). Et nous avons utilisé marge: 0 auto; pour le centrer dans le navigateur.

Le titre et les slogans (h1 et h3 respectivement) sont ensuite mis à flot de chaque côté du conteneur.

#tête a une propriété de débordement caché; afin qu'il tienne correctement les éléments flottants. En règle générale, une div ne sera pas entourer les enfants flottés (comme nous avons ici). Voir l'image ci-dessous à titre d'exemple (le jaune représente la marge attribuée à #tête):

Style de navigation

 #nav border-top-left-radius: 15px; border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-rayon-droit: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; bordure inférieure: aucune; clarifier les deux; rembourrage: 0 20px; largeur: 939px; 

Jetez un coup d'œil aux images d'aperçu en haut du didacticiel et vous remarquerez que nous utilisons des coins arrondis en haut de la section de navigation. Au lieu d’obtenir cet effet avec un tas d’images et des balises HTML supplémentaires, nous allons utiliser le nouveau CSS3. rayon de la frontière propriété de donner un rayon de 15px aux deux coins supérieurs.

Cependant, les navigateurs actuels ne supportent pas encore cette propriété, mais les navigateurs basés sur Mozilla et Webkit ont leurs propres -moz-border-radius et -webkit-border-radius propriétés que nous pouvons également utiliser pour que les angles arrondis fonctionnent dans Firefox 3, Safari et Chrome. Internet Explorer et Opera utiliseront simplement une bordure carrée jusqu'à ce qu'ils soient compatibles. rayon de la frontière.

Remarque: L'utilisation de ces propriétés spécifiques au fournisseur dans votre CSS empêche la validation de votre feuille de style. Mais comme ce ne sont que ceux-là qui arrêtent la validation - qui se soucie?

En continuant, nous appelons les éléments de la liste dans la navigation pour les afficher en ligne (horizontalement):

 #nav ul margin: 0;  #nav ul li display: inline; taille de police: 1em; hauteur de ligne: 1.3em; marge droite: 25px;  #nav ul li a: lien, #nav ul li a: visité display: -moz-inline-stack; affichage: inline-block; poids de police: gras; texte-décoration: aucun; rembourrage: 20px 10px;  #nav ul li a: survol, #nav ul li a: actif, #nav ul li a: focus contour: aucun; 

Notez que nous utilisons display: -moz-inline-stack; sur les liens. Ceci est purement pour Firefox 2 et inférieur, qui (pour une raison quelconque) ne supporte pas affichage: inline-block; - même IE6 le supporte!
Nous donnons beaucoup de bourrage aux liens pour augmenter la zone cliquable (par opposition à bourrer le li au lieu).

Regardez maintenant la page de votre navigateur et elle devrait ressembler à ceci. Mieux, mais a maintenant besoin de couleur!

Un peu de couleur

Tout d'abord, enregistrez l'image suivante dans le / styles / deepblue / dossier en tant que bg.jpg.

Et cette image dans le même dossier que trans.png (c'est en fait une image semi-transparente sombre de 1px).

Ouvert /styles/deepblue.css, et type:

 / * Style par défaut de l'innovation - deepblue.css * / body background: url ("deepblue / bg.jpg") no-repeat # 101010 top center fixed; couleur: # 333;  a: lien, a: visité color: # 5c6e80;  #head h1 color: #eee;  #head h3 color: #ddd;  #nav background: url ("deepblue / trans.png") repeat; bordure: 1px solide # 111;  #nav ul li a: lien, #nav ul li a: visité color: #ddd;  #nav ul li.current_page_item a: lien, #nav ul li.current_page_item a: visité background: url ("deepblue / trans.png") repeat; couleur: #eee;  #nav ul li a: survolez, #nav ul li a: actif, #nav ul li a: focus color: #eee; 

Nous avons défini la grande image d’arrière-plan sur le corps (et nous l’avons fixée pour qu’elle ne bouge pas lorsque vous faites défiler), l’image transparente est utilisée comme arrière-plan pour la navigation et nous avons également défini des couleurs de police..
Prévisualisez-le et vous aurez maintenant quelque chose comme:

Articles du portefeuille

Avant de créer le haut de notre page d'accueil où vont nos deux derniers articles de Portfolio, nous avons besoin de quelques articles avec lesquels tester. Le thème utilisera quelques "champs personnalisés" pour afficher des informations supplémentaires sur les éléments du portefeuille:

• rendez-vous amoureux (la date d'achèvement des travaux)
• client (à qui le travail était destiné)
• lien (vers une version live de votre travail)
• Aperçu (URL d'une image de votre travail d'une largeur de 930px)
• aperçu complet (version plus grande de l'œuvre, s'affichera dans une lightbox)

Créez une nouvelle publication de blog, le titre étant le nom du projet (comme dans l'image ci-dessus) et entrez du contenu relatif au travail. Mettez le message dans votre catégorie 'Portfolio'.

Avant d’enregistrer le message, faites défiler jusqu’à la section "Champs personnalisés":

Ici, entrez chacun des champs personnalisés fournis ci-dessus. Seulement le Aperçu Champ requis. Vous pouvez utiliser les images suivantes pour votre Aperçu champ si vous ne possédez pas encore l'un des vôtres (clic droit et sauvegarder):

Une fois que vous avez rempli les champs, vous pouvez publier le message. Répétez cette procédure jusqu'à ce que vous ayez au moins deux messages (de préférence plus)..

La page d'accueil

Maintenant que toutes les conditions préalables sont remplies, nous pouvons enfin coder la partie principale de la page d'accueil. Dans page-home.php, tapez ce qui suit:

 
dernier projets
  
query_posts (); est une fonction WordPress permettant d’obtenir des publications spécifiques de la base de données. Comme vous pouvez le voir dans les arguments de la fonction (les parties entre parenthèses), nous indiquons à WordPress de ne recevoir que 2 articles de la catégorie Portfolio ($ ts_portfolio_cat reçoit les informations de la page des options que nous avons créées).
 
Avec tandis que();, nous avons commencé la «boucle WordPress». Ici, nous pouvons dire à WordPress de quelle partie de chaque article nous avons besoin.
 
 $ counter ++; $ preview = get_post_meta ($ post-> ID, 'preview', true); $ date = get_post_meta ($ post-> ID, 'date', true); ?>
 
Sur la première ligne, nous en avons ajouté un au compteur (nous l'utilisons sous peu). $ counter ++; est un raccourci pour l'écriture compteur $ = compteur $ + 1;
 
Nous utilisons ensuite le get_post_meta (); fonctions pour obtenir nos champs personnalisés «aperçu» et «date» à partir de la poste - qui sont placés dans le aperçu $ et $ date variables respectivement.
 
 ">
 
Ci-dessus, nous avons créé une div avec un travail classe pour l’élément de portefeuille à tenir. Mais notez que nous vérifions également que si notre compteur $ égal à 2 (c’est-à-dire le deuxième élément du portefeuille), nous ajoutons une autre classe à la div nommée dernier. Cette classe sera utile lorsque nous appelons cette section.
 
Ensuite, nous produisons l'aperçu de l'image:
 
 
 
Si une image d'aperçu existe, alors nous… 
 
 ">   
 
le the_permalink (); la fonction est utilisée pour afficher le lien vers le poste actuel.
 
Ensuite, nous produisons l'image d'aperçu. Mais nous l'exécutons également via le redimensionneur TimThumb afin de redimensionner l'image à 450 pixels de largeur et à 210 pixels de hauteur (à partir de l'image de 930 pixels qu'il est réellement). Notez comment nous utilisons bloginfo ('template_directory'); pour vérifier que WordPress vérifie notre dossier de thèmes (c’est un équivalent du TEMPLATEPATH nous avons utilisé dans la partie précédente de la série).
 
Nous avons maintenant juste besoin de sortir la ligne de texte qui se trouve en dessous de l'image (le titre et la date):
 
 
 ">   ($ date)";?> 
 
C'est relativement simple. Nous utilisons the_permalink (); à nouveau pour obtenir le lien pour le poste actuel. le titre(); est utilisé pour obtenir le titre du post en cours.
 
Nous vérifions ensuite si un champ personnalisé "date" a été saisi (dans le champ $ date variable) pour ce post. Si oui, nous le sortons.