Wenn Sie eine Website mit einigen Seiten der obersten Ebene erstellen, auf die Sie die Besucher aufmerksam machen und zum Besuch anregen möchten, ist es hilfreich, diese in der Kopfzeile Ihrer Website hervorzuheben.
Natürlich können Sie Ihrem Navigationsmenü Top-Level-Seiten hinzufügen, aber in diesem Tutorial zeige ich Ihnen, wie Sie mit Hilfe der Seiten ein paar zusätzliche Links zu diesen Seiten hinzufügen get_pages ()
Funktion.
Hinweis: Sie müssen diesen Code nicht im Header Ihrer Site verwenden. Wenn es für Sie besser funktioniert, können Sie es immer in Ihre Sidebar oder Fußzeile einfügen, indem Sie die sidebar.php
oder footer.php
Dateien statt header.php
.
In diesem Tutorial werde ich ein untergeordnetes Thema des zwanzig sechzehn Themas erstellen und dann ein Duplikat von zwanzig Sechzehnjährigen erstellen header.php
Datei in meinem Kindermotiv, das ich bearbeiten werde. Sie sollten niemals die Dateien eines Designs bearbeiten, das Sie heruntergeladen haben. Andernfalls verlieren Sie Ihre Arbeit, wenn Sie das Design aktualisieren. Alternativ können Sie diesen Code auch hinzufügen, wenn Sie mit Ihrem eigenen Thema arbeiten.
Um diesem Tutorial folgen zu können, benötigen Sie Folgendes:
Also lasst uns anfangen.
Beginnen Sie, indem Sie ein Kind von 26 Jahren erstellen (es sei denn, Sie arbeiten mit Ihrem eigenen Thema)..
Erstellen Sie einen neuen Ordner in Ihrem Ordner wp-inhalt / themen /
Ordner und geben Sie einen logischen Namen: Ich rufe meinen an tutsplus-page-link-buttons
.
Erstellen Sie in diesem Ordner eine neue Datei und benennen Sie sie style.css
. Öffnen Sie nun diese Datei und fügen Sie Folgendes hinzu:
/ * Name des Themas: Tuts + Page-Link-Schaltflächen Theme-URI: http: //.tutsplus.com/tutorials/ using-get_pages-to-create-link-tasten-zu-your-sites-top-level-pages-creating-the -code - cms-24967 Beschreibung: Thema zum Unterstützen von Tuts + Tutorial zum Hinzufügen von Schaltflächen zu Seiten der obersten Ebene in der Kopfzeile Ihrer Site (Teil 1). Kindermotiv für das Thema Sechzehnzehn. Autor: Rachel McCollin Autor URI: http://rachelmccollin.co.uk/ Vorlage: twentysixteen Version: 1.0 * / @import url ("… /twentysixteen/style.css");
Bearbeiten Sie den obigen Code, um anzuzeigen, dass dies Ihr Thema ist und nicht meines.
Speichern Sie nun diese Datei und aktivieren Sie Ihr neues Design auf Ihrer Site.
Da wir das bearbeiten werden header.php
Datei, wir müssen ein Duplikat dieser Datei aus dem sechsundzwanzig Design des untergeordneten Designs erstellen. Finden Sie das header.php
Datei in sechsundzwanzig und kopieren (nicht verschieben!) in den Ordner Ihres neuen Themas.
Jetzt hat Ihr Design zwei Dateien: style.css
und header.php
. WordPress verwendet automatisch die header.php
Datei von Ihrem Kindthema und nicht von der von sechzehnzehn, da Kinderthemen auf diese Weise funktionieren.
Öffne das Neue header.php
Datei, damit Sie mit der Bearbeitung beginnen können.
Ich füge meine Links zu den Top-Level-Seiten im hinzu Header
Element unmittelbar vor dem Schließen Etikett. Suchen Sie also diese Zeile in Ihrem Design und fügen Sie über dem Abschluss neuen Code hinzu
Etikett.
Erstellen Sie zuerst die Argumente für get_pages ()
indem Sie Folgendes eingeben:
$ args = array ('parent' => 0, 'sort_order' => ASC, 'sort_column' => 'menu_order');
Das stellt das sicher get_pages ()
ruft nur die Seiten ohne übergeordnetes Element ab ('parent' => 0
) und sortiert die Seiten nach der Reihenfolge, die Sie in den Seitenbearbeitungsfenstern angeben. Wenn Sie die Sortierreihenfolge ändern möchten, verwenden Sie eines oder mehrere der Argumente, die Sie auf der Codex-Seite finden können get_pages ()
.
Fügen Sie nun unter Ihren Argumenten Folgendes hinzu:
$ pages = get_pages ($ args);
Das wird das ausführen get_pages ()
Funktion mit den angegebenen Argumenten.
Bevor Sie weiteren Code ausgeben, möchten Sie zunächst prüfen, ob sich einige Seiten auf der obersten Ebene befinden get_pages ()
hat etwas zurückgegeben.
Unter dem get_pages ()
Funktion, fügen Sie folgendes hinzu:
if ($ seiten)
Sie fügen dann den Code in die geschweiften Klammern ein.
Nun zum Spaß. Geben Sie in die soeben hinzugefügten Klammern Folgendes ein:
Dies öffnet eine ul
Element, dann innerhalb dieses Schleifen durch jede Seite, die von aufgerufen wird get_pages ()
und gibt seinen Titel in einem Link dazu aus.
Speichern Sie jetzt Ihre Datei.
Ich habe einige Dummy-Seiten zu meiner Site hinzugefügt. Wie Sie dem Screenshot entnehmen können, gibt es drei Top-Level-Seiten und eine Second-Level-Seite, die in meinem Header nicht angezeigt werden sollten:
Und so sehen die Links auf meiner Site aus:
Wie Sie sehen, werden nur die Seiten der obersten Ebene angezeigt. Im Moment sehen sie nicht besonders gut aus: Sie erscheinen in einer einfachen Liste mit Aufzählungszeichen. Im nächsten Tutorial zeige ich Ihnen, wie Sie sie so gestalten, dass sie wie Knöpfe aussehen.
Das Hinzufügen von Links zu Seiten der obersten Ebene in der Kopfzeile Ihrer Site kann eine nützliche Methode sein, um den Datenverkehr auf diese Seiten zu lenken. Anstatt diese Links fest zu kodieren, sollten Sie WordPress verwenden get_pages ()
Funktion zur Automatisierung des Prozesses. Hier haben Sie gelernt, wie man das macht, und im nächsten Teil zeige ich Ihnen, wie Sie Styling hinzufügen.