Accentsconagua

WordPress en tant que CMS Partie 2

Code
Share

Dans le dernier tutoriel, nous avons créé une mise en page simple et rapide dans Photoshop. Nous devons maintenant la transformer en une page statique HMTL et CSS..

Aussi disponible dans cette série:

  1. WordPress en tant que CMS: Partie 1
  2. WordPress en tant que CMS: Partie 2
  3. WordPress en tant que CMS: Partie 3

Ce tutoriel comprend un screencast disponible pour les membres Tuts + Premium.

Une fois que vous maîtriserez mieux HTML et WordPress, vous pourrez ignorer cette étape et créer simplement votre thème WordPress, mais cela irait à l'encontre de l'objectif de ce didacticiel et nous allons donc franchir cette étape supplémentaire..

Je vois deux types de tutoriels différents. Le plus populaire semble être ici le code HTML complet et le code CSS complet, qui termine le didacticiel. Je ne suis pas un grand fan de cette méthode, je vais donc vous guider tout au long du processus. Pour les fans de l’autre méthode, vous trouverez l’ensemble du code HMTL et CSS à la fin de ce didacticiel..

Émincer

Nous avons opté pour un design extrêmement simple, nous n'avons donc besoin que de découper 2 images. Ce sont le logo et notre image de contenu.

Sortez votre outil de découpe et découpez ces deux images.


Pour le logo, essayez de le garder aussi près que possible de chaque bord..



Enregistrez l'image pour le Web, puis procédez de même pour notre image de contenu..


Vous avez besoin d'une fondation solide

Maintenant que toutes nos images ont été découpées et enregistrées, nous pouvons continuer et créer notre fichier HTML..

Ouvrez votre éditeur et préparez-vous à créer des dossiers et des fichiers. Dans votre dossier racine, créez ces dossiers et fichiers..

img /

inc /

index.html

Déplacez les images que vous venez de créer dans le dossier img et allez dans votre dossier inc. Une fois à l'intérieur, nous allons créer un nouveau dossier ainsi que 2 nouveaux fichiers. Créez un nouveau dossier appelé CSS et créez à l'intérieur de ce dossier 2 nouveaux fichiers., reset.css et style.css.

Votre structure de dossier devrait ressembler à notre capture d'écran ci-dessous.


Réinitialisation et structure de base

Lors de la création d'un site, il est toujours bon de commencer par une réinitialisation solide de CSS. Cela garantit que vous démarrez à zéro et élimine toute incohérence de navigateur que vous pourriez avoir..

La réinitialisation CSS que j’utilise toujours provient de http://meyerweb.com/eric/tools/CSS/reset/ alors pointez votre navigateur sur ce site et copiez le code de réinitialisation CSS qu'il a créé..

Avant de coller ceci dans notre fichier reset.CSS, nous allons le compresser rapidement dans un fichier plus petit..

Si vous compilez Google Compresseur CSS, il existe des centaines de scripts qui le feront pour vous. Personnellement, j'utilise CSSdrive http://www.CSSdrive.com/index.php/main/CSScompressor/. Là encore, pointez votre navigateur sur ce site.

Collez votre code de réinitialisation CSS dans cette zone et définissez le mode de compression sur Super compact. Hit compresser!



Vous serez redirigé vers une autre page avec notre code de réinitialisation CSS récemment compressé. Copiez le code, ouvrez reset.css dans votre éditeur et collez dans votre code. sauvegarder reset.css et fermez ce fichier.

Maintenant que notre configuration CSS a été réinitialisée, nous allons créer la structure HTML de base de notre site afin d'appliquer des styles CSS afin de nous assurer que tout fonctionne correctement..

Screencast complet


Blocs de construction

S'ouvrir index.html et ajoutez ce code HTML au fichier HTML de base.

    WordPress CMS - Partie 2

Maintenant que nous avons créé le fichier HTML le plus élémentaire, nous pouvons créer les 4 éléments principaux de notre page. Ces éléments sont l'en-tête, la barre latérale, le contenu et le pied de page. Encore une fois, comme nous travaillons avec un modèle reposant sur un arrière-plan tout à fait solide, nous n'avons pas à nous inquiéter de l'ajout de remplissage à nos éléments. Nous pouvons donc simplement créer 4 divs de conteneur et commencer à ajouter du style..

Créez 4 divs pour chaque élément et ajoutez _container à chaque nom. Nous allons ajouter un conteneur qui contiendra chacun de nos éléments afin de pouvoir centrer tout notre contenu sur la page. Ce sera appelé conteneur.

Vous remarquerez que chaque balise div de fermeture est accompagnée d'un commentaire. Notre modèle ne sera pas extrêmement long, mais à l'avenir, lorsque vous travaillerez avec beaucoup de div et d'éléments sur votre page, il peut être difficile de savoir lesquels.

la balise appartient à son ouverture
étiquette. Ajouter des commentaires laissera utiliser garder trace de ce qui appartient à son ouvre.

Nos conteneurs sont tous configurés. Commençons donc par ajouter du style afin de nous assurer que nos conteneurs de barre latérale et de contenu flotteront bien les uns à côté des autres.!

S'ouvrir style.css et ajouter rapidement quelques styles généraux.

Cet homme a du style

 body background: # f5f5f5; taille de police: 62,5%; couleur: # 6e6e6e; famille de fontes: Helvetica, Verdana, Sans-Serif;  p taille de la police: 1.4em; hauteur de ligne: 1.5em; marge: 0 0 15px 0;

Si vous avez déjà utilisé un fichier CSS, cela devrait vous paraître très familier. Si vous ne l'avez pas déjà fait, nous avons modifié certaines variables de notre élément body. Cela affecte notre fichier HTML principal. Nous avons changé la couleur de fond pour la couleur de notre fichier PSD, ainsi que la couleur par défaut de tout texte sur la page en utilisant la couleur.

Ensuite, nous définissons la pile de polices par défaut que nous voulons utiliser pour notre site. Cela indique à notre navigateur que nous voulons que Helvetica soit la police principale utilisée pour notre page. Si Helvetica n'est pas disponible, le navigateur cherchera Verdana, puis la police suivante sans-serif disponible..

Si vous ouvrez index.html dans votre navigateur, vous verrez une page beige vierge. Comme nous n'avons aucun élément dans notre conteneur, nous allons ajouter une hauteur par défaut et des couleurs d'arrière-plan afin que nous puissions voir avec quoi nous travaillons..

 div hauteur: 200px;  / * - Éléments de structure - * / #container width: 900px; marge: 0 auto;  #header_container width: 100%; fond: rouge;  #sidebar_container width: 280px; fond: bleu;  #content_container width: 580px; fond: orange;  #footer_container width: 100%; fond: vert;

Actualisez la page et vous devriez avoir quelque chose qui ressemble à la capture d'écran ci-dessous.


Nous avons défini une hauteur par défaut de 200 px pour tous nos divs afin que nous puissions les voir sans contenu à l'intérieur. Sans la hauteur par défaut, nos divs auraient tous une hauteur de 0px et nous ne verrions rien.

Maintenant que nos divs apparaissent sur la page, nous devons nous assurer que la barre latérale et les conteneurs de contenu sont placés l'un à côté de l'autre sur la page. Nous allons utiliser la propriété float pour y parvenir.

Remarque: à moins que je ne vous dise de supprimer tous les styles de l'élément CSS actuel, ajoutez simplement les nouvelles propriétés aux propriétés existantes..

 #header_container float: left; clarifier les deux;  #sidebar_container float: left;  #content_container float: right #footer_container float: left; clarifier les deux;

Nous flottons notre barre latérale div à la gauche de la page et le contenu div à la droite de la page. C'est l'une des mises en forme de colonnes les plus faciles que vous rencontrerez. Nous ne voulons pas que les éléments d'en-tête et de pied de page aient des éléments flottants à côté d'eux. Nous avons donc ajouté un élément clair: les deux; propriété avec la propriété float. Clear s'assure qu'aucun autre élément ne se trouve de part et d'autre du conteneur actuel.

Actualiser et consulter la capture d'écran!


Nous avons maintenant terminé la structure de base de notre page afin que nous puissions commencer à ajouter nos autres éléments à la page. Nous allons commencer par l'en-tête. Nous savons que tout est flotté et aligné correctement afin que vous puissiez supprimer les couleurs d'arrière-plan de nos conteneurs.

Comment sur une navigation

Dans votre div header_container, ajoutons une balise h1 ainsi qu'une liste non ordonnée qui fera office de navigation supérieure..

 / * - header_container - * / 
Gear'd

Si vous actualisez la page, vous verrez les balises par défaut, pas grand chose à regarder. Nous allons utiliser le h1 comme logo. Revenez à style.css et ajouter des propriétés à notre balise logo h1 #.

 h1 # logo width: 280px; hauteur: 96px; retrait du texte: -9999px; arrière-plan: url (… /… /img/logo.gif) en haut à gauche, no-repeat; float: gauche;

Ce que nous avons fait ici est de régler la hauteur et la largeur de out h1 sur la hauteur et la largeur de l’image de notre logo. Ensuite, nous avons supprimé le texte en l'indentant de -9999px. Enfin, nous avons défini l’arrière-plan de notre h1 sur notre balise logo et nous l’avons laissé à gauche. Cela fera en sorte qu'il se trouve bien à côté de la navigation.


Le logo a l'air génial, mais la navigation nécessite un peu d'amour CSS. Permet de lui donner un peu!

Un petit pas de côté de notre navigation, nous allons rapidement inclure la police Days que nous avons utilisée pour notre logo et notre navigation.

Nous allons utiliser @ font-face pour indiquer à CSS que nous souhaitons utiliser la nouvelle police pour notre fichier. Cette propriété n'est pas disponible dans tous les navigateurs, mais nous allons utiliser une pile de polices pour nous assurer que l'autre navigateur pourra toujours voir nos styles..

Nous devons d’abord inclure notre police dans notre fichier CSS. Créez un nouveau dossier appelé polices dans notre dossier inc et faites glisser days.otf dans le nouveau dossier de polices..

Si vous n'avez pas la police days, vous pouvez la télécharger, ainsi que d'autres polices sûres font-face à l'adresse http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/

Une fois que nous avons la police, nous pouvons utiliser @ font-face pour l’inclure dans notre script CSS.

 @ font-face font-family: Days; src: url ("… /fonts/days.otf");

La première propriété indique à notre fichier CSS le nom de la police afin que nous puissions l'utiliser dans notre propriété font-family avec d'autres éléments. La deuxième propriété est où notre police est située.

Retour à notre navigation. C'est devenu la norme pour utiliser des listes non ordonnées ou ordonnées en matière de navigation. Styler la navigation peut devenir un peu difficile lorsque vous êtes débutant, mais une fois que vous l'aurez compris, il peut devenir très puissant.

 ul.nav float: right; marge: 25px 0 0 0;  ul.nav li float: left; marge: 0 0 0 10px;  ul.nav li une font-family: Days, Helvetica, Verdana, Sans-Serif; texte-décoration: aucun; rembourrage: 5px 10px; couleur: # 6e6e6e; -moz-border-radius: 5px; -webkit-border-radius: 5px; taille de la police: 1.4em;  ul.nav li a: hover background: # e0e0e0;  ul.nav li.active a background: # 00b8ff; couleur: # f5f5f5;

Nous référons ul.nav et le flottons bien. Cela le place à l'extrême droite de notre contenu, en face de notre logo..

Par défaut, les balises li de nos listes sont superposées sur une nouvelle ligne pour chaque li. Nous ne voulons pas cela, nous voulons que notre navigation s'assied côte à côte. Flotter à la rescousse! Nous ajoutons un peu de marge à chaque élément li pour les espacer un peu.

Nous allons ajouter du style à nos éléments de lien pour qu’ils ressemblent à des boutons graphiques. Nous allons utiliser une autre propriété qui n'est pas disponible dans tous les navigateurs, mais je veux que tout reste simple pour apprendre.

Ce où -moz-border-radius et -webkit-border-radius entrer en jeu. Ces 2 propriétés ajoutent un joli rayon de 5 pixels à chaque élément de lien. Vous ne remarquerez l'arrondi que lorsque le lien est actif ou survolé, car ce sont les 2 seuls événements où nous modifions la couleur d'arrière-plan..

Rafraîchissez-vous et profitez de la gloire de votre nouvelle navigation!


Avec notre nouvelle connaissance des listes, nous allons passer à la barre latérale et ajouter une autre liste non ordonnée pour une navigation dans la barre latérale. La méthode de création de la barre de navigation est presque identique à celle de notre navigation supérieure. Si vous recherchez un défi, essayez de créer vous-même la barre latérale et de la styler avant de regarder le code lui-même.!

Vous trouverez ci-dessous le code HTML et CSS pour notre navigation dans la barre latérale. Je ne vais pas vous l'expliquer car, comme je l'ai dit précédemment, il est pratiquement identique à notre navigation dans l'en-tête, à l'exception que nous définissons une largeur pour nos éléments de lien, car nous voulons qu'ils soient à la taille de la barre latérale..

 
 #sidebar_container ul, #sidebar_container ul li float: left; clarifier les deux; largeur: 280px;  #sidebar_container ul li margin: 0 0 10px 0;  #sidebar_container ul li un -moz-border-radius: 5px; -webkit-border-radius: 5px; rembourrage: 7px 10px; texte-décoration: aucun; couleur: # 6e6e6e; float: gauche; clarifier les deux; largeur: 260px; taille de police: 1.5em; text-transform: majuscule; font-family: Days, Helvetica, Verdana, Sans-Serif;  #sidebar_container ul li a: hover background: # e0e0e0;  #sidebar_container ul li.active a background: # 00b8ff; couleur: # f5f5f5;

Vous devriez maintenant être un pro de la liste non ordonnée et je n'aime pas vous faire ça, mais nous allons bousculer une autre liste, je vous le promets. Nous allons utiliser une autre liste pour notre pied de page.

Encore une fois, je vais vous donner à la fois le code HTML et le code CSS avec une petite explication car il est presque identique sauf que nous lançons certains éléments différemment cette fois-ci..

 
 #footer_container color: #bebebe;  #footer_container a color: # 6e6e6e; texte-décoration: aucun; taille de la police: 1.4em;  #footer_container ul li float: right; border-left: 1px solid #bebebe; rembourrage: 0 10px;  #footer_container ul li.copyright float: left; rembourrage: 0; bordure: 0;  #footer_container ul li p margin: 0;

Nous avons notre liste de bas de page et chacun de nos éléments est flottant à droite, mais nous souhaitons que notre lien de copyright soit placé du côté gauche de notre page, loin de la liste de bas de page. Pour ce faire, nous lui attribuons une classe de droits d'auteur et la laissons de côté plutôt que de droit. Nous avons également ajouté des bordures à la gauche de chaque élément li, à l'exception de notre copyright li pour un peu de piquant..

Vous en avez marre des listes? Si la réponse est oui, vous avez de la chance, nous en avons terminé avec les listes pour ce tutoriel. Merci d'être resté si longtemps: P

Nous sommes près de la ligne d'arrivée, il ne reste plus qu'à ajouter quelques éléments de contenu et quelques retouches de dernière minute..

Remplissez-le de contenu

 
Plans et tarifs
 
Plan gratuit
 
 
  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Ultrices de Nullam, nisi quis scelerisque convallis, augue neque temporenim, et mattis justo nibh eu élit. Quisque ultrices gravida pede. Mauris accuse un vulgaire tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus en diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, ultrices placerat, orci.
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Ultrices de Nullam, nisi quis scelerisque convallis, augue neque temporenim, et mattis justo nibh eu élit. Quisque ultrices gravida pede. Mauris accuse un vulgaire tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus en diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, ultrices placerat, orci.
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Ultrices de Nullam, nisi quis scelerisque convallis, augue neque temporenim, et mattis justo nibh eu élit. Quisque ultrices gravida pede. Mauris accuse un vulgaire tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus en diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, ultrices placerat, orci.

Tous nos éléments de contenu sont principalement des éléments par défaut sur la page, à l'exception de notre header_image div. C’est bien parce que cela signifie une quantité minimale de CSS pour rendre notre page géniale.

 / * - Eléments d'en-tête - * / h1, h2, h3 font-family: Days, Helvetica, Verdana, Sans-Serif;  h2 font-size: 4em; couleur: # 00b8ff;  h3 font-size: 2em; couleur: # 6e6e6e; hauteur de ligne: 2em;  / * - Éléments de publication - * / .header_image float: left; clarifier les deux; marge: 10px 0; arrière-plan: # 00b8ff; rembourrage: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

Les en-têtes sont stylés, l'image d'en-tête est superbe. Tout semble venir ensemble. Rafraîchissez la page et profitez de la gloire de votre nouvelle page! L'en-tête a l'air un peu en retrait bien qu'être aspiré jusqu'au haut de la page.


Nous allons ajouter un peu de marge supérieure et inférieure à notre conteneur d'en-tête pour tout espacer.

Ajoutez la propriété margin à notre élément header_container.

marge: 20px 0;

Cela ajoute 20 pixels de marge en haut et en bas de header_container. C'est très simple!

La dernière retouche que nous allons ajouter est un peu de rembourrage et de bordure à notre footer_container..

 border-top: 1px solid # d0d0d0; remplissage: 10px 0;

Nous sommes tous codés et tout a l'air génial, c'est donc la fin de ce tutoriel. Passez au prochain tutoriel où nous allons prendre ce fichier et faire en sorte que WordPress génère du contenu pour chaque page!

Code
×