Share
Lorsque la plupart des gens pensent à WordPress, ils pensent aux blogs. Si vous regardez la page d'accueil de WordPress.org, ils parlent aussi beaucoup de blogs. Ce qu'ils ne vous disent pas, c'est que WordPress fait également office de CMS très puissant. vous devez juste le configurer correctement. Il peut également s'avérer un peu difficile de configurer et de travailler comme vous le souhaitez. C’est là que j’interviens. Dans cette série de tutoriels en 3 parties, je vais vous expliquer les trois étapes de l’utilisation de WordPress en tant que CMS..
Ce tutoriel comprend un screencast disponible pour les membres Tuts + Premium.
La première partie consiste à concevoir une mise en page simple dans Photoshop. La deuxième partie comprendra le codage du site Web en tant que modèle HTML statique et la dernière partie vous guidera dans la configuration de WordPress et l'application de notre nouveau thème à son système de modèles..
Si vous êtes un développeur Web expérimenté, ces deux premières parties peuvent vous intéresser, mais faites-vous plaisir et parcourez le contenu. Vous ne savez jamais, vous pouvez découvrir quelque chose de nouveau ou une manière différente de faire les choses.
Vous en avez probablement marre de lire, alors on se salit les mains!
Ouvrez Photoshop et créez un nouveau canevas vierge. En général, je choisis simplement 1024 x 768 à partir du menu déroulant Web..
J'ai créé une palette de couleurs rapide et l'ai verrouillée en tant que couche supérieure. De cette façon, je peux le référencer sans avoir à craindre de le perdre dans la mêlée.
Remplissez votre fond avec la couleur la plus claire et préparez-vous à faire des guides.
Nous allons créer des guides afin de pouvoir pré-afficher l'apparence de notre site avant de commencer à définir des éléments graphiques. Si vous n'avez pas de règles allumées, allez-y et appuyez sur-R pour les activer..
Si vous survolez la règle avec la souris, cliquez et éloignez votre curseur. Un curseur horizontal et vertical suit la souris. Ceci est un guide. Laissez aller créer sur.
Nous allons mettre en page la barre latérale, l’en-tête et la section du contenu principal. Faites en sorte que vos guides ressemblent aux miens ou plutôt aux miens. Nous avons aménagé les bordures de la barre latérale ainsi que le rembourrage que nous souhaitons inclure.
Chaque site a besoin d'un logo. Le logo va s'asseoir juste au-dessus de la barre latérale. Si vous avez un logo, placez-le là maintenant, sinon nous allons créer un logo bulle. Pourquoi? J'aime les bulles.
J'ai ajouté un peu d'ombre portée solide directement en dessous pour un peu de style. Permet de donner un nom à notre site. Je vais l'appeler Gear'd et utiliser une petite icône d'engrenage.
Nos utilisateurs ont besoin d'un moyen de naviguer sur notre site. Nous allons placer notre navigation par-dessus notre contenu principal et l’aligner sur la droite. Sortez notre outil texte et écrivez quelques éléments de navigation.
Nous allons prétendre que nous vendons un service. Disons que gear'd est une application Web et que les utilisateurs peuvent s'inscrire pour acheter différents niveaux d'adhésion..
Notre navigation comprendra A propos, Plans et tarification, FAQ et Contact. Nous souhaitons que l'utilisateur sache sur quelle page il est actuellement, nous allons donc activer et activer le survol de nos boutons de navigation..
Pour cela, je viens de créer un carré arrondi avec une option de texte de couleur plus claire. L'état de survol a une couleur claire, juste un peu plus grande que la couleur de fond.

Notre application Web offre quelques niveaux d’abonnement que les utilisateurs devraient pouvoir naviguer. Nous ne voulons pas vraiment avoir 100 éléments de navigation principaux différents parce que c'est moche. C'est là que la barre latérale entre.
Reprenons le même style que nous avons utilisé pour les états de navigation principal, de survol et actif, et les appliquons à une navigation par barre latérale. La barre de navigation latérale tiendra notre navigation secondaire pour la page principale sur laquelle nous nous trouvons. Ceci inclut les informations de tarification et d’inscription, ou les différentes zones de contact ou.
La page est un peu vide, ajoutons du contenu.
Nous avons ajouté du texte d'en-tête ainsi qu'un mini-texte d'en-tête en dessous. Juste une autre indication visuelle de l'emplacement actuel de l'utilisateur.
Ensuite, nous avons ajouté une boîte arrondie sur toute la largeur de notre zone de contenu et y avons jeté une image..
Enfin, nous avons ajouté notre corps de texte.
Notre site commence à bien se mettre en place. Nous avons ajouté tous nos éléments sauf un, notre pied de page..
Notre pied de page va contenir nos droits d'auteur ainsi que quelques pages supplémentaires qui ne nécessitent pas vraiment d'espace de navigation principal..
Ajoutez un saut de ligne pour diviser un peu la page, puis mettons un texte de copyright et alignez-le complètement sur le guide de gauche..
Les termes et conditions et la politique de confidentialité sont des pages auxquelles vous souhaitez que l'utilisateur puisse accéder, mais ne doivent pas nécessairement être jeté à la face. La beauté d'un pied de page est que nous pouvons toujours fournir cette information à l'utilisateur, mais que nous le cachons bien: P
Nous venons de créer un site simple que nous pouvons maintenant convertir en un modèle HTML et CSS. N'hésitez pas à pimenter le modèle, mais pour des raisons de rapidité et de facilité d'utilisation, nous allons passer à autre chose.
Accentsconagua