WordPressium Créer une expérience similaire à un média

Ce que vous allez créer

Si vous avez visité des articles sur Medium, vous connaissez ses lignes claires et lisibles. Les articles se chargent rapidement et se lisent facilement sur les téléphones, les tablettes et les ordinateurs de bureau. Voici un extrait de l'un de mes articles de taille moyenne, Shining Light on Internet Rage:

Dans ce tutoriel, je vais vous guider dans la sélection de thèmes et de plug-ins pour transformer votre site WordPress en une expérience de type Medium. Nous allons aussi nous concentrer sur la fonctionnalité. Je vais vous expliquer les plugins indiquant le temps de lecture et comment vous pouvez laisser l'utilisateur sélectionner du texte et commenter en ligne ou le partager sur Twitter..

Voici un exemple de la présentation par Medium des temps de lecture prévus:

Voici un exemple de fonctionnalité de sélection, commentaire et partage de Medium:

Voici un exemple de commentaires en ligne dans un autre de mes articles Medium:

Partir de zéro

Si vous souhaitez créer un site entièrement nouveau, vous pouvez suivre ici mon guide visuel sur l'installation de WordPress. Vous pouvez également être intéressé par la plate-forme de blogging open source Ghost que je vous ai présentée plus tôt cette année sur Tuts +. Pour cet exemple, je vais en fait migrer le site Ghost que j'ai construit dans l'article précédent vers une expérience WordPress similaire à Medium..

Voici à quoi ressemblait ma page d'accueil Ghost précédente, utilisant un thème de type Medium appelé Ghostium:

Si vous souhaitez adapter votre site existant, suivez le processus d'exploration de thèmes et de plug-ins de type Medium..

Thèmes qui ressemblent moyen

Pour ce tutoriel, je vais installer le fichier Readme "Readable WordPress Theme" disponible sur Theme Forest, une entreprise du réseau Tuts +, au prix de 48 $ (c'était mon choix, pas Tuts +).


Si vous êtes prêt à payer pour un thème, vous pouvez également consulter ces trois éléments:

  • WPMedium 47 $
  • Array's Medium 69 $ 
  • Aesop Story Engine (exemple) (plugin) (plugin gratuit, add-on payants). Je prévois d'écrire un tutoriel Tuts + sur Aesop à l'avenir. Surveillez ma page d’instructeur ou suivez-moi sur Twitter @reifman pour les mises à jour..

Il existe également une variété de superbes thèmes WordPress gratuits, d'inspiration moyenne. Voici quelques excellents rafles:

  • 13 thèmes WordPress d'inspiration moyenne gratuits (WPMU)
  • 9 thèmes WordPress de style moyen (WP Superstar)
  • Top 11 des thèmes WordPress similaires à moyen (chiffre source)

Parmi ceux-ci, vous pouvez commencer par regarder Fastr de Kanishk Kunal. Il accueille une démo ici. Voici une capture d'écran de Fastr:

Si vous trouvez un thème gratuit que vous aimez, merci de poster votre expérience dans le fil de commentaire ci-dessous pour que les autres lecteurs en tirent parti.

Installation et configuration du fichier Lisez-moi

Vous pouvez acheter le thème Lisez-moi sur ThemeForest, puis télécharger l’archive WordPress .zip à partir du site..

Visitez votre tableau de bord WordPress et cliquez sur Apparence> Thèmes> Ajouter nouveau> Télécharger.

Comme avec n'importe quel thème WordPress, il y a beaucoup de configuration et d'interface utilisateur spécifiques au thème avec lesquels travailler. Au fur et à mesure, Readme est relativement propre. Il comporte une simple boîte de dialogue à onglets pour la plupart des paramètres:

Il offre également une variété de jolis agencements, comme son option Maçonnerie:

Vous pouvez vérifier comment j'ai configuré mon site fini à breakups.io. Ceci est ma mise en page de couverture:

Voici une page d'histoire:

J'aime la façon dont il s'est avéré. Si j'avais plus de contenu, j'aurais peut-être opté pour la mise en page Maçonnerie.

Plugins de type moyen

Passons maintenant aux plugins de type Medium: sélectionnez Texte et partage, Temps de lecture et Commentaires en ligne..

Sélectionner du texte et partager

Le plugin gratuit Selection Sharer de Hans van Gent vous permet d’ajouter une sélection de texte ainsi que le partage d’e-mails et Twitter sur votre site. Il est facile à installer et fonctionne parfaitement pour moi tout de suite.

Voici à quoi cela ressemble sur mon site lorsque vous sélectionnez du texte et le partagez. Vous pouvez aussi essayer:

J'ai été impressionné de voir à quel point cela fonctionnait sans configuration. Une alternative est le plugin gratuit Quotable qui propose select et tweet.

Je m'inquiète un peu de la possibilité de découvrir cette fonctionnalité, mais chaque fois que quelqu'un ira copier un texte, il le découvrira..

Temps de lecture

Comme vous pouvez le constater à partir des images ci-dessus, le thème Lisez-moi fournit un temps de lecture intégré. Cependant, il existe des options de plugin si vous choisissez un autre thème.

Le plugin gratuit Reading Time affiche le temps de lecture et une barre de progression dans le message..

Il existe également des bibliothèques Jquery ouvertes qui font la même chose si vous souhaitez intégrer la vôtre. par exemple. Le temps de lecture de Michael Lynch.

Commentaires en ligne

Désolé de décevoir, mais il s'avère que vous ne pouvez pas facilement faire tout ce que fait Moyen. Les commentaires en ligne sont difficiles à recréer, car ils reposent sur un grand nombre de thèmes. WP Tavern a exploré ce sujet plus en profondeur. Ils se sont installés sur le plugin gratuit Inline Comments. Mais aucune des solutions examinées n’offrait une expérience utilisateur exceptionnelle.. 

En fin de compte, j'ai choisi de rester avec mon plug-in gratuit, Disqus, bien qu'il n'offre pas de fonctionnalités en ligne pour le moment..

Lectures suggérées

Maintenant, faisons un pas au-delà de Medium et ajoutons quelque chose de cool que le New York Times fait bien: un plugin suggéré pour la lecture suivante. Le plug-in gratuit UpPrev affiche une promotion en survol de la publication précédente, suivante ou aléatoire sur votre site:

Étant donné que les blogs personnels ont souvent un taux de rebond élevé, p. Ex. les lecteurs cliquent après avoir lu un article, upPrev peut aider à garder les gens sur le site. Même si j'utilise des widgets pour des articles récents et populaires, j'aime bien l'idée d'utiliser un survol animé pour promouvoir une pièce spécifique..

UpPrev a un simple dialogue de paramétrage de plugin et a fonctionné facilement pour moi:

Vous pouvez choisir comment upPrev sélectionne le contenu à présenter, par exemple, précédent, aléatoire ou associé, avec le plugin Yet Another Related Posts (YARPP):

Voici à quoi cela ressemble lorsque vous faites défiler vers le bas d'une page sur breakups.io:

En clôture

J'espère que vous avez apprécié ce post. Medium et WordPress sont deux plates-formes excitantes et c'est formidable de pouvoir prendre des choses que l'on aime et de les mettre en œuvre dans un autre. Il est également intéressant de trouver des choses telles que des commentaires en ligne qui sont encore difficiles à faire dans WordPress. Medium fait beaucoup et l'équipe WordPress a du pain sur la planche.

N'hésitez pas à poster des corrections, des questions ou des commentaires ci-dessous. J'essaie de participer aux discussions. Je serais particulièrement intéressé par votre expérience avec des thèmes et / ou des plugins alternatifs. Vous pouvez également me joindre sur Twitter @reifman ou m'envoyer un courriel directement. Si vous avez apprécié ce tutoriel, veuillez visiter ma page d’instructeur pour voir mes collections d’autres tutoriels..

Liens connexes

  • Moyen
  • Readme "Thème WordPress lisible"
  • WordPress Plugin: Temps de lecture
  • WordPress Plugin: Sélectionneur
  • WordPress Plugin: upPrev
  • Garder le contact avec Ghost (Tuts + Code)