All Posts By

Guillaume

Wordpress 3.9 Smith

Mise à jour WordPress 3.9 Smith pour les développeurs

By | wordpress 3.9 | No Comments

Mise à jour WordPress 3.9 Smith n’a pas oublié les développeurs et arrive avec un florilège de nouvelles fonctionnalités et d’améliorations pour les développeurs. Une mise en évidence des  fonctionnalités les plus pertinentes seront présentées dans cet article. Pour consulter la liste complète n’hésitez pas à consulter le Querry Post officiel de WordPress.

Une documentation intégrée au code

Tous les points d’accroche des actions et des filtres de WordPress sont désormais documentés, et les documentations du gestionnaire de médias et des API de personnalisation ont été détaillées.

Support de MySQLi

Pour ceux qui ont installé WordPress sur un serveur xAMP avec PHP 5.5 ou supérieur, pourront  désormais utiliser la bibliothèque PHP mysqli.

Pour rappel le « i » de MySQLi est synonyme de improved (amélioré). Après installations/activation du module MySQLi, WordPress bénéficiera d’une meilleure performance et une plus grande flexibilité.

Nota : Cela impactera directement les plugins. Les développeurs de plugins devront adapter leur code en conséquences afin que cette nouvelle couche soit prise en considération. Pour plus d’informations rendez-vous sur le Make WordPress Core de Gary Pendergast.

Recadrage des images

Les tailles d’image ont maintenant un argument supplémentaire lors de l’inscription, de sorte que les développeurs de thème peuvent définir la position par défaut pour recadrer une image.

Le paramètre $crop fonctionne avec la fonction add_image_size. Un exemple d’utilisation dans ce fichier wp-image-crop-position.php.

Support des balise <figure> et <figcaption>

Les galeries et les légendes prennent en charge l’HTML5. Il sera désormais possible d’utiliser les balises figure et figcaption au lieu des listes de définitions. Un article du 4 mars 2014 sur blog de Themeshaper explique en détail comment l’utiliser sur son thème.

Ajout de la class has-post-thumbnail

Pour ceux qui ont déjà créée des thèmes savent qu’il y a beaucoup de fois où l’on voudrait associée une miniature à un article. La fonction has-post-thumbnail simplifie tout ça. A présent, ce sera une classe d’article par défaut.

Mise à jour des bibliothèques tierces

Voici la liste des bibliothèques tierces misent à jour :

  • TinyMCE 4.0
  • Masonry 3.0
  • Backbone 1.1.2
  • Underscore 1.6
  • PHPMailer 5.2.7
  • Plupload 2.1.1
  • jQuery 1.11.0
  • Query UI 1.10.4
  • MediaElement 2.14

Amélioration de WordPress MU (Multi site)

WordPress 3.9 Smith signe l’obsolescence des fonctions wpmu_current_site()et get_current_site_name(), l’arrivé de trois nouvelles fonctions wp-get_network(), get_site_by_path() et get_network_by_path() mais aussi l’arrivé de quatre nouveaux filtres.

Pour en savoir plus rendez-vous sur le Make WordPress Core de Jeremy Felt.

Wordpress 3-8-3

WordPress 3-8-3, une mise à jour mineur

By | Wordpress 3.8 | No Comments

WordPress 3-8-3, la mise à jour mineure parue mercredi 9 avril corrige deux bugs liés aux brouillons rapides et aux utilisateurs de type Auteur. Quatre fichiers ont fait l’objet de cette mise à jour.

Le premier bug concerne la fonction Brouillon rapide (Quick Draft) où certain utilisateurs se plaignaient de cette fonction car elle ne fonctionnait pas. Les brouillons n’étaient pas sauvegardés et le contenu tous simplement perdu.

Le second bug concerne là encore les articles, plus précisément leurs auteurs. En effet, lorsqu’un utilisateur de type Auteur modifiait un article écrit par un autre Auteur, WordPress substituer le nom du premier Auteur par le dernier auteur ayant apporté ses modifications à l’article.

La liste des fichiers concernés par cette mise à jour :

wp-admin/includes/upgrade.php
wp-admin/includes/post.php
wp-admin/about.php
wp-includes/version.php
readme.html

La note de publication officielle de WordPress 3-8-3 :

From the announcement post, this maintenance release addresses two bugs with version 3.8.2:

Quick Draft did not work and content was lost.

Bulk editing posts would set the posts’ author to the author of the first post.

For more, see the list of tickets or the changelog.

Personnaliser la partie admin de wordpress

Personnaliser la partie admin de wordpress

By | Aide et astuces, Plugin Wordpress | No Comments

Personnaliser la partie admin de wordpress, grâce à l’utilisation de White Label Cms

 

Voilà en quelques lignes accompagnées d’une vidéo, comment personnaliser la partie admin de wordpress pour l’organiser à vos couleurs.

Au tout début de l’utilisation de WordPress, l’admin n’était qu’une interface de gestion qui permettait d’écrire un article ou une page.

Désormais l’administration permet de faire davantage et entre autres de créer un véritable système au service de l’utilisateur dans la gestion de son site, de son contenu, mais également des données laissées par les utilisateurs.

WordPress et donc aussi puissant dans l’administration, que dans l’interface finale. Nous pouvons donc profiter de WordPress pour le personnaliser aux couleurs d’un client ou alors d’un site Internet.

C’est ce que nous allons faire dans cette vidéo tutoriel sur laquelle nous allons poser le logo et administrer les couleurs qui conviennent à la charte graphique définie. Pour cela, travaillons avec l’extension White Label CMS, un des plus simples et des plus pratiques.

Créer un sitemap pour Wordpress

Créer un sitemap pour WordPress

By | Aide et astuces, Référencement Wordpress | No Comments

Créer un sitemap pour WordPress peut se faire de deux façon : par l’intermédiaire de plugins, ou bien en créant un modèle de page qui exploite les API de WordPress. C’est cette dernière méthode qui fera l’objet de cet article.

Un sitemap, ou plan du site en français, n’est ni plus ni moins qu’une page comme les autres avec son en-tête, son pied de page et sa barre latéral. Seul le corps de la page (le body) est différent des autres pages puisqu’elle affiche sous forme de liste les titres des pages, des catégories d’articles et des flux RSS.

La première étape consiste à dupliquer le modèle de page par défaut soit le fichier page.php.

Renommez le page-sitemap.php puis ouvrez-le avec votre éditeur de texte préféré.

A la première ligne de votre nouveau fichier page-sitemap.php ajouter/modifier comme dans l’exemple ci-dessous.


<?php
/* Template Name: Sitemap */
?>

Repérer la balise div dans lequel s’affiche le body de la page. Souvent appelé <div class = « content » > puis supprimer tous ce qui se trouve à l’intérieur.

Ajouter ensuite le code source suivant :


<div id="content">
<h2><?php _e('Pages', 'textdomain'); ?></h2>
<ul><?php wp_list_pages("title_li=" ); ?></ul>
<h2><?php _e('RSS Feeds', 'textdomain'); ?></h2>
<ul>
<li><a title="Full content" href="feed:<?php bloginfo('rss2_url'); ?>"><?php _e('Main RSS' , 'textdomain'); ?></a></li>
<li><a title="Comment Feed" href="feed:<?php bloginfo('comments_rss2_url'); ?>"><?php _e('Comment Feed', 'textdomain'); ?></a></li>
</ul>
<h2><?php _e('Categories', 'textdomain'); ?></h2>
<ul><?php wp_list_categories('sort_column=name&optioncount=1&hierarchical=0&feed=RSS'); ?></ul>
<h2><?php _e('All Blog Posts', 'textdomain'); ?></h2>
<ul><?php $archive_query = new WP_Query('showposts=1000'); while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
(<?php comments_number('0', '1', '%'); ?>)
</li>
<?php endwhile; ?>
</ul>
</div>

Enregistrez les modifications, puis copiez votre fichier page-sitemap.php de votre thème localisé dans /wp-content/themes/ THEME/

Ouvre le tableau de bord de WordPress, créez un nouvelle page, attribuer un tire (examble : plan du site) puis modèle changer par Sitemap. Cliquer sur Publier pour valider.

Les sitemap sont généralement affiché dans le pied de page (footer).

  1. Si le thème permet d’ajouter des widgets dans le pied de page, allez dans  Apparence -> Menu puis créer un nouveau menu dans lequel sera ajouter la page plan du site. Ceci fait, allez à présent dans Apparence -> Widgets, puis glissez/déposez le widget Menu Personnalisé dans la footer area de votre choix. Attribuez un nom au widget puis sélectionnez le menu précédemment créé dans la liste déroulante.
  2. Si le thème ne permet pas d’ajouter des widgets dans le pied de page, éditez le fichier footer.php puis localisez la classe nommé généralement <div class = « footer »> puis ajouter un lien vers votre page sitemap.

<a title="Plan du site" href = "/plan-du-site">Plan du site</a>

Personnaliser un thème Wordpress

Personnaliser un theme WordPress

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

Personnaliser un thème WordPress est un bon compromis entre simplicité et personnalisation. Simplicité, car cela n’est pas donné à tout le monde de créer un thème de A à Z et personnalisation car le thème choisis qu’ils soient gratuit ou payant, est déjà installés sur d’autres sites que le vôtre et ainsi manquer très vite d’originalité.

La structure générique d’un thème

Les thèmes sont un ensemble de fichiers PHP, CSS et JavaScript placés dans un dossier portant (en général) le nom du thème le tout situé dans /wp-content/themes/nom_du_theme. Même si le nom et le nombre de fichiers varie d’un thème à l’autre, il y a tout de fois des inconditionnels tel que :

  • Header.php, dans lequel se trouvent les éléments de l’en-tête du site.
  • Footer.php, dans lequel se trouvent les éléments du pied de page du site.
  • Sidebar, dans lequel se trouvent les éléments de la barre latérale du site.
  • Page.php, c’est le gabarit qui permet à WordPress de créer les pages du site.
  • Index.php, c’est le gabarit de la page d’accueil du site.
  • Single.php, permet à WordPress d’afficher les articles de manière individuelle
  • Style.css, pour Cascading Style Sheet, pour la mise en forme du site.

Les éditeurs de texte

Personnaliser un thème WordPress se fait en modifiant directement les fichiers sources du thème. Soit par le billet d’un éditeur de texte, dans ce cas préférez des éditeurs de texte gérant le mode remote en d’autre termes, qui permettent de se connecté à un serveur FTP afin de na pas à avoir systématiquement besoin de télécharger les fichiers en local avant de les modifier. Soit depuis le tableau de bord de WordPress dans la rubrique Apparence -> Editeur.

L’éditeur de texte de WordPress est très sobre. Un peu trop d’ailleurs. Heureusement il est possible de compter sur des plugins tels que WP editor. Ce plugin offre une bonne lisibilité du code avec une colorisation syntaxique claire. De plus il permet d’accéder aux fichiers contenu dans des sous dossier, ce qui est un vrai plus par rapport à ses concurrents.

Une fois c’est modifications effectués, garder toujours une copie de vos fichiers, car chaque mise à jour de votre thème écrasera vos modifications. Cela peut paraitre rudimentaire, mais à ce jour il n’existe malheureusement de modifications sur les fichiers PHP et JavaScript.

Nota : N’oubliez d’attribuer les droits 775 au dossier wp-content ainsi qu’à ses sous dossiers. Auquel cas le WP editor ne parviendra pas sauvegarder vos modifications dans les fichiers sources du thème.

Customiser le CSS

Pour la partie CSS les choses sont beaucoup plus souples. La plupart des thèmes payant et dit freemium ont dans leurs panneaux de configuration une section nommé Custom CSS. Il s’agit d’une aire de texte dans lequel il est possible de saisir du code CSS sans altérer le/les fichier(s) CSS du thème. Ainsi lors de mise à jour du thème, la partie CSS est préservée. Mais cela ne dispense pas de faire une sauvegarde des paramètres du thème. Lors des mises à jour du thème, tous les paramètres sont réinitialisés. Là encore, il n’est pas rare de trouver ce type de fonctionnalité sur ce genre de thème.

Pour ce qui est des thèmes entièrement gratuit, les développeurs ne prévoient rien de tout cela. Là encore c’est du côté des plugins qu’il faut se tourner. Taper Custom CSS comme mot clé lors de votre recherche de plugin. Parmi le florilège de résultat obtenu, Simple Custom CSS est un bon choix pour ceux qui souhaitent ajouter du code CSS en toute simplicité.

Nota : Ce type de fonctionnalité est surtout prévu pour ajouter des directives CSS. Mais il arrive parfois que l’on souhaite en retirer. Cela n’étant pas possible l’astuce consiste à les désactiver. Pour cela il suffit de taper la directive dans votre Custom CSS et de lui attribuer la valeur none. Comme dans l’exemple ci-dessous :

Dans le fichier style.css

h1 { padding-top: 10px ; }

Dans la fenêtre Custom CSS

h1 { padding-top: none ; }
wp-editor-wordpress

Wp-Editor l’éditeur de code indispensable pour WordPress

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

Après en avoir essayé de très nombreuses extensions dédiées à la personnalisation de l’environnement du code, WP-editor s’est avéré très efficace pour
Modifier ses thèmes et ses plugins comme sur Dreamweaver ou Notepad ++

Il remplace ce qui est installé par défaut dans l’éditeur de thème de la page PHP ou de votre feuille de style CSS. Cette fonction en place nativement dans WordPress depuis 2 ans, ne permet néanmoins pas une vue habituelle, telle que le permettent des logiciels comme Dreamweaver ou Notepad ++.

Avec les intégrations de couleurs, WP-Editor offre un environnement vous permet tout de suite de faire des modifications puisque les balises HTML, les balises PHP, et tout type de code apparaissent directement pour permettre de faire des modifications comme si vous étiez sur un éditeur du type Dreamweaver.

Au-delà des couleurs dans le code, vous pourrez également apprécier la numérotation des lignes dans l’éditeur de texte.

La numérotation de lignes est bien pratique, puisque désormais, beaucoup font les modifications directement à partir de l’inspecteur d’élément proposé par Firefox ou par Chrome. Cet éditeur de texte intégrant la numérotation de lignes, il est alors plus facile de faire un copier-coller de l’inspecteur à l’éditeur, puis de fairela modification ajustée pour la validation définitive.

Rapide et efficace il s’agit de la meilleure solution d’aujourd’hui sur WordPress pour administrer son code.
Au-delà l’avantage est également de pouvoir aller dans les fichiers CSS même si ces derniers sont localisés dans des dossiers. Après avoir changé les droits d’écriture et de permissions sur vos fichiers à partir de votre logiciel ftp, il vous sera alors possible de modifier l’intégralité du code présent sur votre site.
Cette extension fait partie des 10 meilleurs plug-ins à utiliser systématiquement dans un site WordPress.

Quel que soit le thème ou le plug-in sur lequel vous travaillez, Wp-editor s’associe à votre feuille et vous permettra ainsi la modification pour une personnalisation plus rapide et plus efficace. Vous allez donc grâce à cela progressivement quitter vos éditeurs de texte, et ainsi travailler de plus en plus directement en ligne pour laisser au local que le début de votre site.

Mettre en valeur son code dans WordPress avec SyntaxHighlighter

By | Plugin Wordpress | No Comments

Pour mettre son code en valeur sur WordPress, ce n’est pas difficile, la balise <code></code> intègre facilement ce que vous écrivez et permet à votre lecteur de faire un copier coller facile.

Alors, pourquoi SyntaxHighlighter ? Parce que ce qu’on aime, c’est pouvoir profiter de toutes les options de Notepad 2+, directement sur le site. Avec ces petites options, le code devient un véritable objet qu’on peut récupérer pour le retraiter ailleurs.

Pour le paramétrer, rien de plus simple, voici un résumé des principales infos à régler.

Paramétrage du plugin

Paramétrage du plugin

Ces réglages vous permettront de faire apparaître les numéros de ligne dans le code, d’activer ou non la barre d’outil.

Vous pouvez également activer ou nom le contenu de votre code à savoir si vous souhaitez que vos URL soient cliquables.

Si vous avez beaucoup de code et que vous livrer plusieurs dizaine de ligne, vous pourrez déterminer la place de l’espace code en laissant à l’utilisateur une scroll barre qui permettra d’aller de la première à la dernière ligne en quelques mouvements de souris.

C’est le plugin le plus utiliser et une simple inspection d’élément sur chrome permet de le trouver et de l’installer gratuitement.

Voilà donc un vrai plugin de Geek, ou de passionné WordPress plutôt…

TablePress

TablePress, faire un tableau rapide et facile sur votre site WordPress

By | Plugin Wordpress | No Comments

tablepressFaire un tableau dans un article ou une page wordpress peut prendre du temps, c’est le moins qu’on puisse dire. Coder un grand tableau peut prendre plusieurs heures même si le langage HTML n’est pas  des plus complexe.

 

Pour intégrer un tableau, c’est TablePress ancien Wp Table Reload qui prend le pas et propose la meilleure solution. C’est en tout cas notre sélection pour créer votre tableau.

L’ajout d’un tableau passe par un shortcode qui va alors chercher l’id du tableau créé juste avant dans le plugin.

Vous pouvez créer un tableau simple de quelques lignes, mais également importer directement un tableau excel dans votre page ou article wordpress.

Le format du tableau peut être en XLS, XLSX, CSV, mais également en HTML. Pour les puristes, sachez donc que vous pourrez également exporter votre tableau et ainsi profiter des mêmes formats. Si vous n’aimez pas utiliser les shortcodes, vous pouvez faire un export en HTML qui par un copier-coller dans la zone texte de votre article, donnera un résultat identique et modulable directement dans le texte si vous avez des modifications à faire.

Les options du tableau sont également importantes et permetentt en passant par de simples clics, de cacher, ajouter, supprimer et changer des colonnes. L’attribution des entêtes de colonnes et de lignes se fait dans la même organisation.

Voilà donc un moyen très simple d’intégrer beaucoup d’option sans être obligé de coder une seule ligne d’HTML.

Ci-dessous un exemple rapide de ce qu’on peut réaliser grâce à Tablepress

[table id=3 /]
formulaire de contact pour wordpress

Contact Form 7 vs Gravity Form : Quel formulaire de contact pour WordPress ?

By | Plugin Wordpress | One Comment

Les plugins de formulaire de contact pour WordPress sont nombreux mais les deux grands gagnants sont bien Contact Form 7 et Gravity Form.

La guerre des deux extensions va plus loin que le seul choix puisque l’un est payant (Gravity Form) et l’autre est gratuit (Contact Form 7).

La comparaison ne doit pas se faire sur le prix puisque Gravity Form permet d’aller beaucoup plus loin, et quelques dollars valent bien la peine d’être dépensées au regard des immenses possibilités que le plugin apporte.

En configurant Gravity Form, vous pourrez mettre en place un véritable système de récupération d ‘informations, tout à fait transposables pour du contact, mais également pour d’autres choses.

Formulaire de contact pour WordPress certes, mais il faut également voir le traitement de l’information derrière. Possibilité de transposer en PDF, exportation en CSV, intégration par shortcode…

Voyons donc un peu les différentes fonctions sous forme d’un récapitulatif pour avoir en tête les vraies différences.

[table id=1 /]

Notre choix chez FranceWordpress sera donc bien celui de Gravity Forms. Oui nous travaillons sur un CMS gratuit, mais certains développements valent les quelques dollars supplémentaires!

De notre côté, une grande partie des créations de sites internet que nous réalisons l’intègre d’office, permettant le développement de fonctions faciles mais très confortables pour les users : Gestion de contact, évidemment, mais également intégration de leads, génération de devis etc…

Cependant Contact Form 7 reste le plus connu pour une raison simple : sa gratuité ET son efficacité restent l’outil de formulaire de contact idéal à intégrer dans les thèmes wordpress payants ou gratuits. Dansles deux cas, un bon moyen de travailler avec une bonne extension sans exploser le prix.

menu de navigation responsive

Créer un menu de navigation responsive pour WordPress

By | Le graphisme et wordpress, Plugin Wordpress, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9, wordpress 4.0, Wordpress 4.1 | No Comments

Créer un menu de navigation responsive simplement avec le plugin Responsive Select Menu.

 

Nombreux sont les thèmes gratuits qui ne possèdent pas encore de menu qui répondent aux exigences du responsive web design et corriger cet oubli n’est pas à la portée de tout le monde.

Heureusement des plugins comme Responsive Select Menu permettent au plus grand nombre d’entre-nous de créer un menu de navigation responsive sans taper une ligne de code.

 

Installation

Téléchargez puis Installez le plugin depuis le tableau de bord de WordPress, puis activez-le.

Rendez-vous dans Apparence -> Responsive Select.

A quoi peuvent bien servir tous ces plugin qu’il est demandé d’installer ?

 

Le développeur de ce plugin à également créer un menu appeler UberMenu dont la démo est disponible sur le site officiel.

C’est plugin additionels sont utiles seulement si UberMenu est installé. Dans le cas contraire, il n’y aura pas besoin de les installer.

 

Configuration

La configuration de Responsive Select Menu se fait essentiellement depuis la rubrique Basic Configuration. La rubrique Advanced Settings permet seulement d’activer/désactiver le menu responcive sur certaines pages.

menu de navigation responsive

Maximum Menu Width : choisissez la largeur à laquelle le menu deviendra responcive.

Menu Depth Limit : laissez sur 0 pour afficher tous les éléments du menu. Ou un chiffre si certaine rubrique du menu ne doivent pas être affichés.

Sub Item Space : permet de personnaliser l’espace présent devant les sous-catégories du menu.

Exclide Items Without Links : masque toutes les catégories qui n’ont pas de liens (# ou vide).

First Item Name : personnalise la première catégorie « factice » du menu

: affiche le nom de la catégorie active lorsque le mobinaute navigue sur votre site.

Activate All Theme Locations : rend tous les menus responcive.

Selectively Activate Theme Locations : rend uniquement le menu principal responcive. L’option précédente doit être désactivé.

 

Une démonstration du plugin est disponible sur : http://agility.sevenspark.com/responsive-select-menu