Wie möchten Sie den Links Manager von WordPress verwenden? Sie werden feststellen, dass es sehr nützlich ist, wenn es aus den richtigen Gründen verwendet wird.
Ich möchte Ihnen einen Weg zeigen, um Links zu Ihrer WordPress-Website hinzuzufügen, die nicht nur den Links Manager verwenden, sondern mit einem schnellen und einfachen Workflow auch mehr Inhalt für Ihre Website erstellen.
Lassen Sie mich mit einem kurzen Überblick über Links Manager for WordPress beginnen. Mit dem Links Manager können Sie eine Reihe externer Links speichern, die auch als Blogroll bezeichnet werden. Diese Links können in Kategorien eingefügt, importiert, exportiert, hinzugefügt, gelöscht und bearbeitet werden. Die Linkkategorien können auch hinzugefügt, gelöscht und bearbeitet werden. Sie finden den Links-Manager im Linkbereich des WordPress-Administrationsfensters.
Seit Version 3.5 sind der Links Manager und die Blogroll für Neuinstallationen und alle vorhandenen WordPress-Installationen ohne Links ausgeblendet. Wenn Sie ein Upgrade von einer früheren Version von WordPress mit aktiven Links durchführen, funktioniert der Links-Manager weiterhin normal.
Wenn Sie das Verknüpfungenbedienfeld in Ihrer Installation wiederherstellen möchten, können Sie das Links Manager-Plugin herunterladen und installieren.
Eine nützliche Möglichkeit, den Links Manager von WordPress zu verwenden, besteht darin, eine täglich zusammengestellte Liste mit externen Links anzuzeigen, z. B. Lieblingswebseiten, Partnerunternehmen, Lieder, lustige Videos usw..
Die Optionen sind unbegrenzt, aber bedenken Sie die Strategie hinter Ihrer Website. So werde ich zum Beispiel eine Liste von Links meiner Lieblingssongs zusammenstellen, die auf den Song in iTunes verweisen, wo sie den Song hören und / oder herunterladen können.
Bevor wir mit der Entwicklung der Link-Seitenvorlage beginnen, müssen wir die Link-Kategorien bestimmen. Dies kann auf verschiedene Weise bestimmt werden. Einige Beispiele sind nach Genre - wie Reggae, Rap, Country, Metal - nach 5-Sterne-Bewertung oder nach alphabetischer Reihenfolge. Da ich eine Liste mit Lieblingssongs zusammenstelle, ordne ich die Link-Kategorien in alphabetischer Reihenfolge an.
Beginnen Sie, indem Sie sich in WordPress anmelden, über Links zeigen und auf "Kategorien verknüpfen" klicken. Um eine Linkkategorie richtig hinzuzufügen, stellen Sie sicher, dass Sie einen Namen und einen Slug haben. Die Beschreibung ist nicht notwendig. Der Name wird auf Ihrer Site angezeigt. Der Slug ist die URL-freundliche Version des Namens. Es besteht normalerweise aus Kleinbuchstaben und enthält nur Buchstaben, Zahlen und Bindestriche. Wenn beim Erstellen einer Linkkategorie kein Slug eingegeben wird, erstellt Links Manager automatisch einen Slug basierend auf dem Namen.
Da wir die Songs in alphabetischer Reihenfolge organisieren, machen Sie den Namen der ersten Linkkategorie "#", der zweiten Linkkategorie "A", der dritten Kategorie "B" usw., bis Sie "Z" erreichen. Machen Sie keine zusätzlichen Link-Kategorien, sonst erscheinen sie in Ihrer Navigation in Ihrer Link-Seitenvorlage. Löschen Sie daher alle vorhandenen Linkkategorien.
Nachdem alle Link-Kategorien erstellt wurden, können wir mit dem Erstellen der Link-Seitenvorlage beginnen. Beginnen wir also mit dem Kopieren und Einfügen einer bereits erstellten Seitenvorlage in Ihr WordPress-Design links-page-template.php, und öffnen Sie es in Ihrem bevorzugten Texteditor.
Der Grund für das Kopieren und Einfügen einer bereits erstellten Seitenvorlage besteht darin, dass die Seitenvorlage für Links das gleiche Design wie der Rest Ihrer Site haben soll.
Wenn Sie Probleme haben, eine bereits erstellte Seitenvorlage in Ihrem WordPress-Design zu finden, suchen Sie nach einer Reihe von Dateien, deren Name konsistent ist page-contact.php, page-portfolio.php, page-full-width.php, usw.
Es ist üblich, dass WordPress-Designs mehrere Seitenvorlagen haben, die einheitlich benannt sind, damit sie organisiert bleiben. Sie können auch eine Datei öffnen, um zu sehen, ob die Datei mit dem Bezeichner der Seitenvorlage beginnt, wie im folgenden Beispiel:
Zuerst möchten Sie den Namen der Vorlage (siehe Code oben) in "Links" ändern. Der obige Code informiert WordPress darüber, dass es sich um eine Vorlage handelt. Sie wird im Dropdown-Menü über den Seiteneditor unter dem Namen der Vorlage angezeigt, die Sie der Vorlage geben, in diesem Fall "Links"..
Suchen Sie jetzt nach dem Code der Inhalt()
. Dieser Code ruft den Seiteninhalt ab, den Inhalt, der dem WYSIWYG-Editor für die Seite hinzugefügt wird.
Dies ist ein großartiger Ort zum Platzieren Ihres scrollbaren Menüs und ein großartiger Ort zum Anzeigen Ihrer Links, Diese wird erst angezeigt, wenn Sie einer der neu erstellten Link-Kategorien einen neuen Link hinzufügen. Wir werden später darauf zurückkommen. Unten der Inhalt()
Code in Ihrer Vorlage hinzufügen:
'. $ cat-> cat_name. ''; ?>
Der Code $ cats = get_categories ("taxonomy = link_category & hierarchical = 0")
gibt alle erstellten Link-Kategorien zurück und zeigt den Kategorienamen mithilfe des Werts an '. $ cat-> cat_name. '
. Wenn Sie mehr erfahren möchten, gehen Sie zu get_categories
im WordPress-Codex.
Das id = "scrollablemenu"
ist mit etwas JavaScript verbunden (worüber ich als nächstes sprechen werde), damit das Menü richtig funktioniert und die class = "scrollablemenubutton"
ist ein CSS, das Ihren Buttons einen sehr grundlegenden Stil verleiht. Ich möchte Sie dazu ermutigen, kreativer mit CSS zu sein, aber der grundlegende Stil wird vorerst funktionieren.
Um die grundlegenden CSS-Dateien anzuzeigen, laden Sie die Dateien für dieses Lernprogramm herunter. In Kürze werde ich Ihnen zeigen, wie Sie das Stylesheet (und JavaScript) zu Ihrer Seitenvorlage hinzufügen, damit es nur geladen wird, wenn Ihre Seitenvorlage mit geladen wird wp_enqueue_ *
.
Für dein id = "scrollablemenu"
Sie möchten die Eigenschaften hinzufügen:
Position: feststehend; oben: 10px; / * Vergewissere dich, dass die Top-Eigenschaft den gleichen Wert wie die Javascript-Datei hat. * / Padding: 20px; Breite: 90px; Rand links: 500px;
Das Position: feststehend;
und oben: 10px;
behält das Menü an dem von Ihnen ausgewählten Ort fest. Das oben: 10px;
Der Stil kann und muss geändert werden, um die gewünschten Ergebnisse zu erhalten.
Wenn du setzen würdest oben: 100px;
es würde Ihrem Menü eine Topfüllung geben 100px
von ganz oben auf Ihrer Website, wenn Sie es gegeben haben 0px
Ihr Menü sollte ganz oben auf Ihrer Website angezeigt werden. Denken Sie immer daran, wenn Sie den obersten Stil ändern. Außerdem müssen Sie den JavaScript-Code entsprechend anpassen.
Machen Sie sich keine Sorgen - wir werden in wenigen Schritten zum JavaScript-Code gelangen.
Ich wickelte das Menü in ein div
mit einer Rand links
Stil, um das scrollbare Menü auf der rechten Seite zu positionieren. Dies liegt daran, dass sich das Menü über dem Inhalt befindet. Wenn das Menü nicht nach rechts gedrückt wurde, gehen die Links hinter dem scrollbaren Menü verloren. Das Rand links: 500px;
muss höchstwahrscheinlich an die Breite Ihrer Website angepasst werden.
Ich habe das scrollbare Menü auch als vertikales Menü gemacht, anstatt horizontal, indem ich eine Breite von gemacht habe 90px
. Sie können das Menü leicht in ein horizontales Menü umwandeln, indem Sie das Symbol löschen Breite: 90px; Rand links: 500px;
, Aber wissen Sie, dass Ihre Inhalte möglicherweise hinter dem Menü verloren gehen.
Sprechen wir über die JavaScript-Datei, durch die das scrollbare Menü funktioniert. Laden Sie die Dateien für dieses Lernprogramm herunter und öffnen Sie die aufgerufene JavaScript-Datei scrollablemenu.js.
$ (window) .scroll (function () $ ("# scrollablemenu"). css ("top", Math.max (0, 10 - $ (this) .scrollTop ())););
Die zwei wichtigen Teile des Codes sind #scrollablemenu
und 10
.
#scrollablemenu
muss zu Ihrem passen id = "scrollablemenu"
oder es wird nicht funktionieren.
Früher haben wir darüber gesprochen, wie man das ändert oben: 10px;
Stil müssen Sie es in der JavaScript-Datei entsprechend ändern. Sie können dies tun, indem Sie einfach das ändern 10
auf den Betrag, den Sie Ihren Top-Style geändert haben.
Nachdem Sie nun wissen, wie der JavaScript-Code funktioniert, fügen Sie ihn und das Stylesheet zur Seitenvorlage hinzu, damit das Menü einen Bildlauf durchführt und die Schaltflächen einen Stil haben.
Eine einfache und organisierte Methode ist die Verwendung wp_enqueue_script
und wp_enqueue_style
; es macht es so, dass Sie CSS nicht zu einem anderen Stylesheet oder JavaScript hinzufügen müssen header.php Datei. Die Dateien werden nur geladen, wenn Ihre Seitenvorlage geladen ist, wodurch Ihre Website schneller läuft.
Fügen wir zunächst die JavaScript-Datei hinzu. Nehmen Sie den folgenden Code und fügen Sie ihn am Anfang Ihrer Seitenvorlage hinzu (unter dem Vorlagennamen)..
Jetzt FTP die scrollablemenu.js Datei auf Ihre Website-Hosting. Stellen Sie sicher, dass Sie das ändern /js/scrollablemenu.js Speicherort in dem Ordner, in den Sie die JavaScript-Datei hochgeladen haben. Fügen wir nun die Stylesheet-Datei direkt unter dem gerade hinzugefügten Code hinzu.
FTP das scrollablemenu.css Datei auf Ihre Website-Hosting. Stellen Sie sicher, dass Sie das ändern /css/scrollablemenu.css Speicherort in dem Ordner, in den Sie die Stylesheet-Datei hochgeladen haben. Jetzt werden die JavaScript- und Stylesheet-Dateien geladen, wenn die Link-Seitenvorlage geladen wird.
Der Hauptunterschied zwischen den beiden Codes sind die Funktionen wp_enqueue_script
und wp_enqueue_style
. Wenn Sie mehr darüber erfahren möchten wp_enqueue_ *
Schauen Sie sich das Tutorial an, wie Sie JavaScript und CSS in Ihre WordPress-Themes und Plugins integrieren.
Nun fügen wir den wichtigsten Teil zu Ihrer Link-Seitenvorlage hinzu… die Link-Kategorien.
Fügen Sie diesen Code unter dem scrollbaren Menücode hinzu.
'. $ cat-> cat_name. '
'; Echo ''; $ books = get_bookmarks ("category = $ cat-> cat_ID"); foreach ($ Bücher als $ Buch) Echo '
'; // Ende der Katzenschleife; ?>- '; echo 'link_url. ''> '. $ book-> link_name.' '; echo'
'; // Endet das Echo der Bücher zurück
Wieder verwenden wir $ cats = get_categories ("taxonomy = link_category & hierarchical = 0")
, Der Code gibt alle erstellten Link-Kategorien zurück und zeigt den Kategorienamen mithilfe des Werts an '. $ cat-> cat_name. '
.
Der wichtige Teil des Codes ist wie '. $ cat-> cat_name. '
gibt den Kategorienamen als Ankernamen zurück (a name = "'. $ cat-> cat_name.'")
. Dadurch funktioniert das scrollbare Menü. Wenn ein Besucher auf das scrollbare Menü klickt, wird er mit dem richtigen Abschnitt Ihrer Seitenvorlage verknüpft.
Der Rest des Codes zeigt die Link-URL mithilfe des Werts an '. $ book-> link_url. '
und zeigt den Linknamen mit dem Wert an '. $ book-> link_name. '
. Dies wird alles mit der Funktion erreicht get_bookmarks ("category = $ cat-> cat_ID")
.
Sie können mehr lernen, indem Sie zu gehen get_bookmarks
im WordPress-Codex.
Jede Codezeile befindet sich in einem div
mit dem class = "linkcategories"
(was dem hinzugefügt wird scrollablemenu.css Datei) und jede Codezeile zeigt den Titel (Namen der Kategorie) mit a an h3
Bei diesem Tag wird der Titel auch als Ankername verwendet, und die in Links Manager erstellten Links werden eingebunden li
Tags, die mit der Link-URL verlinkt sind.
Sie wissen also, dass der Code in ein div
mit einer Breite von 490px
, Auf diese Weise geht kein Text hinter dem scrollbaren (vertikalen) Menü verloren. Das Breite: 490px;
muss höchstwahrscheinlich an die Breite Ihrer Website angepasst werden.
Wenn Sie die Breite ändern, denken Sie daran, das scrollbare Menü zu ändern div
Stil Rand links: 500px;
. Es ist nach rechts gestoßen 10px
umso mehr das scrollbare Menü div
überlappt die Linkkategorien nicht div
.
Ihre Link-Seitenvorlage ist fertig! Stellen Sie sicher, dass der FTP-Server links-page-template.php Datei in das WordPress-Design-Stammverzeichnis.
Nachdem nun die Link-Kategorien erstellt wurden und die Link-Seitenvorlage erstellt und hochgeladen wurde, fügen wir mithilfe der Vorlage eine neue Seite hinzu.
Klicken Sie in Ihrem WordPress-Adminbereich unter Seiten auf Neu hinzufügen. Fügen Sie zunächst Ihren Seitennamen hinzu, und wählen Sie dann die Vorlage "Links" im Dropdown-Menü unter "Seitenattribute" (rechts). Veröffentlichen Sie und gehen wir zum letzten Schritt über.
Wenn Sie die soeben erstellte Seite bereits in der Vorschau angezeigt haben und nur das vertikale scrollbare Menü angezeigt wurde, liegt dies daran, dass Sie den zuvor erstellten Link-Kategorien Links hinzufügen müssen. Wenn die Linkkategorie keine Links enthält, wird nichts angezeigt.
Fügen Sie also einen Link hinzu, indem Sie unter "Links" in Ihrem WordPress-Administrationsbereich auf "Neu hinzufügen" klicken. Geben Sie den Namen ein, z Daniel Lee Kendall - Im Moment verloren, Webadresse und wählen Sie die Kategorie aus. Klicken Sie auf der rechten Seite auf "Link hinzufügen". Nun können Sie Ihre Seite überprüfen, um die Ergebnisse anzuzeigen. Du bist alle fertig!
Wenn Sie nicht die Ergebnisse erzielen, die Sie erhofft haben, spielen Sie mit der jeweiligen Breite div
, und / oder ein besseres Stylesheet für das scrollbare Menü erstellen.