• Zuhause
  • Artikel
  • AMP Wordpress-Grundlagen # 1: Einrichten von Wordpress für ein benutzerdefiniertes Design
Veröffentlicht am 20-03-2019

AMP Wordpress-Grundlagen # 1: Einrichten von Wordpress für ein benutzerdefiniertes Design

Ursprüngliches Foto von Goh Rhy Yan auf Unsplash

Repository

https://github.com/ampirecity/AMPWPBasics1

Was werde ich lernen?

AMP-Plugin für Wordpress einrichten; Dateien für ein benutzerdefiniertes AMP-Wordpress-Design einrichten.

Bedarf:

• Eine neue WordPress-Version auf Ihrem bevorzugten Server • AMP für Wordpress-Plugin • Grundlegende Kenntnisse in CSS und HTML • Grundlegende PHP-Kenntnisse.

Schwierigkeit:

Einfach

Nützliche Links:

Neue Wordpress-Version: https://wordpress.org/download/AMP Plugin: https://wordpress.org/plugins/amp/

Einrichten von AMP für das Wordpress-Plugin

Wordpress und das Team hinter dem AMP-Plugin für die Plattform arbeiten ständig an Verbesserungen. Wenn Sie eines der offiziellen Themen verwenden, können Sie hier einfach nicht mehr lesen. Mit dem AMP-Plugin 0.7+ werden die Seiten automatisch in AMP konvertiert.

Es könnte zwar für private Projekte oder für kleine Unternehmen geeignet sein, aber es ist möglich, dass Websites mit fortgeschrittenem Fortschritt AMP in vollem Umfang nutzen möchten. Während für das High-End-Projekt überhaupt kein AMP-Plugin erforderlich ist, ist es in den meisten Fällen besser, es an Bord zu starten. Die von mir verwendeten Standardeinstellungen sind auf "Vorlagenmodus" eingestellt: Nativ mit Baumschütteln und alle abgefragten Vorlagen werden geprüft.

Einrichten eines benutzerdefinierten AMP-Designs

Für jedes Thema in Wordpress sind nur style.css und index.php erforderlich. Ich beginne jedoch mit all diesen Dateien: style.css - Legt das theme.index.php - Die Hauptvorlagendatei.functions.php - fest Der Ort, an dem Sie die Funktionsweise Ihres theme.header.php anpassen können - Universeller Code vor dem content.footer.php - Universeller Code nach dem content.screenshot.png - 880x660px-Thumbnail für das Design.

Für Tab-Junkies wie ich empfehle ich, ein Favicon hinzuzufügen, um den Tab der Website zu erkennen, an der ich gerade arbeite. Sie können dies tun, indem Sie Aussehen> Anpassen> Site-Identität wählen.

Plugins mit AMP für Wordpress verwenden

Bei AMP (Accelerated Mobile Pages) geht es um die Einfachheit und die Ladegeschwindigkeit. Vermeiden Sie daher die Installation unnötiger Plugins. Eines ist sicher, da AMP-Plugin Sie darüber informiert, dass AMP am besten mit aktiviertem Caching funktioniert. Es gibt viele Cache-Plugins, die Sie auswählen können. Ich schlage vor, dass Sie das tun, nachdem Sie das Thema entwickelt haben.

Beispiel für den gesamten W3-Cache

Style.css richtig einrichten

Um die grundlegenden Informationen Ihres Themes einzurichten, müssen Sie den Header dieser Datei korrekt festlegen. Obwohl nicht alle diese Felder erforderlich sind, ist dies die grundlegende Vorlage zum Einrichten eines Wordpress-Designs.

/ *
Themenname: Selbsterklärend.
Theme URI: Selbsterklärend.
Autor: Nennen Sie sich.
Author URI: Bewerben Sie sich.
Beschreibung: Was auch immer dein Herz will, es zu sein.
Version: Die Version Ihrer Version.
Lizenz: Zusätzliche Lizenzierung
Lizenz-URI: Selbsterklärend
Tags: Selbsterklärend.
Textdomain: erforderlich für mehrsprachige Websites
* /

Einrichten von functions.php für das Design

Für Starter kann die Datei functions.php leer sein. Damit style.css jedoch ordnungsgemäß funktioniert, müssen Sie es auch als Stylesheet-Datei laden. Als persönliche Entscheidung füge ich die Schriftarten für die Website hinzu und ermögliche die Verwendung von Bildern. Zu Beginn eines Projekts ist meine functions.php wie folgt:

// CSS laden
Funktion enqueue_style () {
    wp_enqueue_style ('style', get_stylesheet_uri ());
}
add_action ('wp_enqueue_scripts', 'enqueue_style');
// Schriftarten laden
Funktion load_fonts () {
     wp_enqueue_style ('Exo', 'https://fonts.googleapis.com/css?family=Exo:500,500i,700,700i&subset=latin-ext');
}
add_action ('wp_enqueue_scripts', 'load_fonts');
// Aktiviere die vorgestellten Bilder
add_theme_support ('post-thumbnails');

Grundlegende Vorlagendateien für das Design einrichten

Der Kernpunkt der Vorlagendateien header.php und footer.php besteht darin, den allgemeinen Code über und unter dem Inhalt gleich zu machen. Sie können den Inhalt dieser Dateien zu jeder Vorlagendatei auf dieselbe Weise hinzufügen, die ich zu meiner index.php hinzugefügt habe:

index.php


Das ist ein kleiner Schritt für den Menschen

Minimaler Inhalt für Kopf- und Fußzeile

header.php




  
  
  
   <? php bloginfo ('name')?> </ title>
  <? php wp_head (); ?>
</ head>
<body <? php body_class (); ?></pre><h3>footer.php</h3><pre><? php wp_footer ()?>
</ body>
</ html></pre><h3>Der Fortschritt</h3><p>Nun können Sie mit der Entwicklung Ihres eigenen AMP Wordpress-Designs beginnen.</p><p>Ursprünglich am 3/20 / 2019Versions veröffentlicht: Wordpress 5.1AMP 1.02</p></div><div><h4 class="jss148 jss163 jss2">Siehe auch</h4><a class="jss148 jss178 jss183 jss184 jss186 jss3" href="/post/what-do-software-developers-look-for-in-candidates-when-hiring-future-colleagues/" title="Wonach suchen Softwareentwickler bei der Einstellung zukünftiger Kollegen?">Wonach suchen Softwareentwickler bei der Einstellung zukünftiger Kollegen?</a><a class="jss148 jss178 jss183 jss184 jss186 jss3" href="/post/many-nodes-one-distributed-system/" title="Viele Knoten, ein verteiltes System">Viele Knoten, ein verteiltes System</a><a class="jss148 jss178 jss183 jss184 jss186 jss3" href="/post/the-future-of-trading-with-volentix/" title="Die Zukunft des Handels mit Volentix">Die Zukunft des Handels mit Volentix</a><a class="jss148 jss178 jss183 jss184 jss186 jss3" href="/post/will-digitalbits-be-better-than-the-current-competitor/" title="Werden Digitalbits besser als der derzeitige Konkurrent">Werden Digitalbits besser als der derzeitige Konkurrent</a><a class="jss148 jss178 jss183 jss184 jss186 jss3" href="/post/what-to-consider-when-choosing-a-laptop-for-your-business/" title="Was ist bei der Auswahl eines Laptops für Ihr Unternehmen zu beachten?">Was ist bei der Auswahl eines Laptops für Ihr Unternehmen zu beachten?</a><a class="jss148 jss178 jss183 jss184 jss186 jss3" href="/post/details-on-join-hpool/" title="Details zum Join Hpool">Details zum Join Hpool</a></div></main><div class="jss7"></div></div><footer style="height:50px" class="jss192">CherishAWeb.com © <!-- -->2019</footer></div></div></body></html>