Création du thème

Voir la vidéo
Description Sommaire

Nous allons maintenant entrer dans le vif du sujet et créer les premiers fichiers de notre thème.

Les fichiers nécessaires

Pour créer un thème WordPress il faut créer un nouveau dossier dans le dossier wp-content/themes et placer un premier fichier php nommé index.php. Ce fichier sera automatiquement utilisé pour générer les pages de votre thème. Il faudra aussi créer un fichier style.css qui contiendra le style de notre thème mais surtout un commentaire qui permettra à WordPress de connaitre les informations de votre thèmes.

La seule information nécessaire est le nom du thème.

/*
Theme Name: Mon theme
*/

Mais il est possible d'insérer un plus grand nombre d'information si vous le souhaitez. Par exemple voici le code présent dans le thème TwentyTwenty.

/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 1.1
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

Ensuite, à l'intérieur de la page index.php vous pouvez poser la première structure de base.

<?php get_header() ?>

Ici votre contenu

<?php get_footer() ?>

Ces fonctions sont des fonctions de WordPress qui vont chercher automatiquement les fichier header.php et footer.php dans votre thème. Le fichier header.php devra inclure l'en tête de votre page ainsi qu'un appel à la méthode wp_head().

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head() ?>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
        <a class="navbar-brand" href="#"><?php bloginfo('name') ?></a>
    </nav>

    <div class="container">

Dans la partie footer nous feront pareil mais avec la méthode wp_footer().

    </div>
    <footer>
    <?php
    wp_nav_menu([
        'theme_location' => 'footer',
        'container' => false,
        'menu_class' => 'navbar-nav mr-auto'
    ])
    ?>
    </footer>
    <?php wp_footer() ?>
</body>
</html>
Publié
Technologies utilisées
Auteur :
Grafikart
Partager