Comment ajouter des fonctionnalités de thème à un site web CMS Hub existant

L'un des avantages de HubSpot est que vous n'avez pas besoin de le mettre à jour en permanence. CMS Hub utilise toujours la dernière version. Les nouvelles fonctionnalités de CMS Hub sont additives. Les modèles, modules, etc. des sites web CMS Hub existants fonctionnent donc de la même manière que vous les avez créés. Ils sont même meilleurs, car en arrière-plan, le CMS est toujours plus performant, plus rapide et plus facile à modifier. 

Il y a certaines caractéristiques spécifiques de CMS Hub qu'un développeur doit ajouter. Vous pouvez mettre en œuvre certaines de ces fonctionnalités différemment de ce que vous feriez pour un tout nouveau site web. Ce tutoriel vous guidera dans l'ajout de ces fonctionnalités à votre ou vos sites web existants. 

Avant de continuer :

• Consultez les concepts clés de CMS Hub, même si vous utilisez HubSpot depuis longtemps. Vous comprendrez mieux comment tout cela fonctionne.
• Vous devrez également utiliser l'ILC CMS. Si vous ne l'avez pas encore installée, faites-le.

Vous pouvez ajouter et utiliser ces fonctionnalités de manière indépendante. Commencez par le début et identifiez des caractéristiques spécifiques dont vous avez besoin. Vous ne devez pas suivre ce tutoriel de manière complètement linéaire.

Les thèmes de CMS Hub sont un ensemble de modèles, de modules ainsi que de fichiers CSS, JSON et JS. L'inclusion des thèmes dans un ensemble a son importance tout au long de l'expérience de l'éditeur de contenu. 

Lors de la création d'un nouveau site web ou d'une page de destination, le créateur de contenu se voit présenter une grille des thèmes de son compte. Il sélectionne le thème qu'il utilise, puis une grille contenant uniquement les modèles de ce thème s'affiche.

Lors de la modification d'une page utilisant un modèle d'un thème, les modules de ce thème reçoivent un traitement spécial qui les fait ressortir dans le panneau d'ajout de module.

Vos modèles, modules, fichiers CSS et JS constituent un thème s'ils se trouvent dans le même dossier. Peu importe qu'ils soient organisés en sous-dossiers, du moment que ces éléments sont inclus dans un même dossier. S'ils sont déjà stockés de cette façon, c'est parfait. Sinon, créez ce dossier et déplacez-y vos éléments. Renommez ce dossier avec le nom que vous souhaitez donner à votre thème. Le nom dépend entièrement de vous, mais vous pouvez peut-être le nommer en fonction de la marque de l'entreprise que le site reflète et de l'année de la refonte ou de la mise à jour.

Les thèmes nécessitent deux fichiers JSON, et seul l'un d'entre eux a besoin d'un contenu réel au départ.

• Theme.json – Il contient les paramètres de votre thème.
• Fields.json – Il contient des champs qui peuvent être utilisés pour apporter des modifications de conception à l'ensemble d'un site.

Les fichiers JSON sont spéciaux et ne peuvent actuellement pas être créés dans le gestionnaire de conception. Ces fichiers PEUVENT être téléchargés via l'ILC CMS. 

1. Récupérez le dossier que vous avez créé à l'étape Placer les fichiers existants dans un dossier sur votre ordinateur. 
2. À l'intérieur du dossier sur votre ordinateur, créez un nouveau fichier nommé theme.json.
3. Copiez le fichier d'exemple theme.json sur le document de thèmes.
4. Collez le code de l'exemple dans votre fichier theme.json.
5. Modifiez la valeur de "label" pour qu'elle corresponde au nom du thème, tel que vous souhaitez que les créateurs de contenu le voient.
6. Remplacez "preview_path" par le chemin de votre modèle de page d'accueil ou de votre modèle le plus fréquemment utilisé.
7. Faites une capture d'écran de la page d'accueil du site. Nommez l'image thumb.jpg. Placez l'image dans le même dossier que votre fichier theme.json.
8. Remplacez "screenshot_path" dans theme.json par le chemin de votre image thumb.png.
9. Enregistrez le fichier.
10. Dans le même dossier que votre fichier theme.json, créez un nouveau fichier et nommez-le fields.json. À l'intérieur de ce fichier, saisissez simplement [] et enregistrez le fichier.

Pour voir vos modifications dans le gestionnaire de conception, exécutez la commande hs upload. Vous avez maintenant un thème de base. Les modules et les modèles de ce thème s'afficheront comme associés au thème.

Les champs de thème sont des contrôles que vous pouvez fournir à un créateur de contenu pour lui permettre d'apporter des modifications de style à l'échelle du thème.

Lors de la création initiale d'un site web, ces contrôles de thème permettent aux créateurs de contenu de participer à la définition de l'image de marque du site. Les équipes peuvent constater que cela permet au développeur de se concentrer sur les aspects plus techniques du développement du site.

Pour les sites web existants, les champs de thème peuvent s'avérer inutiles. Si le site web a déjà été créé sur mesure, il n'y a probablement aucun intérêt à ajouter des contrôles de couleur et de typographie à l'échelle du site. Si l'image de marque d'un site change de manière significative, il peut être plus approprié de procéder à une refonte que d'ajouter des champs rétroactivement. En fin de compte, c'est une décision que vous devez prendre d'un commun accord avec les autres parties prenantes du site.

Pour ajouter des champs au thème, ajoutez leur JSON à votre fichier fields.json. Les champs suivent la même structure que les champs de module.

Assurez-vous que les utilisateurs qui doivent avoir accès à la modification des valeurs des champs de thème disposent de l'autorisation Modifier le contenu global et les thèmes. Pour les utilisateurs qui ne doivent pas être en mesure de modifier ces paramètres, assurez-vous que cette option est désactivée.

Les zones de glisser-déposer et les partials globaux nécessitent l'utilisation de fichiers codés HTML + HubL. Si votre site web existant a été créé à l'aide de l'ancien système de gestion de conception par glisser-déposer et que vous souhaitez utiliser ces nouvelles fonctionnalités, ces modèles devront peut-être être clonés en HTML.

Pour cloner ces modèles en tant que modèles HTML + HubL :

1. Ouvrez le gestionnaire de conception et trouvez le modèle dans l'outil de recherche.
2. Effectuez un clic droit sur le modèle.
3. Dans le menu contextuel qui apparaît, choisissez Cloner en tant que HTML.

Vous êtes maintenant prêt à travailler sur l'ajout des zones de glisser-déposer et de partials globaux.

Des zones de glisser-déposer peuvent être ajoutées aux modèles pour offrir aux créateurs de contenu un moyen de placer les modules à la fois horizontalement et verticalement sur une page. Les zones de glisser-déposer offrent également un contrôle supplémentaire du style pour le créateur de contenu. Comme un modèle avec une zone de glisser-déposer peut être utilisé pour créer de nombreuses mises en page différentes, cela permet au développeur de se concentrer davantage sur les aspects techniques de la création et de la mise à jour du site.

Cela dépend entièrement des objectifs commerciaux de votre page. En d'autres termes, le vieil adage « On ne change pas une équipe qui gagne » s'applique.  Si la mise en page doit être modifiée, il est probablement judicieux de convertir la page pour utiliser les zones de glisser-déposer. Si la page remplit sa fonction et ne nécessite pas de modification de mise en page, elle est probablement très bien ainsi.

Il est relativement facile de créer un clone d'un ancien modèle et de transformer la colonne flexible en une zone de glisser-déposer. C'est une bonne idée, car cela ouvre de nombreuses possibilités pour les créateurs de contenu. Cela leur offre une grande liberté de création pour les nouvelles pages. Si votre modèle est un modèle de gestionnaire de conception en glisser-déposer, consultez Cloner le gestionnaire de conception par glisser-déposer en HTML.

1. La solution la plus simple est de trouver les instances de colonnes flexibles, qui utilisent la balise HubL {% widget_container "my_unique_column_name" %}.
2. Si nécessaire, remplacez chaque instance par {% dnd_area "my_unique_area_name" %}.
3. Si vous ne souhaitez pas définir les modules par défaut, laissez le champ dnd_area vide. Si vous souhaitez reprendre les modules par défaut pour la région ou définir de nouveaux modules par défaut utiles, dans dnd_area, ajoutez dnd_section et à l'intérieur de cette section, ajoutez dnd_column.
4. Pour chaque balise de module dans l'ancien élément widget_container, vous souhaiterez créer un élément dnd_row contenant dnd_module avec un chemin correspondant aux modules que vous souhaitez afficher par défaut. Cela créera la même disposition verticale que la colonne flexible.

Si vous souhaitez convertir une page pour l'utilisation des zones de glisser-déposer, la manière la plus sûre de le faire est d'utiliser la préparation de contenu.

1. Ouvrez l'outil de préparation de contenu, trouvez la page existante et préparez-la. Choisissez Préparer une page vierge.
2. Sélectionnez votre nouveau modèle qui utilise la zone de glisser-déposer.
3. Copiez et collez les informations de la version originale de la page, en créant la mise en page que vous souhaitez.
4. Quand vous avez terminé, publiez sur l'environnement de testing.
5. Dans l'outil de préparation de contenu, accédez à l'onglet Publier. Sélectionnez votre page et publiez-la sur l'environnement de testing.

Les Partials globaux sont des morceaux de contenu HTML et HubL qui peuvent être réutilisés sur l'ensemble de votre site web. Les types de partials globaux les plus courants sont les en-têtes de sites web, les barres latérales et les pieds de page. Pour les créateurs de contenu, les partials globaux se manifestent dans l'éditeur de contenu comme des régions qu'ils peuvent sélectionner pour les modifier dans l'éditeur de contenu global. L'éditeur de contenu global ressemble à l'éditeur de page, mais il est utilisé pour modifier le contenu global. 

À titre d'exemple, vous pouvez implémenter l'en-tête sous la forme d'un partial global avec des modules pour la navigation et les autres contenus. Si le créateur de contenu a besoin d'ajouter un lien à la navigation, il peut cliquer sur l'en-tête dans l'éditeur de page, puis sur le module de menu et mettre à jour le menu.

Assurez-vous que les utilisateurs qui doivent avoir accès à la modification du contenu global disposent de l'autorisation Modifier le contenu global et les thèmes.

Pour les comptes CMS Hub Entreprise, les alertes de code offrent un espace centralisé pour que les développeurs et les responsables informatiques puissent consulter un aperçu des problèmes qui affectent la performance et le rendu des pages ainsi que des éléments sur le compte.

Vous optimisez activement le site pour tirer parti des nouvelles fonctionnalités. Il est donc judicieux d'examiner les alertes de code pour votre compte et de les résoudre, le cas échéant.