Refonte de votre site Web WordPress (pour ajouter une touche personnelle)

Aucune autre plateforme ne vous donne le pouvoir de personnaliser l’apparence de votre site Web comme WordPress. C’est l’une des raisons pour lesquelles WordPress est populaire auprès des éditeurs et des développeurs Web..


Vous pouvez prendre un thème WP de base (et terne), ajouter un logo, éditer quelques lignes de code, changer votre CSS et avoir un site Web professionnel (mais agréable) en un rien de temps. C’est un travail facile et ce tutoriel vous montrera comment le faire.

Es-tu prêt? Commençons par les premières choses d’abord; les couleurs.

Conception d’un schéma de couleurs

Lors du développement d’un jeu de couleurs pour votre site WordPress, il y a beaucoup de choses à considérer. Considérez-le comme la peinture de votre maison ou de votre magasin de pierre et de mortier. Vous devez déterminer la couleur qui ira sur vos murs et la couleur que vous souhaitez pour vos portes.

La façon dont vous peignez vos extérieurs et intérieurs dépendra de deux facteurs, vos préférences personnelles.

La coloration de votre site WordPress n’est pas différente non plus. De quelle couleur voulez-vous vos liens? Votre parcours, comment allez-vous le rendre le plus attrayant et laisser la bouche de vos concurrents bouche bée? Quelles couleurs complèteront (voire renforceront) votre message? Comment voulez-vous votre texte? Le ciel est la limite du choix des couleurs que vous pouvez utiliser sur votre site WP.

Vous devez déterminer toutes les couleurs que vous utiliserez dès le début. Je vous recommande de ne vous en tenir qu’à trois couleurs, mais vous êtes libre d’utiliser autant de couleurs que vous le souhaitez.

N’en faites pas trop ou vous finirez par diluer votre message marketing dans toute cette couleur. Après tout, un excès de quoi que ce soit est toxique, donc peu importe les couleurs que vous choisissez, il est important de garantir l’harmonie.

Il est préférable d’utiliser le plus de couleurs où une majorité de gens les verront (et, espérons-le) les aimeront. Je parle de votre logo et de votre bannière Masthead. Ces zones sont exactement là où vous avez le plus besoin de couleurs; le reste de votre site Web peut être moins coloré mais plus informatif.

216 couleurs contre 12 couleurs

Nous connaissons tous les douze couleurs élémentaires, mais le Web est plein de couleurs et de leurs différentes nuances. Pour cette raison, choisir la couleur qui dégagera de la chaleur personnelle tout en créant un look professionnel peut être une tâche difficile.

Vous avez de la chance, car j’ai pêché partout sur Internet et j’ai trouvé les outils suivants pour vous aider à démarrer:

KULER

kuler

Kuler a été conçu par Adobe pour aider les développeurs Web à créer des schémas de couleurs haut de gamme. Kuler est un outil en ligne, ce qui signifie que vous pouvez le transporter et l’utiliser partout, mais il existe également une application de bureau pour vous aider à développer des schémas de couleurs directement à partir de votre bureau. De plus, si vous avez un Adobe ID, vous pouvez enregistrer vos schémas de couleurs en un seul clic.

Il existe différentes règles de couleur à utiliser avec Kuler, notamment monochromatique, composé, complémentaire, analogue et triade, entre autres..

Découvrez Kuler.

TABLEAU DES COULEURS HTML

Connaître les couleurs que vous utiliserez n’est que la moitié du travail. Pour implémenter vos couleurs, vous devez les traduire en codes HTML.

nuancier html

C’est là qu’intervient le nuancier HTML. Il s’agit d’un nuancier coloré avec plus de 200 (216 en fait) codes couleur Web. Armé de la carte, aucune couleur sous le soleil ne devrait être difficile à mettre en œuvre.

Les codes fonctionneront avec HTML, CSS, Adobe PhotoShop et d’autres outils de manipulation graphique, vous avez donc toute la liberté du monde pour jouer avec vos couleurs autant que vous le souhaitez.

Consultez le nuancier HTML.

GENOPAL

Si vous avez besoin d’aide pour choisir des couleurs, GenoPal est l’application que vous souhaitez. Il s’agit d’une application Web très simple qui «épingle» les palettes de couleurs dans la fenêtre de votre navigateur. Lorsque vous choisissez vos couleurs, elles apparaissent dans votre navigateur sous la forme de «notes autocollantes» colorées. ��

génopal

Avec GenoPal, vous pouvez augmenter la luminosité et contrôler la saturation de la teinte, pour obtenir exactement la teinte souhaitée.

Sur leur site Web, une application mobile est en préparation. Une fois lancée, elle vous permettra de transporter l’application et de développer des couleurs sur votre appareil mobile. Leur conception est ingénieuse, et le fait que cette application fonctionne réellement est un signe clair que GenoPal signifie entreprise.

COLORHEXA

ColorHexa est la version en ligne du plaque de peinture d’artiste. Ce site Web vous donne la possibilité de mélanger les couleurs en entrant simplement des codes de couleur. Leur application de prédilection est l’outil de mélange de couleurs, mais ils ont également un générateur de dégradé et un soustracteur de couleurs. N’est-ce pas ce pur génie à l’œuvre ici?

colorhexa

Comment fonctionne ColorHexa Blender? Tout ce que vous avez à faire est de taper vos codes de couleurs séparés par un «+» et ColorHexa fait le reste du travail. Par exemple, j’ai essayé:

# ff0000 + # 0000ff + # ff00ff et j’ai eu # aa00aa. De plus, ils vous donnent une page entière d’informations sur les couleurs (sur votre couleur finale, par exemple # aa00aa). C’est un outil que vous devez essayer vous-même pour expérimenter le mélange des couleurs comme jamais auparavant.

Découvrez ColorHexa.

GÉNÉRATEUR ULTIMATE CSS GRADIENT

générateur de dégradé de couleurs ultime

C’est probablement le meilleur outil pour générer des dégradés de couleurs. Il est entièrement en ligne et vous aide à générer des points médians rafraîchissants et leurs codes CSS correspondants. Ils fournissent également des modules complémentaires Chrome et Firefox pour vous permettre d’intégrer l’application à votre navigateur pour un accès plus facile et plus rapide.

Il y a une zone de prévisualisation où vous voyez votre dégradé, donc tout ce que vous avez à faire est de générer votre dégradé comme bon vous semble et copier coller le code CSS généré. C’est vraiment aussi simple que ça et ils ont plus de couleurs que vous n’en utiliserez jamais.

Découvrez l’Ultimate CSS Gradient Generator.

Choisir des polices

Maintenant que je vous ai montré comment choisir et mélanger des couleurs comme Picasso, jouons avec les polices.

Vos couleurs et votre conception Web attireront les gens, mais ce sont vos mots, c’est-à-dire vos pages et vos messages qui feront que les gens resteront.

Nous sommes occupés à créer nos meilleures histoires à tout moment, donc la plupart d’entre nous oublient que les polices comptent également. Mais la police que vous choisissez influence la façon dont les gens interagissent avec votre site Web. Avec les bonnes polices, votre public cible voudra rester et éventuellement cliquer sur vos autres pages, ce qui est exactement ce que vous voulez. Engagement.

Il existe un million et une police, mais malheureusement, un utilisateur ne verra que les polices installées sur sa machine. Si la police que vous utilisez n’est pas installée sur leurs machines, ils verront une alternative proche (ou une police complètement différente), qui n’aura pas le même effet que vous vouliez.

«Jouer avec les polices, c’est comme jouer avec le feu. Parfois, il peut allumer une correspondance sur une page Web, un cierge magique de joli texte. D’autres fois, cela peut brûler toute la maison. » – Lorelle de cameraontheroad.com.

Vous pouvez contrôler vos polices (et créer l’effet souhaité) avec votre feuille de style. Dans votre thème, la feuille de style est généralement style.css fichier. Vous pouvez utiliser ce fichier pour contrôler la couleur de vos polices, le type de police / famille de polices, la taille de police et d’autres aspects de la police choisie.

Voici un bon exemple:

#menu {famille de polices: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; taille de police: 0.8em; la couleur noire;}

Le code ci-dessus définira la taille de la police dans votre menu sur 0.8em et définira la couleur sur noir. Il définira également la police sur Arial, mais si l’utilisateur n’a pas Arial sur sa machine, Helvetica prendra le relais. S’ils n’ont pas Helvetica ou Arial, Verdana, Sans-serif ou Times New Roman prendront le relais.

En contrôlant les polices, vous pouvez créer une apparence plus cohérente.

Cependant, pour résoudre une fois pour toutes le problème de l’incohérence des polices, vous pouvez utiliser des polices intégrées. En utilisant des polices intégrées (ou externes), l’utilisateur n’a pas besoin d’avoir la police sur sa machine.

De plus, c’est un travail facile.

Il vous suffit d’ouvrir votre style.css et mettez le code suivant en haut.

@ font-face {font-family: Museo300; src: url ("fonts / museo300-regular.ttf") format: ('truetype'); font-weight: normal;}

REMARQUE: vous devez définir le nom et l’emplacement de votre police. Dans l’exemple ci-dessus, «Museo300» est la police, qui a été enregistrée dans un dossier nommé «polices».

Pour utiliser la police sur votre site Web, par exemple, vous pouvez écrire:

body {font-family: Museo300;}

Vous pouvez utiliser une police intégrée pour n’importe quel élément de votre site Web. Par exemple…

#menu {font-family: Museo300;}

… Mettra Museo300 dans votre menu.

La méthode ci-dessus signifie que vous devez télécharger la police et la télécharger sur votre serveur, ce qui, si vous me le demandez, est assez fastidieux.

toutefois, yvous n’avez pas besoin de télécharger la police externe que vous souhaitez utiliser.

Vous pouvez simplement créer un lien vers les polices de votre section head (header.php) comme ceci:

Comment et où ajoutez-vous la ligne ci-dessus? Vous devez ouvrir votre Panneau d’administration WordPress -> Apparence -> Editeur -> header.php

Si vous ne voulez pas ou ne pouvez pas modifier votre fichier header.php, importez simplement les polices en tapant la ligne suivante dans votre style.css:

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

L’exemple ci-dessus vous permettra d’utiliser le Au-dessus de l’arc-en-ciel police de Google n’importe où sur votre site. Par exemple, si vous souhaitez utiliser Over The Rainbow sur l’ensemble de votre site Web, vous pouvez utiliser ce code:

body {font-family: "Over The Rainbow";}

Google fournit plus de 600 familles de polices gratuites, alors jouez!

Mise à jour (07/12/13): Si vous souhaitez ajouter facilement des polices Google à votre site WordPress, vous pouvez utiliser le Plugin Google Typography. En dehors de cela, vous pouvez en savoir plus sur les polices Google et comment les implémenter dans cette amélioration de la typographie de votre site Web WordPress avec les polices Google par Tom Ewer.

Plus de ressources sur jouer avec les polices

Plugins WordPress pour ajouter des polices

Et pour ceux qui ne veulent pas creuser dans le code, vous pouvez toujours installer un plugin WordPress pour faire le gros du travail pour vous. Voici quelques-uns des plugins de polices gratuites les plus populaires de WordPress.com:

Est-ce que vous vous amusez? Allons-nous en…

 Formatage de la date et de l’heure

Avez-vous visité un site WordPress qui affiche la date ou l’heure sur un ton vraiment sympa qui vous fait sentir comme un noob complet en ce qui concerne votre site? Les propriétaires de ces sites viennent de jouer avec un une seule ligne de code et maintenant vous ne pouvez pas en avoir assez de leurs dates. Haha.

Bonne nouvelle, vous pouvez éditer cette ligne de code et surprenez aussi vos lecteurs.

Dans ton Tableau de bord WP, aller vers Apparence, puis Éditeur comme indiqué ci-dessous:

date de formatage

Une fois sur place, vous pourrez voir une liste de vos fichiers .php à l’extrême droite:

poste unique

Cliquez sur un seul post (single.php) et une fois qu’il est ouvert, ouvrez la barre de recherche en appuyant sur Ctrl + F. Dans la barre de recherche qui apparaît, tapez:

le temps

Vous remarquerez immédiatement une ligne qui pourrait ressembler à:

Maintenant, la zone que vous souhaitez modifier est («F Y»).

Permettez-moi d’étoffer cette section pour vous donner quelque chose de plus charnu à mordre.

Le «F» dans («F Y») signifie Nom complet du mois et le «Y» représente le Année en 4 chiffres. Par conséquent, si vous utilisez («F Y»), votre date ressemblera à:

septembre 2013

Si vous ajoutez une virgule entre F et Y, vous devriez avoir quelque chose comme:

Septembre 2013

Si vous souhaitez ajouter le jour et d’autres éléments, vous pouvez utiliser les caractères suivants:

l = nom complet du jour (L minuscule)

F = mois

j = Le jour du mois (la date)

Y = Année en 4 chiffres

y = année sur 2 chiffres

Plus de caractères peuvent être trouvés dans le tableau ci-dessous:

formatage du tableau des dates

Et ici, quelques exemples:

mise en forme d'exemples de date

N’oubliez pas de ne modifier que les caractères entre crochets («F Y») et, prendre note, ne supprimez pas les guillemets simples. N’hésitez pas à utiliser autant de caractères que vous le souhaitez pour obtenir l’effet souhaité et n’oubliez pas de tout sauvegarder une fois terminé.

De plus, vous pouvez vous débarrasser de la date en supprimant…

… Comme je l’ai fait sur mon blog il n’y a pas longtemps. �� Maintenant, tout ce que je reçois est Publié par Fred dans telle ou telle catégorie… bla bla. Pas de dates du tout.

Êtes-vous alimenté pour la prochaine partie? Tu ferais mieux d’être.

N’a pas trouvé la fonction_time?

C’est correct, car de nombreux thèmes utilisent désormais la fonction_date () au lieu de la fonction_time (), ce qui est en fait une meilleure pratique. Si votre thème utilise la fonction_date (), vous n’aurez pas à effectuer de modification, car vous pouvez simplement modifier la façon dont vos données s’affichent dans votre tableau de bord sous “Paramètres-> Général”.

Utilisation d’images

C’est probablement la partie la plus simple (et la plus courte) de ce tutoriel. Mais si vous êtes vraiment nouveau sur WordPress, l’ajout d’images peut être un défi.

WordPress vous permet d’ajouter des images via l’utilitaire de téléchargement ou (bouton Ajouter un média) lors de la création d’un nouveau message ou d’une nouvelle page. Tout ce que vous devez faire est de placer votre curseur à l’endroit où vous souhaitez que l’image se trouve dans votre publication ou votre page, puis cliquez sur «Ajouter un média».

ajouter des médias

Une fois l’utilitaire de téléchargement ouvert, vous pouvez ajouter d’autres détails tels que votre légende, votre taille, vos liens et votre alignement.

utilitaire de téléchargement

Cette zone se trouve sur le côté droit de l’utilitaire de téléchargement.

Pour en savoir plus sur l’ajout d’images, consultez les ressources suivantes:

Et si vous ne savez pas où trouver des images gratuites impressionnantes, consultez l’article que nous avons écrit les couvertures les meilleures ressources d’image pour WordPress.

Voir? Je t’ai dit que ce serait le plus court ��

Ajout d’un favicon

Avant d’oublier totalement les images, laissez-nous créer et ajouter un favicon à votre site WordPress. Un favicon (ou icône de favoris) est l’icône utilisée pour marquer un site Web.

Un favicon aidera vos lecteurs à identifier visuellement votre site Web.

Généralement, un favicon est un fichier graphique carré de 16 x 16 pixels avec l’extension .ico. L’extension signifie icône.

Comment créer un favicon

Vous pouvez créer votre favicon en ligne ou en utilisant des programmes de retouche d’image tels que GIMP, ou tout autre qui vous permet d’enregistrer des fichiers .ico. La plupart des services en ligne sont gratuits.

Bien que l’image soit généralement très petite (16 x 16 pixels), le favicon devrait représenter votre blog dans son intégralité. L’image ou le texte que vous utilisez pour créer votre favicon doit représenter votre activité en ligne.

Si vous utilisez un éditeur d’images:

  • Recadrez ou ajoutez de l’espace en conséquence pour vous assurer que votre image est carrée
  • Redimensionnez l’image à 16 X 16 pixels, et
  • Enregistrez l’image sous favicon.ico

Les services en ligne que vous pouvez utiliser pour créer des favicons incluent (mais sans s’y limiter):

Après avoir créé votre favicon, ils vous laisseront le télécharger sur votre ordinateur, alors ne vous inquiétez pas.

Comment installer votre Favicon dans WordPress

S’il existe un autre favicon dans le dossier principal de votre thème, vous devrez le supprimer à l’aide de votre client FTP ou de toute méthode à votre disposition. Les clients FTP sont recommandés car ils sont faciles à utiliser et vous pouvez trouver rapidement le fichier que vous recherchez.

Pour ce tutoriel, j’ai utilisé faviconer.com pour créer un favicon pour mon blog et Filezilla pour supprimer les favicons existants.

Avec le fichier favicon.ico en main, téléchargez-le dans le dossier principal de votre thème. Il s’agit du dossier dans lequel votre thème actuel est stocké.

Téléchargez ensuite une autre copie de votre favicon dans le dossier racine (généralement public_html) ou dans le répertoire principal où votre site est stocké, afin que vous puissiez voir votre favicon lorsque vous tapez yoursite.com/favicon.ico. Cela ajoutera automatiquement votre favicon à vos flux.

Lorsque vous avez terminé le téléchargement, il est temps de faire fonctionner votre favicon.ico. Voici ce que vous devez faire:

Ajout de votre Favicon à l’aide d’un plugin

La meilleure façon d’ajouter votre favicon est d’utiliser un plugin. Je recommanderais d’utiliser le “Tout en un Favicon“Plugin pour une utilisation plus avancée pour une approche très simple que vous pouvez utiliser”Le Favicon le plus simple“Plugin qui n’a pas d’options de back-end, il vous suffit de télécharger un fichier appelé favicon.ico au bon endroit sur votre serveur.

favicon tout-en-un

Ajout du favicon manuellement à votre modèle

Certaines personnes pourraient préférer (même si ce n’est pas le meilleur moyen) d’ajouter leurs favicons manuellement à leur modèle, pour ce faire, procédez comme suit:

  • Connectez-vous à votre Tableau de bord
  • Aller vers Apparence
  • Ensuite pour Éditeur (Éditeur de thème)
  • Rechercher et ouvrir header.php (en-tête) fichier

Ajoutez cette ligne à votre fichier d’en-tête (de préférence en haut où vous voyez d’autres Mots clés:

Enregistrer une fois terminé. 

Actualisez votre navigateur pour voir vos nouvelles modifications.

À ce stade, vous devriez pouvoir changer vos couleurs, choisir de meilleures polices, formater les dates et l’heure, utiliser des images et ajouter un favicon.

Conclusion

Il y a tellement de choses à discuter sur la refonte de votre site WordPress que ce serait un mauvais service (pour vous) d’essayer de tout couvrir dans un seul article.

Pour vous bénéficier le plus, il est préférable de diviser le tutoriel en plusieurs parties (c’est la partie 1). Nous partagerons d’autres astuces de refonte au fil des jours, alors soyez à l’affût. Le but de ces tutoriels est de vous aider à créer le meilleur site WordPress de tous les temps et à vous laisser plus heureux car vous l’avez fait tout seul.

Si vous souhaitez partager votre opinion ou ajouter quelque chose à la discussion, n’hésitez pas à laisser votre commentaire dans la section commentaire ci-dessous!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me