Sprites SVG
Momentum offre un processus automatisé pour les sprites SVG. Il suffit simplement de créer un dossier dans : /assets/src/svg/sprite/… « momentum » et d’y déposer les fichiers SVG. La plate-forme compilera automatiquement dans le dossier /assets/dist/svg un fichier sprite utilisable : sprite-momentum.svg. Ce fichier comprendra tous vos éléments SVG. L’utilisation des SVG dans le PHP se fait de la façon suivante :
[php]
<svg role="img">
<use xlink:href="<?php echo get_template_directory_uri();?>
/assets/dist/svg/sprite-momentum.svg#logo-momentum">
</use>
</svg>
[/php]
Un snippet de code est déjà existant pour utiliser rapidement les SVG. Dans un fichier PHP vous pouvez simplement écrire « svg » la complétion emmet vous permettra d’avoir accès à ce code sans devoir tout retenir.
Dossier SRC
Dossier DIST
NOTE : Veuillez noter que les sprites SVG ne permettent pas l’utilisation d’un logo qui aurait plusieurs couleurs. Lorsqu’on utilise un sprite SVG, on est limité à une couleur. Dans le cas où vous avez besoin d’un SVG en plusieurs couleurs, celui-ci doit être traité comme une image.
ACF Pro
L’extension ACF pro est imbriquée dans le thème directement. Dans le dossier /acf. C’est avec cette extension que l’on rend le contenu éditable pour le client. Sommairement, on écrit principalement du HTML dans des fichiers PHP. On dynamise ensuite le contenu en PHP avec les fonctions d’ACF pro.
Il est donc important de consulter la documentation d’ACF pro afin d’apprendre comment utiliser les différents types de champs. Le style, lui, est géré en SCSS et est complètement automatisé par la plateforme au niveau de la compilation en CSS.
Documentation ACF pro
https://www.advancedcustomfields.com/resources/
Dans cette section, vous aurez quand même un guide de base pour démarrer ACF pro sur un projet Momentum. Vous devrez tout de même vous fier à la documentation ACF pro ou aller voir sur les autres projets de Cinetic, comment les choses ont été faites. Les étapes suivantes devraient tout de même vous guider pour comprendre rapidement comment rendre du contenu éditable par les clients et comment les afficher sur le site web.
Configuration de page
Voici un exemple rapide sur comment procéder au démarrage d’ACF pro dans un projet Momentum. De la création du groupe de champs jusqu’à l’intégration PHP des contenus dans Visual Studio Code. Vous aurez un exemple de base pour vous aider à comprendre le processus et définir vous même les champs ACF requis pour les sections à programmer. Je vous invite tout de même à bien lire la documentation ACF qui est présente dans la section un peu plus haute : ACF pro.
Étape 1 : Créer le groupe de champs. C’est ce groupe de champs qui permettra de définir les sections que les clients pourront utiliser sur leur site web.
Étape 2 : Nommer ce nouveau groupe de champs : Page.
Tous les projets sont configurés de la même façon, il est donc important de garder les noms présents ici pour le groupe de champ et le contenu flexible que nous allons ajouter plus bas. Momentum est déjà préconfiguré pour recevoir ces noms de champs.
Étape 3 : Dans emplacement : Type de publication est égal à Page.
Pour qu’automatiquement toutes les pages du site web puissent avoir accès à nos sections définies dans ce groupe de champs.
Étape 4 : Dans réglages, changer la position pour : haute (après le titre).
Pour mettre nos contenus éditable en premier dans les pages de WordPress.
Étape 5 : Créer un contenu flexible et nommer le Page aussi.
C’est dans ce contenu flexible que toutes les sections du site web se retrouveront afin que les clients puissent utiliser n’importe quelle section dans n’importe quelle page. Cela implique de garder en tête que les sections doivent toutes être compatibles les unes avec les autres, pour garder une flexibilité et une autonomie maximum pour les clients.
Étape 6 : Ajouter un premier champ test : Introduction.
Étape 7 : Ajouter un contenu éditable, ici, nous allons créer un éditeur de contenu qui se trouve être un WYSIWYG.
Étape 8 : Publier les changements.
Étape 9 : Ajouter dans la page le Bloc Introduction qu’on vient de créer.
Étape 10 : Entrez votre contenu dans la page.
Étape 11 : Dans Visual Studio Code, allez dans le fichier page.php. Cette portion de code regarde si un contenu flexible Page existe dans la page. Ce que nous venons de créer plus haut.
[php]
<!–?php // Check value exists. ?–>
<!–?php if( have_rows('page') ): ?–>
<!–?php // Loop through rows. ?–>
<!–?php while ( have_rows('page') ) : the_row(); ?–>
[/php]
Étape 12 : Pour chaque nouvelle section à l’intérieur du contenu flexible Page, il faut l’appeler avec le code suivant avec un simple if :
[php]
<?php // <!– Layout : Introduction –> ?>
<?php if( get_row_layout() == 'introduction' ): ?>
[/php]
Pour toutes les autres sections suivantes, c’est avec un elseif, mais le principe reste identique :
[php]
<?php // <!– Layout : Autre section –> ?>
<?php elseif( get_row_layout() == 'autre_section' ): ?>
[/php]
Étape 13 : Vous pouvez maintenant appeler le contenu éditable de la section Introduction de la façon suivante : the_sub_field().
[php]
<!–?php // <!– Layout : Introduction –> ?–>
<!–?php if( get_row_layout() == 'introduction' ): ?–>
<section data-scroll-section="">
<div class="o-container">
<div class="o-layout">
<div class="o-layout_item">
<div class="o-text"></div>
</div>
</div>
</div>
</section>[/php]
Ces étapes expliquent la marche à suivre avec Momentum, mais vous devez tout de même maîtriser les types de champs ACF pro en consultant la documentation de ce dernier.