Statische Social Media-Buttons nun auch im Theme „Seashell“ eingebaut

Geschätzte Lesezeit: 1 Minute

In meinem neuen Theme wollte ich die statischen Social Media-Buttons auch wieder einbauen. Zwischenzeitlich hatte ich sie ein paar Mal modifiziert, mal mit mal ohne Popuplösung. Das Theme „Seashell“ ist schon ein ganz anderes Kaliber, als mein altes „Smoky“. Bei diesem wusste ich sofort, wo ich ansetzen musste.
Also wohin nun mit dem Code, um die Buttons unter den Beiträgen anzeigen zu lassen? Erster Gedanke war die Datei content.php. Aber jegliche Versuche, die Social Media-Buttons dort einzufügen, schlugen fehl.

Einfügen im Template

Letztendlich funktionierte die Darstellung nach Einfügen in die Datei loop.php unter dem Themeverzeichnis „sections“. Ich habe diese Datei nach der Zeile <?php if(is_single()): ?> um die Social Media-Codes ergänzt und im Childtheme-Verzeichnis abgespeichert. Weil ich gerade dabei war, habe ich der loop.php noch manuell die Funktion zur Anzeige der ähnlichen Beiträge hinzugefügt:

Anpassen müsst ihr noch die Namen eurer Imagedateien und die Pfade zu dem Grafikverzeichnis.

Edit 13.11.2014

Außerdem müsst ihr „Sylsurium“ durch euren eigenen Twitternamen ersetzen.

Sonderfall Facebook

Die Extra-Funktion für den Facebook-Button habe ich beibehalten. Gespeichert ist diese bei mir – wie viele Zusatzfunktionen – als Modul in dem Plugin Toolbox. Der Vollständigkeit halber zeige ich, wie dieser bei mir aussieht:

Optische Darstellung per CSS

Der ehemalige CSS-Code war schon ziemlich aufgebläht, was einerseits daran lag, dass ich einen plastischen Effekt erzielen wollte. Andererseits habe ich mir zugegebenermaßen keine große Mühe gemacht, die CSS-Attribute zusammenfassend zu definieren. 😉

Jetzt habe ich mich von dem 3D-Effekt getrennt und ein Flatdesign gewählt. Die verschlankten CSS-Werte sehen nun so aus:

Social Media-Buttons-Anzeige im Smartphone

 

Da ich das Child-Theme von „Seashell“ verwende, habe ich darin ebenfalls ein Verzeichnis namens „sections“ angelegt und die geänderte loop.php hineinkopiert.

Ich finde, mobil sind sie auch recht ansehnlich. 🙂

Hinweis
Die in diesem Beitrag dokumentierten Codes habe ich mittlerweile entfernt. Somit existiert die Darstellung bzw. Funktion nicht mehr.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen, sei es über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

6 Kommentare

Kommentare hinzufügen
  • Wie immer perfekt umgesetzt und beschrieben.

    Ich bin dafür im Moment zu faul und zeitlich ein wenig eingeschränkt. Daher bleiben die Buttons noch per Plugin eingebunden. Wenn ich mal die Zeit finde, dann weiß ich ja jetzt, wo ich nachschauen kann. 😉

    LG Thomas

  • Ganz schön Aufwendig würde ich meinen.
    Bei mir ist es auch mit Plugin gelöst sieht zwar nicht so schön aus wie bei Dir aber es reicht aus.
    Bei meinem Thema wäre das ja wahrscheinlich eh nicht so umzusetzen wie bei Deinem „Seashell“

    Viele Grüße
    Lothar

  • Find ich toll, dass du das immer so ausführlich beschreibst, danke dafür. Ich hab momentan auch noch Plugins dafür am Start – aber mal sehen, nachdem ich eh viel zu viele immer aktiv hab, guck ich gerne mal bei dir wieder, wie das manuelle Umsetzen geht … Plugins einsparen 😉

  • Hallo Thomas,

    ganz lieben Dank, es ist ja nur eine Option und ich hätte auch vorerst die themeeigenen Buttons verwendet, wenn ich es mit dem manuellen Einbau nicht so fix hinbekommen hätte. „Seashell“ bietet da ja schöne Möglichkeiten. In der mobilen Ansicht hingen sie ja auch anfangs noch schief und krumm unter dem Beitrag. 😉

    Hej Lothar,

    och so aufwändig war es für mich gar nicht mehr, weil ich die Codes ja bereits im alten Theme und auch im Zweitblog eingebaut habe. Lediglich am CSS musste ich noch einmal Hand anlegen. Es ging jetzt nur darum zu schauen, wo sie in „Seashell“ umgesetzt werden.

    So wie ich das verstanden haben ist Erklärung ja nur auf das Theme “Seashell” bezogen.

    Eigentlich kannst Du diese Codes auch in jedem anderen Theme einbauen, Du musst nur wissen, wo.
    In meinem alten Theme war es unter dem Contentbereich in der single.php eingebunden. Daher nahm ich an, dass es hier in der content.php sein müsste. Falsch gedacht. 😉

    Hallöchen Birgit,

    danke schön. 😀 Ich finde wichtig, dass die jeweiligen Schritte – und seien sie für manchen Webmaster noch so selbstverständlich – beschrieben werden. Ich weiß ja, wie schwierig es für mich am Anfang meines Joomla- und WordPress-Einstiegs war, Dokumentationen umzusetzen, weil manchmal nicht detailliert beschrieben war, wo etwas wie einzufügen ist.

    Mir gefällt die manuelle Umsetzung des Twitterbuttons deswegen, weil beim Teilen Hashtags aus den Kategorien und Tags generiert werden. Und durch das Einfügen meines Twitternamens @Sylsurium im Code erhalte ich eine Mitteilung, wenn ein Beitrag über diesen Button retweetet wird. Und nicht zu vergessen sind die statischen Buttons datenschutzkonform.

    Lieben Gruß
    Sylvi

    P.S.: Da fällt mir ein, dass ich im Beitrag noch erwähnen muss, dass mein Twittername durch den eigenen ausgetauscht werden muss. 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Copyright © Sylvis Blog • 2019. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung

%d Bloggern gefällt das: