Share
Ce veți creaDacă ați vizitat articole pe Mediu, știți liniile sale curate și lizibile. Articolele se încarcă repede și se citesc cu ușurință pe telefoane, tablete și desktopuri. Iată o mostră din unul dintre articolele mele despre Medie, Shining Light on Internet Rage:
În acest tutorial, vă voi îndruma prin selectarea temelor și a pluginurilor pentru a transforma site-ul dvs. WordPress într-o experiență de tip Medium. Ne vom concentra și pe funcționalitate. Vă voi trece prin pluginurile care arată timpul de citire și cum puteți lăsa utilizatorul să selecteze textul și să comenteze în linie sau să îl partajeze pe Twitter.
Iată un exemplu al prezentării Medium a timpilor de citire așteptat:
Iată un exemplu de funcție de selectare și comentare și partajare a mediei:
Iată un exemplu de comentarii inline într-un alt articol din Media:
Dacă doriți să construiți un site complet nou, puteți să urmați ghidul meu vizual pentru instalarea WordPress aici. Ați putea fi, de asemenea, interesat de platforma Ghost open source blogging pe care am profilat la începutul acestui an pe Tuts +. Pentru acest exemplu, am de gând să migrez site-ul Ghost pe care l-am construit în piesa anterioară într-o experiență WordPress mediocră.
Iată ce a apărut în pagina mea de pornire Ghost mai veche, folosind o temă mediocră numită Ghostium:
Dacă doriți să vă adaptați site-ul existent, urmați-vă împreună pe măsură ce explorăm teme și pluginuri asemănătoare mediilor.
Pentru acest tutorial, voi instala Readme "WordPress Theme Readable" disponibilă la Theme Forest, o companie de rețea Tuts +, pentru $ 48 (a fost alegerea mea, nu Tuts +).
Dacă sunteți dispus să plătiți pentru o temă, ați putea dori, de asemenea, să verificați aceste trei:
Există, de asemenea, o varietate de teme gratuite excelente WordPress inspirat de medii. Iată câteva exemple excelente:
Dintre acestea, puteți începe prin a verifica pe Fastr de Kanishk Kunal. El găzduiește un demo aici. Iată o captură de ecran a lui Fastr:
Dacă găsiți o temă gratuită care vă place, vă rugăm să postați experiența dvs. în subiectul de comentariu de mai jos pentru alți cititori de care să beneficiați.
Puteți achiziționa tema Readme la ThemeForest și apoi descărcați arhiva WordPress .zip de pe site.
Accesați tabloul de bord WordPress și faceți clic pe Aspect> Teme> Adăugați o nouă> Încărcare.
Ca și în cazul oricărei teme WordPress, există o mulțime de configurații specifice site-ului și interfață de utilizator specifică temelor pentru care să lucrați. Pe măsură ce acestea merg, Readme este relativ curat. Are un simplu dialog de tab-uri pentru majoritatea setărilor:
De asemenea, oferă o varietate de machete frumoase, cum ar fi opțiunea de Masonerie:
Puteți verifica cum am configurat site-ul meu terminat la breakups.io. Acesta este aspectul meu de acoperire:
Iată o pagină de poveste:
Îmi place cum sa dovedit. Dacă aș avea mai mult conținut, aș fi putut opta pentru aspectul Masoneriei.
Acum, să mergem în pluginuri asemănătoare Medium: Selectați Text și Share, Timp de citire și Comentarii inline.
Plug-in gratuit de selecție Sharer de către Hans van Gent vă permite să adăugați selecție de text și e-mail și partajarea pe Twitter pe site-ul dvs. Este ușor de instalat și am lucrat perfect pentru mine din cutie.
Iată cum arată pe site-ul meu când selectați textul și îl distribuiți. Puteți încerca, de asemenea:
Am fost impresionat de cât de bine a funcționat fără configurație. O alternativă este plugin-ul gratuit Quotable care oferă selecție și tweet.
Îmi fac griji puțin despre descoperirea acestei caracteristici, dar oricând cineva merge să copieze textul, o vor descoperi.
După cum puteți vedea din imaginile de mai sus, tema Readme oferă timpul integrat de lectură. Cu toate acestea, există opțiuni de plugin dacă alegeți o altă temă.
Plug-ul gratuit pentru citirea timpului afișează timpul pentru a citi și o bara de progres în post.
Există, de asemenea, unele biblioteci deschise Jquery care fac același lucru dacă doriți să vă integrați propriul. de exemplu. Timpul de citire al lui Michael Lynch.
Îmi pare rău că am dezamăgit, dar se pare că nu poți să faci cu ușurință tot ceea ce face Mediu. Comentariile inline sunt greu de recreat, deoarece se bazează pe o mulțime de suport tematic. WP Tavern a explorat mai complet acest subiect. Ei s-au stabilit pe pluginul gratuit Inline Comments. Dar nici una din soluțiile pe care le-au analizat nu a oferit o experiență extraordinară pentru utilizatori.
În cele din urmă, am ales să rămân cu plugin-ul meu favorit, gratuit Disqus, deși nu oferă în acest moment capacitatea inline.
Acum, hai să facem un pas dincolo de Mediu și să adăugăm ceva interesant că New York Times se descurcă bine: un plugin sugerat pentru citirea următoare. Plug-in-ul gratuit UpPrev afișează un promo flyover la postarea anterioară, viitoare sau aleatorie de pe site-ul dvs.:
Deoarece blogurile personale au adesea o rată mare de respingere, de ex. cititorii dau clic după ce au citit un articol, înainte de a putea ajuta oamenii să rămână pe site. Chiar dacă folosesc widgeturi pentru articole recente și populare, îmi place conceptul de a folosi un flyover animat pentru a promova o piesă specifică.
UpPrev are un simplu dialog de setări pentru plugin-uri și a lucrat ușor pentru mine:
Puteți alege cum upPrev selectează conținutul de prezentat, de exemplu precedent, aleatoriu sau asociat, cu pluginul Yet Another Related Posts (YARPP):
Iată cum arată în timp ce derulați în josul paginii de pe breakups.io:
Sper că v-ați bucurat de acest post. Mediu și WordPress sunt ambele platforme interesante și este minunat atunci când putem să luăm lucrurile pe care le apreciem de la unul și să le punem în aplicare în altul. Este, de asemenea, interesant atunci când găsiți lucruri cum ar fi comentarii inline care sunt încă greu de făcut în WordPress. Mediu are o mulțime de bine și echipa WordPress are munca sa tăiat pentru ea.
Nu ezitați să postați corecturi, întrebări sau comentarii de mai jos. Încerc să particip la discuții. Aș fi interesat în special de experiența dvs. cu teme și / sau pluginuri alternative. Puteți să mă contactați și pe Twitter @reifman sau să mă trimiteți direct prin e-mail. Dacă vă bucurați de acest tutorial, vă rugăm să vizitați pagina mea de instructor pentru a vedea colecțiile mele de alte tutoriale.
Accentsconagua