• Zuhause
  • Artikel
  • Lernen von AMP Wordpress # 2: Einrichten der Menü-Sidebar und von Breadcrumbs
Veröffentlicht am 01-04-2019

Lernen von AMP Wordpress # 2: Einrichten der Menü-Sidebar und von Breadcrumbs

Ursprüngliches Foto von Goh Rhy Yan auf Unsplash

Repository

https://github.com/ampirecity/AMPWPBasics2

Was werde ich lernen?

Zurück zum Startnavigationslogo im Header über AMP-Img einrichten, AMP-Menü über AMP-Sidebar einrichten; Breadcrumbs zu einem benutzerdefinierten AMP-Wordpress-Design hinzufügen.

Bedarf:

• Eine vorbereitete WordPress-Version für die AMP-Entwicklung auf Ihrem bevorzugten Server. • AMP für Wordpress-Plugin.

Schwierigkeit:

Anfänger

Nützliche Links:

Vorbereitete Wordpress-AMP-Version: https: //github.com/ampirecity/AMPWPBasics1Part 1: Einrichten von Wordpress für ein benutzerdefiniertes AMP-Thema: https: //medium.com/@ctdots/amp-wordpress-basics-1-setting-up- wordpress-for-a-custom-theme-992ad8261fd6? source = friends_link & sk = b94f7acc354903361a1e1d288d2bd4a5AMProject: https://www.ampproject.org/docs/reference/components/amp-sidebarAMPbyExample: https://ampbyexample.com/component Seitenleiste /

Pro-Tipp: Starten Sie die Entwicklung einer Webseite mit Navigation

Es gibt viele Möglichkeiten, eine Website zu entwickeln, und einige sind einfacher als andere. Die meisten Projekte in meiner beruflichen Karriere waren eher Design als Implementierung, daher habe ich mit vielen verschiedenen Entwicklern zusammengearbeitet und viele unterschiedliche Ansätze gesehen. Der Hauptfehler, den ich gesehen habe, ist die Entwicklung der Seite Seite für Seite, was zu einer Menge Chaos in CSS führt.

Was mir lieber ist, ist LOW to HIGH-Treue-Entwicklung oder, genauer gesagt, von abstrakt / universal bis hin zu bestimmten Teilen der Website. Für eine solche Entwicklungstechnik hatte sich das Einrichten der Navigation als sehr praktisch erwiesen. In diesem Lernprogramm erfahren Sie, wie Sie dies implementieren. Beginnen wir mit dem einfachsten.

Einrichten des Heimnavigationslogos im Header

Dieser Teil ist besonders einfach. Umgehen Sie das Logo der Website mit einem HTML-Tag , das direkt auf Ihre Homepage-URL in Ihrem Header verweist. Der PHP-Code zum Generieren der Heimat-URL lautet:

= "

Vergessen Sie nicht, dass auf der AMP-Website ein amp-img-Tag anstatt imgone erforderlich ist. Alles zusammen, eine Home-Taste in einem Logo kann mit einem einfachen Code wie dem folgenden erreicht werden:


 

AMP-Menü über AMP-Sidebar einrichten

Um innerhalb der Website navigieren zu können, müssen Sie über Seiten verfügen, auf denen Sie navigieren können. Dazu können Sie im Wordpress-Admin-Panel beliebig viele Seiten hinzufügen. Das Erstellen von Seiten für AMP erfordert keine besondere Behandlung.

Bevor Sie ein Menü in Wordpress für Ihr benutzerdefiniertes AMP-Design einrichten, müssen Sie es zuerst registrieren. In meinem Fall möchte ich zwei verschiedene Standorte für Menüs registrieren: AMP Sidebar Menü für die primäre Navigation; AMP Fußzeilenmenü für die zukünftige Entwicklung. Es kann auf Ihren Funktionen.php mit diesen wenigen Zeilen erreicht werden:

// Wordpress-Menüs registrieren
Funktion register_my_menus () {
  register_nav_menus (
    Array (
      'amp-footer-menu' => __ ('AMP Footer Menu'),
      'amp-sidebar-menu' => __ ('AMP Sidebar Menu')
    )
  );
}
add_action ('init', 'register_my_menus');

Danach wird die Option "Menüs" auf der Registerkarte "Darstellung" im Wordpress-Admin-Panel angezeigt. Dort können Sie ein Menü erstellen und es den Positionen zuordnen, die wir gerade in unserer functions.php erstellt haben.

Hinzufügen eines Wordpress-Menüs zu einem benutzerdefinierten AMP-Design

Nachdem wir nun unser Hauptmenü erstellt und dem AMP Sidebar Menu hinzugefügt haben, können wir es zu unserem benutzerdefinierten AMP-Design hinzufügen.


     'amp-sidebar-menu', 'container_class' => 'sidebar')) ?>

Wie Sie sehen, bedeutet layout = ”nodisplay”, dass die Seitenleiste standardmäßig ausgeblendet ist. Sie benötigen daher eine Schaltfläche, um sie anzuzeigen. Dies kann durch Hinzufügen von = ’tap: sidebar.toggle’ zu jedem Element erreicht werden, um die Seitenleiste zu öffnen oder zu schließen. Wenn ein Element nur zum Öffnen oder Schließen der Seitenleiste erforderlich ist, fügen Sie statt .toggle.So weit den Wert .open oder .close hinzu. Soweit, fügen Sie den gesamten Code zusammen mit der Seitenleiste und den Schaltflächen zum Öffnen / Schließen zusammen mit Wordpress hinzu Menü und Back-to-Home-Logo sollten in etwa wie folgt aussehen:


     'amp-sidebar-menu', 'container_class' => 'sidebar')) ?>

Aktivieren der AMP-Sidebar für Ihr benutzerdefiniertes Design

Jetzt, da wir unseren Code haben, müssen Sie nur noch die AMP-Sidebar aktivieren. AMP for Wordpress-Plugin kann nur dann installiert werden, wenn Sie keine erforderlichen AMP-Skripts hinzufügen müssen, wie in diesem Fall - amp-sidebar-0.1.js. Das Plugin erledigt es für Sie, sobald es die Seitenleiste in Ihrem Code erkennt. Ohne das Plugin kann dies durch Hinzufügen dieses Codes in den Header erreicht werden: