Wenn du auf gedichtkueche.de kommst, siehst du unter jedem Artikel die „Teilen“-Schaltflächen für E-Mail, Facebook, Google+ und Twitter.
Ich möchte dir in diesem Beitrag beschreiben, wie ich diese Schaltflächen in meine Seite eingebaut habe. Eins vornweg: Anregung für meine Lösung war dieser Beitrag.
Der Vorteil dieser Variante ist, dass ich ohne ein Plugin auskomme, die Schaltflächen datenschutzkonform sind und ich die Gestaltung komplett selbst in der Hand habe. Vom Programmieren hat meine Lösung die schöne Eigenschaft, dass Design und Funktion sauber getrennt sind und damit Konflikte ein Stück weit vermieden werden.
Bevor ich beschreibe, wie ich vorgegangen bin, benötigst du folgende Voraussetzungen:
- Du besitzt einen selbst gehosteten WordPress-Blog.
- Du solltest die Grundstruktur deines Themes kennen (empfohlen: Die Arbeit mit einem Child-Theme).
- Du solltest Grundkenntnisse im Umgang mit HTML, PHP und CSS besitzen, um Fehlern beim Übertragen oder der Anpassung der Lösung an deine Bedürfnisse vorzubeugen.
- Du solltest Zugang zum Server und deinen Dateien besitzen, um diese bearbeiten zu können (empfohlene Tools: www.web2ftp.de oder FileZilla).
Meine Bedingungen sind:
- das aktuelle WordPress 3.7.1. (zum Zeitpunkt der Erstellung dieses Artikels)
- mein Child-Theme für das Twentytwelve-Theme
First things first oder: zuerst die Funktion
Zum Einstieg benutze ich folgenden HTML/PHP-Code. Es handelt sich dabei um einen DIV-Container mit der CSS-Klasse „sharing“ (auf letzteres komme ich später zu sprechen).
Inhalt des Containers sind im Grunde genommen ein Link zum Mailen des Artikels und die Links zu den SocialMedia-Diensten.
<div class="sharing">
<a href="mailto:?subject=Literaturtipp: <?php the_title();?>&body=<?php the_permalink() ?>" title="Teile das Gedicht per E-Mail" class="email"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Teile das Gedicht bei Facebook" class="facebook"></a>
<a href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Teile das Gedicht bei Google+" class="google"></a>
<a href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>%20<?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" title="Teile das Gedicht bei Twitter" class="twitter"></a>
</div>
Diesen Code setze ich in die content.php meines Child-Themes hinter dem Endtag </footer>. Die content.php ist eine Kopie der Datei content.php meines originalen Themes.
Hinweis: In dem Beitrag, von dem ich mich anregen lassen habe, steht, dass der Code in die single.php gehört. Leider kann ich das für mein Theme nicht bestätigen. Die Buttons werden dann nicht angezeigt. Der Autor des Beitrags verrät leider nicht, welches Theme er verwendet.
Was besagt der obige Code? Als Adresse der Links werden die URL’s der Anbieter angeben, die mit PHP-Code vervollständigt werden (alles, was in der Eigenschaft href=““ notiert ist). Hier solltest du nichts weiter ändern, damit das Teilen auch gut klappt.
Die Eigenschaft target=““ beschreibt, in welchem Fenster der neue Inhalt angezeigt wird. In meinem Beispiel wird ein neues Fenster geöffnet.
Unter title=““ kannst du einen Text angeben, der angezeigt wird, wenn der Besucher/die Besucherin mit der Maus über die Schaltfläche fährt.
Wie du vielleicht bemerkt hast, steht innerhalb des Linktags (<a></a>) nichts. Du könntest hier auch einen Text eingeben, der dann als Link dargestellt wird. Aber warum das in meiner Lösung nicht so ist, beschreibe ich dir zweiten wichtigen Teil: der Gestaltung mit CSS.
Funktionieren soll’s! Ach ja, und nett aussehen auch.
Sowohl der DIV-Container als auch die Links gehören zu jeweils einer CSS-Klasse („sharing“ und „email“ oder „facebook“ usw.). Dafür rufe ich die style.css meines Child-Themes auf und notiere dort:
.sharing {
display: block;
margin-bottom: 20px;
}
a.email {
display: block;
width: 16px;
height: 16px;
background-image: url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/email-16x16-grey.png);
float: left;
margin-right: 5px;
}
a.email:hover {
background-image: url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/email-16x16.png);
}
a.facebook {
display: block;
width: 16px;
height: 16px;
background-image: url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/facebook-16x16-grey.png);
float: left;
margin-right: 5px;
}
a.facebook:hover {
background-image: url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/facebook-16x16.png);
}
a.google {
display: block;
width: 16px;
height: 16px;
background-image: url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/google+-16x16-grey.png);
float: left;
margin-right: 5px;
}
a.google:hover {
background-image: url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/google+-16x16.png);
}
a.twitter {
display: block;
width: 16px;
height: 16px;
background-image: url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/twitter-16x16-grey.png);
float: left;
margin-right: 5px;
}
a.twitter:hover {
background-image: url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/twitter-16x16.png);
}
Hier liegt nun die Lösung des Geheimnisses, warum der reine HTML-Code keine Schaltflächen anzeigt. Sie werden erst durch CSS-Angaben gestaltet.
Ich habe die Höhe und Breite (height und with), das Verhalten im Textfluss (display), die Hintergrundgrafik (background-image) und den Abstand zu anderen Elementen (margin-right; konkret den Abstand auf der rechten Seite) festgelegt. Prinizipiell ist das alles änderbar und anpassbar, so wie du es gern haben magst.
Konkret funktioniert es so, dass zwei Grafiken je Schaltflächen hinterlegt sind. Eine graue Grafik, die zu sehen ist, wenn der Besucher auf die Seite kommt und eine farbige Grafik, die erscheint, wenn der Besucher über die Schaltfläche fährt.
Im Grunde genommen, war es das auch schon. Wenn dich die Anleitung ratlos zurücklässt, dann stelle deine Frage in den Kommentaren, ich versuche dir dann zu antworten oder ggf. die Anleitung zu überarbeiten.
Erweiterung: Sharebuttons nur bei Artikeln einer bestimmten Kategorie anzeigen
Den oben dargestellten HTML/PHP-Code habe ich anschließend noch erweitert:
<?php if(in_category('Interview')) {} else { ?>
<div class="sharing">
<a href="mailto:?subject=Literaturtipp: <?php the_title();?>&body=<?php the_permalink() ?>" title="Teile das Gedicht per E-Mail" class="email"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Teile das Gedicht bei Facebook" class="facebook"></a>
<a href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Teile das Gedicht bei Google+" class="google"></a>
<a href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>%20<?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" title="Teile das Gedicht bei Twitter" class="twitter"></a>
</div>
<?php } ?>
Durch folgende Angabe sage ich WordPress, dass es unter einem Artikel der angegebenen Kategorie bitte keine Sharebuttons anzeigen soll.
<?php if(in_category('Interview')) {} else { ?>
Diese Zeile besagt, dass bei Artikeln mit der Kategorie „Interview“ keine Sharebuttons angezeigt werden (umgesetzt durch die leeren {}). Der praktische Aspekt an der WordPress-Funktion in_category() ist, dass die Angabe um beliebig viele Kategorien erweitert werden kann. Ich könnte zum Beispiel den betreffenden Teil durch folgendes Beispiel ersetzen:
<?php if(in_category('Interview','Gedicht','Ankündigungen')) {} else { ?>
In diesem Beispiel werden die Sharebuttons also bei allen Artikeln ausgeblendet, die zur Kategorie „Interview“, „Gedicht“ oder „Ankündigungen“ gehören.
Wichtig ist, dass ich die if-else-Funktion nach dem DIV-Container (also nach dem </div>) durch folgende Angabe schließe:
<?php } ?>