Le parcours de chacun pour devenir développeur Web est un peu différent. Pour moi, comme pour beaucoup de gens, j'ai commencé comme designer. WordPress facilite la mise en place et le fonctionnement d'un site fantastique sans connaître aucun code. En tant que concepteur, vous pouvez modifier les thèmes, ajuster les paramètres, ajouter des plugins et faire beaucoup pour contrôler l'apparence du site. Mais en fin de compte, de nombreux concepteurs veulent aller plus loin et dicter pixel par pixel à quoi ressemble le site.

Il existe deux façons d'y parvenir : engager un développeur pour mettre en œuvre votre conception ou acquérir vous-même des compétences en développement. Même si vous embauchez un développeur, il y aura des moments où savoir faire du développement sera un grand atout. De plus, lorsque vous pouvez gérer les besoins de développement de vos clients, vous devenez encore plus précieux pour eux et pouvez augmenter votre taux en conséquence.

Passer de concepteur à développeur est une entreprise de grande envergure. Je vais suggérer quelques étapes simples à suivre pour que vous puissiez commencer à passer de quelqu'un qui crée les conceptions du site à quelqu'un qui peut également créer et mettre en œuvre ces conceptions.

Bonne nouvelle, vous êtes au bon endroit

Il y a de fortes chances que si vous lisez ici The Layout, vous êtes au moins un peu familier avec WordPress. WordPress ouvre la porte à quelqu'un pour passer du concepteur au développeur mieux que toute autre plate-forme sur le Web. L'un des moyens d'y parvenir est l'éditeur, qui se trouve dans le tableau de bord WordPress sous Apparence> Éditeur.

Vous pouvez afficher tout le code du thème directement dans le tableau de bord WordPress sans aucun outil spécial ni accès au serveur. Il fournit également des fonctionnalités pour modifier le code, cependant, je ne suggérerais pas de le faire ici (nous parlerons de meilleures façons de le faire plus tard). C'est un endroit idéal pour jeter un coup d'œil et voir ce qui se passe. Alors allez-y et regardez sous le capot de votre thème et voyez si vous pouvez commencer à donner un sens à ce qui s'y trouve.

Vous verrez généralement trois types de fichiers différents ici. Pour simplifier les choses, considérez ces fichiers comme le « corps » de votre site Web. Les fichiers PHP (.php) contiennent HTML (les os) et PHP (les nerfs qui relient tout au cerveau, la base de données). Les feuilles de style (.css) sont la peau de votre site, déterminant à quoi il ressemble. JavaScript (.js) peut être considéré comme les muscles du site, contrôlant généralement les parties mobiles et réagissant et répondant à la façon dont le site est utilisé et interagit avec. Allez-y et explorez un peu. Voyez-vous des mots descriptifs qui indiquent à quelle section du site le code est destiné ? Ou des mots qui décrivent certains des aspects visuels du site ?

L'autre excellent moyen pour WordPress de combler le fossé entre le concepteur et le développeur est qu'il divise les choses en morceaux, ce qui vous permet d'identifier facilement la section que vous souhaitez modifier et d'apporter des modifications à une seule partie du site. WordPress sépare le contenu des modèles des fonctions du site Web. Il utilise également une structure cohérente entre les fichiers, de sorte que vous pouvez passer d'un site à l'autre tout en trouvant facilement les fichiers que vous souhaitez modifier.

N'ayez pas peur

L'une des phrases que j'utilise le plus souvent lorsque je forme d'autres personnes est : "n'ayez pas peur, vous ne pouvez pas tout gâcher d'une manière que je ne peux pas réparer". Il y a très peu de choses dans le monde qui ne peuvent être défaites. Bien sûr, vous voudrez profiter des outils qui vous permettront d'annuler facilement si vos modifications ne se déroulent pas comme prévu. Deux excellents outils fournis par Flywheel sont leur fonctionnalité de mise en scène et leur capacité à effectuer facilement une sauvegarde et une restauration à partir de celle-ci. Lorsque vous décidez de sauter dans le code, utilisez un site de développement pour apporter des modifications. De cette façon, vous ne risquez pas votre site en ligne et vous pouvez facilement réinitialiser votre environnement de staging si nécessaire. Si vous faites par inadvertance une modification sur votre site en ligne, pas de panique, restaurez simplement votre dernière sauvegarde et en moins de cinq minutes, vous êtes de retour sur la bonne voie. Ces outils devraient vous donner confiance pour commencer à faire quelques petits pas dans l'édition de code !

Conseil de pro : une fois que vous serez un peu plus à l'aise avec le code, je vous encourage à explorer le contrôle de version, Git ou SVN, en tant que troisième couche de sécurité et en première ligne pour suivre les modifications et détecter les problèmes avant la mise en ligne de votre code.

Où commencer?

Maintenant que nous avons abordé certains des obstacles mentaux initiaux, par où commencer ? Si vous êtes un designer, alors l'endroit le plus naturel pour commencer à travailler avec du code serait CSS. Comme nous l'avons mentionné précédemment, c'est la peau de notre site ; il contrôle l'apparence du site et sa présentation. Avant de pouvoir disséquer CSS, nous devons comprendre comment cela fonctionne avec HTML. HTML a une variété de balises pour différencier le contenu à l'intérieur. Ces balises peuvent avoir de nombreux attributs différents, qui fournissent des informations supplémentaires sur la balise et son contenu. Les deux attributs que nous allons examiner sont id et class . Voici un extrait de code avec trois balises HTML différentes. Vous remarquerez que toutes les balises n'ont pas un identifiant ou une classe. Ils ne sont pas obligatoires, mais ils permettent de différencier les balises d'une même page les unes des autres. Les identifiants ne doivent être utilisés qu'une seule fois sur une page, tandis que les classes peuvent être répétées et utilisées plusieurs fois.

<article id="post-1" class="inset">
	<p class="highlight">Hello, <span>world!</span></p>
</article>

Nous avons donc les balises <article> , <p> et <span> . L'article a un identifiant post-1 et une classe d'encart. La balise p a une classe de surbrillance et la balise span n'a pas d'identifiant ou de classe.

Le CSS pour aller avec le HTML ci-dessus pourrait ressembler à ceci :

/* This is a comment, it doesn't affect the code. We can use it to make notes or write instructions */
article { /* These styles will apply to every <article> tag on the page */

background: #eaeaea;  /* This makes the background gray using a HEX color code */

padding: 20px; /* give the article 20 pixels of space around the inside */

margin: 10px; /* give the article 10 pixels of space around the outside */

}

#post-1 { /* These styles will apply to only the tag with id of post-1 */

border: 1px solid green; /* green solid line around the container */

}

.highlight { /* These styles will apply to anything with a class of highlight */

background: yellow; /* give this text a yellow background */

}

span { /* These styles will apply to every <span> tag on the page */

font-weight: bold; /* bold this text */

text-transform: uppercase; /* make this text ALL CAPS */

}

Pour en savoir plus sur CSS et son fonctionnement, il existe de nombreuses ressources fantastiques. Quelques bons endroits pour commencer sont A List Apart Books, codeschool.coma, codecademy.com, lynda.com, css-tricks.com et wpbeginner.com. Chacune de ces ressources est un peu différente ; certains offrent une approche générale, apprennent les bases, et d'autres se concentrent sur des cas d'utilisation et donneront des extraits de code spécifiques ou des didacticiels sur une tâche spécifique. Tout le monde apprend de différentes manières, alors trouvez ce qui vous convient.

Regardez le code "In the Wild"

Nous avons parlé plus tôt d'une façon de "jeter un coup d'œil sous le capot", mais une autre consiste à utiliser les outils de développement intégrés à votre navigateur. La plupart des navigateurs vous permettent d'explorer le code d'une page Web. Allez-y et faites un clic droit ou ctrl cliquez sur ce texte, et sélectionnez "Inspecter" ou "Inspecter l'élément". Une fenêtre apparaîtra qui devrait vous montrer la balise HTML et le CSS correspondant. Vous pouvez même modifier les propriétés et voir à quoi elles ressemblent une fois modifiées.

Google est ton ami

En cas de doute, Google ! Sérieusement, il y a tellement de gens qui écrivent sur le code, il y a de fortes chances que quelqu'un ait écrit sur ce que vous essayez de faire. Alors Google et voyez ce que vous trouvez. Il peut même y avoir plusieurs façons d'accomplir ce que vous recherchez, et vous pouvez trouver la meilleure façon en fonction de votre propre style et de votre situation.

Le mettre en pratique

Vous n'avez pas besoin de créer un thème à partir de zéro pour utiliser certaines de ces nouvelles compétences de développeur trouvées. Je vous encourage à commencer petit. Essayez d'apporter quelques modifications à un thème existant, comme changer certaines couleurs ou utiliser une police différente. Comme je l'ai déjà noté, il existe de meilleures façons de modifier le code d'un thème que d'utiliser l'éditeur. Les thèmes proposent des mises à jour, et si vous avez modifié les fichiers de thème directement, une mise à jour de thème remplacera vos modifications. L'un des moyens les plus simples d'ajouter du code personnalisé à un thème existant consiste à utiliser un plugin. Et le plugin parfait pour CSS est Simple Custom CSS de John Regan et Danny van Kooten. Cela vous permet d'ajouter une partie de votre propre CSS à votre site sans gâcher les fichiers de thème, et est idéal pour apporter de petites modifications visuelles à votre site WordPress.

Formalisez votre workflow

Une fois que vous serez plus à l'aise avec des extraits de code plus petits via le tableau de bord, vous souhaiterez un flux de travail plus formel pour vos tâches de développement. Les flux de travail des développeurs peuvent aller de très simples à extrêmement complexes. Il y a de bonnes raisons pour certains flux de travail plus complexes, mais nous allons commencer par les bases. Les deux choses que vous devez avoir si vous voulez éditer du code en dehors du tableau de bord sont un éditeur de code et un programme FTP, qui vous permettra de mettre et d'obtenir des fichiers depuis votre serveur. Elegant Themes a un excellent article comparant les éditeurs de code. C'est une excellente ressource lorsque vous essayez de déterminer quel éditeur vous convient. Certains éditeurs de code ont un FTP intégré, mais il existe également de nombreuses options gratuites ou peu coûteuses.

Conseil de pro : un autre excellent outil pour le flux de travail d'un développeur WordPress est DesktopServer de ServerPress. Cela vous permet de configurer et de créer un site WordPress sur votre ordinateur localement en quelques clics.

Essayez de créer un thème enfant

Maintenant que vous disposez d'un environnement d'édition plus formel, essayez de créer un thème enfant. Il s'agit d'un thème personnalisé basé sur un autre thème. Les deux thèmes doivent être installés sur votre site pour que cela fonctionne, et le thème enfant doit être celui qui est activé. Les deux choses requises pour un thème enfant sont les fichiers style.css et functions.php . Le framework Genesis exploite extrêmement bien cette fonctionnalité et est un excellent endroit pour se lancer et commencer à développer certaines de vos compétences en développement. Carrie Dils a suivi plusieurs cours sur lynda.com sur l'utilisation de thèmes enfants avec Genesis. C'est une étape fantastique dans votre parcours de concepteur à développeur.

Ne vous découragez pas

Il est naturel que lorsque vous vous lancez dans l'apprentissage du code, vous vous découragez à un moment donné, mais ne le soyez pas. Tout le monde a été là. Même les développeurs expérimentés ont des jours où ils ont l'impression de ne rien savoir. Certaines des meilleures façons de surmonter ces obstacles sont de rester en contact avec les autres au cours de votre même voyage. Twitter, Slack et la participation aux forums WordPress.org sont d'excellents moyens de rester connecté. Suivez certains blogs comme Layout, et vous pourrez cultiver des relations et apprendre en cours de route. Certaines de mes personnes préférées à suivre qui m'ont aidé dans mon parcours de développement sont Carrie Dils, Tom McFarlin et John Regan.

Où dois-je aller d'ici ?

Une fois que vous sentez que vous maîtrisez bien HTML et CSS, la prochaine étape logique est JavaScript, ou vous pouvez aller plus loin et creuser dans le WordPress Codex pour apprendre à extraire des éléments de contenu WordPress dans votre code. Bon codage !