Modernisierung der WordPress -Themenentwicklung mit Salbei

Salbei: Ein modernes WordPress -Themen -Framework

Vor einigen Jahren haben wir Wurzeln vorgestellt, ein WordPress -Themen -Framework. Roots hat sich seitdem zu einem Unternehmen entwickelt, das zwei leistungsstarke Toolsets anbietet: Salbei und Grundgestein. Dieser Artikel konzentriert sich auf Sage, ein Framework, das HTML5 -Kesselplatten-, Gulp-, Bower- und Bootstrap zur Entwicklung von WordPress -Themen entwickelt hat. Wir werden einen Überblick über diese Tools, Installation, Anpassung und den grundlegenden Salbei -Workflow abdecken.

Schlüsselvorteile von Salbei:

• modernisiert WordPress -Themenentwicklung mithilfe von Tools wie HTML5 -Boilerplate, Gulp, Bower und Bootstrap, was zu effizienten und reaktionsschnellen Themen führt.
• vereinfacht das Vermögensverwaltung und Automatisierung durch einen robusten Build -Prozess.
• bietet eine klare Verzeichnisstruktur für einfache Navigation und Anpassung.
• bietet umfangreiche Anpassungsoptionen für verschiedene Themenaspekte.
• optimiert den Workflow mit Echtzeit-Updates über BrowserSync.

Essentielle Werkzeuge:

• HTML5-Kesselplatte: Eine robuste Front-End-Vorlage, die ein solides Fundament bietet.
• gulp: Ein Automatisierungswerkzeug für Aufgaben wie Minifikation, Verkettung, Bildoptimierung und Test.
• Bower: Ein Paketmanager für Front-End-Vermögenswerte, die die Aufnahme von JavaScript-Bibliotheken vereinfacht.
• browserSync: aktiviert synchronisierte Dateiänderungen und -interaktionen auf mehreren Geräten.
• Asset-Builder & Wiredep: Unterstützung bei der Erfassung von Vermögenswerten und Abhängigkeiten.
• Bootstrap: Ein beliebtes Front-End-Framework zum Erstellen reaktionsschneller Websites.

Installation:

Salbei -Installation verwendet Git. Navigieren Sie zu Ihrem WordPress -Themenverzeichnis und führen Sie den folgenden Befehl in Ihrem Terminal aus (ersetzen Sie theme-name durch den gewählten Themennamen):

git clone https://github.com/roots/sage.git theme-name

Laden Sie die ZIP -Datei Alternativ aus dem GitHub -Repository herunter, extrahieren Sie sie und kopieren Sie den Inhalt in einen neuen Ordner in Ihrem WordPress -Themenverzeichnis.

Konfigurieren Sie als Nächst wp-config.php

define('WP_ENV', 'development');

Themenverzeichnisstruktur:

Salbei behält eine Standard -WordPress -Themenstruktur mit Ergänzungen für die verbesserte Funktionalität bei:

• Core -Dateien (index.php, functions.php, 404.php usw.)
• lib Verzeichnis: Enthält Themenkonfigurations- und Dienstprogrammdateien (assets.php, init.php, titles.php).
• assets Verzeichnis: Häuser SASS/LEWS -Dateien, zusammen mit JavaScript- und Bildvermögen zusammengestellt. main.css.
• lang Verzeichnis: Enthält die sage.pot -Datei für Themenübersetzung.
• templates Verzeichnis: Hält HTML5-Kesselplatten-basierte Vorlagen.

Anpassung:

SAGE über die lib/init.php -Datei anpassen. Zu den wichtigsten Anpassungspunkten gehören:

• Titel -Tag: Title Tag Modification mit add_theme_support('title-tag').
aktivieren/deaktivieren
• Navigationsmenüs: Navigationsmenüs registrieren Sie register_nav_menus().
• Post Thumbnails: Aktivieren/Deaktivieren Sie die vorgestellten Bilder mit add_theme_support('post-thumbnails').
• Postformate: Aktivierte Postformate verwalten mit add_theme_support('post-formats').
• html5 markup: Unterstützung für HTML5 -Elemente mit add_theme_support('html5').
hinzufügen
• Editor Stylesheet: Geben Sie den Editor Stylesheet -Pfad mit add_editor_style() an.
• Seitenleisten: Seitenleisten registrieren register_sidebar() widgets_init()
Workflow:

Der Workflow von Sage basiert auf Node.js- und NPM -Paketen. Installieren Sie die erforderlichen Tools mit NPM:

Verwenden von Bower:

git clone https://github.com/roots/sage.git theme-name

Verwenden Sie Bower-Befehle zum Verwalten von Front-End-Paketen:

: Suche nach Paketen.

• bower search <query>: Pakete installieren.
• bower install <package>: List installierte Pakete.
• bower list: Pakete deinstallieren.
• bower uninstall <package>
Verwenden von Gulp:

Gulp -Plugins installieren:

Ausführen

, um Vermögenswerte zu kompilieren und zu optimieren.

define('WP_ENV', 'development');

bietet Echtzeit-Updates. Die Datei

steuert den Erstellungsprozess. Passen Sie Aufgaben und Einstellungen nach Bedarf innerhalb von gulp und gulp watch an. gulpfile.js gulpfile.js assets/manifest.json Schlussfolgerung:

Sage bietet einen leistungsstarken und effizienten Ansatz für die Entwicklung von WordPress -Themen. Durch die Nutzung moderner Tools und eines optimierten Workflows können Entwickler mühelos qualitativ hochwertige, reaktionsschnelle Themen erstellen. Die detaillierte Erläuterung der in diesem Artikel bereitgestellten Prozess- und Anpassungsoptionen sollte es Ihnen ermöglichen, SAGE für Ihr nächstes WordPress -Themenprojekt effektiv zu verwenden.

Das obige ist der detaillierte Inhalt vonModernisierung der WordPress -Themenentwicklung mit Salbei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!