Fügen Sie in WordPress-Vorlagen Schaltflächen für soziale Netzwerke ohne Zusatzmodule und Dienste ein - Profit Hunter

Wir erleichtern das Laden der Site mit unserem eigenen Code anstelle von Plug-Ins! Je weniger sie sind, desto einfacher und schneller lädt unsere Vorlage. Dies ist ein direkter Weg, um das Verhalten der Besucher der Website zu verbessern. In diesem Beitrag erfahren Sie, wie Sie einen vertikalen Block sozialer Schaltflächen erstellen, der zusammen mit dem Artikel scrollt. Damit kann der Leser einen Link zum Posting teilen und auf seiner Seite speichern, egal wie viel Text er liest.

Es kommt vor, dass wir keine Zeit haben, das Material bis zum Ende zu studieren, und um später darauf zurückzukommen, speichern wir es irgendwo (z. B. in Lesezeichen oder sozialen Netzwerken). So kommt es oft vor, dass der Block der Knöpfe weit am Ende eines langen Artikels liegt und für den Leser momentan nicht sichtbar ist, da die Person das Material noch nicht gelesen hat. Wir werden es mit Hilfe eines speziellen Codes so gestalten, dass der Block immer sichtbar ist und mit dem Artikel scrollen.

Fügen Sie in WordPress-Vorlagen Schaltflächen für soziale Netzwerke ohne Zusatzmodule und Dienste ein - Profit Hunter

Code für soziale Schaltflächen

Lassen Sie uns den Code der sozialen Schaltflächen für Facebook sortieren. Der Rest kann analog erfolgen.

. ! - SocialButtons -.
. span style = "display: scroll; position: fixed; bottom: 280px; left: 50px;".
. noindex. . a target = "blank" rel = "nofollow" href = "http: // www. facebook. com / sharer. php? u =.? php the_permalink ();?.". . img src = "http: // site. de / f. png" width = "50" height = "50" title = "Auf Facebook teilen" alt = "Bei Facebook posten". . / a. . / noindex. . / span.
. ! - SocialButtons -.

Signatur . ! - SocialButtons -. Mit können Sie visuell feststellen, wo sich im Seitencode unser Block von Schaltflächen befindet. Bisher haben wir nur eine Schaltfläche im Block platziert, aber der Code wird dann viel größer sein.
Im Tag. Span. c Attribute sind Stile. Wir werden sie für jeden Button registrieren. Aufnahme : blättern; position: fixed bedeutet, dass die Schaltfläche am Bildschirm "haftet" und nicht mit dem bereits gelesenen Text während des Bildlaufvorgangs der Seite ausgeblendet wird.

Die Anzeigen unten und links bestimmen die Position der Schaltfläche relativ zum unteren und linken Rand des Bildschirms. In unserem Fall wird es auf der linken Seite des Beitrags sein. Wenn Sie es auf der rechten Seite platzieren müssen, ersetzen Sie einfach „links“ durch „rechts“. Wie Sie bereits festgestellt haben, werden die Werte dieser Indikatoren in Pixel angegeben und Sie können sie nach Belieben ändern, bis Sie die optimale Position in Ihrer Vorlage finden. Beachten Sie, dass im obigen Beispiel der Einzug der Schaltfläche am unteren Rand des Bildschirms 280 Pixel beträgt.

Wenn wir jedoch eine weitere unter dieser Schaltfläche einfügen möchten, müssen Sie von 280 50 oder etwas mehr abziehen (50 ist die Höhe der Schaltfläche). Es stellt sich heraus, dass der nächste untere Button nicht mehr 280, sondern maximal 230 haben wird (wenn mehr, stoßen die Bilder gegeneinander an). Daher sollte sich dieser Wert mit jeder neuen Schaltfläche ändern.
Mit dem -Tag. noindex. und das Attribut rel = ”nofollow” schließen wir die Links, die in den Schaltflächen verborgen sind, damit sie von Suchmaschinen nicht indiziert werden.

Im -Tag. a. Attribut target = ”blank” ist dafür verantwortlich, das Fenster mit dem Angebot zur Freigabe in einem neuen Tab zu öffnen. Dies ist wichtig, da der Benutzer möglicherweise immer noch zu der Seite der Website zurückkehren möchte, die er gelesen hat.
Das Attribut href = fügt sich direkt in den Link-Code ein, der für das Anzeigen des Dialogfelds für soziales Netzwerk zuständig ist, wenn auf die Schaltfläche geklickt wird. Für jeden von ihnen ist dieser Code unterschiedlich. Aufzeichnung . php the_permalink (); ? Mit (wird nicht nur für die Feedburner-Schaltfläche "Abonnement" benötigt), können Sie auf der sich öffnenden Seite einen Link zu unserem Material und seinem Namen anzeigen. Beispiel:

Fügen Sie in WordPress-Vorlagen Schaltflächen für soziale Netzwerke ohne Zusatzmodule und Dienste ein - Profit Hunter

Im -Tag. img. Der Pfad zu dem Bild-Button, den Sie einfügen möchten, sowie dessen Parameter (Länge, Breite, Titel, Alt-Attribut) werden angegeben.

So erhalten wir das allgemeine Schema zum Zusammenstellen des Codes der Schaltfläche für das soziale Netzwerk:


. span style = "display: scroll; position: fixed; bottom: {value}; left: {value};".
. noindex. . a target = "blank" rel = "nofollow" href = "{Link zum sozialen Netzwerk} =.? php the_permalink ();?.". . img src = "{Verknüpfung zum Schaltflächenbild}" width = "{value}" height = "{value}" title = "{Share, tell on ...}" alt = "{Share, tell on ...}". . / a. . / noindex. . / span.

Die Bedeutung von Links für verschiedene soziale Netzwerke sollte folgendermaßen aussehen:

  • Für Facebook: onclick = ” Fenster. offen ('https: // plusone. google. com / _ / + 1 / confirm? hl = ru. url = http: // www. facebook.com. com / sharer. php? u =. php the_permalink () ;? . "
  • Für Twitter: http: // twitter. Com / intent / tweet? Text = RT @ Ihr Login bei Twitter .? Php the_permalink (); ?.
  • So abonnieren Sie den Blog-Feed: http: // feeds. Feedburner.com/ Name Ihres Feeds
  • Für E-Mails. Ru: http: // connect.mailde / share? share_url =.? php the_permalink ();?.
  • Für Vkontakte: https: // vk.com / share. php? url =. php the_permalink (); ?
  • Für Yandex-Lesezeichen: http: // zakladki. Yandex. com / newlink. xml? url =. php the_permalink ()? . name =. php the_title (); ? . descr =. php the_excerpt (); ?
  • Für Odnoklassniki: http: // www. Odnoklassniki. ru / dk? st. cmd = addShare. st. s = 1. st. _surl =. php the_permalink (); ? . title =. php the_title (); ?

Wo werden die Schaltflächen für das soziale Netzwerk in die WordPress-Vorlage eingefügt?

In der Regel wird der Block auf Seiten mit separaten Beiträgen, Nachrichten, platziert. Sie können es auf statische Seiten setzen. Sie sollten keine zusätzlichen externen Links zu Abschnitten oder zu den Hauptlinks hinzufügen, obwohl Sie den Effekt ausprobieren können. Nur Tests und Experimente können die tatsächliche Situation zeigen.

Eine einzelne Datei ist für eine separate Veröffentlichung verantwortlich. PHP, in dem Ordner mit Ihrem Design. Dort müssen Sie den von Ihnen erstellten Code einfügen. Wo Sie es platzieren sollten - Ihr Unternehmen ist gleich, die Schaltflächen stehen an der Stelle, die Sie in den unteren und linken Attributen angegeben haben. Es ist natürlich wünschenswert, diesen Code am Ende irgendwo nach der Fußzeilenausgabe einzufügen. Es ist notwendig, dass die Schaltflächen des sozialen Netzwerks später als der Hauptinhalt angezeigt werden, wenn der Benutzer ein langsames Internet hat. Das erste Material sollte immer mit benutzerfreundlichem Material geladen werden, und nur dann - den Share-Button und so weiter.

Warum ist es besser, Ihren Button-Code auf der Website einzubetten?

Wie oben erwähnt, sind Plugins die einfachste Möglichkeit, einen Button-Block zu erstellen. Wir legen jedoch Wert auf die Geschwindigkeit beim Laden der Website und versuchen, die Anzahl der Plugins zu minimieren. Wenn Sie also zwei Standorte nehmen, werden alle anderen Dinge gleich sein, ihre Qualität wird sich von den anderen abheben. Und warum? Weil ein Download schneller ist als der andere.

Eine andere Möglichkeit sind Dienste von Drittanbietern. Wenn diese Dienste sehr einfach und schnell abgelegt werden, "hängen" diese Dienste jedoch manchmal und die Website zeigt etwas Unverständliches anstelle von Schaltflächen an.

Darüber hinaus können in den Diensten und Plug-Ins zusätzliche Links zu Entwicklern enthalten sein, die von uns nicht benötigt werden.
Daher ist Ihr Code der beste Ausweg. Die Hauptsache - um es sauber und ordentlich zu machen, ohne unnötigen Schmutz und Fehler.

Magst du Artikel? Abonnieren Sie den Newsletter!

Suche

In Verbindung stehende Artikel