Créer son thème WordPress (2/2)
Article écrit par valentin et publiée le 20 octobre 2022
Cette article vient à la suite du premier reprenant la création d’un thème WordPress.
Les fichiers d’index, de style et de fonctions sont créés, il est donc de s’atteler aux fichiers qui afficheront le contenu.
Débuter la création des fichiers
Nous allors donc commencer par l’en-tête et le pied de page :
header.php
<?php
/**
* The header.
*
* This is the template that displays all of the <head> section and everything up until main.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage portfolio
* @since portfolio 1.0
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<!-- Required meta tags -->
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<?php get_site_icon_url(32,);?>" rel="icon">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php
get_template_part( 'template-parts/main-nav' );
?>footer.php
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage portfolio
* @since portfolio 1.0
*/
?>
<!-- FOOTER -->
<footer class="text-muted bg-my container-fluid bg-light">
<div class="row d-flex justify-content-center d-inline-block">
<p class="text-muted">
<?php
if (has_nav_menu('footer')) {
wp_nav_menu(array(
'menu' => "footer", // (int|string|WP_Term) Desired menu. Accepts a menu ID, slug, name, or object.
'theme_location' => "footer", // (string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
'container' => "", // (string) Whether to wrap the ul, and what to wrap it with. Default 'div'.
'menu_class' => "footernavmenu", // (string) CSS class to use for the ul element which forms the menu. Default 'menu'.
));
} else {
echo 'Veuillez assigner le menu footer dans votre backoffice !';
}
?>
© <?php echo date('Y'); ?> <?php echo get_bloginfo('name'); ?>
</p>
</div>
</footer>
<!-- FOOTER END -->
<?php wp_footer(); ?>
</body>
</html>Vous pourrez remarquer que le fichier header appelle « main-nav » qui se trouve dans un dossier « template-parts ».
Créer donc ce dossier et ouvrez un fichier main-nav.php
<?php
/**
* Display the main navigation menu
*
* @package WordPress
* @subpackage portfolio
* @since portfolio 1.0
*/
?>
<!-- NAVBAR -->
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-light">
<div class="container">
<a class="navbar-brand" href="<?php bloginfo('url'); ?>">
<?php the_custom_logo(); ?>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php
if (has_nav_menu('menu-1')) {
wp_nav_menu(array(
'menu' => "menu-1", // (int|string|WP_Term) Desired menu. Accepts a menu ID, slug, name, or object.
'theme_location' => "menu-1", // (string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
'container' => "div", // (string) Whether to wrap the ul, and what to wrap it with. Default 'div'.
'container_class' => "collapse navbar-collapse", // (string) Class that is applied to the container. Default 'menu-{menu slug}-container'.
'container_id' => "navbarToggler", // (string) The ID that is applied to the container.
'menu_class' => "navbar-nav ms-auto mb-2 mb-lg-0", // (string) CSS class to use for the ul element which forms the menu. Default 'menu'.
'echo' => true, // (bool) Whether to echo the menu or return it. Default true.
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
} else {
echo 'Veuillez assigner le menu principal dans votre backoffice !';
}
?>
</div>
</nav>
</header>
<!-- NAVBAR END -->C’est maintenant que les choses se compliquent quelque peu.
Notre thème WordPress n’affiche toujours que « Hello World », malgrè tout nos efforts.
Il nous faut donc faire en sorte que notre contenu s’affiche et puisse être modifier depuis l’éditeur fourni avec le CMS.
Nous allons donc créer le modèle pour la page. Ce modèle va cependant rediriger vers d’autres fichiers. Si il s’agit de la page d’accueil, l’internautre vera un modèle. Si il s’agit d’une autre page, un modèle secondaire s’affichera.
page.php
<?php
/**
* The template to diplay all basic pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage portfolio
* @since portfolio 1.0
*/
get_header();
?>
<?php
if (is_front_page()) :
get_template_part('template-parts/landing');
else :
get_template_part('template-parts/basic_page');
endif;
?>
<?php
get_footer();Dans le dossier précédent « template-parts », nous allons donc créer les deux fichiers nécessaires.
landing.php
<?php
/**
* The template to display website's homepage
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage portfolio
* @since portfolio 1.0
*/
get_header();
?>
<section id="hero" class="d-flex justify-content-center align-items-center">
<div class="container position-relative" data-aos="zoom-in" data-aos-delay="100">
<h1><?php echo get_bloginfo('name'); ?></h1>
<h2><?php echo get_bloginfo('description'); ?></h2>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<h2>Nos derniers articles :</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<?php $the_query = new WP_Query('posts_per_page=3');
// Start our WP Query
while ($the_query->have_posts()) : $the_query->the_post();
// Display the Post Title with Hyperlink
?>
<div class="col">
<a class="card" href="<?php the_permalink() ?>">
<div class="card shadow-sm">
<?php the_post_thumbnail('custom-thumb', ['class' => 'img-fluid rounded d-block float-lg-start w-100 custo']) ?>
<div class="card-body d-flex justify-content-between align-items-center">
<h2><?php the_title(); ?></h2>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Lire</button>
</div>
</div>
</div>
</a>
</div>
<?php
// Repeat the process and reset once it hits the limit
endwhile;
wp_reset_postdata();
?>
</div>
</div>
</div>
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<div class="container mt-5">
<div class="row justify-content-md-center">
<div class="col mt-4">
<?php
the_content();
?>
</div>
</div>
</div>
<?php
endwhile;
endif;
get_template_part('template-parts/lastposts');
get_footer();
Comme vous le constaterez, la première partie de la page d’accueil renvoie vers un fichier, «
basic-page.php
<?php
/**
* The template to display any basic pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage portfolio
* @since portfolio 1.0
*/
get_header();
?>
<div class="container mt-5">
<div class="row justify-content-md-center">
<div class="col mt-4">
<?php
if (have_posts()) : while (have_posts()) : the_post();
if (has_post_thumbnail()) {
the_post_thumbnail('medium', ['class' => 'img-fluid rounded d-block float-lg-start me-2']);
}
?>
<h1><?php the_title(); ?></h1>
<?php
the_content();
endwhile;
endif;
?>
</div>
</div>
</div>
<?php
get_footer();A présent, votre site peut afficher le contenu de votre page d’accueil si dans l’option de personnalisation de thème vous lui avez demandé d’afficher le contenu d’une page statique.
Si vous préférez conserver le réglage d’origine, vous pouvez supprimer le contenu de « index.php » et dupliquer le contenu de « landing.php ».
Faire des choix
Souhaitez-vous effectuer des articles sur votre sites ou uniquement quelques pages décrivant vos compétences ?
Si c’est le cas, vous pouvez créer la page single, servant à générer l’affichagede ces articles.
single.php
<?php
/**
* The template to diplay all basic pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage portfolio
* @since portfolio 1.0
*/
get_header();
?>
<div class="container mt-5">
<div class="row justify-content-md-center">
<div class="col mt-4">
<?php
if (have_posts()) : while (have_posts()) : the_post();
if (has_post_thumbnail()) {
the_post_thumbnail('medium', ['class' => 'img-fluid rounded d-block float-lg-start me-2']);
}
?>
<h1><?php the_title(); ?></h1>
<?php
the_content();
endwhile;
endif;
?>
</div>
</div>
</div>
<div class="album py-5 bg-light">
<div class="container">
<h2>Nos derniers articles :</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<?php $the_query = new WP_Query('posts_per_page=3');
// Start our WP Query
while ($the_query->have_posts()) : $the_query->the_post();
// Display the Post Title with Hyperlink
?>
<div class="col">
<a class="card" href="<?php the_permalink() ?>">
<div class="card shadow-sm">
<?php the_post_thumbnail('custom-thumb', ['class' => 'img-fluid rounded d-block float-lg-start w-100 custo']) ?>
<div class="card-body d-flex justify-content-between align-items-center">
<h2><?php the_title(); ?></h2>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Lire</button>
</div>
</div>
</div>
</a>
</div>
<?php
// Repeat the process and reset once it hits the limit
endwhile;
wp_reset_postdata();
?>
</div>
</div>
</div>
<?php
get_footer();
Si vous optez pour la création d’articles, il vous faudra créer l’archive et les catégories qui permettrons à l’internaute de naviguer librement.
category.php
<?php
/**
* The page to display all categories.
*
* This is the template that displays all of the <head> section and everything up until main.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage portfolio
* @since portfolio 1.3
*/
get_header();
$term = get_queried_object();
?>
<div class="album py-5 bg-light">
<div class="container mt-2">
<h2>Nos articles <?php single_cat_title();?> :</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => $term->slug,
'posts_per_page' => 9,
);
$the_query = new WP_Query($args);
// Start our WP Query
while ($the_query->have_posts()) : $the_query->the_post();
// Display the Post Title with Hyperlink
?>
<div class="col">
<a class="card" href="<?php the_permalink() ?>">
<div class="card shadow-sm">
<?php the_post_thumbnail('custom-thumb', ['class' => 'img-fluid rounded d-block float-lg-start w-100 custo']) ?>
<div class="card-body d-flex justify-content-between align-items-center">
<h2><?php the_title(); ?></h2>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Lire</button>
</div>
</div>
</div>
</a>
</div>
<?php
// Repeat the process and reset once it hits the limit
endwhile;
wp_reset_postdata();
?>
</div>
</div>
</div>
<?php
get_footer();
archive.php
<?php
/**
* The template to diplay archive pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage fimtheme
* @since fimtheme 1.0
*/
get_header();
?>
<!-- SUBMENU H1 -->
<div class="container-fluid p-0 mt-4 text-center submenu">
<h1>ARCHIVE</h1>
</div>
<!-- IMG + H1 END -->
<!-- PAGE CONTENT -->
<div class="container mt-5">
<div class="row justify-content-md-center">
<div class="col mb-4">
<?php
if (have_posts()) : while (have_posts()) : the_post();
endwhile;
endif;
?>
</div>
</div>
</div>
<!-- PAGE CONTENT END -->
<?php
get_footer();
Votre thème est à présent fonctionnel, bien que présentant quelques soucis d’affichage.
Il est cependant agréable de prévoir une page 404 pour permettre à l’internaute d’avoir un retour.
C’est le moment de laisser parler votre créativité !
Cependant, si vous avez un peu de mal à créer une page à votre goût, vous pouvez trouver de nombreuses ressources sur le net. Je peux vous recommander de vous rendre sur ce site afin d’en trouver une à votre goût.
Régler les derniers soucis d’affichage
Pour ce faire, nous allons ajouter du contenu dans la feuille de style « style.css » que nous avions créer lors de la première partie du tutoriel.
Contenu à ajouter au fichier style.css
.custom-logo {
width: 75px;
height: 75px;
}
footer ul li a {
text-decoration: none;
color: gray;
display: inline-block;
}
footer ul {
list-style-type: none;
}
#hero {
width: 100%;
height: 80vh;
background: url("assets/hero.png") top center;
background-size: cover;
position: relative;
}
#hero:before {
content: "";
background: rgba(0, 0, 0, 0.4);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#hero .container {
padding-top: 72px;
}
@media (max-width: 992px) {
#hero .container {
padding-top: 62px;
}
}
#hero h1 {
margin: 0;
font-size: 48px;
font-weight: 700;
line-height: 56px;
color: #fff;
font-family: "Poppins", sans-serif;
}
#hero h2 {
color: #eee;
margin: 10px 0 0 0;
font-size: 24px;
}
#hero .btn-get-started {
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 35px;
border-radius: 50px;
transition: 0.5s;
margin-top: 30px;
border: 2px solid #fff;
color: #fff;
}
#hero .btn-get-started:hover {
background: #5fcf80;
border: 2px solid #5fcf80;
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
@media (max-width: 768px) {
#hero {
height: 100vh;
}
#hero h1 {
font-size: 28px;
line-height: 36px;
}
#hero h2 {
font-size: 18px;
line-height: 24px;
}
}
a.card {
color: black;
text-decoration: none;
}Vous noterez qu’un fichier « hero.png » est appelé depuis le dossier « assets ». Faites à nouveau parler votre créativité ! Je vous conseille une taille de 2048px par 1024px afin de n’avoir aucun souci d’affichage.
Si vous n’avez pas beaucoup de connaissances en création graphique, vous pouvez utiliser Canva pour vous simplifier la vie.
Pensez votre optimisation
Optimiser le code et le chargement de votre page est important.
Cependant, il ne faut pas oublier que chaque image va alourdir votre site. N’hésitez pas à les compresser, vous pouvez pour cela utiliser des outils en ligne gratuit tel que compressor.io.
N’alourdissez pas non plus votre CMS avec de nombreux plug-ins et éviter d’en avoir plus de 15.
N’hésitez pas à modifier ce modèle de page pour qu’il colle plus à votre personnalité !
