WordPressium Opprette en middelslik opplevelse

Hva du skal skape

Hvis du har besøkt artikler på Medium, vet du sine rene, lesbare linjer. Artikklene lastes raskt og leses enkelt på telefoner, tabletter og stasjonære datamaskiner. Her er et eksempel fra en av mine middels artikler, Shining Light on Internet Rage:

I denne veiledningen vil jeg veilede deg gjennom valg av temaer og plugins for å gjøre WordPress-nettstedet ditt til en middels lignende opplevelse. Vi vil også fokusere på funksjonalitet. Jeg går deg gjennom plugins som viser lesetid, og hvordan du kan la brukeren velge tekst og kommentere inline eller dele den med Twitter.

Her er et eksempel på Middels presentasjon av forventede lesetider:

Her er et eksempel på Middels valg og kommentar og delingsfunksjon:

Her er et eksempel på inline-kommentarer i en av mine mellomstore artikler:

Fra begynnelsen

Hvis du vil bygge et helt nytt nettsted, kan du følge min visuelle guide til WordPress installasjon her. Du kan også være interessert i Ghost open source blogging plattformen som jeg profilerte tidligere i år på Tuts +. For dette eksempelet kommer jeg faktisk til å migrere Ghost-stedet jeg bygget i det tidligere stykket til en middels-lignende WordPress-opplevelse.

Her er hva min tidligere Ghost-hjemmeside viste seg å se ut som et medium-tema som heter Ghostium:

Hvis du vil tilpasse ditt eksisterende nettsted, følger du bare med som vi utforsker mellomstore temaer og plugins.

Temaer som ligner middels

For denne opplæringen skal jeg installere Readme "Readable WordPress Theme" tilgjengelig på Theme Forest, et Tuts + nettverksselskap, for $ 48 (det var mitt valg, ikke Tuts +).


Hvis du er villig til å betale for et tema, kan du også sjekke ut disse tre:

  • WPMedium $ 47
  • Array Medium $ 69 
  • Aesop Story Engine (eksempel) (plugin) (gratis plugin, betalte tillegg). Jeg planlegger å skrive en Tuts + opplæring på Aesop i fremtiden. Se på min instruktørside eller følg meg på Twitter @ reifman for oppdateringer.

Det finnes også en rekke flotte, gratis, medium-inspirerte WordPress-temaer. Her er noen få gode roundups:

  • 13 Gratis medium-inspirerte WordPress-temaer (WPMU)
  • 9 mellomstore WordPress-temaer (WP Superstar)
  • Topp 11 WordPress-temaer ligner på medium (kilde tall)

Av disse kan du begynne med å sjekke ut Fastr av Kanishk Kunal. Han er vert for en demo her. Her er et skjermbilde av Fastr:

Hvis du finner et gratis tema som du liker, vennligst legg inn din erfaring i kommentar-tråden nedenfor for andre lesere å dra nytte av.

Installere og konfigurere Readme

Du kan kjøpe Readme-temaet på ThemeForest, og deretter laste ned WordPress .zip-arkivet fra nettstedet.

Gå til ditt WordPress dashboard, og klikk Utseende> Temaer> Legg til nytt> Last opp.

Som med ethvert WordPress-tema, er det mye nettstedsspesifikt konfigurasjon og temaspesifikt brukergrensesnitt å jobbe med. Som disse går, er Readme relativt ren. Den har en enkel dialogboks for de fleste innstillinger:

Det tilbyr også en rekke fine layouter, som sitt Masonry-alternativ:

Du kan sjekke ut hvordan jeg konfigurerte mitt ferdige nettsted på breakups.io. Dette er min deksellayout:

Her er en historieside:

Jeg liker måten det viste seg. Hvis jeg hadde mer innhold, kunne jeg ha valgt Masonry-oppsettet.

Medium-lignende plugins

La oss nå hoppe inn i mellomstore programtillegg: Velg tekst og del, lesetid og inline kommentarer.

Velg tekst og del

Den gratis Selection Sharer plugin av Hans van Gent lar deg legge til tekstvalg og e-post og Twitter-deling til nettstedet ditt. Det er enkelt å installere og jobbet perfekt for meg ut av esken.

Slik ser det ut på nettstedet mitt når du velger tekst og deler det. Du kan også prøve:

Jeg var imponert over hvor godt dette virket uten noen konfigurasjon. Et alternativ er gratis Quotable plugin som tilbyr velg og tweet.

Jeg bekymrer meg litt om funn av denne funksjonen, men når som helst noen går for å kopiere tekst, vil de oppdage det.

Lesetid

Som du kan se fra bildene ovenfor, gir Readme-temaet innebygd lesetid. Det er imidlertid pluginalternativer hvis du velger et annet tema.

Den gratis lesetiden-plugin viser tid for å lese og en fremdriftslinje i innlegget.

Det finnes også noen åpne Jquery-biblioteker som gjør det samme hvis du vil integrere dine egne. f.eks Michael Lynchs lesetid.

Inline Comments

Beklager å skuffe, men det viser seg at du ikke lett kan gjøre alt Medium gjør. Inline-kommentarer er vanskelige å gjenskape, da de stoler på mye temastøtte. WP Tavern utforsket dette emnet mer fullstendig. De slo seg ned på gratis Inline Comments plugin. Men ingen av løsningene de så på, ga en flott brukeropplevelse. 

Til slutt valgte jeg å forbli med min favoritt, det gratis Disqus-pluginet, selv om det ikke tilbyr inline-mulighet på dette tidspunktet.

Foreslått leser

Nå, la oss ta et skritt utover Medium og legge til noe kult at The New York Times gjør det bra: et forslag til neste les plugin. Den gratis UpPrev-plugin-en viser et flyover-promo til forrige, neste eller tilfeldig innlegg på nettstedet ditt:

Siden personlige blogger ofte har en høy avvisningshastighet, f.eks. lesere klikker bort etter å ha lest en artikkel, upprrev kan bidra til å holde folk på nettstedet. Selv om jeg bruker widgets for nyere og populære elementer, liker jeg begrepet å bruke en animert flyover for å fremme et bestemt stykke.

UpPrev har en enkel plugin-innstillingsdialog og jobbet lett for meg:

Du kan velge hvordan upPrev velger innhold som skal presenteres, for eksempel tidligere, tilfeldig eller relatert, med Plugin Yet Another Related Posts (YARPP):

Slik ser det ut som du ruller ned til bunnen av en side på breakups.io:

I Avslutning

Jeg håper du har hatt glede av dette innlegget. Medium og WordPress er begge spennende plattformer, og det er flott når vi kan ta ting vi liker fra en og implementere dem i en annen. Det er også interessant når du finner ting som inline-kommentarer som fortsatt er vanskelig å gjøre i WordPress. Medium gjør det veldig bra, og WordPress-teamet har sitt arbeid kuttet ut for det.

Ta gjerne inn korrigeringer, spørsmål eller kommentarer nedenfor. Jeg prøver å delta i diskusjonene. Jeg ville være spesielt interessert i din erfaring med temaer og / eller alternative plugins. Du kan også nå meg på Twitter @ reifman eller email meg direkte. Hvis du likte denne opplæringen, vennligst besøk min instruktørside for å se mine samlinger av andre opplæringsprogrammer.

Relaterte linker

  • Medium
  • Readme "Lesbar WordPress Theme"
  • WordPress Plugin: Lesingstid
  • WordPress Plugin: Selection Sharer
  • WordPress Plugin: upPrev
  • Holde opp med Ghost (Tuts + Code)