Springe zum Hauptinhalt

3 neues Thema Anpassungen Twenty Seventeen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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 Möglichkeiten, wie Sie dieses Thema an Ihren Blog anpassen können. Wir werden mit den Grundlagen beginnen und mit schwierigeren und effektiveren Anpassungen fortfahren.

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.

Sie müssen lediglich ein Menü mit Links zu Ihren sozialen Netzwerken erstellen und es dem Speicherort des Menüs für soziale Links zuweisen.

  • 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:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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 „Proudly powered by WordPress“

WordPress-Situation

Es gibt zwei Gründe, warum Sie den Text in der Fußzeile ändern möchten, der lautet, dass Ihre Website „Proudly powered by WordPress“ lautet.

Vielleicht möchten Sie Letzteres erweitern, indem Sie zusätzlichen Text hinzufügen: „Proudly powered by WordPress, Designed by WebPress Designs, and hosted by LAMPress Hosting.“

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 Umzug in jeden Abschnitt viel glatter durch die Installation und Aktivierung ein kostenloses Plugin machen: 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 ".

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

Dieser Artikel enthält Kommentare 5

  1. seltsam,

    Zeichen mit Akzent werden nicht akzeptiert! Ich habe stattdessen Fragezeichen mit einer Idee?

    PS: Danke für diese Tipps trotzdem!

  2. Guten Tag,

    Ich habe Ihre Anweisungen befolgt, aber meine Symbole erscheinen nur in der mobilen Version meines Blogs und nicht in der PC-Version. Wenn Sie mir helfen können, wäre das großartig!
    danke,
    Julie

    1. Guten Tag,
      Sie sollten prüfen, ob der Menüstil tatsächlich geladen wird. Sie können auch das Menü Code, um sicherzustellen, überprüfen, dass die Tags, die die Symbole tragen vorhanden sind.

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
15 Aktien
Aktie8
tweet1
Registrieren6