Optimiser simplement les images sous wordpress

Optimiser Worpdress est une priorité

Aujourd’hui les règles SEO imposées par Google prennent en compte les performances de votre site internet. De ce fait il analyse le temps de réponse de votre site pour les usages depuis les ordinateurs et les mobiles. 

Beaucoups de règles rentrent en comptes pour l’optimisation de votre site. Ici, vous trouverez une série d’articles afin de vous présenter comment optimiser votre site internet. 

Optimiser la compression des images

Par défaut WordPress vous fait confiance, il garde en mémoire l’image que vous lui envoyez puis crée des formats d’affichages de cette dernière (petite, moyenne et grande). 

A l’utilisation de votre image, lorsque vous la choisissez depuis votre librairie il est courant que vous ne soyez pas sensibilisé au choix de sa dimension. Alors que ce ci améliore les temps de chargement de votre site et ainsi votre note sur Google par rapport à l’image original. 

Exemple ci-dessous ou vous pouvez choisir sa dimension en bas à droite
smush optimisation wordpress

 

Mais où intervient Smush ?

Smush arrive en complément en définissant  : 

  • Une taille en pixel maximum à l’upload
    • Afin d’éviter les images trop volumineuses
    • Il redimensionne automatiquement
  • Compresse les images avec un pourcentage de qualité
    • Réduit le poids de l’image à envoyer depuis le serveur (70% conseillé)
  • Permettra le lazy load dont on parlera dans un autre article
  • Et mettra à disposition un CDN dans sa version pro. 

Maintenant vous n’aurez plus besoin de vous soucier de la dimension de vos images même si vous oubliez de choisir un format optimisé pour l’affichage de cette dernière, puisque Smush passera derrière vous pour compresser les images bien trop lourdes. 

Mais il reste conseillé de bien choisir son format d’affichage et ne pas garder le format original. 

Smush vous permettra aussi d’avoir un rapport sur l’espace économiser sur le serveur grâce à lui. Car réduire la dimension des images est aussi bon pour votre infra.

smush optimisation wordpress 

Extension de partage sur les réseaux sociaux pour WordPress

La frustration sur les extensions de partage pour les réseaux sociaux

Sur WordPress les extensions gratuites sont de plus en plus rares. La belle époque est révolue. Seul Drupal arrive encore à garder une communauté qui fournie des extensions avancées gratuites sans compléments financiers. 

Sur WordPress de nos jours trouver une extension entièrement gratuite, facile à mettre en place et performantes pour partager sur les réseaux sociaux est devenu compliqué. 

Et je n’en ai pas trouvé ! 

Le choix de social pug

Après plusieurs recherches et essais à votre place j’ai trouvé diverses extensions. 

La problématique se résume rapidement à : 

  • Si les mises en pages avancées sont gratuites alors on doit se créer un compte sur un service tiers comme Addthis
  • Si le plugin ne nécessite pas d’inscription sur un service tiers alors on nous demande de passer à la caisse pour débloquer des réseaux sociaux ou une mise en page avancée. 

Social Pug, elle ne vous oblige pas à créer de compte sur des services tiers et ses mises en pages gratuites restent totalement acceptables en terme de design et personnalisable par votre propre thème. De plus il propose deux types de positionnements par défaut. Flottant sur la page ou en inline dans le contenu. Sans avoir à tripatouiller le module.

Il est aussi facilement responsif. 

Aujourd’hui je l’utilise sur mes deux sites (1 et 2) et comble toutes mes attentes. Certes ce n’est pas une révolution mais il fait un bon travail sur son scope gratuit sans vous frustrer. 

Essayez le !

SQLite – Installer wordpress sans base de données MYSQL

Installer WordPress sans base de données Mysql – SQLite

Les bases SQLite sont des bibliothèques écrites en langage C qui propose un moteur de base de données relationnelle accessible par le langage SQL.

Contrairement aux serveurs de bases de données traditionnels, comme MySQL ou PostgreSQL, sa particularité est de ne pas reproduire le schéma habituel client-serveur mais d’être directement intégrée aux programmes. L’intégralité de la base de données (déclarations, tables, index et données) est stockée dans un fichier à plat au près de votre projet. Ici notre wordpress.

Comment le mettre en place ?

Déjà, il faut savoir que la compatibilité annoncé s’arrête avec la version 4.1.24 mais je l’ai personnellement testé sous WordPress 4.9.8 et l’extension reste à 100% fonctionnelle.

Pour se faire :

  1. Télécharger l’extension SQLite intégration
  2. Copier l’extension dans wp-content/plugins
    1. Pour avoir wp-content/plugins/sqlite-integration
  3. Copier le fichier db.php présent dans wp-content/plugins/sqlite-integration à la racine de wp-content
    1. Pour avoir wp-content/db.php
  4. Editer le fichier wp-config-sample.php en le renommant wp-config.php et en rajoutant dedans
      1. define(‘DB_FILE’, ‘.ht.sqlite’);
      2. define(‘DB_DIR’, ‘/your-project-path/’);
  5. Accéder à votre site et l’installation se fait automatiquement.

Attention, Apache ou Nginx doivent avoir le droit en écriture dans le dossier ou est la base de donnée.
De plus, si vous avez une installation fraiche de wordpress et que vous avez une boucle de redirection, ajoutez ces ligne dans le .htaccess pour apache afin de résoudre correctement les path de l’application.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Et voilà, un WordPress sur une base SQLite, utile pour un site secondaire quand vous n’avez plus de place sur votre base principale, si votre projet doit être facilement transposable, …

 

 

Drupal 8 entityQuery – Récupérer une entité avec les valeurs de ses champs [En résumé]

Drupal

La class entityQuery de drupal permet de récupérer une entité ou une liste d’entités.

Tout les types d’entités sont pris en compte, c’est à dire les node, block, user, paragraphs, …

Une utilisation basique :

$query = \Drupal::entityQuery('node')
->condition('status', 1)
->condition('type', 'article')   
->condition('field_example', 'cheveux'); $nids = $query->execute();

Ici nous récupérons les entités de type article, publié qui comportent dans le champs field_example la valeur égale à cheveux. Un tableau est ainsi renvoyé avec les nodes comportant ces valeurs.

Fences – Drupal nettoyez les wrappers de vos champs

Drupal

Présentation rapide de Fences, l’ami de vos projets Drupal

La frustration courante de Drupal est le rendu natif de ses champs. Les valeurs d’un champs sont rendues au niveau du template dans des wrappers verbeux et toujours accompagnés de balises “<div>”. Fences est là pour vous aider.

Exemple du rendu d’un champs sous drupal : 

<div class="field field-name-field-test field-type-text field-label-above">
  <div class="field-label">Le label de mon champs</div>

  <div class="field-items">
    <div class="field-item even">Mon paragraphe ...</div>
  </div>
</div>

Les problèmes ?

  1. N’est pas nativement SEO friendly pour specifier un h2 par exemple sur l’emploi d’un champs
  2. L’imbrication de div, un mauvais ratio code/contenu peut être approché
  3. La structure du DOM se complexifie trop facilement
  4. Les balises HTML5 non supportés
  5. La personnalisation du rendu plus long en créant par exemple un thème pour votre field ou ressortir les données correctement dans le tpl de votre node, …

Bien sûr Fences n’est pas indispensable, on peut faire sans si on a compris la logique de Drupal. Mais il peut être sympa à implémenter dans vos projets ou la structure de rendu de vos node n’est pas évoluées et peut être simplement gérée avec le gestionnaire d’affichage de Drupal. Fences peut apparaître comme complément à la mise en forme de votre site et de son rendu. Mais aussi pour les projets plus évolués pour une gestion des fields plus évolués dans votre propre process.

Fences

Vous l’aurez compris Fences permet d’optimiser le rendu de vos champs. Une belle optimisation configurable simplement lors de la création de votre champs en choisissant son container.
Fences vous permet tout comme le système natif de Drupal de créer une nouvelle sortie de vos champs et de les mettre en forme à l’aide d’un template associé.

Exemple :

<h3 class="field-label">Le label de mon champs</h3>

<p class="field-foobar">Mon paragraphe ...</p>

Bien sûr vous n’êtes pas obligé d’utiliser Fences, et il n’est pas la seule solution. D’autres alternatives sont présentés sur la fiche du module mais il est à mon unique sens le plus rapide à configurer. Notez tout de même que sa configuration est exportable dans des Features.

Télécharger Fences pour Drupal 7 en version stable : Module
Le module est en cours de développement pour Drupal 8.

Actualité – Un rapide petit tour d’horizon

Actualité

Allez un rapide petit tour de l’actualité, très rapide.

ISS Live – Un rapide petit tour d’horizon !

ISS Live est une application permettant de suivre en direct la position de l’ISS. L’application est accompagnée d’un live de deux caméra. L’une d’entre elle est en HD et vous  permet de faire de beau clichés de la terre. Quant à la seconde la qualité est bien moindre mais la caméra n’est jamais la même. Sur cette dernière vous avez aussi droit aux conversations des astronautes.
L’application est synchronisée avec une carte afin de connaitre en direct la position de la station.
Les utilisateurs peuvent aussi commenter au sein de l’application après avoir créé un compte facilement à l’aide de Google ou Facebook.

Télécharger l’application

Chrome 55 – Consomme moins de ram

Chrome basé sur webkit est aujourd’hui le navigateur internet le plus utilisé (63% du marché). Mais bien qu’il soit le plus utilisé ce dernier est aussi un des plus gourmand, bien loin devant notre petit favori à tous Internet Explorer (pour de la critique). Ainsi avec la version 55 de chrome Google promet une consommation en ram allégé de 50% grâce à une optimisation du corps javascript et l’abandon prononcé de flash au profit de l’html5.

WordPress 4.7 – Released

WordPress 4.7 est enfin disponible depuis le 7 décembre en version finale. Retrouvez ici la liste des nouveautés.

Drupal 7 – End of life

Avec la sortie de Drupal 8 il est légitime de s’inquiéter pour son prédécesseur. Va-t’il continuer à recevoir des mises à jour de sécurité ? La réponse est oui ! Drupal 7 sera maintenu jusqu’à la sortie de Drupal 9 planifié pour 2020. A l’image de Drupal 6 qui s’est vu arrêté 3 mois après la sortie de Drupal 8 nous pourrons alors imaginer le même scénario pour 2020. Bien sur Drupal 7 recevra uniquement les mises à jours de sécurités et non plus les mises à jour correctives ou pour diverses évolutions.

Drupal 7.52 | 8.2.3 – Mis à jour de sécurité moyenne

Drupal

4 nouvelles failles de sécurité sont à combler sur vos sites Drupal !

L’équipe de sécurité a mis à jour le core en version 7.52 pour Drupal 7 et en 8.2.3 pour Drupal 8.
La mis à jour signalée comme modérément critique (13/25) sortie le mercredi 16 Novembre 2016 fixe 4 vulnérabilités.
2 sont présentes seulement sur D7 et 3 sur D8. L’une d’entre elles est donc disponible sur les deux versions de Drupal.

Criticité moyenne

L’une des deux plus urgentes concerne la version 8, une faille dans le mécanisme de translittération permet à une URL formatée d’une manière spéciale de mettre le site hors ligne (déni de service). La translittération permet de nettoyer les noms des fichiers sur Drupal, générer les machines names, ou de url propre vers les contenus. Le but est de retirer tout caractères spéciaux et les remplacer par leurs équivalents. Exemple, un “é” en “e”.

L’autre faille de sécurité la plus importante concerne elle Drupal 7. Apparemment, dans certaines circonstances un utilisateur malveillant pourrait construire sa propre URL de soumission pour un formulaire. L’utilisateur lambda pourrait être redirigé sur un site tiers non officiel et abusé de sa confiance (social engineering/manipulation humaine).

Criticité Faible

Une faille concerne D8, où le cache de la page de réinitialisation de mot de passe était apparemment défini sous de mauvaises conditions de réinitialisation. La page peut afficher du contenu indésirable.

La dernière faille concerne D7 et D8, les hook permettant de surcharger les requêtes afin de récupérer des informations supplémentaires depuis la base de données (hook_query_alter, …) permettraient aux utilisateurs malveillants de récupérer des informations sur les term de taxonomies. La gestion de la restriction était faite sur le tag term_access et non taxonomy_term_access.

 

Il est bien sûr conseillé de mettre vos sites à jour.

Source : SA-CORE-2016-005

Introduction aux CMS – Bien choisir son CMS

Introduction aux CMS

Un CMS c’est quoi ?  

Pour débuter, qu’est ce qu’un CMS ? Oui, ce sera grossier.
Les CMS (Content Management System) sont des outils destinés à la création de sites web. Grossièrement, l’outil est un socle pré-développé qui permet de générer dynamiquement un site internet. Au sein des divers CMS la logique de thème et de module revient souvent. Les modules ont pour vocations d’ajouter des fonctionnalités à votre CMS. Tandis que le thème permet de personnaliser le site à votre image.
Le CMS est souvent choisi par les webmasters de par sa facilités d’utilisation. La structure des contenus pouvant déjà être existante à l’image de WordPress ou entièrement configurable nativement à l’image de Drupal.

Les avantages : 

  • Ne pas avoir à développer un site de A à Z quand ce n’est pas nécessaire avec un front office et un back office.
  • Le back office est disponible nativement
  • le CMS est Accessible
  • De grandes communautés sont existantes pour trouver du support sur l’outil
  • Entièrement personnalisable (module et thème)
  • Flexible, à l’image de Drupal les développeurs peuvent le pousser dans ses retranchements. On peut parler alors de CMF
  • Des mises à jours de sécurités régulières
  • “Pas besoin de savoir développer”

Les inconvénients :

  • Les failles de sécurités ont plus d’impacts de par le nombre de sites basés sur de mêmes socles ou utilisant les mêmes modules.
  • Certains vieillissent mal avec leur communauté à l’image de spip.
  • Des utilisations mal pensées des CMS par des développeurs pour le client dans le long terme. La demande du client peut vite dépasser la capacité de certains outils.
  • Des puristes rejetterons les CMS, mais un CMS bien identifié pour un besoin vous évitera 30 jours de travail supplémentaire.
    Des pros CMS ne penseront qu’a cette solution, là où un framework de développement à l’image de Symfony serait plus adapté.
  • Ou encore d’autres ne verront les avantages que de leur CMS favoris. Il faut savoir s’ouvrir et expérimenter. Même si souvent on prend de meilleurs décisions après en avoir pris une mauvaise. Les expériences professionnelles peuvent aussi nous pousser à découvrir de nouvelles technologies et leur scope d’utilisation.

Un CMS mais pour quelle utilisation ? 

Un site vitrine simple : 

Si le site n’a pas pour but d’évoluer dans le temps et à pour seule ambition d’être un site vitrine sans contribution de la par de votre client. Et à cela vous ajouter un budget restreint.
Ne choisissez pas un CMS, ni un Framework de développement. Partez plutôt sur des site statique mais bien fait. Et oui ça ce vend toujours.

Un site dynamique: 

Votre client vous a appelé. Il veux un site internet qu’il peut contribuer avec ses coéquipiers. Approfondissez le sujet avec ce dernier avant toutes décisions.
Quelle vocation à le site ? La structure de donnée est-elle simple ou compliqué ? A-t’il déjà des habitudes ou des préférences ?

En résumé :
Si le site à pour vocation d’être un flux de contenu RTE basic rangé par page
– Partez sur un CMS simple et personnalisable. Pour moi WordPress

Si la structure de données est plus évoluée et l’affichage plus avancée qu’un simple blog, avec des interfaces utilisateurs avancées, des notions de rôles, l’implémentation de développement custom …
– N’hésitez par a partir sur un CMS que vous savez faire évoluer. Pour moi Drupal

Si la structure de données n’est pas cohérente au sens commun, comme pour le développement d’une application interne à une entreprise, des web services évolués …
– Partez sur un Framework. Pour moi Symfony ou CakePhp

Un site e-commerce ?
– Des CMS sont spécialisés comme Prestashop et Magento. Mais Drupal et WordPress peuvent aussi répondre à de simples besoins grâce à des modules.

Si votre client vous impose une solution et que vos convictions vous poussent sur un autre choix technique n’hésitez pas à lui présenter les bénéfices de votre réponse.
Si il insiste cédez ou refusez ! Après tout c’est lui le client et vous aurez fait votre travail de conseil.

Les nouveautés de WordPress 4.7 – Disponible en Beta

Wordpress 4.7

WordPress 4.7 sera disponible le 6 décembre en version finale ! 

Un petit récapitulatif des grandes étapes du cycle de développement de WordPress:

  • 26 Octobre – Beta 1
  • 2 Novembre – Beta 2
  • 3 Novembre – Beta 3 
  • 22 Novembre – Release Candidate Finale
  • 6 Décembre – Mise à disposition au grand public

Alors qu’apporte la nouvelle version de WordPress ?

Un nouveaux thème par défaut ! Appelé Twenty Seventeen, il se voudra immersif en mettant en avant les images à la une des posts, le support des médias avancé et de subtiles animations. Il proposera une page d’accueil plus personnalisée et personnalisable à l’aide de widget. Ce thème sera par défaut toute l’année 2017 sur WordPress et sera bien-sûr responsif.

Dans ce thème une fonctionnalité est réellement poussée : les vidéos en avant. Vous pouvez retrouver un exemple ici.GIf viedeo wordpress 4.7

Cliquer pour lire

Le support des liens contextuels pour l’édition des élément front devrait aussi faire son apparition petit à petit. Permettant d’accéder à la personnalisation des éléments directement depuis le front office. A voir si la fonctionnalité sera implémentée comme celle présente nativement sur Drupal.

La personnalisation des thèmes sera facilitée avec une prise en charge des aperçus en live de vos modifications CSS faites au sein de Worpress. Cela permet de modifier l’affichage de certains éléments de votre thème ou de vos plugins sans craindre les mises à jours. Actuellement, il etait plus judicieux de passer par une gestion de thème enfant pour surcharger le thème principale. Bien-sûr cette technique ne sera pas obsolète, mais pourra être mis en place pour des évolutions plus lourdes que de la simple intégration corrective.

Le back office du site supportera le multilingue. Sa configuration se fera directement depuis le compte utilisateur.

Les PDF du site auront eux aussi droit à des miniatures de prévisualisation.

Pour les développeurs quelques mises à jours supplémentaires !

Le support d’un web service REST pour les contenus.

Contenus concernés en accès écriture et lecture :

  1. Articles
  2. Commentaires
  3. Catégories
  4. Utilisateurs
  5. Méta-données

La configuration sera elle aussi prise en compte.
Développeurs vous allez vous amuser sur vos parcs multi-site par exemple.

Vous pourrez aussi développer des actions de masses customs. Vous ne serez plus limité au simple “éditer” et “supprimer” en masse.

Pour finir vous aurez la possibilité de créer des templates par custom post type. Même si la logique est différente la fonctionnalité existe aussi sur Drupal et fait ses preuves !

Source : WordPress Releases