le meilleur theme wordpress

Les trois meilleurs thèmes WordPress de l’année 2020

Par Thèmes Wordpress Pas de commentaire

Quels sont les trois meilleurs thèmes WordPress?

C’est une question assez récurrente, surtout à la fin d’une formation. On présente la grande diversité de thèmes, avec un principal problème : le trop grand choix. Qui dit trop grand choix dit grosse difficulté pour un nouveau de faire le tri.

En effet, au delà de l’aspect esthétique, il faut connaître les plugins associés. S’assurer qu’ils fonctionnent, qu’ils ne posent pas de problème pendant les mises à jour et s’assurer qu’il y a derrière une communauté prête à aider en cas de besoin.

Quel thème pour quelle utilisation ? En réalité il faut d’abord regarder ce qu’on fait. Soit on souhaite juste faire un site, soit on s’oriente vers de la production plus grande en tant que webmaster.

Il y a donc deux possibilités, soit on cherche le thème parfait, soit on trouve le thème le plus généraliste possible qui permet de faire des sites différents.

Aujourd’hui il y a de très (ou de trop) nombreux thèmes pour WordPress. Mais seul trois thèmes font la différence et proposent l’intégration de sous thèmes avec des démos intégrées très puissantes.

C’est le cas d’Avada, de Divi et de Salient.

Leur fonctionnement n’est pas le même, le backoffice n’a pas les mêmes extensions, mais leur point commun est la grande diversité de sites qu’ils permettent de réaliser.

  • Divi est indépendant et le revendique. Son succès a permis la création d’une grande communauté. C’est un thème fiable qui a un défaut : la tendance qu’on a d’utiliser trop d’effets et trop de contenus sur un même page. Particulièrement efficace pour créer des « one page », il faut néanmoins garder en tête un mot d’ordre : la simplicité. Divi est développé par Elegantheme, un site qui avait à l’origine de nombreux thèmes, et qui maintenant reste focalisé sur son premier de classe, Divi. Une stratégie payante puisque plusieurs centaines de milliers de sites web l’utilise.
    Son grand point fort reste pour les débutants : Un travail du site directement sur le front, ce qui en fait un instrument précieux pour ceux qui découvrent wordpress.
  • Avada et Salient : Tous les deux présents sur Themeforest, ces thèmes fonctionnent de la même façon. Ils ont développé en interne un grand nombre de plugins. Ces derniers, de plus en plus perfectionnés, permettent d’aller de plus en plus loin dans le drag and drop tout en gardant un effet pro très avancé.

Voilà pour nos trois chouchous qu’on intègre dans nos formations. Il faut garder à l’esprit que lorsqu’on travaille sur un thème, il faut bien le connaître pour l’optimiser. Un thème bien maîtriser, c’est un thème efficace sur le SEO. Et le référencement naturel, c’est le nerf de la guerre, ne l’oublions pas !

Créer une carte de France cliquabe par région ou département avec WordPress

Par Aide et astuces, Plugin Wordpress Pas de commentaire

Vous avez tous vu les cartes de france qui apparaissent sur certains sites internet, qui nous permettent de cliquer sur des départements ou des régions?

Plusieurs solutions : soit vous codez tout à la main, soit vous intégrer un plugin dédié sur WordPress.

Voilà ci dessous le résultat qui vous permettra de voir le résultat et ceci juste avec quelques clics. On peut afficher les détails par département, poser des liens hypertextes permettant de cibles les pages concernées. WordPress permet toujours d’ajuster et de personnaliser le code implémanté. Vous pourrez donc changer les couleurs et les custumizer à ceux de votre marque ou de votre logo.

Réduire la taille des images de son site WordPress, l’indispensable SMUSH pour le SEO

Par Plugin Wordpress, SEO Pas de commentaire

Pour le référencement naturel de son site, il est essentiel de bien structurer son site, d’avoir du contenu de qualité… mais surtout d’avoir un site qui va vite.

Google Speed Insight, permet de mesurer la rapidité d’accès de votre site, sur la version ordinateur et sur la version mobile, toute aussi importante.

L’une des actions premières pour avoir une bonne note, c’est de minimiser les images du site. Les images sont lourdes, elles consomment du serveur, il faut donc les compresser.

Plusieurs plugins le permettent, et pour ma part, j’ai choisis Smush.
Pourquoi? Parce qu’après de nombreux tests, c’est le seul qui continue à chaque mise à jour à faire le boulot correctement et à faire progresser la rapidité de mon site wordpress. Les tests de Google Speed Insight?

Le plugin est gratuit jusqu’à 50 images, puis il coute 25€ par mois, ce qui n’est franchement pas gratuit, c’est le seul point négatif. Mais si le référencement naturel de votre site est stratégique, les positions vous le rendront bien! A tester en tous les cas.

 

WordPress retient la leçon et intègre la retour de l’ancien éditeur

Par wordpress 4.0 Pas de commentaire

Les mises à jour sont riches d’enseignements et permettent de voir ce qui marche et ne marche pas sur les anciennes versions.

Gutemberg était arrivé comme un outil révolutionnaire, mais n’a pas rencontré le succès attendu : beaucoup de téléchargements de l’extension « Classic Editor » qui permet de revenir sur l’ancien WYSIWIG et une installation de ce plugin, systématiquement après l’installation de la mise à jour de WordPress 5.0

La dernière mise à jour de WordPress 5.1 réagit donc et permet le réglage vers l’ancien ou le nouveau WYSIWIG.

Côté nouveautés, Betty, nom de la mise à jour, intègre « Site Health » : ou outils qui permet de checker l’état de sécurité du site, avec une vérification des éléments qui pourraient poser problème : version PHP, nouveaux plugins etc…

C’est donc une version qui semble être une réussite, à voir comment les utilisateurs de WordPress prennent la nouvelle.

Ajax sous Wordpress

Utiliser Ajax sous WordPress

Par Aide et astuces, Wordpress 4.4 Un commentaire

Il est courant d’avoir recours à l’utilisation de Ajax sous WordPress pour améliorer l’expérience utilisateur. cependant cette technique n’est pas toujours bien mise en place.

En effet, il est vivement conseillé d’utiliser le système interne de WordPress pour gérer tous ses appels.

En effet, beaucoup de développeurs utilisent un fichier php externe chargé dans le fichier wp-load.php pour accéder à toutes les fonctionnalités de WordPress. Cela correspond plus à un hack qu’à un réel ajout.

Voyons donc comment bien utiliser le système natif de WordPress pour la gestion d’appels Ajax.

Coté PHP

Hooks

Le système intégré de WordPress est basé sur les hooks. Il existe deux hooks dynamiques :

[php]

// Hook exécuté pour les utilisateurs connectés
add_action("wp_ajax_my_ACTION_NAME", "my_ajax_function");

// Hook exécuté pour les utilisateurs non connectés
add_action("wp_ajax_nopriv_ACTION_NAME", "my_ajax_function");

[php]

La partie <strong>ACTION_NAME<strong> correspond au paramètre qui sera passé par le JavaScript.

<h4>Localisation</h4>

Il faut ensuite pouvoir récupérer l’URL du script de WordPress <strong>admin-ajax.php</strong>. Pour cela, ajoutez un paramètre lors de l’inclusion d’un script js, via la fonction <strong>wp_localize_script</strong>.

[php]

wp_enqueue_script(‘script’, get_template_directory_uri().’/js/script.js’, array(‘jquery’), ‘1.0’, 1 );
wp_localize_script(‘script’, ‘ajax_var’, array(
‘url’ => admin_url(‘admin-ajax.php’),
‘nonce’ => wp_create_nonce(‘ajax-nonce’)
)
);

[/php]

Deux paramètres y sont passés :

url : l’URL dynamique du fichier de WordPress (votre.site.com/wp-admin/admin-ajax.php)
nonce : une sécurité pour vérifier l’authenticité des requêtes

Et voici la fonction de callback des requêtes Ajax :

[php]

function my_ajax_function()
{
$nonce = $_POST[‘nonce’];

if ( ! wp_verify_nonce( $nonce, ‘ajax-nonce’ ) )
die ( ‘Interdit !’);

// Traitement
if(isset($_POST[‘param’]))
{
// …
echo "valeur";
}
else

// important, pour bien récupérer la valeur de retour
exit;
}

[/php]

Après avoir vérifié que l’on récupère bien les paramètres que l’on a passés via notre script (et pas un autre, évitant ainsi des tentatives de corruption), il suffit d’effectuer le traitement désiré en pensant à bien renvoyer une valeur de retour pour le javascript.

Coté Javascript

Maintenant il suffit d’appeler grâce à jQuery par exemple, le script de WordPress admin-ajax.php et de lui passer les bons paramètres. On peut ainsi récupérer l’URL du fichier comme cela :

[js]

var url = ajax_var.url;
var nonce = ajax_var.nonce;

$("button").click(function(){
$.ajax({
type: "post",
url: ajax_var.url,
data: "action=ACTION_NAME&nonce="+ajax_var.nonce+"&param=valeur",
success: function(msg){
// Traitement
}
});
})

[/js]

Conclusion

Ainsi, en utilisant le système interne de WordPress, nous nous assurons que nos appels Ajax continueront à bien fonctionner avec les futures versions. L’utilisation des hooks est plus propre et plus efficace.

hooks wordpress

Les hooks WordPress

Par Aide et astuces, Wordpress 4.4 Pas de commentaire

Les hooks WordPress sont des mécanismes permettant d’effectuer une action supplémentaire à un instant donné prévu par le système.

Il existe deux types de hooks WordPress: les actions et les les filtres.

Les actions

Tout au long du processus de construction d’une page, WordPress place des « hooks » permettant aux développeurs d’ajouter des fonctionnalités à une étape particulière. Ainsi il est facile d’enrichir le processus avec nos propres fonctions.

Exemple simple, l’action « save_post » permet de réaliser des actions supplémentaires lors de la sauvegarde d’un post (article, page ou autre). C’est par cet intermédiaire que l’on pourra sauvegarder nos méta informations (metaboxes).

Voici certaines des actions importantes :

[php]

after_setup_theme
wp_footer
wp_head
admin_head
admin_enqueue_scripts
pre_get_posts

[/php]

Voyons comment facilement utiliser un hook WordPress pour ajouter le code Google Analytics dans le footer d’un thème à l’aidu hook wp_footer

Ouvrez le fichier functions.php et ajoutez le code suivant :

[php]

add_action(‘wp_footer’, ‘add_google_analytics’);

[/php]

Puis créez la fonction add_google_analytics :

[php]

function add_google_analytics()
{
$ga = get_option(‘google_analytics’);
if(!empty($ga))
echo stripslashes($ga);
}

[/php]

Il aurrait été plus simple d’ajouter le code ci-dessus directement dans le footer soit dans le ficheir footer.php, mais avec cette méthode le code est plus facilement maintenable et réutilisable.

Les filtres

Le principe des filtres est de modifier une donnée construite par WordPress avant de l’afficher.

Voici certains filtres utiles :

[php]

body_class
the_content
wp_title
excerpt_length

[/php]

Le filtre the_content va permettre de modifier le contenu d’un article avant de l’afficher.

Dans l’exemple ci-dessous, l’objectif et de personnaliser les […] présent par défaut à la fin des extraits d’articles.

Toujours depuis le fichier functions.php

[php]

add_filter(‘get_the_excerpt’, ‘new_excerpt_hellip’);

[/php]

Avec les filtres, ce sont les paramètres passés à notre fonction qui permettront de modifier leur valeur avant de les afficher.

[php]

function new_excerpt_hellip($text)
{
return str_replace(‘[…]’, ‘…’, $text);
}

[/php]

Conclusion

Les hooks WordPress sont un très bon moyen de modifier le comportement de WordPress selon nos besoins afin d’y ajouter de nouvelles fonctionnalités au travers des actions ou simplement d’altérer certaines de ses méthodes via les filtres.

Il est donc vivement recommandé de les utiliser plutôt que d’intervenir directement dans les fichiers de template.

Liste complète de tout les hooks WordPress: https://codex.wordpress.org/Plugin_API/Action_Reference

Gérer les commentaires WordPress

Par Aide et astuces, Wordpress 4.4 Pas de commentaire

Gérer les commentaires WordPress de votre blog et administrer la participation des visiteurs qui peuvent apporter leur réflexion à vos articles.

Si votre site a du succès, il y a fort à parier que des visiteurs voudront laisser des commentaires sur certains articles qui les auront inspiré, voire sur certaines pages.

Activer les commentaires

Dans l’interface d’administration, allez dans Réglages -> Discussion. En haut de la page, localisez la case Autoriser les visiteurs à publier des commentaires sur les derniers articles. Si cette case est cochée, tous les articles et les pages créé pourront recevoir des commentaires, et inversement si la case est décochée. En revanche, cette option ne permet pas d’activer ou désactiver les commentaires sur les contenus qui sont déjà créés. Pour cela, il faut aller dans le menu Articles, puis choisir Modification rapide sous l’article où il faudra changer le statut. Cochez la case Autoriser les commentaires puis Mettre à jour.

Les options

Depuis la page Réglages -> Discussion de nombreux paramètres sont disponibles pour gérer les commentaires, il est possible de demander à ce que tous les commentaires soient validés par un administrateur ou bien de désactiver les commentaires pour les vieux articles. En bas de la page il est possible de choisir si les commentaires peuvent avoir un avatar à coté du nom de l’utilisateur l’ayant posté. Si oui, il faut obligatoirement choisir un type d’avatar :

  • Homme mystère : un logo d’utilisateur anonyme est affiché.
  • Vide : une image blanche est affichée.
  • Gravatar : l’image est récupérée sur Gravatar, un service permettant d’associer une image à une adresse email.
  • Génération automatique : l’avatar sera une image aléatoire dans le style visible sur l’aperçu.

Nota: Pour les Gravatar, il faut choisir un niveau maximal pour la censure de l’image, c’est-à-dire qu’une image réservée aux adultes ne sera par exemple pas affichée lorsque un niveau G, PG ou R est sélectionné.

Modérer les commentaires

Les statuts

Une fois un commentaire créé, il peut se trouver dans plusieurs statuts différents.

  • Approuvé : le commentaire est visible sur le site.
  • En attente : le commentaire est en attente de validation, seul vous ou un autre administrateur du site peuvent le voir.
  • Indésirable : le commentaire est masqué car il a été désapprouvé par un administrateur.

Enfin, il est possible d’avoir un commentaire dans la corbeille si vous avez décidé de le supprimer.

Édition et suppression

La liste des commentaires présents sur le site est affichable par le menu Commentaires du panneau d’administration. Survolez un commentaire et cliquez sur Modifier, pour accéder à la page d’édition d’un commentaire.

Au centre vous pouvez modifier le contenu du commentaire ainsi que le nom de l’utilisateur ayant posté celui-ci. Un historique des actions sur ce commentaire (par exemple un changement de statut) est aussi affiché en bas de page.

Sur la droite, nous retrouvons la liste des statuts présentés plus haut, ainsi que la date de création du commentaire et un lien pour le déplacement dans la corbeille.
Si nous choisissons de placer le commentaire comme « En attente », vous pouvez voir qu’il est immédiatement retiré de l’affichage public sous l’article auquel il se rattachait.
D’autre part, un petit « 1 » est apparu dans le menu d’administration pour indiquer qu’un commentaire était en attente de validation par un administrateur.
Si le commentaire est marqué comme Indésirable ou bien placé dans la corbeille, il n’apparaît plus dans la liste des commentaires. Il faut alors choisir le filtre Indésirable ou corbeille en haut de la page pour y accéder.
Vous pouvez alors choisir d’annuler ce statut et de restaurer le commentaire pour qu’il apparaisse à nouveau, ce qui est utile en cas d’erreur par exemple.

Réglages

En plus des paramètres s’appliquant à tous les commentaires que nous avons déjà parcouru, il est possible de filtrer certains textes contenus dans les commentaires pour les empêcher d’être publiés sans votre approbation. Dans le champ Modération de commentaires, vous pouvez choisir un ensemble de mots qui déclencheront la mise
attente d’un commentaire ayant ce contenu dans son texte. Il n’est pas obligatoire de mettre des mots complets, c’est-à-dire que Press bloquera les commentaires contenant WordPress, Pression ou encore Presse.

Il est possible de faire de même dans le champ Liste noire pour les commentaires, à la différence que les commentaires correspondant à l’un des mots choisis seront immédiatement marqués comme Indésirables , sans avoir à être modérés.

devis pour formation wordpress

PHP Code Sniffer pour WordPress

Par Aide et astuces, Plugin Wordpress, Thèmes Wordpress Pas de commentaire

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:

[bash]

php -v

[/bash]

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

[bash]

composer -v

[/bash]

Pour l’installation procédez comme suit:

[bash]

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

[/bash]

Tester son code avec PHP Code Sniffer

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

[bash]

php phpcs –standard=Wordpress /chemin_vers_votre_code

[/bash]

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

[bash]

php phpcbf –standard=Wordpress /chemin_vers_votre_code

[/bash]

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

Imprimer des pages et des articles WordPress

Par Aide et astuces, Wordpress 4.4 Pas de commentaire

Enregistrer ou imprimer les pages et les articles WordPress est très demandé par les lecteurs.

Installation de Read Offline

Pour générer une version imprimable d’une page les navigateurs s’appuient sur une media query appelée: @print. Hors, nos chèrs thèmes WordPress n’en possèdent que très rarement. Pour s’en assurer, il suffit d’ouvrir le/les fichiers CSS du thème.

Il est bien sûr possible d’ajouter cette media query from scratch, mais cela n’est pas à la portée de tous. De plus, cela ne permet pas aux lecteurs d’enregistrer les pages et les articles dans des formats tels que le PDF, l’ePub ou encore le format mobi.

De nombreux plugin existent sous WordPress, et le choix de la rédaction c’est porté sur Read Offline. Il n’est pas traduit en français, mais a le mérite d’être simple à paramétrer et offre les fonctionnalités les plus couramment recherchées pour ce genre de plugin.

L’installation est de plus basique. Depuis le tableau de bord de WordPress, allez dans Extensions -> Ajouter puis recherche Read Offline. Activez le plugin après l’installation.

Nota: Si après l’activation du plugin le message d’erreur suivant apparais Read Offline: Unable to create directory « /var/www/vhosts/votre_nom_de_domaine/wp-content/cache ». Is its parent directory writable by the server? et qu’aucun bouton ne s’affiche dans les pages et les articles il suffit de changer les droits d’accès du dossier wp-content en 777.

Les réglages

Les réglages de Read Offline sont accessibles depuis le menu du même nom.

Imprimer des pages et des articles WordPress

La traduction de du therme Read Offline: se trouve dans General Options. Pour traduire les autres chaines de caractères tels que les boutons Download PDF, Download ePub, Download mobi et Print, se fait à l’aide du modèle de fichier PO /wpcontent/plugins/read-offline/languages/read-offline.pot.

Exporter les pages et articles WordPress en PDF, ePub ou en mobi

A présent, dans chaque pages et/ou articles, apparait les boutons permettant d’imprimer et d’enregistrer en PDF, ePub et mobi.

Utiliser Twig pour les thèmes WordPress

Par Aide et astuces, Le graphisme et wordpress, Thèmes Wordpress, Wordpress 4.4 Pas de commentaire

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:

[php]

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

[/php]

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:

[html]

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

[/html]

Liens utiles

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

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