Startseite » WordPress » WordPress-Geschwindigkeitsoptimierung mit benutzerdefinierten Social-Sharing-Symbolen
WordPress-Geschwindigkeitsoptimierung mit benutzerdefinierten Social-Sharing-Symbolen
Es scheint eine einfache Aufgabe zu sein, aber das Hinzufügen von gut funktionierenden Social-Sharing-Schaltflächen zu einer WordPress-Site kann mühsam sein. Wenn ich gut benehmen sage, dann meine ich einfache, leichte, ressourcenschonende, schnelle - die meisten Social-Sharing-Plugins da draußen sind nicht so. Sie neigen dazu, Ressourcen wie verrückt und zu verschlingen Warum sollte jemand die Ladezeit des Plugins um 25-35% erhöhen, um nur einige Symbole anzuzeigen auf ihrer Website?
Die gute Nachricht ist, dass Sie nicht unbedingt ein Plugin benötigen, um diese Aufgabe auszuführen. In diesem Tutorial zeige ich Ihnen, wie Sie dies problemlos tun können Fügen Sie benutzerdefinierte Social Sharing-Schaltflächen hinzu bis zum Ende der Beiträge auf Ihrer WordPress-Site mit Nur ein paar Zeilen Code.
Schritt 1: Generieren Sie die Social Sharing-Schaltflächen
Wir verwenden den Simple Sharing Buttons Generator, ein praktisches und einfach zu verwendendes Web-Tool, um die Freigabesymbole zu generieren. Der Hauptvorteil dieser App besteht darin, dass die von ihr generierten Schaltflächen am Frontend laufen Sie belasten Ihren Server nicht und Sie können auch die Aktivitäten Ihrer Benutzer privat halten.
Um Ihre benutzerdefinierten Schaltflächen zu erstellen, gehen Sie hier und drücken Sie Start. Wählen Sie aus den 6 verschiedenen Schaltflächenformaten 1 aus. Klicken Nächster und kreuzen Sie an soziale Netzwerke Sie möchten Ihrer Site hinzufügen. Wenn Sie fertig sind, müssen Sie die Informationen Ihrer Website ausfüllen.
Auf diesem Bildschirm (unten) finden Sie zwei Optionen: "Kein JavaScript" und 'JavaScript'. Tick JavaScript, Da der Browser die URL dynamisch erkennen kann, können Ihre Besucher jeden Beitrag einzeln und nicht nur die URL der Startseite freigeben.
Sehen Sie sich zum Schluss noch einmal die Live-Vorschau an, laden Sie das gewählte Icon-Set herunter und holen Sie sich den generierten Code.
Schritt 2: Erstellen Sie ein untergeordnetes Thema
Jetzt müssen Sie die generierten Symbole und den Code zu Ihrer Site hinzufügen. Zunächst müssen Sie ein untergeordnetes Thema erstellen.
Sie können mit Hilfe unseres Lernprogramms problemlos ein untergeordnetes WP-Design erstellen oder die Schritte in diesem Artikel zum WP-Codex befolgen. Wenn Sie bereits eine haben, können Sie zu Schritt 3 springen.
Das Kinderthema bezieht sich auf das aktuell verwendete Thema - auf eine ähnliche Weise wie ein Kind sich auf seine Eltern bezieht. Es erbt alles (Stil und Funktionalität) vom übergeordneten Thema doch kannst du zusätzliche Funktionalität hinzufügen dazu.
In unserem Fall sind die zusätzlichen Funktionen die benutzerdefinierten Social-Sharing-Buttons.
Schritt 3: Erstellen Sie eine benutzerdefinierte Funktion, die die Symbole anzeigt
Wir werden der Datei functions.php des untergeordneten Themas eine benutzerdefinierte Funktion hinzufügen.
Mit Hilfe dieser Funktion können Sie die sozialen Symbole an jeder beliebigen Stelle Ihrer Website hinzufügen, indem Sie einen benutzerdefinierten Aktionshaken verwenden. Wenn Ihr untergeordnetes Design noch nicht über eine functions.php-Datei verfügt, erstellen Sie im Stammordner des untergeordneten Themas eine leere Textdatei mit den Namensfunktionen und ändern Sie die Erweiterung in .php.
Fügen Sie die folgende Codezeile in diese leere Datei ein:
Wenn dein Functions.php Datei ist eingerichtet, fügen Sie den folgenden Code-Ausschnitt hinzu:
/ * * Fügt die benutzerdefinierten Social-Sharing-Symbole hinzu * / function add_social_sharing () ?>
Teile diesen Beitrag
Endlich Löschen Sie die Zeile des HTML-Kommentars aus dem Code-Snippet oben und Ersetzen Sie es durch den HTML-Code die Sie in Schritt 1 mit dem Social Sharing Buttons Generator erstellt haben.
Schritt 4: Kopieren Sie die entsprechende Vorlagendatei in den untergeordneten Designordner
Standardmäßig werden einzelne Posts von einer als Vorlagendatei bezeichneten Datei gesteuert single.php. Manchmal - besonders in moderneren Themen - die Struktur von single.php ist komplizierter, da es auch zusätzliche Vorlagendateien lädt. In diesem Schritt müssen wir die entsprechende Vorlagendatei finden, in der wir die Symbole später hinzufügen können.
Um die richtige Stelle für die sozialen Schaltflächen zu finden, müssen wir die Vorlagendatei suchen enthält die Funktion, mit der der Inhalt der einzelnen Beiträge geladen wird.
Lassen Sie uns den Theme-Editor im WordPress-Admin-Dashboard unter öffnen Aussehen> Editor. In der oberen rechten Ecke finden Sie eine Dropdown-Liste, in der Sie Ihr übergeordnetes Thema auswählen können. Unter der Dropdown-Liste sehen Sie alle Vorlagendateien, die Ihr übergeordnetes Design enthält. Scrollen Sie nach unten, bis Sie das gefunden haben Einzelbeitragsvorlage (genannt single.php) und öffnen Sie es.
Wenn das übergeordnete Design das verwendet get_template_part () WP-Funktion in der single.php Datei, die bedeutet, dass eine zusätzliche Vorlagendatei verwendet wird, um den Inhalt des einzelnen Beitrags zu laden.
Zuerst musst du herausfinden, welches das ist. Der Name der zusätzlichen Vorlagendatei ist der erste Parameter von get_template_part () Funktion.
Der erste Parameter ist 'Inhalt' Das heißt, wir suchen nach der genannten Vorlagendatei content.php. Sie müssen diese Datei aus dem Stammordner des übergeordneten Designs in den Stammordner des untergeordneten Designs kopieren, um sie zu ändern.
Schritt 5: Fügen Sie den Action Hook der Right Template File hinzu
Wir haben eine Funktion namens erstellt add_social_sharing () In Schritt 3 haben wir ihn an einen benutzerdefinierten Aktionshaken angehängt custom_social_share. Jetzt müssen wir diesen Haken an der Stelle einfügen, an der die Funktion ausgeführt werden soll.
Hier ist das Code-Snippet, das Sie an der richtigen Stelle einfügen müssen:
Als nächstes finden wir den richtigen Ort.
Öffnen Sie die Vorlagendatei, die Sie Ihrem untergeordneten Thema in Schritt 4 in einem Code-Editor oder im Design-Editor des WordPress-Admin-Dashboards hinzugefügt haben, und suchen Sie nach der der Inhalt() Funktion.
Überprüfen Sie, ob ein vorhanden ist wp_link_pages () Funktion direkt nach dem der Inhalt() Funktion. Wenn dies der Fall ist, folgt der Code-Snippet oben. ansonsten folgt das der Inhalt() Funktion.
Schritt 6: Fügen Sie den CSS-Code zum untergeordneten Design hinzu
Öffne das style.css Datei Ihres untergeordneten Designs entweder im Code-Editor oder im Design-Editor des WordPress-Admin-Dashboards, kopieren Sie den in Schritt 1 generierten CSS-Code, fügen Sie ihn an das Ende der Datei ein und speichern Sie ihn.
Wir fügen der CSS-Datei zwei zusätzliche Zeilen hinzu, damit die Social-Sharing-Symbole in jedem Thema richtig angezeigt werden. Kopieren Sie den folgenden Codeausschnitt, und fügen Sie ihn am Ende von ein style.css Datei:
ul.share-buttons li a border: 0; ul.share-buttons li img display: inline;
Schritt 7: Laden Sie das Social Media-Symbol auf den Server hoch
Laden Sie den ausgewählten Social Media-Symbolsatz, den Sie in Schritt 1 heruntergeladen haben, in Ihren untergeordneten Themenordner. Verbinden Sie Ihren Server über FTP und erstellen Sie einen neuen Ordner mit dem Namen Bilder im Stammverzeichnis des untergeordneten Themenordners (/ wp-content / themes / your-child-theme / images) und laden Sie das hier eingestellte Symbol hoch.
Wir nennen den Ordner Bilder da dies der Standardname des Bildordners ist, den der Simple Sharing Buttons Generator verwendet.
Schritt 8: Überprüfen Sie den Pfad der Symboldateien
Nachdem Sie die Social-Media-Symbole in Schritt 7 auf Ihren Server hochgeladen haben, müssen Sie den Pfad der Symboldateien überprüfen, um sicherzustellen, dass sie geladen werden.
Der Pfad einer Bilddatei gibt dem Browser einen Hinweis auf den Ort auf dem Server. Lassen Sie uns die Bildpfade im überprüfen Functions.php Datei des untergeordneten Themas. Öffnen Sie die Datei in Ihrem Code-Editor und navigieren Sie zu add_social_sharing () Funktion, bei der Sie den mit dem Simple Sharing Buttons Generator generierten HTML-Code überprüfen müssen.
Im HTML-Code finden Sie eine tag mit einem src Attribut für jedes Symbol. Überprüfen Sie, ob jeder src Attribute zeigen auf die genaue Position, an der Ihr Icon-Set in Schritt 7 hochgeladen wurde.
Der Simple Sharing Buttons Generator fügt dem Dateien. Manchmal Browser können die Bilder nicht rendern, wenn Sie einen relativen Pfad verwenden, also ist es eine gute Idee zu Verwenden Sie stattdessen absolute Pfade. Auf diese Weise kann jeder Browser, der möglicherweise von Ihren Besuchern verwendet wird, über den Ort der erforderlichen Symboldateien absolut sicher sein.
Der vom Generator hinzugefügte relative Bildpfad sieht in etwa so aus:
Ändern wir das src Attribut jedes Symbols für einen absoluten Pfad, dh die vollständige URL der Datei.
Der URL-Pfad oben wird folgendermaßen aussehen:
Schritt 9: Laden Sie die geänderten Dateien hoch und aktivieren Sie das untergeordnete Design
Verbinden Sie Ihren Server über FTP und laden Sie alle Dateien hoch, die wir in diesem Lernprogramm erstellt haben, die Sie noch nicht hochgeladen haben Functions.php, das style.css, und die entsprechende Vorlagendatei (in diesem Tutorial entweder die single.php oder der content.php).
Aktivieren Sie schließlich das untergeordnete Thema im WP-Admin-Dashboard unter Aussehen> Themen Speisekarte.
Jetzt sind Sie mit Ihren superleichten, ressourcenschonenden und anpassbaren Social-Sharing-Symbolen bereit. Sie können online gehen und auf Ihrer Website live nachsehen.
Fazit
In diesem Tutorial habe ich Ihnen gezeigt, wie Sie die benutzerdefinierten Social Sharing-Schaltflächen am Ende einzelner Posts hinzufügen. Sie können die Freigabesymbole mithilfe des von uns erstellten Action-Hooks an anderen Orten auf Ihrer Website hinzufügen.
Fügen Sie einfach den in Schritt 5 verwendeten Code an der Stelle ein, an der die Schaltflächen angezeigt werden sollen:
Sie müssen auch die richtige Vorlagendatei finden, wenn Sie die Symbole an einer anderen Stelle platzieren möchten. Einzelne Seiten werden von einer als Vorlagendatei bezeichneten Datei gesteuert page.php, Medienanhänge wie Bilder werden von geladen attachment.php.
Wenn Sie die Social Sharing-Schaltflächen an einer anderen Stelle auf Ihrer Website anzeigen möchten, können Sie sie mithilfe der WordPress-Vorlagenhierarchie finden.
