WordPressium een mediumachtige ervaring creëren

Wat je gaat creëren

Als je artikelen over Medium hebt bezocht, ken je de zuivere, leesbare regels. De artikelen worden snel geladen en lezen gemakkelijk op telefoons, tablets en desktops. Hier is een voorbeeld van een van mijn Medium-artikelen, Shining Light on Internet Rage:

In deze zelfstudie begeleid ik u bij het selecteren van thema's en plug-ins om uw WordPress-site om te zetten in een mediumachtige ervaring. We zullen ons ook op functionaliteit concentreren. Ik leid u door plug-ins die de leestijd aangeven en hoe u de gebruiker tekst en opmerkingen inline kunt laten selecteren of delen op Twitter.

Hier is een voorbeeld van de presentatie van Medium van verwachte leestijden:

Hier is een voorbeeld van de selectie- en commentaar- en deelfunctie van Medium:

Hier is een voorbeeld van inline reacties in een ander van mijn Medium-artikelen:

Beginnen bij het begin

Als u een geheel nieuwe site wilt bouwen, kunt u hier mijn visuele handleiding voor WordPress installeren. Mogelijk bent u ook geïnteresseerd in het Ghost open source blog-platform dat ik eerder dit jaar op Tuts + heb geprofileerd. Voor dit voorbeeld ga ik de Ghost-site die ik in het vorige stuk bouwde, eigenlijk migreren naar een Medium-achtige WordPress-ervaring.

Dit is wat mijn eerdere Ghost-startpagina leek op het gebruik van een mediumachtig thema met de naam Ghostium:

Als u uw bestaande site wilt aanpassen, volgt u gewoon verder terwijl we mediumachtige thema's en plug-ins verkennen.

Thema's die op medium lijken

Voor deze zelfstudie installeer ik het Readme "Readable WordPress Theme" beschikbaar bij Theme Forest, een Tuts + netwerkbedrijf, voor $ 48 (het was mijn keuze, niet Tuts +).


Als u bereid bent om voor een thema te betalen, wilt u misschien ook deze drie bekijken:

  • WPMedium $ 47
  • Array's Medium $ 69 
  • Aesop Story Engine (voorbeeld) (plug-in) (gratis plug-in, betaalde add-ons). Ik ben van plan om in de toekomst een Tutorial + tutorial over Aesop te schrijven. Bekijk mijn instructeurspagina of volg mij op Twitter @reifman voor updates.

Er is ook een verscheidenheid aan geweldige gratis op het medium geïnspireerde WordPress-thema's. Hier zijn een paar uitstekende razzia's:

  • 13 gratis op het midden geïnspireerde WordPress-thema's (WPMU)
  • 9 WordPress-thema's in mediumstijl (WP Superstar)
  • Top 11 WordPress-thema's vergelijkbaar met gemiddeld (broncijfer)

Hiervan zou je kunnen beginnen met het controleren van Fastr door Kanishk Kunal. Hij host hier een demo. Hier is een screenshot van Fastr:

Als je een gratis thema vindt dat je leuk vindt, plaats dan je ervaring in de commentaar-thread hieronder zodat andere lezers kunnen profiteren.

Leesmij installeren en configureren

U kunt het Leesmij-thema bij ThemeForest kopen en vervolgens het WordPress .zip-archief downloaden van de site.

Ga naar uw WordPress-dashboard en klik op Uiterlijk> Thema's> Nieuw toevoegen> Uploaden.

Zoals met elk WordPress-thema, is er veel specifieke site-specifieke configuratie en thema-specifieke gebruikersinterface om mee te werken. Zoals deze gaan, is Readme relatief schoon. Het heeft een eenvoudig dialoogvenster met tabbladen voor de meeste instellingen:

Het biedt ook een verscheidenheid aan mooie lay-outs, zoals de optie metselwerk:

Je kunt bekijken hoe ik mijn voltooide site heb geconfigureerd bij breakups.io. Dit is mijn omslaglay-out:

Hier is een verhaalpagina:

Ik hou van de manier waarop het bleek. Als ik meer inhoud zou hebben, zou ik kunnen kiezen voor de lay-out metselwerk.

Medium-achtige plug-ins

Laten we nu naar Medium-achtige plug-ins springen: Selecteer Tekst en delen, Leestijd en Inline-opmerkingen.

Selecteer Tekst en delen

Met de gratis plug-in Selection Sharer van Hans van Gent kunt u tekstselectie en e-mail en Twitter-sharing toevoegen aan uw site. Het is eenvoudig te installeren en werkte perfect voor mij uit de verpakking.

Zo ziet het eruit op mijn site wanneer u tekst selecteert en deelt. Je kunt het ook proberen:

Ik was onder de indruk van hoe goed dit werkte zonder configuratie. Een alternatief is de gratis Quotable-plug-in die select en tweet biedt.

Ik maak me wel wat zorgen over de vindbaarheid van deze functie, maar als iemand tekst gaat kopiëren, ontdekken ze het.

Leestijd

Zoals u kunt zien aan de hand van de bovenstaande afbeeldingen, biedt het Leesmij-thema ingebouwde leestijd. Er zijn echter plugin-opties als u een ander thema kiest.

De gratis leestijd-plug-in geeft tijd om te lezen en een voortgangsbalk in de post.

Er zijn ook enkele open Jquery-bibliotheken die hetzelfde doen als u uw eigen bibliotheken wilt integreren. bijv. Michael Lynch's leestijd.

Inline opmerkingen

Sorry dat ik teleurstel, maar het blijkt dat je niet alles kunt doen wat Medium doet. Inline opmerkingen zijn moeilijk te reconstrueren, omdat ze op veel themaondersteuning steunen. WP Tavern onderzocht dit onderwerp vollediger. Ze besloten om gebruik te maken van de gratis Inline Comments-plugin. Maar geen van de oplossingen die ze zagen zorgde voor een geweldige gebruikerservaring. 

Uiteindelijk koos ik ervoor om bij mijn favoriet te blijven, de gratis Disqus-plug-in, hoewel deze op dit moment geen inline-functionaliteit biedt.

Voorgestelde reads

Laten we nu een stap verder gaan dan Medium en iets leuks toevoegen dat The New York Times goed doet: een voorgestelde volgende lees-plugin. De gratis UpPrev-plug-in geeft een viaduct-promo weer naar het vorige, volgende of willekeurige bericht op uw site:

Omdat persoonlijke blogs vaak een hoog bouncepercentage hebben, b.v. lezers klikken weg na het lezen van een artikel, upPrev kan helpen mensen op de site te houden. Hoewel ik widgets gebruik voor recente en populaire items, vind ik het een goed idee om een ​​geanimeerd viaduct te gebruiken om een ​​specifiek stuk te promoten.

UpPrev heeft een eenvoudig dialoogvenster met plugin-instellingen en werkte gemakkelijk voor mij:

U kunt kiezen hoe upPrev inhoud selecteert om te presenteren, bijvoorbeeld vorige, willekeurige of gerelateerde, met de plug-in Yet Another Related Posts (YARPP):

Hier is hoe het eruit ziet als je naar beneden scrolt naar de onderkant van een pagina op breakups.io:

In Closing

Ik hoop dat je deze post leuk vond. Medium en WordPress zijn beide opwindende platforms en het is geweldig als we de dingen die we leuk vinden kunnen nemen en in een andere kunnen implementeren. Het is ook interessant als je dingen vindt zoals inline-opmerkingen die nog steeds moeilijk te doen zijn in WordPress. Medium doet het heel goed en het WordPress-team heeft er zijn best voor gedaan.

Aarzel niet om correcties, vragen of opmerkingen hieronder te plaatsen. Ik probeer deel te nemen aan de discussies. Ik zou vooral geïnteresseerd zijn in je ervaring met thema's en / of alternatieve plug-ins. Je kunt me ook bereiken via Twitter @reifman of mij rechtstreeks een e-mail sturen. Als je deze tutorial leuk vond, bezoek dan mijn instructeurspagina om mijn collecties met andere tutorials te bekijken.

Gerelateerde Links

  • Medium
  • Leesmij "Leesbaar WordPress-thema"
  • WordPress Plugin: Reading Time
  • WordPress Plugin: selectie-deler
  • WordPress Plugin: upPrev
  • Keeping Up with Ghost (Tuts + Code)