[WORDPRESS] créer son propre thème

Créé le : 26 mars 2014
Catégorie: Divers
Mise à jour : 21 septembre 2016

[WORDPRESS] créer son propre thème

Article grandement inspiré de fran6art.com/wordpress/creez-votre-theme-wordpress-de-a-a-z

J’ai essayé de faire assez conci pour rapidement créer votre propre template.

Attention il vous faut quand même quelques prérequis : un peu de HTML, FTP, un peu PHP (le code est donné – cadeau!), beaucoup de CSS si vous voulez vraiment personnaliser à fond votre thème.

Le code fourni ne sera pas expliqué mais en général c’est assez clair pour être compris

Introduction

Par défaut il ne faut que très peu de fichiers pour qu’un site WordPress fonctionne (index.php et style.css sont les 2 seuls fichiers vraiment « vitaux »). Par contre si on veut affiner, et afficher des choses différentes en fonction des types de pages demandé, on peut aussi le faire….il suffit de bien comprendre le schéma suivant:

wordpress-architecture

En gros le fichier le plus important est index.php qui est le fichier qui reçoit toutes les demandes si aucun autre fichiers n’existe. Le plus simple est quand même de créer quelques fichiers de base: header.php, index.php, sidebar.php et footer.php

Création du thème

Création des fichiers

fran6art.com part d’un site en local mais je trouve cela un peu lourd (mais rien ne vous en empêche). Le plus simple est de partir d’un site WordPress déjà existant avec des articles, des pages, etc…Le code peut être changé directement depuis l’interface d’admin WordPress et le résultat est visible directement.

  1. Avec Filezilla créer un dossier vide sous wp-content/themes/nom-de-votre-theme
  2. dans ce nouveau dossier créer un fichier vide nommé index.php
  3. dans ce nouveau dossier créer un fichier vide nommé header.php
  4. dans ce nouveau dossier créer un fichier vide nommé sidebar.php
  5. dans ce nouveau dossier créer un fichier vide nommé footer.php
  6. dans ce nouveau dossier créer un fichier vide nommé style.css
  7. dans ce nouveau dossier créer un fichier vide nommé functions.php
  8. facultatif – dans ce nouveau dossier créer un fichier vide nommé searchform.php si vous voulez utiliser un champ de recherche
  9. facultatif – dans ce nouveau dossier créer un fichier vide nommé comments.php si vous voulez des commentaires sur votre site
  10. facultatif – une image de 300 x 240 pixels nommé screenshot.png pour l’aperçu du thème

Un peu de code…

Maintenant que vos fichiers existent, on peut aller dans l’interface d’admin et sélectionner votre thème. Aller sur apparence > editeur. Choisir les fichiers sur la droite pour voir et éditer le code. On va mettre quelques lignes de codes de base :

Dans header.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name') ?><?php if ( is_404() ) : ?> &amp;raquo; <?php _e('Not Found') ?><?php elseif ( is_home() ) : ?> &amp;raquo; <?php bloginfo('description') ?><?php else : ?><?php wp_title() ?><?php endif ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_head(); ?>
<?php wp_get_archives('type=monthly&amp;format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>
<div id="menu"><?php wp_nav_menu(); ?></div>

Dans index.php

<?php get_header(); ?> <!-- ouvrir header,php -->
<!-- début de la boucle - loop -->
<div id="content">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="post_content">
<!-- Contenu des articles - the_content peut être remplacé par the_excerpt pour avoir juste le début des articles -->
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<!-- fin de la boucle -->
<div class="navigation">
<?php posts_nav_link(' ','article + r&amp;eacute;cents','articles + anciens');?>
</div>
</div><!-- ferme le div page -->
<?php get_footer(); ?> <!-- ouvrir footer.php -->
</body>
</html>

Dans footer.php

<div id="footer">
<p>
Site by votre nom
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/fr/" target="_blank">L'ensemble du site est sous licence Creative Commons</a>
</p>
<p>C'est a dire que vous pouvez <strong>partager</strong> et <strong>adapter</strong> librement les articles
La seule contrainte est de citer l'auteur et vous n'avez pas le droit d'utiliser le contenu pour en faire une utilisation commerciale.
</p>
<p>
<?php echo get_num_queries(); ?> requêtes. <?php timer_stop(1); ?> secondes.
</p>
</div>
<!-- Always have wp_footer() just before the closing </body> tag of your theme,
or you will break many plugins, which generally use this hook to reference JavaScript files.-->
<?php wp_footer(); ?>

Dans style.css

/*
Theme Name: Nom de votre thème
Theme URI: http://www.votresite.com/
Description: courte description - exemple: primer thème de Cyberscooty.
Version: 0.1
Author: Votre nom
on peut mettre ici ne qu'on veut: du texte, des urls, moi je m'en sert comme pense-bête, on peut aussi ne rien mettre.
*/

A partir de maintenant si vous aller sur votre site vous voyez une page avec le titre de votre site, sa description, le titres des articles et le nom de votre site dans l’entête de votre navigateur.

Dans siderbar.php

<div class="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<li id="search"><?php include(TEMPLATEPATH . '/searchform.php'); ?></li>
<li id="calendar"><h2>Calendrier</h2>
<?php get_calendar(); ?>
</li>
<li><h2>Categories</h2>
<ul>
<?php wp_list_cats('sort_column=name&amp;optioncount=1&amp;hierarchical=0'); ?>
</ul>
</li>
<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php get_links_list(); ?>
<li><h2>Infos Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML valide</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<li><a href="http://wordpress-fr.net/" title="Communauté française de WordPress et WPmu.">WordPress Francophone</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<li><h2>Abonnez-vous au blog !</h2>
<ul>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="Flux RSS des articles">Flux RSS des articles</a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="Flux RSS des commentaires">Flux RSS des commentaires</a></li>
</ul>
</li>
<?php endif; ?>
</ul>
</div>

Dans searchform.php

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Chercher" />
</div>
</form>

Dans functions.php – permet de « widgetiser » les entrées de la sidebar et d’ajouter le module des menus

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
add_theme_support( 'menus' );
// Add theme support for Featured Images
add_theme_support( 'post-thumbnails' );
?>

Mise en page générale du site

Le site dont j’ai fait référence au début place cette partie à la fin mais je pense que ce n’est pas très pratique. Avant de créer les fichiers secondaire il vaut mieux « figer » son index.php

Commencer à remplir son style.css pour placer les cadres où on le souhaite, modifier peut être son index.php pour mettre un div avant ou après un autre, supprimer ou modifier un peu de code, etc…

Ceci est un exemple de placement de cadre mais rien ne vous empêche de les placer autrement. Ajouter le code ci dessous à la suite de votre style.css

 

Créer un champ de recherche

Il suffit de mettre le code suivant pour avoir un champ de recherche où l’on veut.
Par exemple dans le header.php, dans index.php ou même dans le footer.php

Créations des fichiers dit « secondaires »

On peut créer d’autres fichiers selon ce que la page doit afficher comme par exemple:

  • archive.php : quand on clique sur une date pour afficher les articles du mois
  • search.php : résultats d’une recherche
  • page.php : affichage d’une page (ce n’est pas un article)
  • single.php : affichage d’un article seul

Tous ces fichiers (voir le schéma du début pour tous les fichiers possibles) se codent très facilement. On copie l’ensemble de index.php, on colle dans le fichier et on modifie ce que l’on veut.

Exemples :

  • search.php : dans les résultats d’une recherche on peut afficher que les titres des articles, enlever alors le code

  • archive.php : voir rapidement les articles du mois avec seulement le début de l’article et non tous l’article. Remplacer


par

  • page.php : supprimer les metatags
  • single.php : afficher tout l’article au lieu de seulement la description si c’est le cas dans index.php

Ajout des commentaires

dans le fichier comments.php mettre le code suivant:


<?php // Do not delete these lines
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Ne pas t&amp;eacute;l&amp;eacute;charger cette page directement, merci !');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
?>
<h2><?php _e('Prot&amp;eacute;g&amp;eacute; par mot de passe'); ?></h2>
<p><?php _e('Entrer le mot de passe pour voir les commentaires'); ?></p>
<?php return;
}
}
/* This variable is for alternating comment background */
$oddcomment = 'alt';
?>
<!-- You can start editing here. -->
<div class="cadre_commentaires">
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('Pas de commentaire', 'Un commentaire', '% commentaires' );?> pour &amp;#8220;<?php the_title(); ?>&amp;#8221;</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e('le'); ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('j F, Y') ?> <?php _e('&amp;agrave;');?> <?php comment_time() ?></a> <?php _e('Said&amp;#58;'); ?> <?php edit_comment_link('Edit Comment','',''); ?>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Votre commentaire est en cours de mod&amp;eacute;ration'); ?></em>
<?php endif; ?>
</div>
<?php comment_text() ?>
</li>
<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Les commentaires sont fermŽs !</p>
<?php endif; ?>
<?php endif; ?>
</div>
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Laissez un commentaire</h3>
<?php if ( get_option('comment_registration') &amp;&amp; !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">connect&amp;eacute;</a> pour laisser un commentaire.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="D&amp;eacute;connect&amp;eacute; de ce compte">D&amp;eacute;connection &amp;raquo;</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="40" tabindex="1" />
<label for="author"><small>Nom <?php if ($req) echo "(requis)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="40" tabindex="2" />
<label for="email"><small>email (ne sera pas publi&amp;eacute;) <?php if ($req) echo "(requis)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="40" tabindex="3" />
<label for="url"><small>Site Web</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> <?php _e('Vous pouvez utiliser ces tags&amp;#58;'); ?> <?php echo allowed_tags(); ?></small></p>-->
<p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Envoyer" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>

Ensuite il suffit de rajouter les lignes suivante dans le fichier single.php (sous « php the_content » et au-dessus de « php endwhile »)

…et pour finir, beaucoup de CSS

Maintenant que l’architecture de votre site est en place avec tous les éléments qui vont bien pour qu’il soit fonctionnel, il « suffit » de le rendre un peu joli.

Il est clair qu’il vaut connaître un peu le CSS. Mieux savoir ce qu’est un padding, background, margin, font-size, etc…

Quoi qu’il en soit les navigateurs de type Chrom(ium) et Firefox ont de base de très bon outils pour aider au développement de votre CSS, n’hésitez pas a en abuser.

Quelques techniques:

  • Eviter de modifier plusieurs valeurs en même temps, si vous modifier plusieurs valeurs notamment des padding ou margin en même temps vous risquez de perdre un peu les pédales
  • tester d’abord avec l’outil de votre navigateur puis si cela vous convient mettre le code dans le style.css L’idéal est d’avoir un double écran sur votre ordinateur, un pour tester, l’autre avec le code pour le mettre à jour une fois validé
  • si vous êtes un peu perdu dans toutes les div, mettre des couleurs « flash » – temporairement bien entendu- exemple: background:red; ou background:blue;. Cela vous permettra de mieux visualiser la div que vous modifiez
  • Si vous ne connaissez pas bien les entrées CSS ne pas hésiter à googler duckduckger – exemple: chercher « CSS taille du texte ». Je vous recommande par ailleurs l’excellent site www.alsacreations.com. Si vous avez, dans les résultats de votre recherche, le site d’alsacreations empressez vous de cliquer, vous y trouverez souvent votre réponse

Ajout de fonctionnalités (« les options »)

Dans le fichier index.php ou dans les fichiers secondaires, on peut ajouter des « options » (bouts de code qui ajoutent des fonctions à votre thème).

Image à la Une

  • Important : Doit être placé dans la boucle (loop)
<!-- début affichage de l'image à la une -->
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('medium'); ?>
</a>
<?php endif; ?>
<!-- fin affichage de l'image à la une -->

Métadata (date de l’article, nb commentaires, etc…)

  • Important : Doit être placé dans la boucle (loop)
<!-- début affichage des metadata -->
<p class="postmetadata">
<?php the_time('j F Y') ?> | <?php the_category(', ') ?> <?php comments_popup_link('', '&amp;#124; 1 Commentaire', '&amp;#124; % Commentaires'); ?> <?php edit_post_link('Editer', '&amp;#124; ', ''); ?>
</p>
<!-- fin affichage des metadata -->

Navigation – Pagination

Si vous avez beaucoup d’articles il vous faut la fonction pour aller à la page suivante (ou revenir à la page précédente). Placer ce code dans index.php (après la boucle et avant le footer)

Nouveau code

<?
// Previous/next page navigation.
			the_posts_pagination( array(
				'prev_text'          => __( 'Previous page', 'twentysixteen' ),
				'next_text'          => __( 'Next page', 'twentysixteen' ),
				'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>',
			) );

?>
  • Exemple de CSS
.navigation{padding:1vw;}
.navigation h2{display:none;}
.page-numbers {padding: 0 0.5vw;}

Ancien code : pour info

<!-- début affichage navigation -->
<div class="navigation">
<?php posts_nav_link(' ',
'<img class="nav_suivant" alt="fleche droite" src="img/suivant.svg" title="page suivante"/>',
'<img class="nav_precedent" alt="fleche gauche" src="img/precedent.svg" title="page pr&amp;eacute;c&amp;eacute;dente"/>');
?>
</div>
<!-- fin affichage navigation -->

Barre des Widgets / la Sidebar

Ce code est placé généralement dans le header, mais selon la disposition que l’on veut on peut le mettre dans index.php, footer.php à l’endroit que l’on souhaite.

<div id="sidebar">
<?php get_sidebar(); ?>
</div>

 

Pour aller encore plus loin

Vous pouvez aller regarder ces pages :

 

 

sources:

https://codex.wordpress.org/Function_Reference
http://www.fran6art.com/wordpress/creez-votre-theme-wordpress-de-a-a-z/

Tags: -

Laissez un commentaire