WordPressium creare un'esperienza di tipo medio

Cosa starai creando

Se hai visitato articoli su Medium, conosci le sue linee pulite e leggibili. Gli articoli vengono caricati rapidamente e letti facilmente su telefoni, tablet e desktop. Ecco un esempio di uno dei miei articoli di Medium, Shining Light on Internet Rage:

In questo tutorial, ti guiderò attraverso la selezione di temi e plug-in per trasformare il tuo sito WordPress in un'esperienza di tipo Medium. Ci concentreremo anche sulla funzionalità. Ti guiderò attraverso i plug-in che mostrano il tempo di lettura e come puoi consentire all'utente di selezionare testo e commentare in linea o condividerlo su Twitter.

Ecco un esempio della presentazione di Medium dei tempi di lettura previsti:

Ecco un esempio della funzione di selezione e commento e condivisione di Medium:

Ecco un esempio di commenti in linea in un altro dei miei articoli Media:

Partendo da zero

Se desideri creare un sito completamente nuovo, puoi seguire la mia guida visiva all'installazione di WordPress qui. Potresti anche essere interessato alla piattaforma di blogging open source Ghost che ho profilato all'inizio di quest'anno su Tuts +. Per questo esempio, in realtà sto per migrare il sito Ghost che ho costruito nel pezzo precedente in un'esperienza WordPress di tipo Medium.

Ecco come appariva la mia precedente home page di Ghost con l'aspetto di un tema simile a Medium chiamato Ghostium:

Se vuoi adattare il tuo sito esistente, segui il percorso esplorando temi e plugin di tipo medio.

Temi che sembrano medi

Per questo tutorial, ho intenzione di installare il Readme "Readable WordPress Theme" disponibile su Theme Forest, una società di rete Tuts +, per $ 48 (era una mia scelta, non Tuts +).


Se sei disposto a pagare per un tema, potresti anche voler dare un'occhiata a questi tre:

  • WPMedium $ 47
  • Media di Array $ 69 
  • Aesop Story Engine (esempio) (plugin) (plugin gratuito, componenti aggiuntivi a pagamento). Sto pensando di scrivere un tutorial + Tuts su Aesop in futuro. Guarda la mia pagina di istruttore o seguimi su Twitter @reifman per gli aggiornamenti.

C'è anche una varietà di fantastici temi gratuiti per WordPress di ispirazione media. Ecco alcuni rastrellamenti eccellenti:

  • 13 temi WordPress di media ispirazione (WPMU)
  • 9 Temi WordPress con stile medio (WP Superstar)
  • Top 11 temi WordPress simili al mezzo (cifra sorgente)

Di questi, potresti iniziare verificando Fastr di Kanishk Kunal. Qui ospita una demo. Ecco uno screenshot di Fastr:

Se trovi un tema libero che ti piace, pubblica la tua esperienza nel thread dei commenti qui sotto per consentire agli altri lettori di trarne beneficio.

Installazione e configurazione di Readme

È possibile acquistare il tema Leggimi su ThemeForest e quindi scaricare l'archivio .zip di WordPress dal sito.

Visita il tuo pannello di WordPress e fai clic Aspetto> Temi> Aggiungi nuovo> Carica.

Come con qualsiasi tema di WordPress, c'è un sacco di configurazione specifica del sito e un'interfaccia utente specifica per tema con cui lavorare. Mentre questi vanno, Readme è relativamente pulito. Ha una semplice finestra di dialogo per la maggior parte delle impostazioni:

Offre anche una varietà di layout gradevoli, come la sua opzione Massoneria:

Puoi controllare come ho configurato il mio sito finito su breakups.io. Questo è il mio layout di copertina:

Ecco una pagina della storia:

Mi piace come è stato. Se avessi più contenuti, avrei potuto optare per il layout della Massoneria.

Plug-in medio-simili

Passiamo ora ai plug-in di tipo medio: seleziona testo e condividi, tempo di lettura e commenti in linea.

Seleziona testo e condividi

Il plug-in Sharer di selezione gratuito di Hans van Gent ti consente di aggiungere selezione di testo, e-mail e condivisione di Twitter al tuo sito. È facile da installare e ha funzionato perfettamente per me fuori dalla scatola.

Ecco come appare sul mio sito quando selezioni il testo e lo condividi. Puoi anche fare un tentativo:

Sono rimasto impressionato da quanto bene ha funzionato senza alcuna configurazione. Un'alternativa è il plugin Quotable gratuito che offre select e tweet.

Mi preoccupo un po 'della rilevabilità di questa funzione, ma ogni volta che qualcuno va a copiare del testo, lo scopriranno.

Momento della lettura

Come puoi vedere dalle immagini sopra, il tema Readme fornisce un tempo di lettura integrato. Tuttavia, ci sono opzioni di plugin se si sceglie un altro tema.

Il plug-in gratuito del tempo di lettura visualizza il tempo di lettura e una barra di avanzamento nel post.

Ci sono anche alcune librerie Jquery aperte che fanno la stessa cosa se desideri integrare la tua. per esempio. Michael Lynch's Reading Time.

Commenti in linea

Mi dispiace deludere, ma risulta che non puoi fare facilmente tutto ciò che fa Medium. I commenti incorporati sono difficili da ricreare, poiché si basano su molti supporti a tema. WP Tavern ha approfondito questo argomento in modo più completo. Hanno optato per il plugin gratuito Inline Comments. Ma nessuna delle soluzioni che hanno considerato ha fornito un'ottima esperienza utente. 

Alla fine, ho scelto di rimanere con il mio preferito, il plugin gratuito di Disqus, anche se al momento non offre capacità in linea.

Letture consigliate

Ora, facciamo un passo in avanti rispetto a Medium e aggiungiamo qualcosa di interessante che il New York Times fa bene: un prossimo plugin di lettura suggerito. Il plug-in UpPrev gratuito visualizza una promozione flyover sul post precedente, successivo o casuale sul tuo sito:

Poiché i blog personali hanno spesso un'elevata frequenza di rimbalzo, ad es. i lettori cliccano via dopo aver letto un articolo, upPrev può aiutare a mantenere le persone sul sito. Anche se utilizzo i widget per articoli recenti e popolari, mi piace l'idea di utilizzare un cavalcavia animato per promuovere un pezzo specifico.

UpPrev ha una semplice finestra di dialogo delle impostazioni del plugin e ha funzionato facilmente per me:

Puoi scegliere come upPrev seleziona il contenuto da presentare, ad esempio, precedente, casuale o correlato, con il plug-in Yet Another Related Posts (YARPP):

Ecco come appare mentre scorri fino alla fine di una pagina su breakups.io:

In chiusura

Spero che ti sia piaciuto questo post. Medium e WordPress sono entrambe piattaforme entusiasmanti ed è fantastico quando possiamo prendere le cose che ci piacciono da una parte e implementarle in un'altra. È anche interessante quando trovi cose come i commenti in linea che sono ancora difficili da fare in WordPress. Medium fa molto bene e il team di WordPress ha il suo bel da fare.

Non esitate a postare correzioni, domande o commenti qui sotto. Provo a partecipare alle discussioni. Sarei particolarmente interessato alla tua esperienza con temi e / o plugin alternativi. Puoi anche raggiungermi su Twitter @reifman o mandarmi un'email direttamente. Se ti è piaciuto questo tutorial, visita la mia pagina di istruttore per vedere le mie raccolte di altri tutorial.

Link correlati

  • medio
  • Leggimi "Tema WordPress leggibile"
  • WordPress Plugin: tempo di lettura
  • WordPress Plugin: Selection Sharer
  • WordPress Plugin: upPrev
  • Al passo con Ghost (Tuts + Code)