Category

Thèmes Wordpress

PHP Code Sniffer

PHP Code Sniffer pour WordPress

By | Aide et astuces, Plugin Wordpress, Thèmes Wordpress | No Comments

Utilisez PHP Code Sniffer pour vérifier que le code de vos thèmes et plugin respectent bien le standard WordPress.

Introduction

Les langages très hauts niveaux dont PHP n’ont pas de contraintes syntaxiques. En effet, il est parfaitement possible d’écrire l’intégralité de son code sur une seule et même ligne, le tout sans espace. Pour le commun des mortels cela devient vite illisible, mais pas pour l’interpréteur PHP qui n’y prêterait même pas attention.

Pour remédier à ce problème, des normes internationales telles que PSR (pour ne citer que la plus connue), ont vu le jour afin de structurer le code. Cela permet à une équipe de collaborer plus facilement et de créer un code source homogène.

PHP Code Sniffer est un ensemble de deux scripts:

  • phpcs analyse de script PHP afin de s’assurer qu’ils respectent bien les normes d’écritures internationales telles que PSR-1, PSR2, Squiz, Zend, Pear, MySource et Phpcs.
  • phpcbf corrige automatiquement toutes les erreurs rencontrées.

Le standard WordPress n’est pas installé par défaut. C’est pourquoi JD Grimes, le développeur de WordPress-Coding-Standards propose une installation tout en un via Composer.

Installer PHP Code Sniffer avec le standard WordPress

PHP Code Sniffer requiert PHP 5.1.2 ou supérieur. Pour vérifier votre version taper la ligne suivante dans le terminal:


php -v

Vérifiez également que le gestionnaire de dépendances Composer est également installé.


composer -v

Pour l’installation procédez comme suit:


composer create-project wp-coding-standards/wpcs:dev-master --no-dev

Tester son code avec PHP Code Sniffer

Depuis le dossier où se trouvent phpcs et phpcbf soit: /wpcs/vendor/bin utilisez les commandes suivantes:


php phpcs --standard=Wordpress /chemin_vers_votre_code

Si votre code contient des ERROR(S) et des WARNING(S), utilisez phpcbf pour les corriger automatiquement.


php phpcbf --standard=Wordpress /chemin_vers_votre_code

Liens utiles

Github officiel de PHP Code Sniffer https://github.com/squizlabs/PHP_CodeSniffer

Github officiel du WordPress-Coding-Standards https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards

Site officiel de Composer https://getcomposer.org

Utiliser Twig pour les thèmes WordPress

By | Aide et astuces, Le graphisme et wordpress, Thèmes Wordpress, Wordpress 4.4 | No Comments

Comment utiliser le moteur de rendu de chez SensioLab, Twig pour les thèmes WordPress ?

Par défaut, WordPress n’utilise aucun moteur de rendu. Pour les développeurs front ayant l’habitude d’en utiliser et plus particulièrement Twig, ils pourront se réjouir de savoir qu’il est possible de l’utiliser pour créer des thèmes WordPress.

Installation du plugin Timber

Cette compatibilité passe par l’installation d’un plugin nommé Timber. Pour l’installer allez dans Extensions -> Ajouter. Recherche Timber. Lancez l’installation puis activer le plugin.

Utilisation

Timber ne permet pas une substitution totale de PHP au profit de Twig. C’est pourquoi il va tout de même falloir créer les fichiers de templates de WordPress avec PHP. Voir l’article intitulé les fichiers de templates de WordPress pour de plus de détails.

Les fichiers PHP seront placés à la racine du thème, quant aux fichiers Twig, ils seront dans un nouveau sous-dossier nommé views.

Les fichiers Twig et PHP peuvent avoir des noms différents. Mais dans cet exemple les noms seront les mêmes. Dans chaque fichier PHP (sauf fonctions.php) ajouter uniquement le code source suivant:


$context = array();
$context['message'] = 'Hello Timber!';
Timber::render('header.twig', $context);

Ces lignes de code vont permettre au plugin Timber de transpiler les fichiers Twig en PHP et ce, en fonction des noms des fichiers renseignés à la troisième ligne.

Exemple avec le fichier d’en-tête fichier header.php contenant le code source ci-dessus. Créez également le fichier /views/header.twig qui contiendra tout le code (HTML, Twig, JS…). Le fichier header.twig sera transpilé (converti) à la volée par Timber et le résultat de cette transpilation sera placé dans le fichier header.php. De ce fait, WordPress pourra charger le fichier header.php en toute quiétude.

Le fichier Twig devrait ressembler à ceci:


{# welcome.twig #}
<div class="welcome">
    <h3>{{message}}</h3>
</div>

Liens utiles

Le site officiel de Timber: http://upstatement.com/timber/

La documentation officiel de Twig: http://twig.sensiolabs.org/documentation

Personnaliser WooCommerce

By | Le graphisme et wordpress, Plugin Wordpress, Thèmes Wordpress, woocommerce, Wordpress 4.4 | No Comments

Personnaliser WooCommerce afin qu’il s’intègre parfaitement au design de votre thème.

WooCommerce possède sa propre loop (boucle) pour afficher les produits dans les pages ainsi que ses propres fichiers de templates (modèles).

Rappel des fondamentaux

Dans un précédant article intitulé Installer WooCommerce, est expliqué comment procéder lorsque votre thème ne déclare pas le support de WooCommerce (voir paragraphe L’intégration du thème).
Le principe est de créer un nouveau modèle de page, est de substituer la boucle par défaut (la boucle du thème) par celle de WooCommerce.

Quelque soit thème choisi, les éléments propres à WooCommerce ont toujours le même aspect.
Pourquoi ? Tous simplement parce que WooCommerce possède ses propres fichiers de templating ainsi que son propre fichier CSS. Ce qui n’est pas toujours (jamais) en accord avec le reste du thème.

Modifier les fichiers de templating

Heureusement pour nos confrères Web Designers ce n’est pas à eux de s’adapter aux templates de WooCommerce, mais bien l’inverse.

Ces fichiers de templating se trouvent dans /wp-content/plugins/woocommerce/templates.
Pour les modifier sans prendre le risque de les perdre lors de la prochaine mise à jour de WooCommerce, rendez-vous à la racine de votre thème actif, créez un dossier nommé woocommerce (respectez bien la case), puis faites un copier/coller des fichiers à personnaliser du dossier /wp-content/plugins/woocommerce/templates vers /wp-content/votre_theme_actif/woocommerce/ et de faire les modifications dans ce dernier.

Ainsi, les fichiers contenus dans le thème actif seront prioritaires sur ceux de WooCommerce.

Attention toutefois à bien respecter les noms des fichiers. Pour ceux contenues dans des dossiers (ex: email), il faudra créer un dossier email à la racine du dossier /wp-content/votre_theme_actif/woocommerce/.

Personnaliser les Email de WooCommerce

Les différents Emails envoyés par votre site e-commerce via WooCommerce peuvent être eux aussi personnalisés.
Les templates par défaut se trouvent dans /wp-content/plugins/woocommerce/templates/emails.
Comme pour les fichiers de templatings, dupliquer le/les modèle(s) d’Email(s) à personaliser dans le thème actif. Plus précisément dans /wp-content/votre_theme_actif/woocommerce/emails.

fichiers de templates de Wordpress

Les fichiers de templates de WordPress

By | Aide et astuces, Thèmes Wordpress | One Comment

Une liste complète des fichiers de templates de WordPress pour bien commencer son développement « front ».

Un thème WordPress est composé de templates qui correspondent à des fichiers PHP permettant de générer et d’afficher le contenu d’un site.

La plupart du temps les fichiers de templates de WordPress sont utilisés sur toutes les pages, tel que header.php pour l’en-tête, footer.php pour le pied de page, ou encore sidebar.php pour afficher la barre latérale.

Les autres fichiers affichent un contenu dans des conditions spécifiques, tel que 404.php lorsque l’on tente d’accéder à une page qui n’existe pas.

Le dossier contenant le templates d’un thème doit impérativement être placé dans le dossier /wp-content/themes/.

front-page.php
ou home.php
Page d’accueil du site
index.php Template par défaut, il est utilisé en dernier recours. Ce fichier est obligatoire lors de la déclaration d’un thème.
header.php Contient toutes les balises d’en-tête et meta d’un thème.
footer.php Pied de page d’un thème.
sidebar.php Barre latérale contenant les widgets.
archive.php Liste des articles classés par moi.
category.php Liste des articles d’une catégorie.
tag.php Liste des articles portant un mot-clé.
taxonomy.php Liste des articles d’une taxonomie.
attachement.php Fichier attaché à un articles ou une page.
page.php Contenu d’une page (fichier par défaut).
single.php Contenue d’un article.
author.php Article d’un auteur.
search.php Résultats d’une recherche
404.php Page d’erreur 404 lorsqu’une page n’est pas trouvée.
comments.php Affiche les commentaires des internautes.
functions.php Fichier de gestion du thème, permetant de gérer et d’utiliser les hooks de WordPress.
style.css Fichier pour déclarer et styler le thème WordPress.
screenshot.png Image d’aperçu du thème dans l’administration Apparence -> Thèmes. Dimentions: 300 x 225px.

Plus d’infos sur le site officiel de WordPress: http://codex.wordpress.org/Template_Hierarchy

Choisir son thème WordPress

By | Non classé, Thèmes Wordpress | No Comments

Une fois que l’on a installé WordPress il faut choisir un thème. Il y a, ne serait ce que pour la présentation du front-office, un thème choisi et pré installé, accompagné de deux ou trois autres thèmes développés par WordPress et assez sommaires.

C’est un choix difficile et qui n’est pas anodin car c’est ce qui va déterminer tout le visuel de votre site ou blog.

Dans un premier temps, vous devez déterminer entre un thème : Il peut être gratuit si vous partez sur une base légère et payant pour un thème plus fourni.

L’avantage des thèmes gratuit … est qu’ils, sont gratuits justement.

Le moins est que vous aurez des fonctionnalités limitées et que si vous souhaitez customiser votre thème pour le personnaliser, vous devrez obligatoirement soit vous lancer dans le code. Aujourd’hui ce sont les plugins qui font le travail, c’est donc tout l’intérêt d’un site développé ou plutôt intégré sur WordPress

Au contraire, les thèmes payant vous offrirons de nombreuses fonctionnalités et à un grand choix de styles. De même, ces thèmes sont régulièrement mis à jour et vous avez souvent soit un contact direct, soit un forum de support si vous avez besoin d’aide ou tout simplement des questions.

L’inconvénient est le prix qui souvent varie entre 30$ (environ 27€) à 120$ (environ 108€) pour un thème de qualité.

Attention, certains thèmes ont même tellement de fonctionnalités qu’il peut être difficile de les prendre en main. Evaluer votre besoin avant d’acheter un thème en fonction de ce que vous souhaitez comme site. Un simple site ou un site vitrine n’auront pas besoin de tant de fonctions.

Pour choisir votre thème, vous serez sans doute tenté de faire une recherche sur Google ou un autre moteur de recherche et là, vous allez vous retrouver dans la jungle des thèmes avec un nombre « hallucinant » de sites proposant ces services.

Limitez-vous aux sites « officiels » et reconnus, tels que :

https://theme.wordpress.com

http://themeforest.net : celui là n’est pas officiel mais il est reconnu et fait parti des bonnes bases sur lequel vous pourrez développer des sites efficaces. Les créateurs sont disponibles et peuvent répondre à des questions pour l’installation du thème ou d’un plugin.

Créer un thème WordPress sans taper une ligne de code

By | Le graphisme et wordpress, Thèmes Wordpress | One Comment

Créer un thème WordPress sans taper une ligne de code (ou WYSIWYG) sous Windows, Mac et Linux.

Lubith : le choix de la rédaction

Qu’ils soient gratuits, payants, en ligne ou installés en local sur votre PC, les générateurs de thème pour WordPress sont très nombreux. L’objectif de cet article n’est pas de tous les présenter, mais d’en présenter au moins un afin de se faire une idée de ce qu’il peut être fait sans trop de labeur.

Lubith est un service qui concilie beaucoup d’avantages :

  1. il est en ligne, donc multiplate-forme. Ce qui n’est pas le cas des logiciels qui doivent être installés en local qui ne fonctionne que sur Windows;
  2. il est gratuit;
  3. enfin Lubith est simple est ludique. Très axé sur le glisser/déplacer.

Outre l’aspect pécuniaire, il était important pour Formation-WP de ne pas faire publicité pour des logiciels payants.

Les premières étapes

Rendez-vous sur la page d’accueil de Lubith, puis cliquez sur Start Here it’s free. Créez un compte ou utilisez un compte existant sur les réseaux sociaux : Facebook, Google+ ou Yahoo.

La vidéo ci-dessous a été publiée sur Youtube par l’équipe de Lubith. Il s’agit d’un tutoriel vidéo pour aider ses nouveaux utilisateurs à créer un thème WordPress.

Installer son thème dans WordPress

Une fois le thème terminé, cliquez sur Test Theme afin de s’assurer que votre travail correspond bien à vos attentes. Si c’est le cas, cliquez sur le bouton Download (en haut à gauche). Lubith va créer un thème WordPress sous la forme d’un fichier ZIP.

Depuis le tableau de bord de WordPress allez dans Apparence -> Thèmes -> Ajouter -> Mettre un thème en ligne, puis cliquez sur Parcourir pour rechercher le fichier ZIP. Terminez l’installation en cliquant sur Installer maintenant.

Le thème est à présent installé, allez dans Apparence -> Thèmes -> Activer pour l’activer.

Créer un shortcode pour Wordpress

Créer un shortcode pour WordPress

By | Aide et astuces, Plugin Wordpress, Thèmes Wordpress | No Comments

Créer un shortcode pour WordPress qui facilite l’affichage et le contrôle de modules HTML.

Les shortcodes sont à insérer dans un aticle ou une page à partir de l’éditeur Visuel ou Text de WordPress, puis transformés par l’API Shortcode.

Créer un shortcode simple

Pour qu’un shortcode soit opérationnel, il faut en premier lieu le déclarer dans le fichier function.php du thème actif ou bien dans l’un des fichiers source d’un plugin.

Créez d’abord une fonction qui retourne une chaine de caractères ou un module HTML, puis utilisez la fonction add_shortcode (voir fichier /wp-content/shortcodes.php ligne 89 pour plus d’infos) pour associer le shortcode à la fonction précédemment déclarée.


function first_shortcode() {

	return 'My first shortcode';

}

add_shortcode('first', 'first_shortcode');

Dans cet exemple, est créé un shortcode [first] qui sera remplacé par la chaine de caractères My first shortcode par l’API Shortcode.

Nota: La fonction return peut être substituée par echo. Toutefois, avec echo, il n’est pas possible d’insérer ce shortcode a l’intérieur d’un bloc HTML comme dans l’exemple ci-dessous:




This is [first] !


Car le contenu du shortcode s’affichera devant la balise p, comme ceci:


My first shortcodeThis is !

Créer un shortcode avec des attribus

Les shortcodes ne se placent pas forcément au millieu d’un bloc de texte. L’inverse est également possible. Dans l’exemple ci-dessous un shortcode transforme une portion de texte en lien hypertexte:

function url_cb($atts, $content = null) {
	extract(shortcode_atts(array(
		"href" => 'http://'
	), $atts));
	return '<a href=""' . $href . '">' . $content . '</a>';
}

add_shortcode( 'url', 'url_cb');

La fonction du shortcode doit être composée de deux arguments:

  • $atts: les attributs du shortcode dont les valeurs par défaut peuvent être définies à l’aide de la fonction shortcode_atts()
  • $content: contenu qui doit être inséré entre les balises ouvrantes et formantes du shortcode lors de sa déclaration dans l’éditeur de texte.

[url href='http://www.formation-wp.com']Créer un shortcode avancé[/url]

Utiliser un shortcode dans un template

WordPress propose une fonction appelée do_shortcode. Avec cette fonction il est possible d’utiliser n’importe quel shortcode au sein d’un template de thème mais aussi d’un fichier source de plugin.


<?php echo do_shortcode('[the_shortcode]'); ?>

Autoriser les shortcode dans les widgets

Par défaut, les widgets n’interprètent pas les shortcodes. Pour que le widget Texte puisse le faire, il suffit d’ajouter le code suivant dans le fichier function.php du thème actif.


if ( !is_admin() ) {

	add_filter('widget_text'. 'do_shortcode');

}

Theme Wordpress gratuit en Material design

Theme WordPress gratuit en Material design

By | Le graphisme et wordpress, Thèmes Wordpress, Wordpress 4.2 | No Comments

Material Gaze est un theme WordPress gratuit en Material design. Basé sur le thème Stargazer, il reprend tous les codes du Material Design défini par Google.

Pour ceux qui ne connaissent pas encore le Material design, il s’agit d’un semble de règle de dessin établie par Google qui s’applique à la partie graphique des applications mobile (Android) et des sites Web.

Présenté en juin 2014 lors de la conférence Google I/O, commence doucement à conquérir le cœur des infographistes.

Pour ceux qui souhaitent rejoindre cette mouvance, voici un thème wordpress gratuit en Material design baptisé: Material Gaze.

Installation

Material Gaze, n’est pas un thème, mais un child theme (ou thème enfant) du thème Stargazer.

Par conséquant, il faut installé Stargazer et Material Gaze. Comme ils sont tous les deux gratuits, il est possible de lés installer de manière automatique.

Soit: Apparence -> Thèmes -> Ajout

Une fois Stargazer Material Gaze installé, activez Material Gaze.

Configuration

Les paramètres du thème se trouvent dans le menu Apparence -> Personnaliser et permettent d’effectuer les changements suivants:

Theme WordPress gratuit en Material design-2

  • Titre de site et slogan.
  • Disposition: choisissez entre quatre modèles de pages différents.
  • Couleurs: changez la couleur du texte d’en-tête, de l’arrière-plan ainsi que la couleur principale du thème.
  • Image d’en-tête: choisissez une image d’en-tête parmi les modèles proposés, ou bien choisissez une image personnelle.
  • Image d’arrière-plan: peur ceux qui n’ont pas pris la disposition 1 Column Wide, il est possible de changer l’image d’arrière-plan.
  • Navigation: trois emplacements sont prévus. Principal s’affichera en haut à droite, Secondaire juste au-dessus de l’image d’en-tête et Media sociaux dans le footer. Pour cet emplacement, créez un menu et placez-y des Liens vers vos pages de réseaux sociaux.
  • Widgets: un seul emplacement possible, il s’agit de la sidebare. Dans Disposition, l’option 2 Columns: Content / Sidebar ou 2 Columns: Sidebar / Content doit être activée.
  • Page d’accueil statique.

Ressources utiles

Tous savoir sur les thèmes enfants: Comment créer un thème enfant ?

Qu’est ce que le Material Design: Introduction au Material Design

marqueurs conditionnels de Wordpress

Les marqueurs conditionnels de WordPress

By | Aide et astuces, Plugin Wordpress, Thèmes Wordpress, Wordpress 4.2 | One Comment

Les marqueurs conditionnels de WordPress permettent d’agir différemment sur le rendu d’un thème en fonction d’une situation spécifique.

Qu’entent-on par une situation spécifique ?

Par exemple, si l’on utilise la sidebar pour faire de la taxonomie, autrement dit afficher du contenu différent dans la sidebar en fonction de la page où l’internaute se trouve, il va falloir créer un modèle de page spécifique dans lequel figurera un marqueur conditionnel.

Liste des marqueurs conditionnels de WordPress

Il n’est pas question ici de lister tous les marqueurs conditionnels car ils sont bien trop nombreux, non l’objectif est de présenter une liste des marqueurs conditionnels les plus utilisés. Une liste complète est disponible sur le codex officiel de WordPress.

Fonction Condition Arguments (optionnels)
is_single() un article (seul) id, slug ou titre d’un ou plusieurs articles
is_singular() un article ayant un Custom Post Type en particulier Slug d’un ou plusieurs Custom Post Type
is_sticky() un article déclaré comme Mis en avant id d’un article
is_attachment() une image, une vidéo, un son
is_page() une page id, slug ou titre d’une ou plusieurs pages
is_page_template() un template de page en particulier nom du fichier (ex: page-fullwidth.php)
is_preview() lorsque l’on prévisualise une page ou un article
is_post_type_archive() une archive d’un Custom Post Type
is_category() une archive d’une catégorie id, slug ou titre d’une ou plusieurs catégories
is_tag() une archive d’un tag id, slug, ou titre d’un ou plusieurs tags
is_tax() une archive d’une taxonomie id, slug ou titre d’une ou plusieurs taxonomie
is_author() une archive d’un auteur id, slug ou pseudo d’un ou plusieurs auteurs
is_search() un résultat de recherche
is_404 une page d’erreur 404
is_home() la page principal
is_front_page() la page d’accueil
is_admin une page du tableau de bord de WordPress

 

Dans la colonne Argument, le terme id correspond à l’identifiant (ex: ?p=202). Quant au Slug cela correspond à un identifiant unique figurant dans l’URL à la suite du nom de domaine.

ex: www.formation-wp.com/contact //ici, l’identifiant de la page est contact

Utilisation des marqueurs conditionnels de WordPress

Les marqueurs conditionnels de WordPress s’utilisent avec la fonction if

Exemple avec is_page():

if (is_page('contact')) {
    echo "C'est bien la page contact !";
}

Dans l’exemple ci-dessous, est retournée la chaine de caractère suivante C’est bien la page contact ! si l’on est bien dans la page contact.

exemple avec plusieurs conditions

Quant un marqueur conditionnel accepte de recevoir plusieurs arguments, il faut insérer ces arguments dans un array.

if (is_author(array('Jean', 'Jacques', 'Martin'))) {
    //do something
}
Ultimate Coming Soon Page

Ultimate Coming Soon Page – Faire un page de maintenance d’attente pour un site wordpress

By | Aide et astuces, Le graphisme et wordpress, Plugin Wordpress, Thèmes Wordpress | No Comments

Votre site est en travaux ? Faites patienter vos internautes avec Ultimate Coming Soon Page.

Qu’ils soient en développement, en maintenance en refonte totale ou en attente d’événement particulier, nos sites Web sont un peu comme des vitrines de magasins. Toujours en évolution. Ce qui impose de rendre temporairement nos sites WordPress inaccessible au public.

Ultimate Coming Soon Page est un plugin de type freemium (entendez par cela, gratuit pour les fonctions principales, donc largement utilisables) permettant de substituer l’intégralité des pages de votre site Web par une page unique qu’il est possible de personnaliser à l’extrême.

Pour ceux qui ne se sentent pas l’âme d’un intégrateur Web, la version payante offre des modèles de pages avec décompteur intégré de qualité.

 Installer Ultimate Coming Soon Page : Un choix efficace et personnalisable

L’installation est très classique. Rendez-vous dans le tableau de bord de WordPress, -> Extensions -> Ajouter : taper Ultimate Coming Soon Page. Puis activer le plugin. A ce stade, la page indiquant aux internautes que le site est en travaux n’apparaît pas encore.

Configurer Ultimate Coming Soon Page : Voici les quelques astuces de réglages rapides.

Pour activer et configurer Ultimate Coming Soon Page, allez dans Réglages -> Coming Soon.
La page est divisé en deux panels : les réglages (Settings) et l’apparence (Style).

1. Les réglages:

Le premier réglage de ce panel (Enable : Yes) permet d’activer la page Coming Soon. Par cette page en entièrement blanche. Cliquez sur preview pour en avoir un aperçu.
A présent votre site n’est plus visible par les internautes. Seuls les utilisateurs connectés peuvent le voir.
Le texte est l’image seront à renseigner dans les champs suivants: Image, Heading, Description.
Avec Custom HTML il est possible d’utiliser n’importe quelles balises HTML, y compris la balise <script>. Ce qui est très pratique pour insérer du code JavaScript.

2. Style:

Inutile de présenter ce panel, le titre parle de lui-même. Tout ce qui aura été saisi dans Les réglages pourra être mis en forme ici : couleur ou image de fond, effet de bruit sur l’image de fond, personnalisation de la couleur du texte, choix de la police d’écriture via Google WebFont, copyright et même un champ Custom CSS.
Ce plugin est vraiment à la hauteur des plus exigeants en matière de Web design.