All Posts By

Guillaume

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

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

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.

Structure de la base de données Wordpress

Structure de la base de données WordPress

By | Aide et astuces, côté serveur | One Comment

La structure de la base de données WordPress se présente sous la forme de onze tables ayant le préfixe wp_.

Introduction

WordPress à besoin que d’une seule et unique base de données de type SQL pour fonctionner. La connexion à cette base de données s’effectue à l’aide de PDO, ce qui offre un large choix de système de gestion de base de données.

Seules les onze tables par défaut de WordPress sont citées ici.

Il est possible que des plugins aient créé d’autres tables voire même d’autres bases de données. Si un plugin créé de nouvelles tables elles porteront le même préfixe que celle de WordPress. Si un plugin créé une nouvelle base de données, elle est soumise à aucune restriction particulière.

Le préfixe wp_ est proposé par défaut durant l’installation. Il est fortement conseillé de le remplacer. En effet, dans le cas d’une injection SQL il est plus facile de cibler vos tables si elles ont gardé le préfixe par défaut.

 

Tour d’horizon des différentes tables

wp_commentmeta et wp_comments permettent la sauvegarde des commentaires sur les publications de site.

wp-links n’est plus utilisée aujourd’hui. Il y a quelques années de cela, le tableau de bord de WordPress proposé un menu appelé Liens. Il permettait d’ajouter toute une liste de liens et de les grouper par catégorie. C’est dans cette table que se trouvaient les liens.

wp_options contient les valeurs des paramètres du menu Réglages.

wp_postmeta et wp_posts contiennentt toutes les publications du site. Soit, les pages, les articles et le(s) menu(s). Depuis l’arrivée de la fonction Révision qui pour rappel permet de restaurer une page ou un article à une date antérieure, chaque version sauvegardée génère une nouvelle ligne dans la table wp_posts.

wp-term_relationships, wp_term_taxonomy et wp_terms contiennent les informations relatives aux catégories d’articles, aux mots-clés (tags) des articles, ainsi que leur lien avec les différents pages et articles.

wp_user et wp_usermeta. WordPress sépare dans deux tables les utilisateurs. wp_user contient la plupart des champs qu’il faut obligatoirement remplir pour créer un utilisateur. C’est dans cette table que figurent les noms, les adresses Email ainsi que les identifiants et mots de passe (encrypté) mais pas les Rôles. Les rôles quant à eux figurent dans wp-usermeta ainsi que les valeurs des champs non obligatoires.

Automatiser les mises à jour sur WordPress

By | sauvegarde wordpress, Sécurité, Wordpress 3.7, Wordpress 4.2 | No Comments

L’une des grandes avancées de WordPress 3.7, c’est la mise à jour automatique du programme. S’il reste la mise à jour des plugins à faire, la mise à jour du CMS se fait automatiquement. Ceux qui utilisent la fonction recevront même un email directement dans leur BAT.

C’est désormais une nécessité depuis la version 4 de WordPress et des malheureuses, mais régulières failles de sécurité. Ne serait ce que la dernière faille de sécurité de wordpress en date qui n’était pas violente, à condition de faire la mise à jour 4.1.2 qui a permis de régler le problème tout de suite.

Cependant, une mise à jour doit être optimisé et ne doit pas vous bloquer votre site. C’est pourquoi que l’automatisme c’est bien, mais à condition de mettre en place un système de sauvegarde automatique de votre base de données, chaque semaine, qui permettra de vous aider si la mise à jour automatique fait planter WordPress.

D’autres ont préféré refuser ces automatismes pour avoir la main et garder le contrôle sur un éventuel plantage. Solution idéale c’est vrai, mais à condition d’avoir un seul site à gérer. Nous qui en avons une centaine, c’est plus compliqué.

Dans ce cas précis on organise en parallèle des sauvegardes automatiques, le nécessaire pour connaître les sites à risque et les autres.

Du coup, les automatismes, nous les réglons à la main : Démarrons par la plus simple, le réglage des mises à jour plugins et thèmes:

Pour cela il faut aller dans le fichier functions.php, pour rajouter les deux lignes suivantes:

add_filter( 'auto_update_plugin', '__return_true' ); // Plugins
add_filter( 'auto_update_theme', '__return_true' ); // Thèmes

La première ligne activera la mise à jour automatique des plugins, la deuxième la mise à jour automatique des thèmes.

 

Ensuite, le réglage du core, des réglages plus avancés et bien précis.

Pour activer les mises à jour mineures:

add_filter (‘allow_dev_auto_core_updates’, ‘__return_true’);

Pour l’activation des mises à jour majeures:

add_filter (‘allow_major_auto_core_updates’, ‘__return_true’);

Attention, à bien noter : Si les mises à jour majeures sont plus importantes dans le fonctionnement du site, les mises à jour mineures sont souvent des mises à jour d’ajustement et de sécurité : Donc si la différence est faite pour wp, nous vous conseillons d’activer les deux, et même plus les mises à jours mineures, security first !

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.

Sortie de WordPress 4.1 pour des améliorations très appréciables

By | Aide et astuces, Wordpress 4.1 | No Comments

WordPress sort donc sa nouvelle mise à jour, et même s’il ne s’agit que d’une mise à jour face aux changements qu’on a pu voir sur la version 4.0 ou pour le lancement de WordPress 3.0, beaucoup de nouveautés se présentent à nous, et plutôt agréables.

Donc, à retenir de façon exhaustive:

  • L’arrivée du nouveau thème annuel : Twenty Fifteen.
  • L’intégration d’un changement de langage directement à travers l’interface, plus besoin de copier-coller les fichiers  en .po et .mo.
  • Quelques changements techniques mineurs mais appréciables, comme le suivi du WYSIWYG (le distraction-free) lorsqu’on descend une page, pour plus d’efficacité dans le traitement du contenu. C’est d’ailleurs un point clair qui indique une nouvelle fois que le contenu reste la première des choses à bien traiter sur un site web (je ne parle pas de Google vous le pensez bien !)
  • La possibilité d’ajouter directement les vidéos vine, les fameuses vidéos courtes de type twitter, qui nous rappel l’importance des réseaux sociaux.

Un maj qui portent un message également à travers l’intégration du thème Twenty Fifteen et l’intégration Vine : C’est l’importance prépondérante du responsive, au service du mobile qui va devenir la première plate forme de consultation web à partir de l’année prochaine, loin devant le PC qui va prendre la troisième place.

Les sites se doivent donc d’être responsive, adaptés au mobile, tout autant que les boutiques en lignes qui doivent faire l’object d’une attention toute particulière sur ce point.