Category

Wordpress 4.4

Ajax sous Wordpress

Utiliser Ajax sous WordPress

By | Aide et astuces, Wordpress 4.4 | One Comment

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 :


// 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");



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>.



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

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 :


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;
}

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 :


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

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

By | Aide et astuces, Wordpress 4.4 | No Comments

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 :


after_setup_theme
wp_footer
wp_head
admin_head
admin_enqueue_scripts
pre_get_posts

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 :


add_action('wp_footer', 'add_google_analytics');

Puis créez la fonction add_google_analytics :


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

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 :


body_class
the_content
wp_title
excerpt_length

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


add_filter('get_the_excerpt', 'new_excerpt_hellip');

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


function new_excerpt_hellip($text)
{
return str_replace('[...]', '...', $text);
}

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

By | Aide et astuces, Wordpress 4.4 | No Comments

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.

Imprimer des pages et des articles WordPress

By | Aide et astuces, Wordpress 4.4 | No Comments

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

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

Créer des champs personnalisés

Créer des champs personnalisés sous WordPress

By | Aide et astuces, Plugin Wordpress, Wordpress 4.4 | No Comments

Il est plutôt aisé de créer des champs personnalisés sous WordPress depuis le back office, mais pour les afficher dans les pages il faut mettre les mains dans le code.

Créer des champs personnalisés

La création des champs se fait depuis le bakc office de WordPress. Plus précisément lors de la création d’une page ou d’un article.
En haut à droite de la page figure le bouton Option de l’écran. Cliquez sur ce bouton, et vérifiez que l’option Champs personnalisés soit bien coché.

Le bloc Champs personnalisés doit apparaitre en dessous de celui où l’on rédige le contenu des pages/articles.

Pour créer des champs personnalisés, il suffit de cliquer sur le lien Saisissez-en un nouveau et de saisir le nom du nouveau champ.Cliquez sur Ajouter champ personnalisé. Il est également possible de saisir tout de suite une valeur, mais ceci est optionnel.

Le nouveau champ est à présent créé. Pour s’en assurer, il suffit de vérifier qu’il figure bien dans le menu déroulant.

Afficher les champs personnalisés

A présent le ou les champs personnalisés sont créés. Si une valeur leur a été attribuée, cette dernière n’est pas encore visible sur le site car WordPress ne sait pas encore où il doit l’afficher.

En général, les valeurs des champs personnalisés s’affichent dans les pages. Pour cela ouvrez le fichier page.php puis ajoutez le code source suivant à l’endroit désiré dans la page.


$mykey_values = get_post_custom_values( 'nom_du_champ' );

foreach ( $mykey_values as $key => $value ) {
    echo $value;
}

Renommer et supprimer les champs personnalisés

Edit Custom Fields proposé par Jay Sitter, est un plugin permettant de renommer et/ou supprimer facilement les champs personnalisés depuis le back office de WordPress.
Une fois installé, c’est depuis le menu Outils -> Edit custom fields que les choses s’opèrent.

Comment créer un menu personnalisé sous Wordpress

Comment créer un menu personnalisé sous WordPress.

By | Aide et astuces, Wordpress 4.4 | No Comments

Comment créer un menu personnalisé sous WordPress pour un nouveau thème ou un thème existant ?

Créer un menu personnalisé pour un nouveau theme WordPress

Premièrement, dans le fichier functions.php de votre thème, vous devez écrire une fonction pour enregistrer le nom du menus. (Ceci est la façon dont ils apparaissent dans Apparence -> Menus).
Dans l’exemple ci-dessou, le menu s’appellera « Footer menu ».


function register_my_menu() {
  register_nav_menu('secondary_navigation_menu',__( 'Secondary Navigation Menu ' ));
}
add_action( 'init', 'register_my_menu' );

Une fois que vous avez fait cela, votre thème sera presque prêt. La dernière étape de préparation est de d’indiquer au thème où vous voulez que le menu apparaissent. Dans cet exemple ce sera dans le footer soit dans le fichier footer.php.
Ajoutez le code source ci-dessous:


<?php wp_nav_menu( array( 'theme_location' => 'secondary_navigation_menu' ) ); ?>

Créer un menu personnalisé pour un theme WordPress existant

Par défaut, tout les thèmes ont au moins un menu situé dans l’en-tête. Ouvrez le fichier function.php de votre thème et localisez la fonction qui a permis de créer le menu (Ctrl/Cmd + F, puis taper le mot_clé menu).
Dupliquer la fonction à la suite, puis changer le nom de la fonction.

Exemple:


// Fonction d'origine nommé top_navigation_tenu ( 'Top Navigation Menu' )
function register_my_menu() {
  register_nav_menu('top_navigation_menu',__( 'Top Navigation Menu' ));
}
add_action( 'init', 'register_my_menu' );

// Fonction dupliquée renommé secondary_navigation_menu ( 'Secondary Navigation Menu ' )
function register_my_menu() {
  register_nav_menu('secondary_navigation_menu',__( 'Secondary Navigation Menu ' ));
}
add_action( 'init', 'register_my_menu' );

Ouvrez à présent le fichier header.php et localisez la ligne de code qui permet d’afficher le menu dans le thème. Cet ligne de code doit comporter le même nom que la fonction dans le fichier function.php.
Dupliquez cette ligne de code à la suite, et remplacer le nom de la fonction par le nom de la fonction de votre menu personnalisé.


<?php wp_nav_menu( array( 'theme_location' => 'top_navigation_menu' ) ); ?>

<?php wp_nav_menu( array( 'theme_location' => 'secondary_navigation_menu' ) ); ?>

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.