Créer son thème Wordpress
Tutoriel par Montage203 ·
Discord
Ce tutoriel permet de créer son propre thème Wordpress.
Ce tutoriel permet de créer son propre thème Wordpress.
Cette étape est obligatoire et permet d'avoir un premier résultat.
/* Theme Name: NOM DE VOTRE THEME
URI: http://www.VOTRE-SITE.COM
Description: DESCRIPTION DE VOTRE THEME.
Version: 1.0
Author: VOTRE NOM
*/
Maintenant que nous avons affiché le contenu de notre page index.php en activant le thème, passons en revue les quelques tags WP les plus utiles pour commencer, je pense notamment au:
<?php
bloginfo('stylesheet_directory');
?>
<!-- chemin vers le répertoire/thème du site
-->
<?php
bloginfo('name');
?>
<!-- nom du site -->
<?php
bloginfo('description');
?>
<!-- description du site -->
Nous allons maintenant créer une boucle qui permet d’afficher tous les articles / posts. Par défaut ils seront affichés par ordre antéchronologique (les plus récent en premier)
<!-- Commencer la boucle -->
<?php
if
(have_posts())
:
while
(have_posts())
:
the_post();
?>
<!-- Afficher les contenus de la boucle -->
<?php
the_post_thumbnail();
?>
<!-- remplace la balise <img> ! alternativement,
on peut remplacer l'attribut src de la balise <img>
par -->
<?php
echo
get_the_post_thumbnail_url();
?>
<?php
the_title();
?>
<!-- titre du post -->
<?php
the_content();
?>
<!-- contenu du post -->
<?php
the_date();
?>
<!-- date du post -->
<?php
the_permalink();
?>
<!-- lien vers le détail du post -->
<?php
the_time();
?>
<!-- date de création du post -->
<?php
the_author();
?>
<!-- auteur du post -->
<?php
the_category();?>
<!-- la/les catégorie(s) assignée(s) au post
-->
<!-- Terminer la boucle -->
<?php
endwhile;
endif;
?>
Cette boucle permet d’afficher tous les articles / posts en dehors de la page des articles.
<!-- Commencer la boucle -->
<?php
$args = array( 'numberposts' => 6, 'order'=> 'DESC', 'orderby' => 'date' );
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post);
?>
<!-- Afficher les contenus de la boucle -->
Voir étape 3
<!-- Terminer la boucle -->
<?php
endforeach;wp_reset_query();
?>
Cette boucle permet d’afficher tous les articles / posts d'une seule catégorie.
<!-- Commencer la boucle -->
<?php
$catquery = new WP_Query( 'cat=2' );
?>
<?php
while($catquery->have_posts()) : $catquery->the_post();
?>
<!-- Afficher les contenus de la boucle -->
Voir Étape 3
<!-- Terminer la boucle -->
<?php
endwhile;
?>
On peut aussi filtrer les boucles pour n’afficher que ce qui nous intéresse.
<!-- n'afficher que les contenus de type 'post' (dans une page p.ex. -->
<?php query_posts('post_type=post') ?>
<!-- n'afficher que le premier post. On n'affiche qu'un post -->
<?php query_posts('posts_per_page=1'); ?>
<!-- Afficher uniquement le 2e, 3e et 4e post. On skip le premier et on en affiche 3 au total-->
<?php query_posts('offset=1&posts_per_page=3'); ?>
<!-- afficher tout excepté le premier post. -->
<?php query_posts('offset=1'); ?>
<!-- afficher tout excepté les 4 premiers posts. -->
<?php query_posts('offset=4'); ?>
Dans functions.php, ajouter le code suivant
//activer image mise en avant
add_theme_support( 'post-thumbnails' );
Vous verrez que par défaut il ne vous est pas possible d’ajouter un menu. Il faut le spécifier à WordPress. Dans le fichier functions.php, ajouter le code suivant
// ajouter une zone de menu
register_nav_menu( 'primary', __( 'Navigation Menu' ) );
Ensuite dans votre thème, vous pouvez appeler votre menu de cette façon
<?php wp_nav_menu(); ?>
Dans functions.php, ajouter le code suivant
//personaliser "lire la suite"
function modify_read_more_link() {
return '<a class="more-link" href="' . get_permalink() . '">lire la suite...</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );
Dans functions.php, ajouter le code suivant
// Enregistrer une zone appelée 'Ma zone de widgets'
function add_widget_Support() {
register_sidebar( array(
'name' => 'Ma zone de widgets',
'id' => 'zone-widgets',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );
Ensuite dans votre thème, vous pouvez appeler votre widget de cette façon
<?php dynamic_sidebar( 'zone-widgets' ); ?>
<body <?php body_class(); ?>>
Pour terminer, il faut encore ajouter une fonction qui permettent à WordPress d'aller chercher la page header.php et l'injecté dans la page
Avec cette méthode, vous pouvez avoir qu'un seul fichier qui comporte le menu. Et donc, si vous y faites une modificationd dessus, la modification se fera sur toutes vos pages.
Pour appeler header.php, ajouter le code suivant
<?php wp_header(); ?>
Pour appeler footer.php, ajouter le code suivant
<?php wp_footer(); ?>