Wordpress tips & tricks by Rhumy

Les différents fichiers qui composent Wordpress La fonction bloginfo Les includes Les boucles L'en-tête du ficher style.css L'en-tête d'un modèle de page Les marqueurs conditionnels Les template tags Faire un lien vers une page d'archive pour un type de contenu personnalisé Naviguer d'article en article Afficher le nom de la catégorie en cours Permettre aux extensions que vous installez qu'elles s'installent dans le head ou le footer de votre site Le fichier functions.php Les extensions sympas :)

Les différents fichiers qui composent Wordpress

Consulter la hiérarchie des fichiers modèles de Wordpress

index.php

Fichier obligatoire pour la création d'un thème. Il est le fichier que Wordpress appelle quand il n'a rien d'autre sous la main pour afficher du contenu. Mais il sert principalement à afficher la page d'accueil. Ce fichier doit être placé à la racine du thème.

header.php

Fichier de type "include" dans lequel vous allez isoler tout le code qui est amené à être répèté dès le début de toutes vos pages, pour vous faciliter sa mise à jour par la suite. Ce fichier doit être placé à la racine du thème.

footer.php

Fichier de type "include" dans lequel vous allez isoler tout le code qui est amené à être répèté à la fin de toutes vos pages, pour vous faciliter sa mise à jour par la suite. Ce fichier doit être placé à la racine du thème.

style.css

C'est la feuille de style qui permet à Wordpress d'identifier un thème et à le rendre valide. Elle doit reprendre un code d'introduction sous forme de commentaire (voir ci-dessous). Elle doit être placée à la racine du thème au même titre que les autres fichiers php.

functions.php

C'est le fichier qui ajoute des fonctionnalités à votre Wordpress comme par exemples les images à la une, la possibilité d'avoir des menus dynamiques, etc. Ce fichier doit être placé à la racine du thème.

single.php

C'est la représentation d'un article (de base) seul. Quand vous cliquez sur un article à partir de la homepage pour en avoir un aperçu complet, c'est ce fichier qui est chargé par Wordpress.

single-nomdutypedecontenu.php

C'est le template qui sert pour représentater un article (issu d'un nouveau type de contenu - ici "nomdutypedecontenu" - nom système) seul. Quand vous cliquez sur un article à partir de la homepage issu d'une boucle paramétrée pour afficher un autre type de contenu que le contenu de base, c'est ce fichier qui est chargé par Wordpress. S'il n'existe pas, Wordpress charge single.php

page.php

C'est le template qui sert pour représenter une page statique.

archive.php

C'est le template qui sert pour représenter un clic sur une catégorie, une date, le nom de l'auteur d'un article, etc. - issus des articles de base.

archive-nomdutypedecontenu.php

C'est le template qui sert pour représenter un clic sur une catégorie, une date, le nom de l'auteur d'un article, etc. - issus d'un type de contenu personnalisé, ici "nomdutypedecontenu".

La fonction Bloginfo();

La fonction bloginfo(); sur le codex WP

<?php bloginfo('name'); ?>

Affiche le nom du blog, n'importe où dans le site.

Rendu : Le nom de votre blog

<?php bloginfo('description'); ?>

Affiche la description de votre blog, n'importe où dans le site.

Rendu : La description de votre blog

<?php bloginfo('url'); ?>

Affiche l'URL complète d'accès à la page d'accueil de votre site.

Rendu : http://www.example.com/home

<?php bloginfo('stylesheet_url'); ?>

Affiche l'URL complète d'accès au ficher style.css qui se trouve à la racine de votre thème.

Rendu : http://www.example.com/home/wp/wp-content/themes/largo/style.css

<?php bloginfo('stylesheet_directory'); ?>

Affiche l'URL complète d'accès au dossier racine de votre thème (sans préciser un fichier).

Rendu : http://www.example.com/home/wp/wp-content/themes/largo

<?php bloginfo('template_directory'); ?>

Affiche l'URL complète d'accès au dossier racine de votre thème (sans préciser un fichier).

Rendu : http://www.example.com/home/wp/wp-content/themes/largo

Les includes

<?php get_header(); ?>

Affiche tout le contenu issu du fichier header.php à l'endroit où la fonction est appelée

La fonction get_header(); sur le codex WP

<?php get_footer(); ?>

Affiche tout le contenu issu du fichier footer.php à l'endroit où la fonction est appelée

La fonction get_footer(); sur le codex WP

Les boucles

La boucle sur le codex

La boucle simple sur BBX Wordpress

La boucle de base

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
Le contenu à boucler ici
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

À placer principalement sur la page single, pour permettre l'affichage du contenu dynamique.

La boucle modifiée ou avec paramètres

<?php
$query = new WP_Query(array('post_type' => 'works', 'posts_per_page' => 1));;
if($query->have_posts()) : while($query->have_posts()) : $query->the_post();
?>
Le contenu à boucler ici
<?php endwhile; endif; ?>

Permet, grâce à ses paramètres, d'afficher un contenu d'un certain type (avec post_type), d'en afficher un certain nombre (avec posts_per_page), etc.

L'en-tête du ficher style.css

/*
Theme Name: OC
Theme URI: http://www.olivier-ceressia.be
Description: Webdesigner online portfolio
Version: 1.0
Author: The_OC_be
Author URI: http://www.olivier-ceressia.be
Tags: responsive, fresh, nice
*/

Elle est essentielle au bon fonctionnement d'un thème (au même titre que le fichier index.php). Les informations reprises dans cette en-tête permettent à Wordpress d'identifier le thème selon différents critères. Attention, à ne jamais supprimer !

L'en-tête d'un modèle de page

<?php
/*
Template Name: Contact
*/
?>

Quand vous créez, au même niveau que les autres ficheirs php, un fichier qui porte n'importe quel nom avec l'extension .php et que vous lui indiquez en premier lieu cette en-tête, vous offrez la possibilité à Wordpress, quand vous créez une page dans Wordpress, d'attacher cette page à ce modèle et de reprendre sa structure pour afficher le contenu.

L'en-tête d'un template de page sur le codex WP

Les marqueurs conditionnels

Les marqueurs conditionnels sur le codex WP

<?php if (is_home()) { Votre contenu } ?>

Marqueur conditionnel qui vérifie si on se trouve sur la homepage et affiche le contenu entre les { } si la condition est remplie.

<?php if (is_single()) { Votre contenu } ?>

Marqueur conditionnel qui vérifie si on se trouve sur une page de type single (peu importe de quel type de contenu) et affiche le contenu entre les { } si la condition est remplie.

<?php if (is_page()) { Votre contenu } ?>

Marqueur conditionnel qui vérifie si on se trouve sur une page et affiche le contenu entre les { } si la condition est remplie. Vous pouvez indiquer le nom d'une page (ou son id) entre les parenthèses (ex : is_page('contact') ) pour avoir un affichage affiné selon la page sur laquelle vous vous trouvez.

Les template tags

Tous les template tags sur le codex WP

<?php the_title(); ?>

Affiche le titre de l'article ou de la page.

the_title(); sur le codex WP

<?php the_content(); ?>

Affiche le contenu de l'article ou de la page.

the_content(); sur le codex WP

<?php the_excerpt(); ?>

Affiche l'extrait de l'article ou de la page si vous l'avez rempli côté administration.

the_excerpt(); sur le codex WP

<?php the_category(); ?>

Affiche les categories (cliquables) rattachées à l'article (s'il s'agit des articles de base) ou à la page.

the_category(); sur le codex WP

<?php the_author(); ?>

Affiche le nom de la personne qui a rédigé l'article.

the_author(); sur le codex WP

<?php the_post_thumbnail(); ?>

Affiche l'image à la une. Attention, il faut activer cette fonctionnalité dans le fichier functions.php.

the_post_thumbnail(); sur le codex WP

<?php the_date(); ?>

Affiche la date de publication de l'article. Attention, si vous avez plusieurs articles sur la homepage (par ex.) et qu'ils ont la même date de publication, la date ne s'affichera qu'une seule et unique fois. Utilisez plutôt the_time() dans ce cas-là.

the_date(); sur le codex WP

<?php the_time(); ?>

Affiche l'heure de publication de l'article. Comme les heures sont à chaque fois unique, vous n'aurez pas le même problème qu'avec the_date(). Il vous suffit de passer des paramètres dans the_time() pour l'afficher comme s'il s'agissait d'une "date".

Par exemple : <?php the_time('d-m'); ?> affichera 27-11 - Voir le formattage des dates dans WP

the_time(); sur le codex WP

<?php the_permalink(); ?>

Affiche l'URL permanente d'un lien. À insérer généralement dans l'attribut href d'une balise <a>.

the_permalink(); sur le codex WP

Naviguer d'article en article

<?php next_post_link('%link', 'Article suivant', TRUE); ?> et <?php previous_post_link('%link', 'Article précédent', TRUE);?>

Permet de faire un lien vers l'article suivant ou précédent, qu'ils soient dans la même catégorie, ou pas.

%link sert à générer un lien sur ce qui sera mis dans le paramètre suivant.

Le deuxième attribut ('Article suivant') permet de personnaliser le lien, vous pouvez aussi y insérer %title et il affichera le nom de l'article suivant/précédent plutôt que votre texte perso.

Si le 3e paramètre est réglé sur TRUE, alors le next et previous ne fonctionne qu'à l'intérieur d'articles pour lesquels vous avez assigné la même catégorie. Par défaut, est réglé sur FALSE si vous n'indiquez rien.

next_post_link(); sur le codex WP

previous_post_link(); sur le codex WP

Afficher le nom de la catégorie en cours

<?php single_cat_title('Archives pour '); ?>

Permet d'insérer le nom de la page de la catégorie (ou archive) sur laquelle on se trouve. Le paramètre ("Archives pour") permet de faire précéder le nom de la catégorie d'un texte perso.

single_cat_title(); sur le codex WP

Permettre aux extensions que vous installez qu'elles s'installent dans le head ou le footer de votre site

<?php wp_head(); ?> et <?php wp_footer(); ?>

Ouvre 2 portes pour les extensions que vous installez à partir de Wordpress pour les rendre fonctionnelles. wp_head(); est à placer avant la fermeture de votre </head> et wp_footer(); avant la fermeture de votre balise </body>

Le fichier functions.php

Activer les images à la une

Permet d'activer les images à la une côté administration. Pour les appeler côté PHP, utilisez le template tag the_post_thumbnail(); .

add_theme_support( 'post-thumbnails' );

Définir une taille de vignette et autoriser le Crop-mode

Permet d'ajouter une taille de vignette personnalisée dans Wordpress et de l'utilise avec the_post_thumbnail('nom_de_la_vignette').

add_image_size( 'nom_de_la_vignette', 618, 380, true );

Empêcher Wordpress de placer les attributs width et height sur les balises img

Permet de contrer un problème lier à la génération automatique des attributs HTML width et height sur les balises IMG quand Wordpress les insère côté HTML lui-même.

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}

Activer la gestion des menus avec Wordpress

Permet d'activer la gestion des menus par l'interface d'administration de Wordpress. Pour afficher le menu, indiquer wp_nav_menu(); là où vous désirez voir apparaître le menu sur votre site. Attention, ce code génère déjà ul, li et a.

Pour activer la fonction dans le fichier functions.php :

add_theme_support( 'menus' );

Pour afficher votre menu là où vous le désirez :

<?php wp_nav_menu(); ?>

Activer et afficher les widgets à un endroit précis

Permet d'activer les widgets pour le thème en cours, de donner un nom à la zone en question et de lui attribuer les widgets désirés. Les widgets permettent d'utiliser des fonctionnalités pré-écrites pour vous par Wordpress comme : les articles récents, un calendrier des publications, un accès aux différentes catégories, les commentaires récents, un nuage de tags mais aussi tout autre plugin que vous aurez installé et qui a prévu un Widget pour Wordpress.

À mettre dans le fichier functions.php :

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
)); }

À mettre où vous voulez voir apparaître la zone de widget (remplacer 'footer' par l'id indiqué ci-dessus) :

<?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('footer') ) ?>

Les extensions sympas :)

Types - Custom Fields and Custom Post Types Management

Vous permet de créer de nouveaux types de contenu, de nouveaux types de taxonomies (pour qualifier le contenu avec une bibliothèque de termes) et des champs personnalisés. On a très souvent besoin de ce plugin pour un projet.

Pour afficher des images (une ou plusieurs) à partir d'un champ perso de type "image" :
<?php $test = types_render_field("le_nom_systeme_de_votre_champ_perso", array("output" => "html"));
echo $test; ?>

Pour afficher le contenu d'un champ de type "ligne unique" :
<?php echo(types_render_field('le_nom_systeme_de_votre_champ_perso', array())); ?>

Pour n'afficher un bloc HTML que si le champ perso qu'il contient est rempli :

<?php if(types_render_field("le_nom_de_votre_champ", array()) != "") {?>
Votre code html
<?php } ?>

Types - Custom Fields and Custom Post Types Management

Admin menu editor

Vous permet de réorganiser et renommer les menus d'administration de Wordpress. Permet aussi de cacher les items dont on n'a pas besoin.

Admin menu editor

Contact form 7

Vous permet de créer et intégrer rapidement des formulaires fonctionnels dans vos pages, vos articles ou n'importe où sur votre site.

Contact form 7

Post Types Order

Vous permet de réorganiser vos articles sans devoir modifier leur date de publication mais simplement en faisant un drag & drop.

Post Types Order

Under Construction

Vous permet de travailler sur votre site en ligne en mettant une page d'attente pour vos utilisateurs.

Under construction

qTranslate

Vous permet de passer un site en multilingue assez facilement.

qTranslate

Created with passion by Olivier Céréssia