zwanzig Seventeen ist das vielseitigste Standardthema von WordPress, das jemals gesehen wurde. Die in das Thema eingebauten Optionen lassen jedoch zu wünschen übrig.

In diesem Tutorial zeige ich Ihnen fünf Methoden, um dieses Thema entsprechend anzupassen Ihr Blog. Wir beginnen mit den Grundlagen und gehen dann zu schwierigeren und wirkungsvolleren Anpassungen über.

Wenn wir fertig sind, können Sie Twenty Seventeen in eine schöne und moderne Website für Unternehmen oder Blogs verwandeln. Du glaubst mir nicht? Schauen Sie, hier ist was Sie erstellen können:

XNUMX Anpassungen

#1 Ein Menü für soziale Links erstellen

Nun, dieser erste Teil ist mehr als nur ein Hack. Aber es ist eine Personalisierung, die man nur bei Twenty Seventeen machen kann.

Twenty Seventeen hat ein attraktives Menü für soziale Links in der Fußzeile.

Soziale Verbindungen siebenundzwanzig

Das Problem ist, dass einige Benutzer gemeldet haben, dass sie Schwierigkeiten haben, ihre Links zu sozialen Netzwerken zu diesem Menü hinzuzufügen. Glücklicherweise ist es sehr einfach, wenn Sie erst einmal wissen, wie es geht.

Alles, was Sie tun müssen, ist, ein Menü mit Links zu Ihren sozialen Netzwerken zu erstellen und es dem Speicherort des Menüs für soziale Links zuzuweisen.

  • Lassen Sie uns den Prozess durchgehen.
  • Öffnen Sie zunächst den „Customizer“ (Darstellung> Anpassen).
  • Wählen Sie die Option "Menüs" und dann "Menü" Soziale Links ".
  • Benennen Sie Ihr neues Menü.
  • Fügen Sie einen Link zu jedem der verfügbaren sozialen Netzwerke hinzu.
  • Aktivieren Sie das Kontrollkästchen neben " Soziale Links ".

Wenn Sie fertig sind, sollte Ihr Menü folgendermaßen aussehen:

XNUMX Personalisierungsseite

Der letzte Schritt besteht darin, im Customizer auf die Schaltfläche „Speichern und veröffentlichen“ zu klicken, um das neue Menü zu speichern. Ihre Links zu sozialen Netzwerken werden jetzt im Menü unten auf der Seite angezeigt.

# 2 Ändern Sie die Signatur "Stolz von WordPress unterstützt"

WordPress-Situation

Es gibt zwei Gründe, warum Sie möglicherweise den Text in der Fußzeile ändern möchten, in dem steht, dass Ihre Website "stolz von WordPress unterstützt" wird. ""

Vielleicht möchten Sie es erweitern und zusätzlichen Text hinzufügen: „Stolz unterstützt von WordPress, entworfen von WebPress Designs und gehostet von LAMPress.“ Hosting gleichgesinnte Organisationen bekannt zu machen. »

Vielleicht möchten Sie Ihre Signatur komplett ändern, um sie persönlicher zu gestalten.

Als Erstes müssen Sie ein untergeordnetes Thema erstellen und aktivieren (tipp: wenn du dein leben vereinfachen willst, lade die Kind Thema dafür vorgefasst).

Nachdem Sie Ihr untergeordnetes Thema erstellt und aktiviert haben, kopieren Sie die Datei "footer.php". Öffnen Sie dann diese "footer.php" -Datei und suchen Sie diesen Code: get_template_part ('template-parts / footer / site', 'info');

Jetzt haben Sie zwei Möglichkeiten. Sie können diese Zeile einfach auskommentieren, indem Sie "//" direkt vor dem Code hinzufügen, oder Sie können sie durch Ihren eigenen benutzerdefinierten Fußzeilentext ersetzen. Hier ist der Code, der hinzugefügt werden muss, um den Fußzeilentext zu erstellen.

Benutzerdefinierte Fußzeile

#3 Erweitertes Navigationsmenü

Zusätzlich zum Erstellen eines funktionalen Navigationsmenüs auf einer Navigationsseite korrigieren wir den Hover-Effekt des Navigationsmenüs und fügen einen reibungslosen Bildlauf hinzu, um das Gesamterlebnis zu verbessern.

Zuerst fügen wir den folgenden Code zu Ihrem (untergeordneten) Thema hinzu:

/ * Einseitiger Navigationscode * / jQuery (Dokument) .ready (function () {/ * Fügt jedem Abschnitt der Titelseite Auffüllungen und IDs hinzu * / jQuery ("h2.entry-title") .each (function () {var panelId = jQuery (this) .html (). toLowerCase (). replace (/ s + / g, "-"); jQuery (this) .wrapInner (function () {return " ";})}) / * Markierung des Navigationslinks entfernen * / jQuery ('# top-menu li'). RemoveClass ('aktuelles Menüelement current_page_item'); / * Hervorhebung beim Klicken hinzufügen * / jQuery ('# top -menu li a '). on (' click ', function (event) {jQuery (this) .parent (). parent (). find (' li '). removeClass (' current-menu-item '); jQuery (this) .parent (). addClass ('current-menu-item');}); / * Aktuelle URL überprüfen und nav für aktuelle Seite markieren * / jQuery ('# top-menu li a'). each (function () {var pageUrl = jQuery (Speicherort) .attr ('href'); var navUrl = jQuery (this) .attr ('href'); if (navUrl == pageUrl) {jQuery (this) .parent (). addClass ('aktueller-Menüpunkt');}})})

Sie können diese hinzufügen Code auf einer JavaScript-Datei von einem untergeordneten Thema geladen (was wird empfohlen) oder verwenden Sie ein Plugin, mit dem Sie Ihrer Site JavaScript hinzufügen können. Stellen Sie sicher, dass Sie den Code laden, nachdem jQuery bereits geladen wurde.

Schauen Sie sich die Kommentare im Code an, um ein vollständiges Bild davon zu erhalten, was los ist.

Darüber hinaus können wir den Übergang zu den einzelnen Abschnitten viel reibungsloser gestalten, indem wir ein Plugin installieren und aktivieren kostenlos: jQuery Glatte Scroll.

Natürlich müssen Sie Ihr Navigationsmenü noch erstellen, indem Sie jedem Abschnitt einen benutzerdefinierten Link mit dem Namen der in diesem Abschnitt angezeigten Seite hinzufügen.

Um beispielsweise auf den Abschnitt "Info" zu verlinken, müssen Sie einen benutzerdefinierten Link erstellen und " #about Als Anker des Links. Weitere Informationen finden Sie unter Anpassen des Themas " Zwanzig Siebzehn Wordpress ".

Mit ein wenig Aufwand erreichen Sie ein überzeugendes Ergebnis:

XNUMX Navigationsergebnisse

Dies ist sicherlich nicht alles, was wir mit Twenty Seventeen tun können. Wir werden später weitere Tutorials zu Twenty Seventeen anbieten.