WordPress

WordPress: créer un site Web privé pour la famille et les amis

Publié le par Anne-Gaële Wulkow

Dans un cadre privé, il n'est pas rare que vous ne souhaitez pas partager vos photos, vos vidéos et vos documents écrits avec tous.

Cependant, les partager avec vos amis et votre famille peut être intéressant. Facebook apparait parfois comme la solution idéale et facile. Beaucoup de personnes l’utilisent en pensant que le contenu reste bien privé - sans commentaire ...

Nous vous proposons une autre option (beaucoup plus sécurisée) : la création d’une page d'accueil WordPress accessible uniquement aux utilisateurs enregistrés. Pour que les visiteurs n’aient pas à se souvenir de leur mot de passe à chaque connexion, nous allons évidemment offrir la possibilité de s'inscrire – vous, votre famille et vos amis - via le login Facebook.

Méthode

Comment faire ?

  • Limiter l'accès
    • Configurer le plugin Members pour définir des rôles sur WordPress et rediriger l'accès à la page d'accueil du site Web via la page de connexion
    • Installer le plugin de l'éditeur des rôles WordPress (User role editor) pour créer une capacité individuelle
    • Personnaliser le fichier functions.php du thème pour cacher le contenu de la page d'accueil aux utilisateur ayant le rôle abonnés
    • Créer une page avec des informations pour les utilisateurs connectés, mais qui n'ont pas encore les autorisations appropriées
  • Installer / configurer un plugin pour permettre aux utilisateurs Facebook de se connecter sans identifiant ni mot de passe (Facebook Login)
    • Créer une application Facebook
    • Configurer le plugin WordPress Social

Limiter l'accès à la page d'accueil

Configurer le plugin "Members"

Ce plugin a deux fonctions pour notre cas d'utilisation :

  1. Interdir l'accès aux contenus de facon générale : les visiteurs doivent être inscrits.
  2. Créer un nouveau rôle Famille & Amis : en tant qu'administrateur, nous pouvons déplacer manuellement les abonnés (qui n'ont pas encore d'autorisations) au nouveau rôle Famille & Amis

Nous installons le plugin et nous nous occupons des paramètres :

  • Activation du site privé. Seul les visiteurs autorisés ont accès au contenu du site Web ; toutes les requêtes redirigent le visteur à la page d'inscription / de connexion tant que le visiteur n'est pas identifié.
  • Désactivation Feed. Aucune personne ou service non enregistré ne peut recevoir d'informations sur le contenu du site Web.

Les autres paramètres prédéfinis peuvent rester.

Créer une capacité individuelle

Le plugin d’éditeur de rôles utilisateurs (User Role Editor)  est populaire et gratuit. Il permet d’attribuer des rôles sous WordPress. Nous allons créer une nouvelle capacité pour notre projet et vérifier si le visiteur a ou non cette autorisation.

Nous créons ainsi une capacité appelée oooooxooooo et nous l’assignons au rôle "Famille et amis" ainsi qu'au rôle d'administrateur. Si votre site contient des utilisateurs utilisant d'autres rôles  (éditeur, ...), vous pouvez également les y attribuer. Dans tous les cas, NE PAS assigner la capacité au rôle "abonné" !

Paramètres supplémentaires des fonctions.php

Le plugin membres n'est malheureusement pas suffisant pour notre projet. En effet, avec ce plugin, vous pouvez uniquement inciter les visiteurs à s’inscrire. Par défaut, un utilisateur connecté a accès à tous les contenus (pages / articles) du site. Mais même si vous définissez les autorisations d'utilisateur sur toutes les pages et tous les articles, le visiteur non autorisé (par défaut, c'est le rôle abonné) obtient, par exemple, les titres des articles, seul le contenu est verrouillé.

Ce n'est pas ce que nous souhaitons ; nous voulons bloquer complètement l'accès à tous ceux qui n'ont pas explicitement l'autorisation de voir les contenus..

Code pour fonctions.php

function my_page_template_redirect(){
  if( is_user_logged_in() && ! current_user_can( 'oooooxooooo' ) && ! is_page( 'stop' ) ){
    wp_redirect( home_url( '/stop/' ) );
    exit();
  }

}

add_action( 'template_redirect', 'my_page_template_redirect' );

Pour bloquer complètement le site, les visiteurs non autorisés doivent être redirigés vers une page spécifique. Pour cela, nous ajoutons un code supplémentaire au fichier functions.php du thème.

Voici quelques brèves explications :

  • Chaque thème a une functions.php. Ce fichier central contrôle le comportement d'un thème et relie différents fichiers ensembles.
  • Le code supplémentaire vérifie 3 éléments :
  • Le visiteur est connecté
  • Le visiteur n'a pas la capacité oooooxooooo
  • Le visiteur n’est pas déjà sur la page Stop

Les 3 conditions remplies, le visiteur est renvoyé à une page "Stop".

Code pour fonctions.php Multisite

function my_page_template_redirect(){
  global $blog_id;
  if( is_user_logged_in() && ! current_user_can_for_blog( $blog_id, 'oooooxooooo') && ! is_page( 'stop' ) ){
    wp_redirect( home_url( '/stop/' ) );
    exit();
  }

}

add_action( 'template_redirect', 'my_page_template_redirect' );

Page d’informations (Stop) pour les utilisateurs rejetés

Les visiteurs qui s'inscrivent sans avoir les autorisations nécessaires ne doivent pas être simplement renvoyés sur une page blanche ou vers un message d'erreur. Il est, effectivement, préférable de les avertir qu’ils n’ont pas les droits pour accéder à cette page Web et les renvoyer vers le propriétaire de la page. Une information supplémentaire peut être indiquée aux utilisateurs de Facebook qui utilisent cette connexion pour la première fois et ne disposent donc pas encore d'autorisation.

Connexion Facebook

Afin de ne pas avoir avoir à inscrire tous vos amis au préalable et de les forcer à mémoriser des nouvelles données d'accàs, nous installons une fonction de connexion à Facebook. Comme vous l'avez probablement déjà vu, nous allons mettre en place un bouton "Connectez-vous avec Facebook" sur la page de connexion du site Web.

Quel que soit le plugin de connexion Facebook utilisé, nous avons besoin d'une application Facebook, à laquelle le plugin peut se connecter si un utilisateur de Facebook souhaite se connecter.

Application Facebook

Pour créer une application Facebook, connectez-vous ici : https://developers.facebook.com. L'explication ne va pas dans trop le détail, mais en suivant la procédure ci-dessous, vous devriez y arriver facilement.

Bien sûr, vous devez avoir des données d'accès Facebook, sinon inscrivez-vous.

  • Créez une nouvelle application
  • -> Créer l'ID de l'application - Nom d'affichage + email de contact
  • Contrôle de sécurité (Captcha)
  • Paramètres : Sélectionnez une catégorie, ajoutez une plateforme -> Site Web -> Entrez l'URL (sans slash à la fin). Enregistrez
  • App Review : publier et confirmer
  • Copiez et collez les codes dans WordPress

Configurer un plugin WordPress Social Login

Nous utilisons maintenant comme plugin WordPress Social Login : ce plugin est gratuit et peut également être utilisé pour Google, Twitter et beaucoup d'autres réseaux.

Pour que la connexion fonctionne comme souhaité, nous allons configurer les points suivants :

  1. Copier et coller les données de l'application Facebook dans le plugin
  2. Les enregistrements et les demandes d’inscription sont autorisées
  3. Les utilisateurs connectés via les réseaux sociaux reçoivent le rôle «Abonné» - c'est le groupe par défaut, mais vous êtes libre de le définir explicitement

En tant qu'admin, pour être informé qu’un nouvel utilisateur Facebook s'est inscrit, effectuez ce paramétrage : Paramètres > Connexion sociale WP > Widget> Paramètres avancés > Notification > "Notifiez uniquement l'administrateur de blog d'un nouvel utilisateur".

Ajout des données Facebook App

Paramètres généraux

Autorisation pour les nouveaux enregistrements

Facultatif : Supprimer la barre d'administration

Si vous souhaitez que les utilisateurs du groupe «Famille & amis» ou les non-administrateurs ne voient pas la barre d'administration, vous pouvez la cacher. Pour cela, un code est ajouté dans les fonctions.php :

function remove_admin_bar() {
if( ! current_user_can('administrator') && ! is_admin() ){
show_admin_bar(false);
}
}
add_action('after_setup_theme', 'remove_admin_bar');

En résumé

Nous avons modifié un site web existant, de sorte que le contenu ne peut être vu qu'après inscription du visiteur - si le rôle correspond.

Le login seul ne suffit pas, le visiteur peut ne pas appartenir au groupe des abonnés (rôle par défaut) et doit avoir une autorisation supplémentaire oooooxooooo. Les visiteurs qui ne l'ont pas sont redirigés vers une page définie au préalable qui les informe du manque de droits nécessaires pour voir les contenus du site.

Ensuite, nous avons mis en place un «connecteur Facebook» : les utilisateurs de Facebook peuvent se connecter sans entrer de mot de passe. Les utilisateurs de Facebook nouvellement inscrits sont en attente de votre autorisation et ne peuvent accéder à quoi que ce soit avant votre validation. Attention : si le visiteur utilise un adblocker, la connexion Facebook peut échouer.

En tant qu'administrateur, vous êtes automatiquement informé des nouveaux enregistrements. Si vous connaissez l'utilisateur de Facebook, vous pourrez lui attribuer le rôle «Famille & Amis».

WordPress : Créer des formulaires de contact avec, en option, l’envoi d’une copie à l’expéditeur

Publié le par Anne-Gaële Wulkow

Mailto ou formulaire de contact – telle est la question.

Dois-je proposer sur la page d'accueil de mon site Web un formulaire de contact ou tout simplement une adresse e-mail cliquable pour accéder au programme de messagerie installé localement ? Pour répondre à la question il faut se mettre à la place du visiteur : que préfère t-il ? Quelles expériences ont été faites à ce jour ?

Mailto - Web 1.0

Mailto représente le paramètre de l'attribut href dans la balise d'ancrage adresse mail l’adresse mail avec laquelle le navigateur est chargé d'appeler le client de messagerie par défaut et TO: le champ pré-rempli avec l’adresse spécifiée. Il est également possible de prédéfinir d'autres domaines tels que l’objet ou même le contenu du courrier.

Exemple : adresse mail avec les champs pré-remplis .

Etant donné que les champs blancs href et d'autres caractères spéciaux ne sont pas autorisés, ils doivent être remplacés par des codes hexadécimaux (% 20 = espace, %27 = apostrophe).

Très bien ! Mais attention, cela n’est pas dénué de problèmes :

  • Si aucun programme de messagerie électronique est installé sur l'appareil, rien ne se passe (le navigateur s’ouvrira si, par exemple, l'utilisateur utilise Gmail). Néanmoins, l'adresse étant indiquée, le message peut être envoyé à une date ultérieure.
  • Des robots d'exploration malveillants analysent les sites de fond en comble pour trouver des adresses de courrier électronique et les utiliser ensuite pour envoyer des spams (ou pour utiliser l'adresse comme expéditeur). Cependant, une adresse de type info@ - est quasiment toujours spécifiée et est de toute façon utilisée par les spammeurs.
  • Si vous voulez obtenir certaines informations d’une personne en particulier comme un numéro client ou des paramètres XY qui vous permettent d'identifier à quelle équipe interne le message est adressé, la méthode du mail cliquable ne vous mène malheureusement pas très loin...

Formulaires de contact 1.0

Les formulaires de contact n’existent pas depuis hier. La qualité a été améliorée de manière significative, cela s’explique sûrement du fait qu’il y ai de plus en plus de propriétaires de sites Web, utilisant un CMS (WordPress pour la plupart), et s’appropriant ce genre d'extension.

Revenons aux anciens types de formulaires de contact : beaucoup contenaient des bugs et généralement aucune validation n’était prévue (l’envoi d’un formulaire vide était souvent possible) ; c’est pourquoi nous avions des doutes quant à la bonne livraison des messages. De plus, l'expéditeur ne recevait que rarement une copie de son message.

Créer des formulaires de contact conviviaux avec Gravity Forms

En utilisant WordPress, vous avez accès à de nombreux plugins dédiés aux formulaires, comme par exemple Contact Form 7. Ce dernier est très populaire (plusieurs millions d'installations actives à ce jour) et digne de confiance. Cependant nous allons vous donner un exemple de construction de formulaire de contact avec Gravity Forms qui est un plugin particulièrement ergonomique mais qui nécessite l'achat d'une licence. Je precise à ce stade que l'utilisation de Gravity Forms est gratuite avec les tarifs d’hébergement WordPress managé de SaaS Web.

Que peut-on attendre d'un formulaire de contact moderne ?

Liste non exhaustive des fonctionnalités. Tout d'abord, du côté de l'utilisateur du formulaire :

  • Responsive Layout, le formulaire est adapté à tous les appareils de visualisation
  • Champs clairement identifiés, indiquant aussi s'ils sont obligatoires ou facultatifs
  • Stockage des données déjà saisies pour la validation, validation dynamique possible sans possibilité de soumettre le formulaire sans que les champs obligatoires n’aient été remplis correctement.

Qu'en est-il de l’accessibilité ?

  • Pour les personnes utilisant un clavier au lieu d'une souris, il est pratique de pourvoir naviguer d'un champ à un autre avec la touche TAB
  • Pour améliorer l'expérience d'utilisaton des personnes handicapées qui utilisent des lecteurs d'écran, ajouter des balises HTML spécialisées

Du côté de l'opérateur :

  • Création facile du formulaire
  • Champ avec sélection pré-programmée des fonctions (champ de texte, champ réservé aux adresses e-mail, téléphone, multi-sélection ...) et la validation appropriée du champ
  • Validation obligatoire Oui / Non
  • Logique conditionnelle : visibilité d’un champ spécifique sous condition qu’un autre soit complété
  • Assembler des champs par glisser-déposer
  • Envoi des données de formulaire à un opérateur ou une tierce personne
  • Affichage d’une confirmation de livraison à l’expéditeur - éventuellement, rediriger l'utilisateur vers une autre page
  • L’expéditeur a la possibilité de recevoir une copie des données saisies

Pour les designers et les administrateurs :

  • Les champs du formulaire peuvent être étendues avec des classes CSS pour faciliter la mise en page du formulaire
  • Eventuellement une fonction Honeypot/Captcha

 

Créer un formulaire de base

Après avoir installé Gravity Forms, vous pouvez créer votre premier formulaire - donnez-lui un nom. Ensuite, déterminez les champs.

  • Étape 1 : Créer une case à cocher si l'utilisateur veut obtenir une copie par e-mail
  • Étape 2 : Créer la notification ainsi que la logique pour envoyer la copie si la case a été cochée

Option d'installation pour obtenir une copie de données

L’étape 1 doit être effectuée dans la page de création du formulaire.

Déplacez, d’un clic de souris, l’élément Cases à cocher de la droite vers l’emplacement souhaité. Par défaut 3 cases sont proposées, vous en supprimez donc 2 et indiquez votre phrase, par exemple "Envoyez-moi une copie des données du formulaire de contact". Vous pouvez cocher la case, ainsi elle sera pré-cochée dans le formulaire.

Pour la deuxième étape, sélectionnez les éléments internes du formulaire sous « Paramètres »> « Notification ».

Ici, nous avons défini les paramètres suivants :

  • Nom : ce champ est obligatoire, mais sans grande importance
  • Envoyer à : « Sélectionner un champ »> « E-mail » de la liste déroulante; si vous avez nommé le champ E-mail de façon différente, sélectionnez dans la liste, bien sûr, le nom que vous lui avez donné. Veuillez noter que le champ e-mail est évidemment un champ obligatoire.
  • De : nom de l’expéditeur: les utilisateurs verront alors le nom de l'expéditeur de l'e-mail
  • Votre e-mail : celui-ci peut être modifié
  • Objet : tout simplement l’objet de l'e-mail
  • Message : insérez ici votre texte. Il est possible d'insérer des champs préalablement remplis. Pour ce faire, cliquez sur l'icône à droite de l'éditeur visuel. Bien sûr, vous pouvez également ajouter un message d'accueil ou tout autre texte.
  • Logique conditionnelle : cocher la case pour activer la logique. Ensuite, sélectionnez le champ qui doit être rempli comme condition.

Gravity Forms, c’est si simple !

En fait, on peut aussi éviter du travail, ne pas demander à l'utilisateur du formulaire s'il souhaite recevoir une copie, mais tout simplement de le faire... mais je pense qu'un utilisateur, surtout s'il a fait de mauvaises expériences dans le passé, ne va pas s'attendre à recevoir un double et se sentira donc peut-être gêné d'utiliser le formulaire.

Pour en revenir à la question du début de l'article concernant le choix entre le formulaire de contact ou l’adresse email, pourquoi ne pas proposer les deux et laisser le choix au visiteur ?

[Update] Steve : maintenance avec comparaison d’images – Gestion WordPress pour professionnels

Publié le par Anne-Gaële Wulkow

Action : mises à jour WordPress

Les mises à jour de base WordPress fonctionnent généralement sans aucun problème. Cependant lors des mises à jour de plugins ou de thèmes cela peut se passer differemment. Les causes de certaines difficultés de mises à jour peuvent être très différentes : bugs dans le plugin lui-même, problème de compatibilité avec d’autres plugins … l’impact potentiel des erreurs est également très différent, dans certains cas, c’est le site dans son intégralité, qui ne s’affiche plus ou alors des messages d’erreur PHP peuvent apparaître au milieu de la page. La plupart du temps, il ne s’agit que de petits désagréments, mais qui restent néanmoins indésirables.

 

Comparaison des captures d’écran après une mise à jour

Avec le système de comparaison « avant et après » sous forme de captures d’écran automatiques du site, même de petites erreurs peuvent être détectées. Le système recherche automatiquement tout changement et indique le nombre de différences observées (en%).

Les erreurs survenues sont conservées dans l’historique des mises à jour de Steve avec les captures d’écran correspondantes. Cela permet, le cas échéant, l’importation de sauvegardes appropriées – par défaut, à chaque processus de mises à jour, une sauvegarde est créée pour le site.

Le Steve de demain : sauvegarde automatique de restauration, marquage (tagging) automatique de plugin et bien plus…

Prochainement, il est prévu d’étendre la fonctionnalité SLA pour nos clients WordPress :

  • Les clients pourront recevoir un e-mail avec un lien vers la comparaison des captures d’écran afin de vérifier que tout est en ordre pour la mise à jour.
  • Les clients pourront spécifier que tout est en ordre, ou alors que des erreurs sont apparues ; les messages seront directement transmis à Steve afin de restaurer la version précédente. Steve pourra tagger les plugins comme « cassé » le cas échéant.
  • Le processus de staging (copie du site et mises à jour effectuées sur la copie) peut également être transposé : après avoir été validé par le client, la mise à jour est effectuée sur l’instance WordPress en live.

Steve : le nouvel outil de management WordPress de SaaS Web.

Publié le par Anne-Gaële Wulkow

Steve : le nouvel outil de management WordPress de SaaS Web.

Après plusieurs mois de développement, Steve est enfin lancé en production. Steve, c’est la perfection-même et vous allez comprendre pourquoi en lisant cet article. Steve, c’est aussi un prénom. Mais pourquoi avoir choisi ce prénom pour ce nouvel outil ? En hommage à Steve Jobs mais pas seulement. Siri, Alexa, Cortana…cela vous dit quelque chose ? Il s’agit des noms donnés à certains bots (logiciels ou programmes informatiques) intelligents. SaaS Web a voulu rétablir l’égalité homme-femme et a donc baptisé son bot, Steve. Profitons de cet article pour aussi remercier Daniel Jagszent, associé de SaaS Web, qui a longuement travaillé pour développer ce projet.

Steve remplace InfiniteWP.

InfiniteWP (IWP) est une application Web PHP/MySQL populaire qui permet la gestion de nombreux sites Web WordPress. Cette application est gratuite mais pour un usage professionnel, il est indispensable d’utiliser ses add-ons payants. IWP offre de nombreuses fonctionnalités au travers de ses extensions. De nouvelles fonctions sont en permanence développées, malgré cela, l’application n’a jamais donné entière satisfaction.

D’une part, les fonctionnalités nécessaires et donc très importantes pour la gestion de site Web professionnels (comme le SLA pour la gestion des mises à jour ou les sauvegardes automatiques avant les mises à jour) ne sont pas disponibles.

D’autre part, la qualité intrinsèque du logiciel n’est pas satisfaisante : nombreux bugs, fonctionnalités inachevées…

 Steve gère WordPress de façon professionnelle.

Avec cette nouvelle application (écrite en Ruby on Rails), la gestion des sites Web WordPress est parfaitement adaptée aux besoins de SaaS Web.

Zoom sur les principales features :

  • Détection automatique des instances WordPress sur les serveurs.
  • Installation automatique de plugin-MU (Must Use) SaaS Web pour gérer la communication entre WordPress et Steve.
  • Sauvegardes automatiques optionnelles à chaque mise à jour
  • Sauvegardes quotidiennes (de nuit) de toutes les instances WordPress. (Sauvegarde de fichiers incrémentielle)
  • Restauration des sauvegardes en 1 clic
  • Intégration SLA individuelle : par exemple, pour les sites VIP les mises à jour ne sont possibles qu’en dehors des heures d’ouverture (à l’exception des mises à jour de sécurité)
  • Audit de vérification : Login de toutes les actions utilisateurs sur WordPress
  • Prise en charge pour les sites WordPress multi-sites.

Steve, la facilité d’utilisation

Steve est l’employé modèle qui travaille beaucoup mais il est aussi un logiciel ergonomique qui permet, au quotidien, de travailler avec WordPress de manière confortable et efficace.

Voici quelques exemples :

  • Menu simple sans imbrications compliquées
  • Champ de recherche pour les sites Web muni d’un système d’auto-complétion
  • Raccourcis pour chaque action directement dans la liste des sites
  • Communication entre le navigateur et le serveur via WebSocket pour un rafraichissement des résultats sans recharger la page.

Steve : le partenaire de demain

SaaS Web a déjà planifié la prise de capture d’écran des pages d’accueil (et d’autres pages) de facon automatique avant et après une mise à jour pour rendre des comparaisons possibles et agir en cas de changements non souhaités.

Grace à ces captures d’écran, la restauration d’un backup est plus rapide car l’on possède une image de ce que l’on doit restaurer.

Notez aussi que la création d’un clone d’un site live avant une mise à jour – actuellement ce processus est possible mais manuel – si le rendu est correct, la mise à jour peut être lancée en live.

SaaS Web continue de travailler sur bien d’autres fonctionnalités … soyez patients.

WordCamp EU 2017

Le WordCamp Europe est un des événements les plus importants consacrés au logiciel open source WordPress. Le WordCamp Europe existe depuis 2013 et la 5ème édition aura lieu à Paris les 15, 16 et 17 juin 2017. L’édition 2016 a vu son nombre de participants doubler et a été le plus grand WordCamp jamais organisé en accueillant 3 700 personnes (physiques ainsi qu’à distance grâce à la retransmission en direct).

Un WordCamp, c’est l’occasion pour les utilisateurs de WordPress, professionnels et amateurs, de s’immerger dans la communauté et de participer à ce fantastique projet open source, dans une ambiance conviviale et ouverte, le tout pour un prix raisonnable (40€).

A day of REST 2017

A Day of REST is a one-day conference all about the WordPress REST API. Speakers include members of the team building the REST API, and those using it in production websites. Attendees will have a chance to learn how to use the REST API in their own projects, with insights into best practices, tools, coding, and how other people are using it. A Day of REST Boston will be accompanied by two days of workshops that will teach frontend technologies to WordPress developers.

A Day of REST is committed to creating a welcoming and inclusive event for everyone. We expect all of our staff, volunteers, attendees, sponsors, and speakers to adhere to our code of conduct.

WORKSHOPS

A Day of REST will be accompanied by two days of frontend workshops, hosted by our friends at Bocoup. These workshops will be tailored to WordPress developers who want to hone their front-end skills in preparation for building REST API-powered applications. Details of the workshops, along with tickets, will be available when ticket sales open.

Workshop WordPress

Le Workshop WordPress a pour but de faciliter l’installation et la création d’un site Web professionnel pour des personnes nÄayant pas suivi un cusrsus informatique.

Neben der Schritt-für-Schritt-Anleitungen und Erklärungen der einzelnen Etappen, wird auch etwas technisches Wissen aufgebaut, um später die richtigen Denkweisen anzusetzen und ggf. neue Anforderungen selbständig umzusetzen oder Probleme selbständig zu lösen.