Share
Was Sie erstellen werdenWenn Sie Artikel zu Medium besucht haben, kennen Sie die sauberen, lesbaren Zeilen. Die Artikel werden schnell geladen und können problemlos auf Handys, Tablets und Desktops gelesen werden. Hier ist ein Beispiel aus einem meiner mittleren Artikel, Shining Light on Internet Rage:
In diesem Tutorial werde ich Sie durch die Auswahl von Designs und Plugins führen, um Ihre WordPress-Site in ein Medium-ähnliches Erlebnis zu verwandeln. Wir werden uns auch auf die Funktionalität konzentrieren. Ich gehe Sie durch Plugins, die die Lesezeit anzeigen, und wie Sie den Benutzer Text auswählen und inline kommentieren oder ihn an Twitter senden können.
Hier ein Beispiel für die Darstellung der erwarteten Lesezeiten durch Medium:
Hier ist ein Beispiel für die Auswahl-, Kommentar- und Freigabefunktion von Medium:
Hier ein Beispiel für Inline-Kommentare in einem anderen Medium-Artikel:
Wenn Sie eine völlig neue Website erstellen möchten, können Sie hier meiner visuellen Anleitung zur Installation von WordPress folgen. Möglicherweise interessieren Sie sich auch für die Ghost-Open-Source-Blogging-Plattform, die ich Anfang des Jahres auf Tuts + erstellt habe. Für dieses Beispiel werde ich tatsächlich die Ghost-Site, die ich im vorigen Teil erstellt habe, zu einem Medium-ähnlichen WordPress-Erlebnis migrieren.
Meine frühere Ghost-Homepage sah so aus, als würde sie ein Medium-ähnliches Thema namens Ghostium verwenden:
Wenn Sie Ihre vorhandene Site anpassen möchten, folgen Sie einfach den Themen und Plugins, die sich an Medium erinnern.
Für dieses Tutorial werde ich die Readme-Datei "Readable WordPress Theme" installieren, die bei Theme Forest, einem Tuts + -Netzwerkunternehmen, für 48 US-Dollar erhältlich ist (es war meine Wahl, nicht Tuts +)..
Wenn Sie bereit sind, für ein Thema zu bezahlen, sollten Sie auch die folgenden drei Bereiche prüfen:
Es gibt auch eine Vielzahl von großartigen kostenlosen Medium-inspirierten WordPress-Themes. Hier sind ein paar hervorragende Zusammenfassungen:
Hiervon können Sie zunächst Fastr von Kanishk Kunal auschecken. Er hostet hier eine Demo. Hier ist ein Screenshot von Fastr:
Wenn Sie ein kostenloses Thema finden, das Ihnen gefällt, veröffentlichen Sie bitte Ihre Erfahrung im Kommentarthread, damit andere Leser davon profitieren können.
Sie können das Liesmich-Theme bei ThemeForest erwerben und dann das ZIP-Archiv von WordPress von der Site herunterladen.
Besuchen Sie Ihr WordPress-Dashboard und klicken Sie auf Darstellung> Designs> Neu hinzufügen> Hochladen.
Wie bei jedem WordPress-Theme gibt es viele Site-spezifische Konfigurationen und eine themenspezifische Benutzeroberfläche zum Arbeiten. Die Readme-Datei ist relativ sauber. Für die meisten Einstellungen gibt es ein einfaches Dialogfeld mit Registerkarten:
Es bietet auch eine Vielzahl von schönen Layouts, wie zum Beispiel die Mauerwerk-Option:
Sie können herausfinden, wie ich meine fertige Site unter breakups.io konfiguriert habe. Dies ist mein Coverlayout:
Hier ist eine Story-Seite:
Ich mag die Art und Weise, wie es sich herausstellte. Wenn ich mehr Inhalt hätte, hätte ich mich vielleicht für das Masonry-Layout entschieden.
Lassen Sie uns nun zu mittelähnlichen Plugins springen: Wählen Sie Text und Teilen, Lesezeit und Inline-Kommentare.
Mit dem kostenlosen Selection Sharer-Plugin von Hans van Gent können Sie Ihrer Website Textauswahl, E-Mail- und Twitter-Sharing hinzufügen. Es ist einfach zu installieren und funktionierte perfekt für mich.
So sieht es auf meiner Site aus, wenn Sie Text auswählen und teilen. Sie können es auch versuchen:
Ich war beeindruckt, wie gut dies ohne Konfiguration funktioniert hat. Eine Alternative ist das kostenlose Quotable-Plugin, das select und tweet bietet.
Ich mache mir ein bisschen Sorgen um die Auffindbarkeit dieser Funktion, aber wenn jemand Text kopiert, werden sie ihn entdecken.
Wie Sie anhand der Bilder oben sehen können, bietet das Readme-Thema integrierte Lesezeiten. Es gibt jedoch Plugin-Optionen, wenn Sie ein anderes Design auswählen.
Das kostenlose Lesezeit-Plugin zeigt die Lesezeit und eine Fortschrittsleiste im Beitrag an.
Es gibt auch einige offene Jquery-Bibliotheken, die dasselbe tun, wenn Sie Ihre eigene integrieren möchten. z.B. Michael Lynchs Lesezeit.
Es tut uns leid, enttäuscht zu sein, aber es stellt sich heraus, dass Sie nicht einfach alles tun können, was Medium tut. Inline-Kommentare lassen sich nur schwer nachvollziehen, da sie auf eine große Motivunterstützung angewiesen sind. WP Tavern hat dieses Thema ausführlicher untersucht. Sie entschieden sich für das kostenlose Inline Comments Plugin. Aber keine der Lösungen, die sie sich anschauten, bot eine großartige Benutzererfahrung.
Am Ende entschied ich mich, bei meinem Favoriten, dem kostenlosen Disqus-Plugin, zu bleiben, obwohl es derzeit keine Inline-Funktion bietet.
Lassen Sie uns nun einen Schritt über Medium hinausgehen und etwas Cooles hinzufügen, das die New York Times gut macht: ein vorgeschlagenes Plug-In für das nächste Lesen. Das kostenlose UpPrev-Plugin zeigt ein Flyover-Promo zum vorherigen, nächsten oder zufälligen Post auf Ihrer Website:
Da persönliche Blogs oft eine hohe Absprungrate aufweisen, z. Leser klicken nach dem Lesen eines Artikels weg, upPrev kann dazu beitragen, dass die Benutzer auf der Website bleiben. Obwohl ich Widgets für aktuelle und beliebte Objekte verwende, gefällt mir das Konzept, eine animierte Überführung zu verwenden, um ein bestimmtes Stück zu bewerben.
UpPrev hat ein einfaches Plugin-Einstellungsdialogfeld, das für mich einfach funktioniert hat:
Mit dem YARPP-Plugin Yet Another Related Posts (YARPP) können Sie auswählen, wie upPrev Inhalt auswählen soll, z. B. zuvor, zufällig oder verwandt.
So sieht es aus, wenn Sie auf breakups.io ganz nach unten scrollen:
Ich hoffe, dir hat dieser Beitrag gefallen. Medium und WordPress sind beide aufregende Plattformen und es ist großartig, wenn wir die Dinge, die wir mögen, von einer nehmen und in einer anderen implementieren können. Es ist auch interessant, wenn Sie Dinge wie Inline-Kommentare finden, die in WordPress noch schwer zu bewerkstelligen sind. Medium macht sich sehr gut und das WordPress-Team hat seine Arbeit darauf vorbereitet.
Bitte zögern Sie nicht, Korrekturen, Fragen oder Kommentare zu posten. Ich versuche an den Diskussionen teilzunehmen. Ich würde mich besonders für Ihre Erfahrungen mit Themen und / oder alternativen Plugins interessieren. Sie können mich auch auf Twitter @reifman erreichen oder mich direkt per E-Mail kontaktieren. Wenn Ihnen dieses Tutorial gefallen hat, besuchen Sie bitte meine Instructor-Seite, um meine Sammlungen anderer Tutorials anzuzeigen.
Accentsconagua