WordPressium Skapa en medelliknande upplevelse

Vad du ska skapa

Om du har besökt artiklar på Medium vet du dess rena, läsbara linjer. Artiklarna laddas snabbt och läses enkelt på telefoner, tabletter och stationära datorer. Här är ett urval av en av mina medelartiklar, Shining Light on Internet Rage:

I denna handledning guidar jag dig genom att välja teman och plugins för att göra din WordPress-webbplats till en medelliknande upplevelse. Vi kommer också att fokusera på funktionalitet. Jag går igenom plugins som visar läsningstid och hur du kan låta användaren välja text och kommentera inline eller dela den till Twitter.

Här är ett exempel på Mediums presentation av förväntade läsningstider:

Här är ett exempel på Mediums select och comment and share-funktion:

Här är ett exempel på inline-kommentarer i en annan av mina medelartiklar:

Börja från början

Om du vill bygga en helt ny webbplats kan du följa min visuella guide till WordPress-installationen här. Du kan också vara intresserad av Ghost open source blogging plattform som jag profilerade tidigare i år på Tuts +. För det här exemplet kommer jag faktiskt att migrera den Ghost-webbplats som jag byggt i det tidigare stycket till en medelliknande WordPress-upplevelse.

Så här visade min tidigare Ghost-hemsida sig att använda ett medium-liknande tema som heter Ghostium:

Om du vill anpassa din befintliga webbplats följer du bara med när vi utforskar Medium-liknande teman och plugins.

Teman som liknar medelstora

För denna handledning kommer jag att installera Readme "Readable WordPress Theme" som finns på Theme Forest, ett Tuts + nätverksföretag, för $ 48 (det var mitt val, inte Tuts +).


Om du är villig att betala för ett tema kanske du också vill kolla in dessa tre:

  • WPMedium $ 47
  • Array Medium $ 69 
  • Aesop Story Engine (exempel) (plugin) (gratis plugin, betalda tillägg). Jag planerar att skriva en Tuts + handledning på Aesop i framtiden. Titta på min instruktörssida eller följ mig på Twitter @reifman för uppdateringar.

Det finns också en mängd bra gratis Medium-inspirerade WordPress-teman. Här är några bra utmärkelser:

  • 13 Gratis Medium-inspirerade WordPress-teman (WPMU)
  • 9 Medium Styled WordPress-teman (WP Superstar)
  • Top 11 WordPress Teman Liknande Medium (Källsiffra)

Av dessa kan du börja med att kolla Fastr av Kanishk Kunal. Han är värd en demo här. Här är en skärmdump av Fastr:

Om du hittar ett gratis tema som du vill, vänligen skriv din upplevelse i kommentaren nedan för att andra läsare kan dra nytta av.

Installera och konfigurera Readme

Du kan köpa Readme-temat på ThemeForest, och sedan ladda ner WordPress .zip-arkivet från webbplatsen.

Besök din WordPress-instrumentpanel och klicka på Utseende> Teman> Lägg till nytt> Ladda upp.

Som med alla WordPress-teman finns det mycket webbplatsspecifik konfiguration och temaspecifikt användargränssnitt att arbeta med. Eftersom dessa går är Readme relativt ren. Den har en enkel dialogruta för de flesta inställningar:

Det erbjuder också en mängd trevliga layouter, som dess Masonry-alternativ:

Du kan kolla hur jag konfigurerat min färdiga webbplats vid breakups.io. Detta är min omslagslayout:

Här är en historia sida:

Jag gillar hur det visade sig. Om jag hade mer innehåll kunde jag ha valt Masonry-layouten.

Medium-liknande plugin

Låt oss nu hoppa till mellanliggande plugins: Välj text och dela, läsningstid och inline kommentarer.

Välj Text och Dela

Den fria Selection Sharer plugin av Hans van Gent låter dig lägga till textval och e-post och Twitter-delning till din webbplats. Det är lätt att installera och fungerade perfekt för mig ur lådan.

Så här ser det ut på min webbplats när du väljer text och delar den. Du kan också prova:

Jag var imponerad av hur bra det fungerade utan någon konfiguration. Ett alternativ är det fria Quotable plugin som erbjuder välj och tweet.

Jag oroar mig lite om upptäckten av denna funktion, men när som helst någon går för att kopiera text kommer de att upptäcka den.

Läsningstid

Som du kan se från bilderna ovan, ger Readme-temat inbyggd läsningstid. Det finns dock pluginalternativ om du väljer ett annat tema.

Det fria läsningstiden plugin visar tid att läsa och en framdriftsfält i posten.

Det finns också några öppna Jquery-bibliotek som gör samma sak om du vill integrera din egen. t.ex. Michael Lynchs läsningstid.

Inline Comments

Ledsen att göra dig besviken, men det visar sig att du inte enkelt kan göra allt Medium gör. Inline kommentarer är svåra att återskapa, eftersom de är beroende av mycket temat stöd. WP Tavern utforskade detta ämne mer fullständigt. De bosatte sig på det fria Inline Comments plugin. Men ingen av de lösningar som de tittade på gav en bra användarupplevelse. 

Till slut valde jag att stanna kvar med min favorit, det fria Disqus-pluginet, men det erbjuder inte inline-kapacitet vid denna tidpunkt.

Föreslagna läser

Nu, låt oss ta ett steg bortom Medium och lägga till något coolt att The New York Times går bra: ett förslag till nästa läs plugin. Den fria UpPrev-plugin visar en flyover-promo till föregående, nästa eller slumpmässigt inlägg på din webbplats:

Eftersom personliga bloggar ofta har en hög avvisningsfrekvens, t.ex. läsare klickar bort efter att ha läst en artikel kan upPrev hjälpa till att hålla folk på webbplatsen. Trots att jag använder widgets för senaste och populära saker, gillar jag konceptet att använda en animerad flyover för att marknadsföra ett visst stycke.

UpPrev har en enkel plugin-inställningsdialog och fungerade enkelt för mig:

Du kan välja hur upPrev väljer innehåll som ska presenteras, till exempel tidigare, slumpmässigt eller relaterat, med pluginet En annan tillhörande post (YARPP):

Så här ser det ut som du rullar ner till botten av en sida på breakups.io:

I stängning

Jag hoppas att du har haft det här inlägget. Medium och WordPress är båda spännande plattformar och det är bra när vi kan ta saker vi gillar från en och implementera dem i en annan. Det är också intressant när du hittar saker som inline-kommentarer som fortfarande är svåra att göra i WordPress. Medium gör mycket bra och WordPress-teamet har sitt arbete klippt ut för det.

Vänligen gärna posta rättelser, frågor eller kommentarer nedan. Jag försöker delta i diskussionerna. Jag skulle vara särskilt intresserad av din erfarenhet av teman och / eller alternativa plugins. Du kan också nå mig på Twitter @ reifman eller maila mig direkt. Om du haft denna handledning, besök min instruktörssida för att se mina samlingar av andra handledning.

relaterade länkar

  • Medium
  • Readme "Läsbar WordPress Theme"
  • WordPress-plugin: läsningstid
  • WordPress Plugin: Selection Sharer
  • WordPress Plugin: upPrev
  • Håller på med Ghost (Tuts + Code)