Nous avons combiné Twig (Symfony), la nouvelle approche de création de blocs WordPress et notre savoir-faire pour simplifier l’approche de création de votre thème WordPress avec l’approche Phoenix. Dans cet article, je vous explique comment utiliser notre approche pour créer des thèmes WordPress. Vous n’avez pas forcément besoin de compétence en PHP. Cependant, vous devez avoir quelques notions en HTML et Twig. Je vous laisse découvrir via l’un nos articles une petite introduction à Twig. Vous pouvez aussi visiter le site web de Symfony pour apprendre davantage.

Étapes avant la création de thème pour votre site web.

Avant de se lancer dans la création d’un thème WordPress, vous devez au préalable créer le design en version HTML. Si vous le souhaitez, vous pouvez vous procurer un modèle dans la banque des modèles en ligne ou tout simplement en acheter sur les sites web tels que Themeforest, ThemeMonster, ou start Bootstrap. Ces solutions peuvent être un bon point de départ pour créer un site internet.

Important : Nous n’utilisons pas de thèmes WordPress déjà développés tout uniquement parce qu’il exige souvent des extensions ou ressources tierces. Le but de notre approche est d’avant tout offrir aux clients une solution clés en main moins dépendante des ressources externes.

Étape 1 : sectionnez votre design HTML en parties

Chaque design de site web a généralement plusieurs parties ou sections :

L’entête (global)
Le pied de page (global)
Le corps du site web

Le corps du site web peut être subdivisé en plusieurs parties utilisables en fonction du besoin à divers endroits de votre site internet.

Il sera donc question d’identifier les différentes parties, de les sectionner en parties. Vous devez sectionner et mettre chaque partie dans un fichier renommée selon le besoin. Vous pouvez, par exemple, avoir un fichier header.html, footer.html ….

Une fois que vous aurez les différents fichiers, vous devez ensuite changer l’extension de .html à .Twig.

Étape 2 : Créer le fichier de configuration de votre thème

Alors, nous utilisons le fichier Json nommée theme.json pour enregistrer les liens css et js de votre design. La structure du design sera un semblable à ce que vous voyez ci-dessous.


{
    "css": {
        "BootstrapCSS": "/assets/css/plugins-demo.css",
        "FontAwesome": "/assets/css/main-demo.css"
    },
    "js": {
        "JQuery": "/assets/js/demo/jquery.min.js",
        "JQueryValidate": "/assets/js/demo/modernizr.js",
        "BootstrapJS": "/assets/js/demo/demo.js"
    }
}

Explications :

Le code ci-dessus est au format Json. Comme explication, vous devez tout simplement créer un « tableau » que vous allez scinder en deux parties :

css : pour lister tous les liens CSS
js : pour lister tous les liens JS

Étape 3 : Rendez dynamiques les parties de votre thème avec les variables Twig.

Nous allons bientôt mettre en ligne la liste des variables autorisées pour rendre proactif le thème WordPress. Je vous invite à visiter Notre introduction sur Twig pour comprendre comment utiliser Twig. Il sera question dans cette partie d’utiliser les variables que nous vous proposerons pour dynamiser votre thème.

Étape 4 : créer le fichier Json pour lister les variables que chaque bloc utilise

Ainsi, nous utilisons également le fichier Json pour déclarer les variables du thème. Ce fichier est nommé variable.json et comporte les informations que vous trouverez ci-dessous :


{
    "hero": [
        "title",
        "sub_title",
        "sub_description",
        "action_text",
        "action_url",
        "action_text_2",
        "youtube_url",
        "photo",
        "action_url_2"
    ],
    "services": [
        "title",
        "action_text",
        "action_url",
        "acf",
        "post_limit",
        "section_class",
        "container_class",
        "space_before",
        "space_after",
        "grid_class",
        "sub_description",
        "call_to_action_text",
        "call_to_action_url",
        "post_type",
         "posttype",
        "photo_position",
        "sub_title",
        "title_2",
        "sub_title_2",
        "call_to_action_text_2",
        "call_to_action_url_2",
        "nos_services",
        "select_term",
        "select_category",
        "image_option"
    ]
    
}

Vous devez donner le nom du bloc sans .Twig et les variables que vous avez utilisés dans le bloc.

Étape 5 : générez votre thème WordPress

Une fois que la configuration sera terminée, nous allons déposer le thème dans un emplacement de notre logiciel que se chargera de générer votre design WordPress.

Comme vous pouvez le voir, créer un thème WordPress avec l’approche Phoenix peut relativement être facile. Par ailleurs, nous souhaitons, au courant des semaines à venir, proposer des webinaires pour mieux éclairer les développeurs qui le désirent sur notre approche.

Gilblas Ngunte Possi

Fondateur et Développeur Full-Stack chez Prositeweb.

Ma maîtrise des outils modernes, combinée à un sens d’analyse approfondi des technologies de l’information, me permet d’offrir un accompagnement de qualité dans la conception et la mise en place de vos solutions web.