Réflexions sur la création d'un site Web WordPress à partir de zéro (pas de code)

Au cours de la dernière décennie, j'ai travaillé avec WordPress (presque) quotidiennement. C'est ma solution préférée pour créer des sites Web pour des clients de toutes tailles.

Et, comme j'ai acquis plus d'expérience avec le CMS très populaire, j'ai préconisé la création de thèmes WordPress à partir de zéro. Ces jours-ci, j'utilise un thème de démarrage basé sur le soulignement assez basique. Il est configuré comme je l'aime et m'aide à démarrer rapidement de nouveaux projets.

Mais, comme tout le reste dans l'écosystème WordPress, il existe de nombreuses options sur la façon dont nous faisons les choses. L'approche que je préfère n'est pas pour tous les développeurs. Ce n'est pas toujours la solution la plus réaliste pour certains clients (en particulier ceux qui ont un budget serré).

Aujourd'hui, je voudrais partager mes expériences dans la construction d'un site Web d'une manière différente: en utilisant un plugin de création de page WordPress et un thème de démarrage complémentaire "vierge". Je vais vous expliquer les avantages et les inconvénients du processus, ainsi que quelques conseils pour en tirer le meilleur parti. Commençons!

contexte du projet

J'ai été contacté par un client à vie qui voulait une refonte de son ancien site HTML. Ils voulaient les avantages de l'utilisation de WordPress, mais ils n'avaient pas le budget pour une construction personnalisée complète.

L'idée d'acheter un thème d'entreprise WordPress spécifique à l'industrie a été mentionnée. Maintenant, il n'y a rien de mal à acheter un thème et à y ajouter du contenu. Dans de nombreux cas, cela fonctionnera bien.

Mais il semble souvent qu'il y a des coûts supplémentaires associés à la refonte de l'apparence et / ou de la fonctionnalité pour correspondre aux spécifications du client (ou pire encore, à mes attentes). Même alors, vous ne pouvez pas faire grand-chose sans détruire complètement le thème, le budget du client ou les deux.

Dans cet esprit, j'ai commencé à chercher une alternative. J'ai récemment commencé à jouer avec Beaver Builder, un plugin de création de page WordPress populaire (divulgation complète: je ne suis pas payé pour le dire, c'est juste l'outil que j'ai utilisé. Il existe d'autres produits similaires sur le marché qui méritent également d'être pris en compte.)

Ils incluent un thème de cadre (et un thème enfant associé) avec certains de leurs packages commerciaux, vous permettant essentiellement de créer un site Web complet (en-tête, pied de page et contenu) en utilisant une combinaison du personnalisateur WordPress et du constructeur de page. .

Comment ça marche Continuez à lire pour découvrir …

Le point de départ

Les premières étapes du processus sont assez familières à quiconque a créé un site WordPress:

• Créez une nouvelle installation WordPress;
• Installez et activez le thème;
• Installez et activez le plugin générateur de page;

De là, vous obtenez un tableau blanc essentiellement vierge. En fait, ce n'est pas très différent de ce que je vois lorsque j'active mon propre thème de démarrage basé sur des soulignements.

L'avantage de cela est que le thème n'a pas beaucoup de notions préconçues sur ce que vous voulez créer. Cela signifie qu'un concepteur pourrait, en théorie, créer une maquette de conception et la donner vie plus tard. Tant qu'ils comprennent ce que le sujet peut et ne peut pas faire, c'est-à-dire.

Mais, comme nous le verrons, il existe des options pour ceux qui veulent quelque chose de plus intelligent.

Utilisation de WordPress Customizer

WordPress Customizer est un outil intégré qui vous permet d'ajuster divers paramètres liés au thème et d'afficher les résultats en temps réel. Il était destiné à apporter une interface utilisateur universelle aux paramètres de thème, contrairement aux panneaux d'options car de nombreux thèmes ont été mis en œuvre.

Ici, le thème Beaver Builder tire parti du personnalisateur et offre de nombreuses options. Parmi les temps forts:

Presets

Choisissez parmi une sélection de combinaisons de couleurs prédéfinies. Ces styles peuvent être remplacés par d'autres options de personnalisation ou CSS.

Titre

Voici une variété de paramètres pour la conception, le placement du logo et la navigation. Une option pour un en-tête "collant" est incluse, ce qui est une belle touche. Les conceptions couvrent plusieurs scénarios courants.

Le contenu

Choisissez des couleurs d'arrière-plan et des mises en page pour votre blog WooCommerce, publication individuelle, archive de publication et modèles.

Pied de page

Le pied de page du site peut être conçu et ajouté des widgets pour gérer différents types de contenu. Par défaut, il y a quelques limitations ici. Par exemple, je voulais mettre des liens de profil de médias sociaux intégrés dans la zone de widget de pied de page (ils sont définis pour apparaître sous les widgets), ce qui n'est pas pris en charge. Heureusement, un extrait de code que j'ai trouvé a rendu cela possible grâce à un shortcode WordPress.

Code

Si vous souhaitez injecter du CSS, du JavaScript ou tout autre code spécifique dans votre site, vous pouvez le faire ici. Cela peut être utile si vous souhaitez ajouter Google Analytics ou un code de suivi des pixels.

Le verdict

Dans l'ensemble, le Customizer avait suffisamment d'options pour m'aider à créer l'apparence de base de mon site Web. Ce n'est pas aussi robuste que ce à quoi je suis habitué avec un thème personnalisé, mais c'est normal. Le point principal ici est le développement rapide et l'évitement du code.

Le thème Beaver Builder a fait exactement cela, car j'ai pu configurer les choses comme je le voulais en une demi-heure environ. Toute lacune est le type de prix que vous payez avec un projet à budget réduit.

Pages de construction

Je ne passerai pas beaucoup de temps à entrer dans les détails ici, pour deux raisons. Tout d'abord, mes besoins pour les différentes pages du site n'étaient pas très compliqués. Deuxièmement, le constructeur de page lui-même est secondaire par rapport au thème. Mais il y a encore quelques éléments qui méritent d'être mentionnés.

La page d'accueil a été créée assez rapidement et pas à partir de zéro. Mon client a aimé l'un des modèles de page prédéfinis de Beaver Builder. La configuration était juste une question d'importation du modèle, puis de piratage pour personnaliser les choses que nous voulions conserver et supprimer les choses que nous n'avions pas. De plus, il y avait des modules supplémentaires à ajouter via le générateur de pages. Des fonctionnalités telles que les carrousels arrière et l'animation de défilement ont ajouté de la personnalité.

Les pages secondaires étaient extrêmement simples. J'ai créé un module de titre de page qui a utilisé un arrière-plan photographique et l'ai enregistré pour une utilisation répétée sur d'autres pages. À partir de là, il s'agissait simplement d'ajouter le reste du contenu et de bien le formater.

Le seul problème que j'ai eu était l'intégration de Gravity Forms. Étant donné que le générateur de pages n'utilise ni l'éditeur de blocs Gutenberg WordPress ni l'éditeur classique (qui prend en charge le plugin de formulaires populaire), j'ai dû mettre manuellement un shortcode dans un module d'éditeur de texte. Ce n'était pas un gros problème, mais cela pourrait être difficile pour un client qui ne connaît pas le processus.

Le verdict

La construction de la page s'est déroulée plus ou moins comme prévu. La facilité d'utilisation est le point de vente de ces accessoires et il s'intègre parfaitement. Plusieurs modules étaient faciles à glisser-déposer sur la page, et les dispositions multi-colonnes étaient faciles à configurer. Tout était réactif et pouvait également être spécifiquement personnalisé en fonction de la taille de l'écran.

Le nombre de modules inclus était solide et couvrait pratiquement tout le projet requis. Si des fonctionnalités plus sophistiquées sont nécessaires, il existe un certain nombre de packages de plugins tiers disponibles qui peuvent vous aider.

Impressions générales

Dans l'ensemble, je dois dire que ce fut une meilleure expérience que celle que j'ai eue normalement avec des thèmes prédéfinis. Le fait que je pouvais partir de quelque chose de basique et construire pour répondre aux besoins du projet était plus conforme à mon flux de travail préféré.

À vrai dire, j'ai dû implémenter quelques bits de code supplémentaires pour accomplir tout ce que je voulais. Le shortcode susmentionné pour les liens de profil de médias sociaux et un peu de JavaScript supplémentaire m'ont aidé à compléter le site. Les deux ont été mis en file d'attente via le fichier functions.php du thème enfant, ce qui leur permet d'éviter d'être écrasés lors des futures mises à jour du thème.

J'ai trouvé que c'était une option viable pour des projets simples. Il existe quelques scénarios, comme l'utilisation de champs personnalisés ou de contenu conditionnel, où il pourrait être encore plus logique d'utiliser un thème personnalisé complet. Mais ce genre de fonctionnalités est souvent pour des budgets plus importants de toute façon.

Donc, si vous êtes un développeur qui souhaite développer rapidement un nouveau site Web peu coûteux, mais sans les pièges d'un thème tiers, c'est peut-être la voie à suivre. Reconnaissez simplement que vous devrez vivre selon les paramètres de ce qui existe. Sinon, il sera temps d'activer cet éditeur de code.

* Remarque: Les images de cet article sont à titre indicatif uniquement: elles ne reflètent pas le projet réel décrit.