Zusätzliche Funktionen für WordPress-Blogartikel einbauen (Updated)

Zusätzliche Funktionen im Blog con schwindt-pr (Sharing, Hinweis auf Mailabo, ähnliche Beiträge und Autorenkasten.

Wer mit WordPress bloggt, kennt das: Man hat ein Theme gefunden und vielleicht schon ein bisschen an dessen Layout geschraubt, aber es fehlen einfach noch ein paar Sachen. Zum Glück gibt es für alles Plugins. Manchmal sind aber auch die nicht das, was man sucht. Wer sich ein bisschen mit HTML und CSS auskennt, kann daher noch einiges rausholen. So habe ich in den vergangenen Tagen an meinem Blog gearbeitet und u.a. folgende Bereiche eingerichtet, die am Ende eines jeden Artikels angezeigt werden:

Zusätzliche Funktionen im Blog con schwindt-pr (Sharing, Hinweis auf Mailabo, ähnliche Beiträge und Autorenkasten.

1. Beiträge weitersagen mit Sharebuttons (Updated)

Für das Weitersagen meiner Blogartikel habe ich mich für die Sharing-Option von Jetpack entschieden. Dort können Sie einen individuellen Einleitungstext (Sharing-Bezeichnung) speichern und sich zwischen verschiedenen Layouts (Schaltflächenstil) für die Buttons entscheiden, die man zuvor ausgewählt hat. Die Weitersage-Option via WhatsApp, die nur mobilen Besuchern angezeigt wird, ist im Standardpaket allerdings nicht enthalten. Wie Sie diese Funktion aktivieren können, habe ich hier erklärt: WhatsApp zu Jetpack-Sharebuttons hinzufügen.

UPDATE: Inzwischen nutze ich das Plugin Shariff Wrapper (Danke für den Tipp, Johannes Mirus!) und das in einer per Hand angepassten Version:

Weitersage-Buttons aus Shariff Wrapper

Statt in den Plugin-Einstellungen auszuwählen, wo die Buttons angezeigt werden sollen, habe ich den im FAQ des Plugins unter „Can I use it in my theme?“ genannten Code an der gewünschten Stelle in die single.php eingefügt. UPDATE: Wenn Sie die Zähler in den Buttons nicht verwenden wollen (wie ich im Newsroom), müssen Sie backend=on weglassen.

Dazu habe ich einen Einleitungssatz und eine horizontale Linie davor eingefügt. In den Plugin-Einstellnugen habe ich außerdem den Abstand zum folgenden Kasten in der CSS-Zeile definiert. UPDATE 2: Nach dem Plugin-Update am 6.6.2015 habe ich die Linie und die Überschrift direkt in den Einstellungen unter Design > Überschrift über allen Shariff-Buttons via html festgelegt. (Danke an Jan-Peter Lambeck für die prompte Hilfe via Twitter!)

2. Hinweis auf Blogabo per Mail

Unter den Sharebuttons und den automatisch angezeigten Meta-Informationen zum Artikel (Kategorie, Schlagworte) wird jetzt ein Kasten angezeigt, in dem ich den Leser auf die Möglichkeit hinweise, sich neue Artikel von mir per E-Mail zuschicken zu lassen. Für diese Funktion gibt es zwar auch Plugins, aber ich habe sie manuell eingefügt. Und das geht so:

Ich habe einen einfachen div-Container in die single.php eingefügt. Diese div enthält folgenden Hinweis mit dem Link zu meiner Mailabo-Funktion, wie ich sie auch in den Widgets der Sidebar bzw. im Footer verwende:

Screenshot des Kastens mit dem Hinweis auf das Mailabo

Die div habe ich mittels einer eigenen Klasse im CSS layoutet. Das geht sicher auch noch etwas schicker, aber für den Anfang reicht es so. 😉

Damit so eine Änderung beim nächsten Themeupdate nicht wieder überschrieben wird, empfiehlt es sich, ein Child Theme anzulegen und die Änderung dort vorzunehmen.

Übrigens: Leider hat sich das Plugin post notification, das ich bis gestern für die Benachrichtigung über neue Artikel per E-Mail genutzt habe, mal wieder verselbständigt. Daher habe ich es jetzt ein für alle Mal abgeschafft und weise nun wieder auf den bereits früher verwendeten Weg via Feedburner hin.

3. Ähnliche Beiträge anzeigen

Um Besucher meiner Website für weitere Beiträge als nur den einen, über den sie auf die Website gekommen sind, zu interessieren, verwende ich das Plugin Contextual Related Posts.

Beispiel für die Anzeige ähnlicher Beiträge

Zuvor hatte ich das Jetpack-Modul Ähnliche Beiträge ausprobiert. Das erlaubt aber leider keine weiteren Einstellungen für die Auswahl der anzuzeigenden Beiträge und zeigt so auch öfter mal stark veraltete Artikel an. Mit dem neuen Plugin hingegen kann ich einen Zeitrahmen definieren, innerhalb dessen die ähnlichen Beiträge ausgesucht werden sollen. Außerdem kann ich bestimmte Artikel sogar komplett ausschließen.

Leider platziert das Plugin die ähnlichen Beiträge in meinem Theme standardmäßig nicht so, wie ich das gern hätte. Daher hab ich statt der Positionierung über die Plugin-Einstellungen (einfah alle Häkchen rausnehmen) die gewählt, die unter Manual install im FAQ auf der Plugin-Seite zu finden ist (Danke an Peter Müller für den Tipp!).

Außerdem habe ich unter Einstellungen > Ähnliche Beiträge das Original-CSS so verändert, dass es besser zu meinem Layout passt.

4. Autorenkasten anzeigen

Da mein WordPress-Theme Graphy kein eigenes Autorenfeld unter den Blogbeiträgen vorsieht, hatte ich zunächst das Plugin Fancier Author Box verwendet. Leider ließ sich das aber im Layout nicht so anpassen, wie ich es gern gehabt hätte. Deshalb bin ich auch hier auf eine manuell eingefügte Lösung in der single.php des Child-Themes ausgewichen. Wie das geht, wird hier erklärt: http://www.elmastudio.de/wordpress/wordpress-tipp-ein-autorenfeld-einfuegen.

Screenshot des Autorenfelds von Annette Schwindt

Der Text, der im Autorenfeld gezeigt wird, ist der, den Sie im Benutzerprofil Ihres WordPress-Blogs eingegeben haben. Das Foto ist Ihr Gravatar.

 

Soviel zu den aktuellen Änderungen hier in meinem Blog. Sie können sie live hier unter dem Artikel testen. 😉 Welche Helfer oder zusätzlichen Codeschnipsel verwenden Sie in Ihrer WordPress-Installation? Haben Sie Tipps für andere Leser? Ich freue mich auf Ihre Kommentare! 🙂

 

Facebook-Fanseiten: Einbinden von CSS in FBML-Reiter

UPDATE März 2011: FBML-Reiter sind hinfällig. Das Einbinden individueller Inhalte, sollte jetzt über iframe-Tabs gelöst werden. Siehe http://dewww.schwindt-pr.com/2011/03/04/facebook-iframetabs/

*

Die selbständige Webdesignerin Alexandra Steiner aus Wien ist einer der Netzwerkpartner von schwindt-pr. Kürzlich zeigte mir Alexandra folgenden Weg zur Einbindung eines eigenen CSS in einen FBML-Reiter auf Facebook. Ich bat sie daraufhin, diesen in einem Gastbeitrag kurz zu erläutern:

Nichts ist schlimmer, als ein unüberschaubarer Quelltext. Gerne hätte ich eine einfachere Variante genutzt, doch leider lassen sich in FBML-Reitern  weder iframes noch externe Stylesheets  über JavaScript einbinden. Die im folgenden erläuterte Vorgehenseweise scheint also die einzige Möglichkeit zu sein, statische Seiten mittels CSS und HTML darzustellen.

Mit dieser Möglichkeit bleibt der CSS-Teil schlank und unübersichtliche CSS-Deklaration für jedes einzelne Element sind nicht nötig. Somit bleibt der Quelltext übersichtlich und aufgeräumt.

Um den Quelltext innerhalb des FBML-divs zu entschlacken sollte man Folgendes tun:

<style>
<!–
Element {Eigenschaft:Wert; …}
–>

</style>

Danach folgt der übliche HTML-Part.
Innerhalb von <style> … </style> kann man nun problemlos Klassen, ids und Elemente deklarieren. Im HTML-Part werden wie gehabt die Klassen oder ids aufgerufen.
Hier ein kleines Beispiel:

<div>
<h1>FBML als praktische Werbeplattform</h1>
<p>Fbml ist die neue und unkomplizierte Art sein Unternehmen noch effizienter zu präsentieren.</p>
<p><a href=“#“>Werden Sie Fan!</a></p>
</div>

<style>
<!–
div {background:url(http://www.deinewebseite.at/images/bla.gif) top center #fff;}
h1 {color: green; font-size: 25px;}
p {color: red; font-size: 14px;}
a {color: black; text-decoraiton: underline;}
–>
</style>

Der Einfachheit halber sollte man den gesamten CSS-Teil am Ende des HTML-Teil stellen. Das hat den Vorteil, dass man sich keinen Wolf scrollen muss, um die Inhalte zu bearbeiten. Erfahrungsgemäß arbeitet man öfter an den Inhalten als an der CSS.

Empfehlenswert ist es, sowohl den HTML-Part als auch den CSS-Part extern vorzubereiten, also nicht direkt in die FBML-Box reinzuschreiben. Es ist einfach gemütlicher, beide Teile in einem HTML-Editor zu erstellen. Somit vermeidet man Fehlerquellen und muss nicht unnötig rumdoktern. Zumal das FBML-Formularfeld nicht sehr nutzerfreundlich gestaltet wurde.

Erwähnt sei auch, dass komplexe CSS-Strukturen nicht umsetzbar sind. Daher sollte man auf verschachtelte divs verzichten. Hier empfehle ich ausnahmsweise Tabellenkonstrukte – in der konventionellen Webseitengestaltung würde ich diese Technik nicht anwenden. Da ja Facebook an sich schon keinen Wert auf Validität und Barrierefreiheit legt, kann man auch alle beiden Augen zudrücken. Hier geht es wirklich nur um das optische Darstellen und nicht unmittelbar um Barrierefreiheit, Validität oder gar Benutzerfreundlichkeit… Facebook hat viele Möglichkeiten unterbunden, um zu tiefes Eingreifen in den Code zu verhindern. Ob das gut oder schlecht ist, sei mal dahingestellt.

*

Static FBML-Tutorial für individuelle Fanseiten-Reiter (pdf, 910kb)
von Annette Schwindt und Alexandra Steiner