Cet article a été contribué par PSDtoWP.net

Peut-être serait-il préférable de commencer ici par le pourquoi. Environ un quart de tous les sites Web fonctionnent sur WordPress, la plate-forme de blogs en ligne. Cela en fait de loin l’un des systèmes de gestion de contenu open source les plus populaires de la planète.

La grande majorité des concepteurs de sites Web utilisent encore Photoshop pour concevoir un site Web, bien qu’il existe des alternatives. Cela signifie que de nombreux concepteurs de sites Web doivent trouver des moyens de convertir des fichiers PSD en un thème WordPress réactif!

Maintenant, cela peut sembler assez simple. Cependant, la conversion d’un fichier PSD en un site Web WordPress n’est pas vraiment facile. Cela nécessite beaucoup plus que de simples compétences Photoshop! Afin de transformer votre fichier PSD en un thème réactif pouvant être utilisé sur WordPress, vous aurez besoin de connaissances sur les langages de développement Web frontaux tels que HTML, CSS et JavaScript, ainsi que sur le langage de programmation backend PHP.

Maintenant que le pourquoi est hors de portée, il est temps de passer au comment! Bien que le comment ne soit certainement pas facile, il peut encore être accompli en cinq étapes assez simples à comprendre!

Première étape: Créez la conception Web

Passez à la deuxième étape si vous avez déjà conçu votre site.

Créer un site Web ne se limite pas à créer un logo et à intégrer un menu, une barre latérale, un pied de page et le contenu ensemble. Les pièces de ce puzzle doivent être créées en premier lieu, et le processus de cette création est quelque chose que tout le monde ne peut pas faire aussi facilement.

La conception Web que vous créez doit être l’équilibre parfait entre la forme et la fonction, une conception Web qui offre une excellente expérience utilisateur.

Recherche

Afin de créer un design Web qui répond avec succès aux critères d’apparence et de fonctionnalité, vous devrez faire des recherches sérieuses. Tout d’abord, qui est votre public cible et que veut votre public cible? Ce sont évidemment des aspects clés de votre recherche.

Apprenez des autres

Un autre aspect de la conception Web que vous devez rechercher est les techniques appliquées par vos concurrents. Ces concurrents sont probablement mieux établis que vous, vous pourrez donc certainement apprendre beaucoup de la conception qu’ils utilisent! Une fois que vous avez fait vos recherches et que vous avez une bonne idée de l’apparence de votre site Web, vous devriez commencer à penser à la fonctionnalité. Quelles fonctions voulez-vous que votre conception Web possède?

Wireframe

Une fois que vous avez tout réglé, mettez-le sur papier. Dessinez & esquissez ce à quoi vous envisagez de ressembler pour avoir une aide visuelle au fur et à mesure que vous avancez!

Design

Une fois que vous avez fini de faire les croquis physiques / wireframes, vous êtes prêt à sauter dans le fauteuil du capitaine et à lancer Photoshop. La première chose que vous devez faire avant de commencer sérieusement est de vous assurer que vous utilisez une grille basée sur des colonnes telle que XXgrid. Cela rendra votre design vraiment bien rangé et aligné! Ce n’est pas seulement pour l’esthétique. L’utilisation d’une grille basée sur des colonnes pour créer un design aligné facilitera la tâche pour vous ou votre développeur frontal qui développera le HTML et le CSS pour créer une mise en page optimisée et réactive pour les tablettes et les smartphones!

Avant de passer à l’étape suivante, n’oubliez pas que vous devez organiser vos fichiers de conception PSD en couches, c’est-à-dire que chaque section doit avoir son propre dossier avec les titres correspondants!

Deuxième étape: Trancher le PSD

Une fois que vous avez créé un design Web dont vous êtes entièrement satisfait, c’est le moment de la crise. Fondamentalement, ce que vous devez faire maintenant, c’est le processus PSD vers WordPress.

Les sites Web de nos jours sont tous construits en HTML5 et CSS3. Ceux-ci sont bien meilleurs que XHTML et CSS2, car au lieu de tous les boutons, bordures, dégradés, bords arrondis et toutes les autres fonctionnalités créées à l’aide d’images, ils sont créés en tant que parties fonctionnelles du codage CSS3. Par conséquent, le découpage du fichier PSD impliquera essentiellement maintenant uniquement le découpage des images d’arrière-plan du PSD!

Pour ce faire, vous devrez ouvrir le fichier dans Photoshop ou Illustrator, selon le logiciel que vous avez utilisé pour créer le design. Si le concepteur avait bien fait son travail, il aurait créé un fichier de conception bien structuré avec des dossiers et des calques, ce qui vous permettrait de trouver facilement ce dont vous avez besoin. Étudiez la conception Web et recherchez des images qui, selon vous, auraient besoin d’être découpées. Ce sont essentiellement des images qui ne peuvent pas être créées à l’aide de CSS3, généralement le logo et les images d’arrière-plan. Lisez comment découper des images ici.

Une fois que vous remplacerez ces images d’arrière-plan à l’aide de CSS, vous verrez une énorme baisse des temps de chargement. Cela attirerait beaucoup d’utilisateurs sur votre site, car l’internaute moyen ne supporte pas de longs temps de chargement!

Troisième étape: Créez les HTML, CSS3 et JavaScript (jQuery)

Une fois que vous avez découpé les images de votre fichier PSD, il est temps de créer les HTML5 et CSS3. La première chose à faire est de créer un nouveau dossier dans lequel vous créez un index.html et style.CSS. Créez également un sous-dossier appelé images ou img (selon votre préférence) et placez les images que vous avez extraites dans ce dossier. Créez un autre dossier appelé JavaScript ou js. C’est pour plus tard, vous pouvez donc stocker tous les fichiers JavaScript et jQuery dans un emplacement bien marqué. Une fois que vous avez terminé de créer tous les dossiers, fichiers et sous-dossiers, il est temps de commencer à créer les HTML5 et CSS3.

HTML5

HTML5 est un langage relativement nouveau qui possède à la fois des fonctionnalités XHTML et HTML. Ce langage est essentiellement utilisé pour créer la structure de base du document, ainsi que pour nommer tous les éléments de la page. HTML5 a des éléments distincts pour les différentes sections de votre site Web, tels que l’en-tête < >, la navigation < >, la mise à part < >, ainsi que les éléments < footer > (et bien plus encore), qui vous permettent de créer un document soigné, bien structuré et universellement lisible. Voici quelques excellentes ressources que vous pouvez utiliser pour apprendre ou rafraîchir votre mémoire sur HTML5.

Ressources HTML

W3Schools est le premier site Web pour apprendre les bases du HTML5. Chaque élément et attribut de cette langue est expliqué et enseigné à l’aide de démos, ce qui en fait une expérience d’apprentissage facile.

Section des développeurs de Mozilla – Les personnes derrière le navigateur populaire Mozilla Firefox ont une section des développeurs sur leur site Web. Vous pouvez utiliser cette section pour en apprendre beaucoup sur HTML5 grâce aux tutoriels qu’ils ont là-bas, que vous soyez un débutant ou un codeur avancé.

Tuts de conception Web – Ce site Web contient de nombreux tutoriels HTML5 différents, dont certains sont gratuits et certains payants.

W3 – Ce site web est responsable du développement de tous les standards du web ouvert qui ont été créés afin d’assurer la longévité du web. Vous trouverez ici des informations détaillées sur HTML5 ainsi que tous ses derniers développements.

Validateur W3 – Une fois que vous avez terminé votre HTML5, passez-le par ce validateur. Il vous dira si votre HTML5 répond aux standards w3 open web !

CSS3

CSS fait référence aux feuilles de style en cascade, et CSS3 est la dernière version de ce langage frontal. CSS3 est utilisé pour prendre les os nus des éléments créés à l’aide de HTML5 et les façonner, les positionner et les styliser. Cela vous permet de créer une conception Web cohérente dans laquelle tous les éléments se confirment avec la conception globale du site. Une fois que vous aurez utilisé CSS3, vous constaterez que votre HTML5 sera beaucoup plus propre et bien structuré, ce qui lui permettra de se charger beaucoup plus rapidement et d’être indexé plus rapidement par les moteurs de recherche. Voici quelques ressources pour vous aider à apprendre ou à rafraîchir votre mémoire sur CSS3:

Ressources CSS

W3 CSS-W3 est sur les ressources les plus connues et les plus renommées pour les tutoriels CSS3 et des exemples des différents sélecteurs, propriétés et valeurs CSS3. La meilleure partie à ce sujet est que chaque tutoriel a une page « essayez-le vous-même », qui vous permet d’appliquer ce que vous avez appris.

Apprendre CSS3 – Mozilla n’est pas seulement le créateur du navigateur Firefox. C’est également un excellent endroit pour vous familiariser avec CSS3, ainsi que pour mettre à jour vos connaissances concernant la langue.

Tuts de conception Web CSS – Ce site Web contient toute une abondance de tutoriels que vous pouvez parcourir. Certains de ces tutoriels doivent être payés, mais d’autres sont encore entièrement gratuits et peuvent vous en apprendre beaucoup sur les sélecteurs, les propriétés et les valeurs CSS3.

W3 CSS – Ce site Web est un endroit idéal pour rester à jour avec les dernières nouvelles de CSS3, car c’est la communauté même qui développe les normes Web CSS3. C’est aussi un endroit idéal pour trouver des informations techniques sur la langue.

Validateur CSS – C’est le validateur par lequel vous devez exécuter tous vos CSS3 avant de rendre le site Web public. Ceci afin de vous assurer que votre CSS3 répond aux normes web définies par W3!

Responsive Design

Internet a parcouru un long chemin depuis sa création. Cela est dû en partie à l’avènement des smartphones et des tablettes, et à la prolifération de ces types de technologies dans notre vie quotidienne. En raison de l’immense popularité de ces appareils, une partie importante du nombre total d’utilisateurs d’Internet consulte des sites Web sur des écrans nettement plus petits que l’ordinateur portable moyen. De plus, ils interagissent avec ces sites Web non pas en utilisant des curseurs, mais en utilisant leurs doigts. Par conséquent, le site Web moderne doit pouvoir s’adapter aux différents types d’appareils qui existent. C’est là qu’intervient le responsive design. En utilisant le responsive design, les concepteurs sont en mesure de créer un site Web qui peut ajuster toute sa mise en page en fonction du type d’appareil sur lequel il est consulté.

C’est une bonne idée de décider à l’avance si vous souhaitez que votre nouveau site Web comporte un design réactif ou non avant de commencer à construire le HTML5 et le CSS3. En effet, lorsque vous codez la partie réactive de la conception de votre site Web, vous devrez travailler avec des requêtes multimédias CSS3. À l’aide de ces requêtes multimédia, vous pouvez définir différentes textures et styles pour différentes résolutions d’écran.

N’oubliez pas de ne jamais utiliser de largeurs fixes, utilisez plutôt des pourcentages. Ceci est appelé conception de mise en page fluide ou liquide, ce qui vous permet d’optimiser votre site Web non seulement pour les résolutions définies dans vos requêtes multimédias, mais également pour toutes les résolutions entre elles. C’est un énorme avantage pour votre site Web car les smartphones, tablettes et ordinateurs qui sortent aujourd’hui ont tellement de tailles différentes, et donc de résolutions, et vous devez tous les accueillir.

Ressources réactives

Voici quelques excellentes ressources que vous pouvez utiliser pour rafraîchir votre mémoire ou en apprendre davantage sur la conception réactive et tout le codage associé:

Google Responsive – C’est une excellente ressource pour ceux d’entre vous qui débutent dans la conception réactive à l’aide de requêtes multimédias CSS3.

Principes de conception Web réactive – Lisez cet article pour comprendre la différence entre la conception Web réactive et la conception Web adaptative. Il a quelques excellents exemples pour vous aider à comprendre les choses en détail!

Grilles fluides – Vous pouvez utiliser cet excellent article d’Ethan Marcotte pour en savoir plus sur les grilles fluides et comment les utiliser. Essayez d’utiliser vous-même les exemples fournis dans l’article!

Framework frontal réactif

Si vous ne souhaitez pas apprendre les ficelles du métier en ce qui concerne les requêtes multimédia CSS3, ou peut-être que vous n’avez tout simplement pas assez de temps pour cela, essayez plutôt d’utiliser un framework frontal réactif. Si vous décidez d’utiliser un framework de grille, gardez à l’esprit que vous devez appliquer le même framework au CSS ainsi qu’au HTML, car vous travaillerez avec des classes et des ID prédéfinis pour connecter le framework créé à l’aide de HTML5 à CSS3. L’utilisation d’un framework frontal réactif vous permettra certainement de développer votre site Web beaucoup plus rapidement, mais à la baisse, cela ralentira également les temps de chargement de votre site Web en raison de la grande quantité de code que vous n’utiliserez pas.

Certains des frameworks frontaux les plus populaires sont:

Bootstrap – Ce framework réactif est assez facile à implémenter, et un bonus supplémentaire est qu’il utilise un CDN pour réduire également l’impact des vitesses de chargement de votre site Web.

MOINS – Il s’agit d’un framework de grille CSS adaptatif plutôt que d’un framework réactif qui vous permet de créer une mise en page adaptative.

Foundation – Il s’agit d’un framework de grille frontale avec une taille de fichier absolument minuscule afin de minimiser l’impact que cela aura sur la vitesse de chargement de votre site Web.

JavaScript (vs CSS3)

JavaScript est actuellement l’un des langages de programmation les plus populaires au monde. Cela est dû au fait qu’il est pris en charge par un large éventail de navigateurs et également au fait qu’il contient des bibliothèques telles que jQuery et des systèmes d’arrière-plan tels que Node.js ainsi que des frameworks comme AngularJS. Il n’est pas étonnant que tant de développeurs ne jurent que par ce langage de programmation ! Cependant, ces derniers temps, JavaScript a commencé à devenir obsolète, car beaucoup de ses fonctions ont commencé à être reprises par des animations CSS3, qui vous permettent d’animer des transitions entre les styles.

Ressources Javascript

W3 – C’est un excellent point de départ si vous débutez en JavaScript, grâce à l’excellent tutoriel disponible sur ce site Web.

jQuery – Une fois que vous avez une certaine expérience avec JavaScript, vous pouvez commencer à utiliser des bibliothèques comme celle-ci afin de programmer beaucoup plus facilement. jQuery est la bibliothèque JavaScript la plus populaire d’un kilomètre.

NodeJS – Si vous préférez les systèmes backend mais que vous aimez en même temps JavaScript, consultez ce site Web.

AngularJS – Combinez les forces redoutables du HTML et de Java en utilisant ce framework et obtenez des vues dynamiques.

Assurez–vous de consulter les ressources suivantes avant de commencer à utiliser JavaScript pour animer des éléments sur votre site Web, alors que vous pouvez probablement également utiliser CSS3:

Animations CSS3 – Une fois de plus, nous nous tournons vers w3schools pour nos tutoriels CSS3. Parcourez les démos disponibles sur ce site afin de comprendre toutes les différentes animations CSS3.

Animations Mozilla – Approfondissez vos connaissances des animations CSS3 avec les neuf échantillons et exemples fournis par Mozilla.

Quatrième étape: Créez les fichiers de thème WordPress

Maintenant que vous avez réussi à convertir vos conceptions PSD en HTML5, CSS3 et JavaScript, il est temps de passer à la conversion majeure: transformer votre HTML en un thème WordPress entièrement réactif. N’oubliez pas de suivre la hiérarchie des modèles WordPress afin de vous assurer que vos thèmes fonctionneront réellement. L’ordre général est de commencer par l’en-tête.php, suivi d’index.php, pied de page.php et style.CSS. Vous utiliserez ces quatre modèles sur toutes les pages de votre site Web.

Une fois que vous avez bien compris le fonctionnement de la hiérarchie des modèles, vous devez commencer à diviser les fichiers HTML en morceaux. Vous pouvez commencer par créer un dossier dans le dossier thèmes que vous pouvez trouver dans votre installation WordPress, dont l’adresse est /wp-content/themes/. Créez l’en-tête du fichier.php dans ce dossier. Ce fichier est ce que vous utiliserez pour déclarer le type de document ainsi que tous les éléments qui appartiennent à l’en-tête de votre page, tels que les métas, le titre, les feuilles de style, les javascripts, etc. Une fois que vous avez terminé, créez un pied de page.php et collez tous les éléments du pied de page dans votre document HTML. Si la conception de votre site Web comprend une barre latérale, créez un fichier nommé barre latérale.php aussi et inclut tout le codage pertinent dans ce fichier.

Une fois que vous avez terminé la création de tous les éléments de votre site Web dans ces fichiers, vous devez commencer à créer votre page d’accueil. Il y a plusieurs façons de le faire. Par exemple, vous pouvez simplement créer un index.php, page d’accueil.php ou page d’accueil.php, l’un de ces fichiers conviendra à ce que vous essayez de faire, le choix final vous appartient entièrement. Maintenant que vous avez terminé de créer un des trois modèles pour votre page d’accueil, incluez tous les.fichiers php que vous venez de créer. Maintenant que vous avez le haut, le bas et le côté prêts, collez le HTML5 de votre page d’accueil entre les deux et vous aurez réussi à créer la page d’accueil de votre site Web. Suivez simplement le même processus pour toutes les pages de votre site Web et vous pouvez passer à l’étape suivante et finale.

Cinquième étape: Utilisez les balises et fonctions intégrées WordPress

Une fois que vous avez créé avec succès le thème pour votre WordPress, vous devez maintenant vous assurer que vous pouvez modifier votre site Web à partir du panneau d’administration plutôt que d’avoir à modifier le fichier de thème chaque fois que vous souhaitez changer quelque chose. Peut-être que les fonctions WordPress les plus populaires pour rendre tout votre contenu modifiable via le panneau d’administration sont en ajoutant la fonction add_meta_box. Configurez simplement des méta-boîtes pour le contenu de chaque page et vous êtes prêt à partir!

Créer les fonctionnalités de base de votre site Web est assez facile en utilisant WordPress. Par exemple, l’affichage d’informations telles que des liens sur vos sites Web peut se faire facilement à l’aide des fonctions WordPress. Il suffit de vérifier la page de référence des fonctions pour WordPress pour voir toutes les fonctions disponibles.

De même, WordPress propose également des balises de modèle. Ce sont essentiellement des fonctions elles-mêmes, à la seule différence qu’elles ont été créées spécifiquement pour des thèmes spécifiques qui les rendent plus efficaces.

Menu WordPress

Lorsque vous vous connectez au panneau d’administration de votre site Web, vous voudrez probablement modifier les éléments de menu dans les Menus et l’apparence afin de ne pas avoir à les modifier à l’aide du panneau d’administration. C’est assez facile grâce au fait que vous utilisez WordPress, il vous suffit de remplacer la liste de menus du fichier modèle par une ligne de PHP, après quoi vous pouvez simplement commencer à ajouter des éléments de menu.

Il peut y avoir des situations dans lesquelles une page interne a un en-tête ou un pied de page différent. Pour ajouter cette fonctionnalité à votre site Web, il vous suffit d’ajouter des balises conditionnelles. Ceux-ci vous permettent d’appliquer un code différent pour les pages ou les publications sélectionnées.

Une fois que votre site Web WordPress est opérationnel sur votre serveur de développement, il vous suffit de l’obtenir sur votre serveur en direct. Voici un article où il est expliqué en détail comment vous déplacez un site WordPress, étape par étape. Suivez simplement les six étapes fournies et votre site Web sera opérationnel sur un serveur en direct en un rien de temps.