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.

Gérer tous vos sites Wordpress

Gérer tous vos sites WordPress depuis un tableau de bord unique

By | Aide et astuces, Wordpress 4.4 | No Comments

Gérer tous vos sites WordPress depuis un tableau de bord unique, même ceux sur des serveurs différents.

Entre le moteur du CMS, les thèmes et les plugins, WordPress est connu pour avoir un rythme très soutenu de mise à jour. Heureusement il existe des outils permettant gérer tous vos sites WordPress depuis un tableau de bord unique où il serait possible de savoir d’un coup d’oeil si un site est à jour, que sa sauvegarde est récente et qu’il n’y ait pas de failles de sécurité.

C’est là qu’entre en jeu le plugin MainWP.

Installation

Ou plutôt devrait-on dire, les plugins, puisque MainWP est composé de deux parties:

  • MainWP Dashbord: qui est le tableau de bord principal
  • MainWP Child: qui devra être installé sur tous vos blogs WordPress.

Installez WordPress sur un nouveau nom de domaine ou sur un sous-domaine, puis télécharger le plugin MainWP Dashboard depuis wordpress.org.
Attention: Il est conseillé par le développeur du plugin de dédier entièrement cette installation de WordPress à l’usage de ce plugin.

Sur tous les autres sites WordPress à administrer, installez MainWP Child.

Configuration

Les plugins étant maintenant installés, il faut à présent établir la connexion entre les deux.
Cette opération est à renouveler à chaque fois qu’un nouveau site doit être ajouté.

Depuis un site WordPress où est installé MainWP Child allez dans le menu MainWP Settings, cochez la case Exiger une ID Unique de sécurité puis Sauver les changements
Copier votre ID Unique de sécurité.

Depuis le site Wordpres où est installé MainWP Dashbord, allez dans MainWP -> Sites -> Ajouter nouveau.
Complétez champs comme demandé, sans oublier de renseigner la clé API générée dans l’étape précédente. Cliquez sur Ajouter un site pour valider.

Votre site fraichement ajouté est à présent visible depuis le menu MainWP -> Sites -> Gestion des sites. Le tableau de bord qui apparaît, est spécifique à ce site. Cliquez sur le bouton Sync Data with Child Sites pour mettre à jour les informations du site Child.

Lorsque plusieurs sites sont enregistrés il est possible d’obtenir une vue globale depuis le menu MainWP -> Tableau de bord.

Pages blanches sous WordPress

By | Aide et astuces | No Comments

Pourquoi il n’y a que des pages blanches sous WordPress ? D’où vient le problème ?

Dans un script PHP, une simple erreur telle qu’un oubli de ; en fin de ligne provoque l’affichage d’une page blanche. Autrement dit, WordPress n’y est pour rien dans cette histoire.

Les problèmes pages blanches sous WordPress peuvent survenir suite à l’activation d’un thème ou d’un plugin. Mais le plus souvent, cela arrive après avoir modifié le fichier fonction.php (functions.php).
S’il s’agit:

  • d’un thème, activez-en un autre. Le vôtre présente des erreurs ou bien il n’est pas compatible avec votre version de WordPress.
  • d’un plugin, désactivez-le. Ce plugin présente des erreurs ou bien il n’est pas compatible avec votre version de WordPress.
  • de votre fichier fonction.php vérifiez qu’il n’y ait pas d’erreurs dans votre script.

Nota: Le fichier fonction.php ne contenant que du code PHP il est recommandé par les développeurs de PHP de ne jamais terminer ce type de fichier par la balise fermante ?>. En plus d’être une source d’erreurs elle est toute à fait inutile car PHP l’ajoutera de lui-même.
Si la balise fermante existe, supprimez la.

Liste des utilisateurs Wordpress

Liste des utilisateurs WordPress avec WPSscan

By | Plugin Wordpress, Sécurité | No Comments

Depuis le terminal, à l’aide de WPscan, il est possible de retourner la liste des utilisateurs WordPress sans y être identifié au préalable.

WPscan est une puissante application écrite en Ruby qui permet de passer en revue les failles de sécurités des sites WordPress.

Parmis ces nombreuses fonctionnalités, il est possible d’afficher la liste des utilisateurs WordPress à l’aide de la commande ci-dessous:


# Enumére les utilisateur de l'ID 1 à 10
ruby wpscan.rb --url https://formation-wp.com --enumerate u

# Enumére les utilisateur de l'ID 10 à 50
ruby wpscan.rb --url https://formation-wp.com --enumerate u[10-50]

Le résulatats est retourner sous la forme d’un tableau.


+----+----------+------------------+
| Id | Login    | Name             |
+----+----------+------------------+
| 1  | user1    | User1 Test       |
| 2  | user2    | User2 Test       |
+----+----------+------------------+

Dans le champs Login figure les identifiants necessaires pour se connecter à l’admin de WordPress.
Dans le champs Name figure le nom qui est affiché publiquement sur le site (dans les billets de blog notamment).

Autant pour le champs Name, WPScan fait bien le distinguo entre les majuscules et les minuscules autant pour le champs Login il ne le fait pas. Autrement-dit, user1 et user2 pourraient très en contenir des majuscules sans qu’on puisse savoir où elles se trouvent.

Quant on sais que les pirates informatiques adorent entrer par la grande porte, cela peut avoir un avantage lors de tentatives d’ataque de type brut-force. En mixant la case dans vos identifiants et en utilisant des mots de passe fort, les pirates ne sont pas prêts d’entrer par là.

Encore faut-il que le champs Name ne trahissent pas la case. En effet, lors de la creation d’un nouvel utilisateur, WordPress demande de créér un identifiant (soit Login). Identifiant, qui sera repris comme nom public (soit Name).

Pour remédier à ce probème, il suffit de se connecter à l’admin de WordPress avec le nouvel identifiant, puis d’allez dans Utilisateurs -> Tous les utilisateurs -> modifier de changer le champs Pseudonyme (obligatoire) par autre chose puis de le séléctionner dans Nom à afficher publiquement.

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

Sécuriser WordPress dès l’installation

By | Aide et astuces, Plugin Wordpress, sauvegarde wordpress, Wordpress 3.6 | 3 Comments

Sécuriser WordPress dès l’installation est primordial. Avec une popularité toujours croissante, beaucoup de sites Web créés avec WordPress sont victimes d’attaques en tout genre.

L’objectif de cet article est d’adopter les bons réflex pour sécuriser WordPress dès l’installation, car une telle entreprise après installation est déjà trop tard.

Etape 1 : Installer WordPress avec les premières sécurités

Télécharger la dernière version de WordPress sur le site office, est non sur des sites tiers. N’oubliez pas que WordPress est un logiciel libre de droit et que par conséquent, le code source est facile à modifier, donc à corrompre. Pour ceux qui sont sous Windows ou Mac OS X, préférer l’archive .zip pour les utilisateurs sous Linux, préférer l’archive en .tar.gz.

Décompressez l’archive, puis à l’aide d’un client FTP tel que Filezilla copiez le contenu du dossier /wordpress à la racine de votre site. Le dossier racine peut être différent d’un serveur à l’autre :

–          Sur un serveur Debian, comme dans l’article sur lequel nous avons déjà travaillé et qui vous permet de savoir comme installer un serveur lamp pour wordpress et ses dérivés tel que Ubuntu pour ne citer que la plus populaire, le chemin est /var/www/

–          Sur les serveurs Red Hat ses dérivés, le chemin est /srv/www/.

–          Sur les serveurs des hébergeurs comme 1&1, OVH, Amen… le chemin peut-être /www/ ou encore est /httpdocs/.

Vérifiez à présent les droits en lecture, écriture et exécution des dossiers et des fichiers:

–          Les dossiers doivent être en 755

–          Les fichiers doivent être en 644

A la racine de votre site figure un fichier nomé readme.html. Supprimez-le, car il pourrait fournir des informations précieuses aux hacker sur votre version de WordPress.

Attention ! Lors des mises à jour de WordPress, le fichier réaparait à chaque fois. Penssez à le supprimer après chaques mises à jours.

Créez à présent une base de données SQL. Ne pas utiliser le nom de votre site ou encore le nom de « wordpress »  pour votre base donnée. Ce nom est trop commun et trop simple.

Etape 2 : Configurer

Depuis votre navigateur Web, entrer le nom de domaine ou l’adresse IP du serveur web suivit de /wp-admin/install.php

Ex : www.serveur_web.com/wp-admin/install.php

Suivez l’assistant, puis remplissez les champs du premier formulaire avec les informations relatives à votre base de donnés. Pour le préfixe de la table, remplacez wp_ par autre chose. Peu importe le préfixe utilisé, le tout c’est qu’il soit différent.

Dans le second formulaire, à la ligne Identifiant remplacez admin par l’identifiant de votre choix. N’hésitez pas à utiliser des majuscules et des minuscules, les chiffres et les signes de ponctuation n’aident en rien à la sécurité.

Pourquoi les chiffres et les signes de ponctuation n’aident en rien à la sécurité de WordPress ? Un article est entièrement consacré à cette question.

Quant au mot de passe, depuis la  version 4.3 de WordPress un mot de passe (très) fort est proposé. N’hésitez pas à garder ce mot de passe. Dans le cas contraire, créez un mot de passe fort. N’oubliez pas que le compte administrateur a tous les droits.

Entrez à présent au tableau de bord de WordPress avec votre compte Administrateur. Ce compte ayant tous les droits, il est fortement conseillé de créer un nouvel utilisateur avec moins de privilèges : Utilisateur -> Ajouter. Avec comme précédemment un identifiant et un mot de passe digne de ce nom. Quant au Rôle, choisissez parmi : Abonné, Contributeur, Auteur ou Editeur, mais en aucun cas Administrateur.

Etape 3 : Renforcer la sécurité.

3.1 Protéger l’accès au fichier wp-config.php via .htaccess

Pour ceux qui n’ont pas accès au fichier de configuration d’Apache2, autrement dit ceux qui ne font pas d’auto-hébergent, ont un fichier .htaccess situé à la racine du site. Ajouter la ligne suivante empêchera un hacker de récupérer votre identifiant et mot de passe en cas de problèmes avec PHP sur le serveur.


<FilesMatch ^wp-config.php$>
    deny from all
</FilesMatch>

3.2 Restreindre l’accès au dossier wp-content et wp-content/uploads

Les dossiers wp-content et wp-content/uploads sont des emplacements de choix pour les hackeurs qui souhaiteraient placer des malware du type porte dérobé (backdoors). Ce script permet de bloquer l’exécution de fichiers PHP dans le répertoire où il se situe.

Dans le dossier wp-content  et wp-content/upload, créez un nouveau fichier .htaccess et ajoutez le code source suivant:

<FilesMatch "\.(?i:php)$">
    <IfModule !mod_authz_core.c>
        Order allow,deny
        Deny from all
    </IfModule>
    <IfModule mod_authz_core.c>
        Require all denied
    </IfModule>
</FilesMatch>

3.3 Restreindre l’accès au dossier wp-includes

Le dossier wp-include doit lui aussi faire l’objet de certaines restrictions. Créez un fichier .htaccess et ajoutez le code source suivant:

<FilesMatch "\.(?i:php)$">
    <IfModule !mod_authz_core.c>
        Order allow,deny
        Deny from all
    </IfModule>
    <IfModule mod_authz_core.c>
        Require all denied
    </IfModule>
</FilesMatch>

<Files wp-tinymce.php>
   Allow from all
</Files>
<Files ms-files.php>
   Allow from all
</Files>

Il s’agit du même code source que dans le paragraphe 3.2 à un détail près. Une exception est faite pour les modules wp-tinymce et ms-files qui eux sont des éléments essentiels à WordPress.

3.4 Cachez votre version de WordPress

La version de WordPress est une information précieuse pour les hackeurs. Alors cachons là !

Supprimer le fichier readme.html, situé à la racine. Dans ce fichier, est inscrit le numéro de version de WordPress.

Dans le fichier functions.php du thème ajoutez les lignes de code suivantes :

// Supprimez la balise « generator » visible depuis le code source des pages du site.
remove_action("wp_head", "wp_generator");

// Banaliser les erreurs de connexion de WordPress lorsque l’identifiant et/ou mot de passe sont incorrectes.
add_filter('login_errors',create_function('$erreur', "return 'Erreur de connexion';"));

// Supprimez la meta generator de votre flux RSS.
add_filter('get_the_generator_rss2', '__return_false');
add_filter('get_the_generator_atom', '__return_false');

Désactiver l’éditeur de thèmes et de plugin en ajoutant la ligne de code suivante dans le fichier wp-config.php:


define( 'DISALLOW_FILE_EDIT', true );

Etape 4 : La sécurité par les plugins

Des plugins peuvent contribuer à renforcer la sécurité de votre site, voici un échantillon des plus populaires :

Login LockDown,Limite le nombre de tentatives de connexions, et donc les attaques de type Brut force

Theme Authenticity Checker (TAC) permet de scanner un thème installé afin de vérifier qu’il ne contient pas de code malicieux.

WP Security Scan et Better WP Security, version bêta, pour déceler toutes les failles de sécurité de votre site.

HC Custom WP-Admin URL, pour personnaliser l’accès au wp-admin.

Sucuri Security, un plugin d’audit de sécurité et scanner de malwares.

Etape 5 : Dernies conseils de sécurité

Car il vaut mieux prévenir que guérir, quelques conseils avant de clôturer cet article.

Pensez à faire les mises à jour de WordPress :

Pour ceux qui auto-hébergent leur site, faites également les mises à jour système mais également du trio Apache2, MySQL et PHP. Sous Debian, dans un terminal en tant que root, taper la ligne de code suivante :

# apt-get update (pour la mise à jour la liste des dépôts)

# apt-get upgrade (pour la mise à jour les packages)

Sauvegarder régulièrement votre site WordPress et sa base de donné :

Pour sauvegarder WordPress, il suffit de conserver sur votre ordinateur une copie de l’intégralité des fichiers de votre site.

Pour sauvegarder la base de donné SQL, certains hébergeurs proposent ce type de service. Pour les autres, il est possible d’exporter la base de donné depuis PhpMyAdmin via le menu Exporter.

Ne téléchargez pas de thème gratuit provenant d’un autre site que celui de http://wordpress.org/themes/

Easy Social Share Buttons : La référence des réseaux sociaux pour WordPress

By | Plugin Wordpress, Réseaux sociaux | No Comments

Vous souhaitez installer Facebook sur votre blog WordPress, Twitter, pinterest ou Google +?

Il y a de très nombreuses solutions : Du gratuit, du payant, des lignes de code, des freeware…

Et puis tout le monde a le même rélfexe au bout d’une demi-heure de test et de 20 installations d’extensions wordpress différentes : On va sur Google pour chercher « le meilleur plugin réseau social wordpress ».

Et là, de très nombreux articles vous sont proposés, avec pour chacun une dizaine de possibilités différentes : Gratuits au début, on se rend compte que le seul efficace est finalement payant, bref, pas pratique et souvent agaçant.

On vous propose donc un seul plugin : Easy Social Share Buttons Pas le meilleur plugin, le plugin unique qui vous permettra de profiter d’une extension wordpress efficace.

Les réseaux sociaux sont de plus en plus importants et les partages sur Facebook ou Twitter constituent à eux seuls, presque 50% du trafic sur certains blogs.

C’est donc un plugin important, une extension à ne pas manquer.

Celle que nous vous proposons coute 19$, on peut la trouver sur le site Themeforest, et elle a l’avantage d’être facilement configurable.

Après l’achat, le menu contextuel s’affiche sur votre gauche, comme pour la plupart des extensions wordpress. Ensuite, les quelques réglages vous permettront d’adapter vos besoins. C’est la première partie des réglages, ensuite il y a dans chaque article, ou dans chaque page, un nouvel espace dédié, qui vous permettra de faire vos réglages si vous souhaitez créer une exception ou régler l’extension de façon différente.

shorcode facebook wordpress

Choisissez le shortcode qui vous convient, puis choisissez les réseaux sociaux qui vous intéressent : Ils seront alors intégrer directement à l’endroit que vous décider.

Il est également possible d’utiliser des système de shortcode pour placer une zone de partage ou de like, où vous le souhaitez, comme je le pose ici, en dessous de ma phrase

 

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');

}