8 choses que j'ai apprises Construire un site WordPress sans code • WPShout

Il y a environ un mois, j'ai lu un titre dans le bulletin Post Status de Brian Krogsgard, intitulé «Let No-Code This Thing and All Go Home». Cet article est lié à un article:

Les outils permettant de créer des produits complexes à code complet sans code atteignent un point d'inflexion cette année. Ils vont rapidement transformer la manière dont les produits sont construits et déterminer qui doit les construire – et ouvrir les portes à une nouvelle vague de créateurs de produits plus diversifiée sur le Web.

Le tout, et en particulier la phrase «No-Code» en lui-même, m'a vraiment enthousiasmé. Cela m'a donné envie de construire un site WordPress avec absolument aucun code et de voir comment cela s'est passé. C’est ce que j’ai fait, et le présent article traite des leçons tirées du processus.

Notes sur le projet avant de commencer

Que signifie «WordPress sans code»?

Aucune partie du processus de développement ne nécessite la lecture ou l'écriture de PHP, HTML, CSS, JavaScript ou tout autre langage technique.

Qu'est-ce que cela signifie de ne pas coder un site WordPress? (Tout peut être un verbe si vous le souhaitez assez fort.) Cela ne veut certainement pas dire que le site WordPress lui-même n’a pas de code: WordPress est composé de code, et en particulier de PHP, comme une voiture est composée de pièces.

Cela signifie qu'aucune partie du processus de développement ne nécessite de comprendre comment lire et écrire les quatre langages techniques de WordPress (PHP, HTML, CSS, JavaScript) ou tout autre langage de programmation.

C’est aussi un lancement informel pour WP No Code lui-même, car j’ai apprécié l’expérience et j’aimerais continuer à développer à la fois mes propres connaissances et ma capacité à enseigner de bonnes pratiques sans code aux assembleurs WordPress.

Le site que j'ai construit: WP No Code

Je voulais construire un site qui pourrait être là au cas où je serais enthousiaste à l'idée d'apprendre, et en particulier d'enseigner, une approche sans code de l'assemblage WordPress. Joliment, le domaine wpnocode.com était disponible, nous l’avons donc choisi, et c’est le site que j’ai construit. Vérifiez-le! Et voici une capture d'écran de la page d'accueil si vous ne vous sentez pas cliqué:

Voulez-vous savoir comment je l'ai fait? J'ai enregistré tout le processus. Littéralement l'ensemble du processus, dans cette liste de lecture YouTube qui est toujours en cours de téléchargement et qui comportera éventuellement 12 vidéos couvrant environ 8 heures de développement:

Je peux recommander cette liste de lecture en toute confiance si vous voulez comprendre le principe assemblée de l'assemblage WordPress sans code comme je l'ai fait ici, et je peux le recommander avec une extrême assurance si vous souhaitez regarder huit heures sans que je sois confus. (J'ai beaucoup de séries vidéo plus strictes sans code prévues pour l'avenir, alors restez à l'écoute.)

Et maintenant, sur mes conclusions du projet.

1. Les outils sans code pour WordPress se sont beaucoup améliorés récemment

Je suis dans WordPress professionnellement depuis environ huit ans. À mes débuts, il y a deux ou trois ans à peine, «construire un site WordPress sans code» était un mensonge que des sociétés spécialisées dans le thème (ou des détaillants qui bâtissent des pages) vous disaient: ils savaient que c'était ce que vous vouliez et que vous ne comprendriez pas les compromis cauchemardesques jusqu'à ce qu'ils deviennent un problème de développeur quelques mois de frustration plus tard.

Il y a quelques années à peine, «construire un site WordPress sans code» était un mensonge que les concepteurs de thèmes vous ont dit, car ils savaient que les terribles compromis constitueraient un problème pour les développeurs par la suite. Cliquez pour tweeter

C'était le contexte lorsque, à la mi-2017, j'ai essayé Squarespace. C'était une révélation. Comment la création de site Web peut-elle être aussi simple et intuitive? "C’est vraiment dommage que WordPress n’ait pas une expérience de création de site Web aussi conviviale et sans effets secondaires énormes qui ruinent totalement WordPress en tant que système technique."

Depuis lors, un lot a changé. J'ai récemment refait entièrement mon site Squarespace avec Beaver Builder et le thème Beaver Builder, et le processus était presque totalement indolore, tout comme l'original de Squarespace. J'ai également utilisé du code uniquement pour quelques tâches très difficiles, comme certaines CSS personnalisées pour contrôler les couleurs d'en-tête modifiées. De plus, dans mon expérience Squarespace d'origine, je m'appuyais également sur cette même connaissance CSS.

Dans ce projet, j’ai même abandonné le CSS et je suis très heureux du résultat. La technologie à laquelle je ne pouvais que rêver il y a moins de trois ans est vraiment au rendez-vous, et j'ai vraiment aimé l'utiliser.

2. Pour créer des sites WordPress sans code, vous devez vraiment savoir ce que vous faites.

Maintes et maintes fois dans ce projet, je suis reconnaissant de la construction de sites WordPress depuis plus de dix ans. Je ne voudrais pas essayer tout partie de ce projet pour la première fois, surtout si j'avais un délai ou (Dieu interdit) un client payant qui respire dans mon cou.

Je tenais d’abord et avant tout à remercier pour l’abondance de connaissances permettant de faire les bons choix technologiques:

• Pourquoi SiteGround est le meilleur choix pour héberger un site WordPress qui vient de démarrer et comment utiliser l’interface de SiteGround pour créer rapidement une instance WordPress, placer le site sous SSL, etc.
• Ce qui fait d’Astra un bon choix pour le thème de départ et pourquoi les milliers de thèmes flashy ThemeForest ou Elegant Themes que j’aurais pu choisir ne sont pas.
• Pourquoi Beaver Builder est le meilleur choix en matière de création de page et pourquoi les paramètres par défaut, plus faciles à comprendre, ne le sont pas. (Et pourquoi ne pas utiliser Gutenberg pour la création d'une mise en page sérieuse.)
• Comment trouver de bonnes images de stock sans licence (Unsplash), comment créer rapidement des actifs visuels (Canva) ou une édition de style Photoshop (GIMP), comment vérifier si les modifications DNS se propagent (What's My DNS), etc.
• Comment migrer des sites WordPress avec la migration WP tout-en-un (même une fois que vous avez atteint la limite de taille de téléchargement imposée par le serveur)

Et plein d'autres exemples. Mais tellement de choses se sont réduites à comprendre WordPress lui-même—Pas le code, mais les fondements de ce que les choses sont.

• Pourquoi à propos de est une page et les articles de blog sont des articles.
• Qu'est-ce qu'un type de message personnalisé WordPress, et pourquoi je voudrais en utiliser un pour les démos du site au lieu de les transformer en pages ou en messages (frémissants).
• Que sont les champs personnalisés et les taxonomies personnalisées et pourquoi sont-ils utiles pour transformer les démonstrations en fonctionnalités complètes?
• Pourquoi la page d’accueil du blog a-t-elle un aspect dans la démonstration de thèmes et comment la remettre à l’affichage par défaut du site pour l’index des blogs.
• Ce que fait effectivement Beaver Themer en termes de mappage de champs personnalisés et d’autres données de site sur des publications de types de publication arbitraires, et pourquoi cela correspond à mes besoins.
• Pourquoi mon premier pas en ce qui concerne l'affichage des 404 après la migration consiste à «Enregistrer les modifications» (après n'avoir apporté aucune modification) dans Permalinks, au lieu de paniquer.

Et plein d'autres exemples tout au long du projet. En bref, j’ai le sentiment que le non-codage d’un site Web WordPress aurait été trop rapide si je n’étais pas déjà un professionnel expérimenté de WordPress.

3. «L’expert WordPress qui ne sait pas comment coder» se rapproche de la réalité

Au début, ce projet ressemblait à un Catch-22: où étais-je censé avoir acquis toutes ces connaissances durement acquises, ne pas apprendre à coder?

Puisque j'étais si heureux d'avoir mes connaissances actuelles sur ce projet, WordPress sans codage a d'abord semblé être un peu un Catch-22: où étais-je censé avoir acquis toutes ces connaissances durement acquises, tout en quelque sorte ne pas apprendre à coder?

Mais en y réfléchissant davantage, je pense que si je débutais maintenant, il y a de bonnes chances que je puisse faire une bonne carrière en "sachant beaucoup de choses dans WordPress, mais pas comment coder". Cela semble être la description de travail appropriée. d’un assembleur WordPress, et si cette personne se lance du bon pied, elle peut apprendre sur le tas, sur de vrais projets clients, tout comme je l’ai fait. Nous ne faisons qu’apprendre un ensemble de choses différentes en utilisant différentes technologies.

Il est plus faisable que jamais de faire une bonne carrière en "sachant beaucoup de choses dans #WordPress, mais pas comment coder". Cliquez pour tweeter

Honnêtement, c’est un peu comme si j’avais jamais appris à utiliser des langages «proches du métal» comme C pour me qualifier de programmeur Web et comment certains programmeurs expérimentés trouvaient cela fou. Les outils obligatoires d’aujourd’hui constituent l’architecture sous-jacente de demain que vous n’avez pas toujours besoin de connaître pour les tâches les plus courantes. Il est donc possible qu’elle devienne finalement avec PHP et CSS dans WordPress. Certes, le marché demande beaucoup de ce résultat et c’est pourquoi Beaver Builder et Astra se sont tellement améliorés si rapidement.

Les outils obligatoires d’aujourd’hui constituent l’architecture sous-jacente de demain, et il est donc possible qu’elle devienne #PHP et #CSS dans #WordPress. Cliquez pour tweeter

Bien sûr, vous aurez toujours besoin de beaucoup de personnes qui comprennent ces langues, tout comme vous aurez toujours besoin de beaucoup de gens qui comprennent C. Nouveau créer des nouveaux thèmes plutôt que de personnaliser des thèmes existants, ou quelque chose qui ressemble à développer de nouvelles fonctionnalités grâce à la création de plug-ins, nécessitera des connaissances en matière de codage dans un avenir prévisible, tout comme le travail plus complexe et intéressant même dans les versions de sites Web. Mais pour aider les petites entreprises à répondre à leurs besoins les plus fréquents (page d’accueil attrayante, appels à l’action clairs, quelques pages intérieures, formulaire de contact, section blog, faites-le bien au téléphone…), WordPress sans code est à peu près ici.

4. L'assemblage WordPress sans code a le même rythme de travail qu'un développement WordPress normal

J'appelle le rythme habituel du développement Web «80% fait, 80% reste». Vous pensez que vous avez presque terminé assez tôt dans le projet, car vous avez fait tout ce qui est facile et beau, et vous ' Nous ne sommes pas encore au courant des deux ou trois problèmes à moitié cachés qui vous empêcheront de vous réveiller tard dans la frustration. Puis, à un moment donné, ces problèmes se révèlent, vous faites une énorme quantité de travail, et vous soumettez un projet dépassant de 60% le budget. Semble familier?

Ce n’est pas seulement ma (ou votre) sottise, cela se produit aussi dans les aéroports, c’est un problème très difficile à résoudre. (Un bon conseil pour le gérer, sur des projets avec de vrais clients payants, est de prendre ce que vous pensez être votre estimation la plus prudente, de la doubler et de la citer.)

Quoi qu'il en soit, le fait est que ce rythme est toujours d'actualité dans la création de sites Web WordPress sans code, tout comme dans le développement WordPress basé sur du code. J'ai touché une mise en page géante que je ne comprenais pas presque à la fin du projet et j'ai lutté pour obtenir ce qui semblait être une éternité avec elle – comme si j'aurais rencontré une erreur de versioning PHP loufoque sur un projet normal – et j'ai obsédé sur de petits détails dans Beaver Builder, tout comme je l'aurais obsédé par de petits détails dans Sublime Text. Cependant, le temps a passé vite sur ce projet – je pense que j'ai apprécié le côté avant-gardiste de tout cela.

5. Abandonner le contrôle, c'est bien

Construire le site de cette manière était un exercice de confiance et, encore une fois, parce que j’avais l’impression d’avoir choisi de bons outils, j’avais presque toujours l’impression que cette confiance rapportait. Dans certains cas, je me sentais comme si le produit final était mieux, et plus facile à créer que si j’avais adopté une approche compatible avec le code.

Je l'ai vu surtout du côté de la conception. Je pense que le site WP No Code est plutôt beau (et qu’il paraîtrait mieux avec un contenu plus détaillé), et je n’aurais pas pu le faire en me fiant uniquement à mes propres capacités de conception. Astra est doté d’une fonction de «sites de démarrage» vraiment intéressante si vous y faites confiance et qui intègre un site Web entièrement configuré, avec ses mises en page prédéfinies dans votre choix de bon constructeur de page (ce qui limite vos choix à Beaver Builder et à Elementor). J'en ai vu une qui me plaisait et je l'ai accompagnée. Je n’ai même pas vraiment changé les couleurs ou la typographie – j’ai aimé celles-ci, c’est pourquoi j’ai choisi la démo. Je pense que cet exercice de confiance a vraiment porté ses fruits, à une exception près, j'y reviendrai plus tard.

J'ai passé beaucoup de temps à espérer que mon thème et mes plugins feraient exactement ce qu'ils étaient censés faire – car je ne pourrais pas les réparer sinon.

Plus généralement, j'ai passé beaucoup de temps à espérer que le thème, le constructeur de pages et d'autres plugins fassent exactement ce qu'ils étaient censés faire, jusqu'à la case à cocher et le pixel, car je ne pourrais pas les réparer. si non. Encore, car Je savais quoi choisir, ma confiance était presque toujours récompensée et c'était un sentiment formidable.

6. Céder le contrôle est mauvais

À environ 80% du projet, je me suis retrouvé coincé dans une décision de mise en page déconcertante prise par le créateur du site de démarrage. En revoyant les vidéos, je constate en fait que j'ai remarqué l'erreur dès la première heure, mais que j'ai ensuite été distrait et que sa tête s'est vraiment redressée au cours de la septième heure environ.

Ce sentiment de "Pourquoi ont-ils fait cela comme ça?!" Était familier, après avoir fait confiance à des projets logiciels antérieurs qui ne méritaient pas cette confiance. J'ai eu une expérience similaire avec une décision idiote, également de la part du créateur du site de démarrage, de transformer presque tout le module en un en-tête de Beaver Builder (un module utile pour une gamme étroite de choses, mais ne pas flexible), ainsi que pour créer de petits "tags" ci-dessus

éléments (que j’ai aimé) marqués comme

éléments (que je n’ai pas aimés). J'allais vivre avec cela, mais c’est à la fois mauvais pour le référencement et mauvais pour l’accessibilité, et j’ai finalement passé vingt minutes à le réparer sur l’ensemble du site. Je n’ai pas apprécié ça.

C’est ce sentiment qui m’a empêché de passer des pages aux constructeurs pendant des années, jusqu’à ce qu’ils soient suffisamment bons (enfin, l’un d’eux le soit suffisamment) pour pouvoir les utiliser sans perdre constamment mon autonomie. Le sentiment ne s'est manifesté qu'une ou deux fois dans un projet qui, dans l'ensemble, s'est déroulé sans heurts et avec beaucoup de bonheur. Mais c’est certainement toujours là – et, encore une fois, je pense que l’irritation modérée aurait plutôt été ressentie comme une légère panique si réellement ne savais pas comment coder dans WordPress, ni si le projet était au nom d’un client réel. Ajoutez-y de mauvais outils (thèmes, plugins, hébergement, etc.) susceptibles de violer l’autonomie et la confiance de l’utilisateur (ce qui est toujours un peu la règle plutôt que l’exception) – et la panique serait grave et grave. immédiat.

7. Beaver Themer est incroyable

Je suis une société affiliée de Beaver Builder (si vous cliquez sur un lien de cet article et achetez quelque chose auprès d'eux, je gagne une commission), et je ne veux pas que vous obteniez la fausse impression que je simule un enthousiasme pour ce produit. laissez-moi commencer par les négatifs.

• Beaver Themer est fou cher. J'ai payé 147 $ de sa poche, et il veut renouveler le même montant l'année prochaine. Payer 147 $ annuel pour un plugin mal physiquement.
• Le nom est horrible. À ce jour, je suis confus entre Beaver Themer et le thème Beaver Builder (me blâmez-vous?), Dans la mesure où j’ai écrit les 2 000 premiers mots de mon article sur le thème Beaver Builder, intitulé «Beaver Themer». un plugin qui n'est ni un thème, ni quelque chose qui crée un thème.
• Ce que cela fait est déroutant. Plus précisément: vous devez comprendre le fonctionnement des thèmes WordPress pour comprendre en quoi son travail est si étonnant. Une fois que vous comprenez le fonctionnement des thèmes, votre besoin de payer 147 $ par an pour Beaver Themer diminue considérablement.

Bon, avec tout ce qui s’y rattache: Beaver Themer est le logiciel WordPress le plus étonnant que j’ai vu de mémoire récente.

Beaver Themer de @BeaverBuilder est le logiciel le plus surprenant de #WordPress de la mémoire récente. Cliquez pour tweeter

En gros, cela vous donne une alternative à la hiérarchie de modèles WordPress qui fonctionne réellement. Sans Beaver Themer, si vous souhaitez ajouter une valeur de champ personnalisé à chaque message de type message, vous devez créer single-example.php dans votre thème et pénétrez profondément dans PHP. Avec Beaver Themer, vous pouvez faire la même chose en utilisant: l'interface standard de glisser-déposer Beaver Builder.

Beaver Themer vous permet de mettre n'importe quelle donnée de site n'importe où sur n'importe quelle partie de votre site, d'une manière qui peut être automatiquement modelée.

Plus généralement, avec Beaver Themer, vous pouvez mettre n'importe quelle donnée de site n'importe où sur n'importe quelle partie de votre site, d'une manière qui peut être automatiquement modelée.

J'avais besoin de cela, car sinon, les posts du type de post personnalisé que j'ai créé, Demos, allaient ressembler à des posts de blog dépouillés. Je n'avais aucun moyen de personnaliser leur apparence ou – plus important encore – de leur ajouter divers types de métadonnées. J’ai pensé qu’il n’était pas possible de contourner cela sans code, et googler pour s’assurer que c’est ce qui m’a amené à réaliser que c’est exactement ce que fait Beaver Themer.

Avec le constructeur de page Beaver Builder lui-même, Beaver Themer marque le seconde produit de l’équipe de Beaver Builder qui m’a complètement bouleversé l’esprit plus que tout autre produit WordPress (le seul autre qui me vienne à l’esprit est le plugin All-in-One WP Migration). Et c’est tellement facile à manquer qu’ils le font, car leur marketing est si… discret. Si le marketing de Beaver Builder était aussi exceptionnel que ses produits, vous auriez une découpe en carton de taille humaine Beaver Builder chez vous à l’heure actuelle.

Cela dit, jetez un coup d'œil à Beaver Themer. Si vous voulez créer des sites WordPress sans code, c’est un must-have officiel.

8. Les sites Web sans codage, c'est amusant! et les sites Web peuvent être bons!

Je n’ai pas eu autant de plaisir à créer un site Web depuis ma première expérience avec Squarespace.

Pour être honnête, je n’ai pas eu autant de plaisir à créer un site Web depuis ma première expérience avec Squarespace.

Je pense qu’une partie de cela était le défi supplémentaire: vous pouvez le faire, mais pouvez-vous le faire en prétendant que vous ne savez pas ce que c’est le CSS? Ou comment modifier les fichiers d’un thème?

Mais probablement l'essentiel était: C'était presque tout au début. À quelques exceptions près (certaines, comme la migration, toujours assez pénibles), le flux de travail était le suivant: je regarde mon site Web, je modifie une interface visuelle et mon site Web change. C’est une création pure et, selon mon expérience, cela fonctionne très bien pour le système nerveux humain et les centres de récompense. En fait, je me suis retrouvé pris au piège. C’est ainsi que je pensais être une démonstration de principe d’une heure dans un projet de passion de huit heures.

Au bout de ces heures, je suis fier et enthousiasmé par le résultat. Je suis ravi que vous consultiez le site WP No Code, et je suis ravi de l’ajouter et de le construire. Je ne suis pas inquiet que vous le regardiez sur votre téléphone ou que vous remarquiez que le pied de page se bloque dans le contenu afin que vous perdiez les 40 derniers mots de ce que j'essayais de dire. Le site fonctionne, et je pense qu'il a l'air génial – pas mal mieux que si j'avais tout fait moi-même.

C’est ce que les gens ont voulu créer depuis environ 25 ans. Squarespace l'a fait dans un environnement très contraint et à source fermée il y a quelques années, et maintenant, WordPress l'a fait. Ce n’était pas facile et cela a pris une éternité – environ 15 ans, à compter du début de WordPress en tant que projet logiciel. Pour arriver ici, le Web lui-même devait d'abord s'améliorer. (Salut IE, j'appelle juste pour dire que je ne pense jamais à toi.) Après cela, nous avons eu besoin d'un effort d'équipe considérable de logiciels libres et à source ouverte, d'extensions gratuites et à code source ouvert pour ce logiciel, et, surtout, d'extensions payantes qui ont a finalement réussi à combiner «répondre aux besoins du marché» avec «écrire des choses qui fonctionnent réellement». C’est la partie qui est nouvelle et, si vous connaissez les outils à utiliser, ainsi que les principes fondamentaux de ce que WordPress est– enfin, la création de sites WordPress sans code devient une réalité.