Au cours de la dernière décennie, j'ai travaillé avec WordPress quotidiennement (à peu près). C’est ma solution idéale 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 plaidé pour la création de thèmes WordPress à partir de zéro. Ces jours-ci, j'utilise un thème de démarrage assez dépouillé basé sur Underscores. Il est configuré exactement comme je l'aime et m'aide à démarrer rapidement de nouveaux projets.

Mais, comme tout le reste dans l'écosystème WordPress, il y a beaucoup de choix dans 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 avec 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 compagnon «vide». 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é approché par un client de longue date qui voulait une refonte de son ancien site HTML. Ils voulaient les avantages qui accompagnent l'utilisation de WordPress, mais n'avaient pas le budget pour une construction personnalisée complète.

L'idée d'acheter un thème WordPress commercial 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 très 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 d'un 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'avais récemment commencé à jouer avec Beaver Builder, un plugin de création de page populaire pour WordPress (divulgation complète: ils ne me paient pas pour le dire, c'est juste l'outil que j'ai utilisé. Il existe d'autres produits similaires sur le marché à considérer également.)

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

Comment cela a-t-il fonctionné? Continuez à lire pour le découvrir…

Le point de départ

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

  • Créez une nouvelle installation de WordPress;
  • Installez et activez le thème;
  • Installez et activez le plugin de création de page;

De là, vous obtenez une ardoise essentiellement vierge. Ce n'est en fait pas très différent de ce que je vois en activant mon propre thème de démarrage basé sur Underscores.

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

Mais, comme nous le découvrirons, il existe des options pour ceux qui veulent quelque chose d'un peu plus prêt à l'emploi.

Utilisation du personnalisateur WordPress

Le personnalisateur WordPress est un outil intégré qui vous permet de modifier divers paramètres liés au thème et de voir les résultats en temps réel. Il était censé apporter une interface utilisateur universelle à la configuration des thèmes, contrairement aux panneaux d'options sur mesure que de nombreux thèmes ont mis en œuvre.

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

Préconfigurations

Choisissez parmi une sélection de schémas de couleurs prédéfinis. Ces styles peuvent être remplacés via d'autres options de personnalisation ou CSS.

Paramètres prédéfinis du thème.

Entête

Il existe une variété de paramètres ici pour la mise en page, le placement du logo et la navigation. L'option pour un en-tête «collant» est incluse, ce qui est une belle touche. Les dispositions couvrent plusieurs scénarios courants.

Paramètres d'en-tête de thème.

Contenu

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

Bas de page

Le pied de page du site peut être stylisé et des widgets ajoutés pour gérer différents types de contenu. Par défaut, il y a quelques limitations ici. Par exemple, je voulais placer des liens de profil de médias sociaux intégrés dans la zone 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 via un shortcode WordPress.

Paramètres du pied de page du thème.

Code

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

Le verdict

En tout, le Customizer avait suffisamment d'options pour m'aider à créer l'apparence de base et la mise en page 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. Tout l'intérêt ici est pour un développement rapide et pour éviter le 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. Les lacunes sont en quelque sorte le prix que vous payez avec un projet à petit budget.

Création de pages

Je ne passerai pas une tonne 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 en quelque sorte secondaire par rapport au thème. Mais il reste encore quelques éléments à mentionner.

La page d'accueil a été construite 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. Le configurer était juste une question d'importer le modèle, puis de pirater pour personnaliser les choses que nous voulions conserver et supprimer les choses que nous n'avions pas. De plus, il y avait quelques modules supplémentaires à ajouter via le constructeur de page. Des fonctionnalités telles que les carrousels et l'animation au défilement ont ajouté une certaine personnalité.

Les pages secondaires étaient extrêmement simples. J'ai créé un module de titre de page qui a utilisé un arrière-plan de photo 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 point d'achoppement que j'avais était l'intégration de Gravity Forms. Étant donné que le générateur de pages n'utilise ni l'éditeur de blocs WordPress Gutenberg ni l'éditeur classique (tous deux pris en charge par le plugin de formulaire populaire), j'ai dû placer 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 à peu près comme prévu. La facilité d'utilisation est le point de vente de ces plugins et celui-ci correspond à la facture. Divers modules étaient faciles à glisser-déposer sur la page et les dispositions multicolonnes étaient simples à configurer. Tout était réactif et pouvait également être personnalisé spécifiquement 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 étaient nécessaires, il existe un certain nombre de modules complémentaires tiers disponibles qui peuvent vous aider.

Impressions globales

Dans l'ensemble, je dois dire que ce fut une meilleure expérience que celles que j'ai généralement eues avec des thèmes prêts à l'emploi. 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 réaliser 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 thème de l'enfant functions.php fichier, ce qui leur permet d'éviter d'être écrasé lors de futures mises à jour de thème.

J'ai trouvé que c'était une option viable pour des projets simples. Il existe certains scénarios, comme l'utilisation de champs personnalisés ou de contenu conditionnel, où il peut encore être plus judicieux d'utiliser un thème personnalisé complet. Mais ces types de fonctionnalités sont souvent de plus gros budgets de toute façon.

Donc, si vous êtes un développeur qui souhaite développer rapidement un nouveau site Web économe – mais sans les pièges d'un thème tiers, c'est peut-être la voie à suivre. Il suffit de reconnaître que vous devrez respecter les paramètres de ce qui est là. Sinon, il sera temps de lancer cet éditeur de code.

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