Share
Les pieds de page sont souvent un aspect négligé de la conception d'un site - lorsqu'ils peuvent en réalité être un peu pratiques et instructifs. Dans ce tutoriel, nous allons passer en revue certaines options que vous pouvez avoir pour votre site WordPress..
Comme d'habitude, avec ces tutoriels, vous aurez besoin d'un répertoire WordPress. Si vous les avez déjà faites, vous devriez déjà avoir une configuration! Sinon, il existe des tutoriels sur l’exécution locale de Wordpress ici pour Windows et ici pour OS X.
Nous verrons comment créer un pied de page statique avec toutes les informations dont vous avez besoin, puis nous le rendrons dynamique afin que vous puissiez tout éditer via WordPress Backend.!
Télécharger ces images et placez-les dans un nouveau dossier dans wp-content / themes. Nommez le dossier 'WPFooter'.
Rapidement, placez ce code dans un nouveau fichier 'style.css' dans le nouveau dossier WPFooter:
/ * Nom du thème: URI du thème WPFooter: http://net.tutsplus.com/ Description: Un pied de page WordPress très pratique. Version: 1.0 Auteur: Harley Alexander Auteur URI de l'auteur: http://www.baffleinc.com/ * /
Si vous ouvrez votre répertoire WordPress dans un navigateur, accédez à wp-admin / themes.php et sélectionnez le nouveau thème.!
"
Nous ne montrerons qu'un en-tête court et une boucle simple pour cela. Plus tard dans le didacticiel, nous aurons plusieurs barres latérales (une pour la barre latérale, une pour le pied de page). Nous allons commencer avec une base facile:
<?php bloginfo('name'); ?><?php wp_title(); ?> ">
Je sais que c'est beaucoup, mais ce sont toutes des choses assez basiques, et vraiment en dehors du but de ce tutoriel, donc ce n'est pas une grosse affaire. En gros, quelques informations d'en-tête pour un blog WordPress, un en-tête court (qui deviendra une belle image d'en-tête) et une boucle pour afficher le contenu..
Ensuite, nous allons coller dans une barre latérale statique. Remplacez le commentaire 'sidebar here' par:
Ceci est juste, encore une fois votre barre latérale régulière. Les annonces que nous allons faire assez tard dans le code CSS… Maintenant, nous avons besoin de la partie intéressante: le pied de page.
Comme je l'ai dit plus haut, il est de plus en plus important pour les sites Web d'avoir des pieds de page plus informatifs et utiles, plutôt que comme une simple barre de noms de droits d'auteur. Donc, au lieu de cela, nous allons le remplir avec du contenu pour diriger les lecteurs vers d'autres pages. Après tout, le contenu est roi, non? C'est le pied de page:
Les archives
Messages récents
Sur
Bonjour, ce blog parle de beaucoup de malbouffe. En fait, la description est assez explicite: . Profitez de votre séjour et nous espérons vous revoir!
Liens
Enfin quelque chose d'intéressant!
Nous avons déjà un pied de page intéressant. Cela ne ressemble pas beaucoup à un pied de page pour le moment, alors sautons dans le CSS!
Allons-y un peu de beauté. Ouvrez style.css, et passons au codage!
* marge: 0; rembourrage: 0; contour: 0; body background-color: # e3e3e3; remplissage: 30px 0; police: 12px "Lucida Grande", Lucida, Verdana, sans serif; .clearfix display: block; clarifier les deux; largeur: 1px; #wrapper width: 960px; marge: 0 auto; background: #fff; remplissage: 30px 0;
Nous commençons avec quelques informations de base 'reset', qui alignent tout, rendent le texte normal et définissent une classe qui est notre 'clearfix'.
Maintenant, nous allons corriger l'en-tête. Rappelez-vous le dossier d'images que vous avez décompressé au début? Il y a une image là-bas appelée "mywebsite.png". J'étais paresseux et j'ai créé une image avec quelques effets pour cette partie.
Il n'affichera pas le nom de votre blog, mais affichera "Mon site Web". Cette technique montre comment le remplacement des images se fait via CSS en toute sécurité…
h1 marge: 40px auto 0; largeur: 930px; position: relative; en haut: -30px; h1 a color: # b3b7ba; texte-décoration: aucun; bloc de visualisation; largeur: 203px; hauteur: 38px; retrait du texte: -999em; background: url (images / mywebsite.png) pas de répétition droite en haut; Flotter à droite;
Comme vous pouvez le constater, le "a" a été développé et bloqué pour s’ajuster à l’image d’arrière-plan de l’image "Mon site Web". C’est un moyen rapide et sale de le faire - également navigateur croisé, je crois!
Pour continuer, nous appelons maintenant la section de contenu:
#content padding: 30px; float: gauche; largeur: 650px; h2 letter-spacing: -2px; text-transform: majuscule; taille de police: 16px; marge inférieure: 10px; .entry margin-bottom: 20px; .entry a color: # 164774; texte-décoration: aucun;
La mise en page commence déjà à se former, mais la barre latérale et le pied de page ont encore besoin de travail et de suppression!
Nous pouvons modifier le style de la barre latérale, mais pas la totalité. Étant donné que nous visons des widgets universels, l’essentiel du style des widgets de la barre latérale peut s’effectuer avec le pied de page..
#sidebar float: left; largeur: 220px; marge: 0 10 px; rembourrage en haut: 30px; #sidebar> ul> li margin-bottom: 10px! IMPORTANT; #ads li display: inline-block; largeur: 100%; arrière-plan: # f7f7f7; hauteur: 50px; text-align: center; marge inférieure: 10px; couleur: gris; hauteur de ligne: 50px; bordure: 1px solide;
Si vous actualisez, vous remarquerez que c'est toujours un peu précis. Corrigeons cela avec un peu de style pour le pied de page et la barre latérale.
#footer clear: both; #footer div, #sidebar> ul> li float: left; largeur: 220px; marge: 0 10 px; background: url (images / modalBox.png) répéter-y centre en haut; couleur: #fff; #footer p padding: 10px; #footer a, #sidebar a color: #fff; texte-décoration: aucun; #footer h3, #sidebar h3 margin-bottom: 10px; background: url (images / modalBoxHeader.png) no-repeat centre top; hauteur: 14px; taille de police: 12px; text-align: center; couleur: #fff; poids de police: normal; text-shadow: # 000 1px 1px 3px; #footer ul, #sidebar ul> li> ul list-style: none; rembourrage: 10px; background: url (images / modalBoxFooter.png) no-repeat centre bottom; #footer ul li padding-bottom: 5px;
C'est un sacré bloc! Mais maintenant, votre blog WordPress devrait être beaucoup plus intéressant! Cela divise également les 4 sections de bas de page en 4 colonnes - pour une interface utilisateur agréable et soignée!
Terminé! C'est la partie manuelle du site faite. Maintenant que c'est fait, nous allons aller un peu plus loin et le rendre gérable à 100% avec WordPress Admin..
Les barres latérales dynamiques sont une fonction intégrée fantastique de WordPress. Ils sont faciles à utiliser et offrent en gros un moyen de gérer davantage de contenu via une interface Web. Rendons notre index.php sidebar-compatible.
Premièrement, nous allons remplacer les énormes morceaux de code qui composaient notre barre latérale et notre pied de page par du code dynamique. Remplacez tout ce qui se trouve dans #sidebar div> ul par:
Et remplacez tout entre la div #footer par:
Si vous actualisez votre page, tout disparaîtra. Créez un nouveau fichier dans le répertoire appelé functions.php, et codons!
Nous devons créer deux fonctions - les deux 'register_sidebar ()'. Enregistrez-en un pour la barre latérale réelle et un pour le pied de page.
'Sidebar', 'before_widget' => '
Ces tableaux sont la série d'informations à attacher à chaque barre latérale. Le nom (afin que nous puissions sélectionner les différents noms dans WordPress Admin), ainsi que les informations à mettre avant / après (conteneur) chaque widget, et avant / après chaque en-tête. Parce que notre code est spécifique aux h3, nous devons lui indiquer d’envelopper des h3. Nos sections de pied de page sont divs, nous devons donc les envelopper dans divs au lieu de la liste par défaut. Simple! Si vous actualisez, vous risquez de ne pas trouver le contenu qui vous attend. Sinon, nous réglerons cela à l'étape suivante..
Comme je l'ai dit, il peut y avoir ou non du contenu en attente. Voici comment vous le modifiez. Allez dans le tableau de bord WP et visitez la page des widgets via la conception (pour WP 2.3+) (tableau de bord> Conception> Widgets). Dans la colonne de droite, il devrait y avoir votre barre latérale!
Vous pouvez maintenant passer d'un fichier à un autre, enregistrer les modifications, revoir votre page et modifier facilement le contenu via une interface Web au lieu de parcourir le code! Assurez-vous simplement que votre barre latérale 'Pied de page' ne comporte que 4 widgets maximum, sinon elle se répendra sur la ligne suivante..
Alors, voici votre dernière excuse pour ne pas avoir un pied de page intéressant - vous savez maintenant comment le faire facilement. C'est essentiellement une barre latérale supplémentaire. Cela économise également beaucoup d'espace précieux dans votre barre latérale que vous pouvez remplir avec des éléments beaucoup plus importants tels que des flux, des avis, etc. Si vous avez vous-même un pied de page intéressant, faites-le nous savoir.!
Accentsconagua