Share
Responsive Design wird langsam aber sicher zu einem erwarteten Standard für Webentwickler. Dieses Tutorial zeigt Ihnen, wie Sie Ihrem nächsten WordPress-Theme ein responsives Framework hinzufügen.
Früher mussten Sie sich nur Gedanken über die Konsistenz der Website in mehreren Browsern machen, aber jetzt müssen wir uns das Gesamtbild der Konsistenz auf mehreren Geräten ansehen. Der Computer war früher unser einziger Zugang zum Internet, aber jetzt springen wir online von unseren Telefonen, Fernsehern, Tablets und wer weiß, was sonst noch in die Pipe kommt. Die korrekte Wiedergabe und Leistung Ihrer Website auf jedem Gerät sollte dieses Jahr oberste Priorität haben.
Beim Responsive Design geht es darum, Dinge flüssig zu machen und sich an die Bildschirmgröße anzupassen. Obwohl WordPress mit responsiven Designmethoden nicht immer gut spielt, gibt es Wege, wie dies erreicht werden kann. Wie schnell Sie sich entscheiden, Ihre Website zu erstellen, hängt wirklich davon ab, wie viel Zeit Sie damit verbringen möchten.
Es gibt verschiedene responsive Frameworks zur Auswahl. Möglicherweise möchten Sie einige Zeit damit verbringen, die einzelnen zu untersuchen, um zu ermitteln, welche der in Ihrem Projekt enthaltenen Funktionen enthalten sind. Wenn Sie nicht sicher sind, wo Sie anfangen sollen, sollten Sie Folgendes beachten:
Bootstrap von Twitter basiert auf einem reaktionsschnellen 12-Spalten-Raster. Es enthält Fest- und Flüssigkeitsbreiten-Layouts, die auf diesem System basieren. Darüber hinaus werden optionale JavaScript-Plug-Ins unterstützt, z. B. ein Bildkarussell, Typeahead, umschaltbare Registerkarten und vieles mehr.
Less Framework basiert auf 4 Layouts und 3 Sätzen typografischer Vorgaben. Less Framework verwendet ein Standardlayout als Ausgangspunkt und verwendet dann CSS3-Medienabfragen zum Codieren von "untergeordneten Layouts"..
Foundation ist ein Rastersystem, das auf 12 Spalten basiert, die keine feste Breite haben. Sie können je nach Bildschirmauflösung oder Fenstergröße variieren. Foundation wird mit Schaltflächen und integrierten Formularstilen, Warnmeldungen und mehr geliefert.
YAML ist ein mehrspaltiges Layout, das auf einem Rastersystem mit prozentualen Breiten basiert. Es verfügt über mehrere integrierte Funktionen und unterstützt mehrere jQuery-Plugins wie Accessible Tabs und SyncHeight.
Diese Liste der Frameworks ist kaum vollständig, aber für dieses Tutorial zeige ich Ihnen, wie Sie Foundation in Ihr nächstes WordPress-Theme integrieren.
Laden Sie Foundation herunter, und fügen Sie die Dateien zu Ihrem Ordner hinzu css und js Ordner im Verzeichnis Ihres Themes. Die einfachste Möglichkeit, die gewünschten Dateien zu Ihrem Design hinzuzufügen, wäre die Verwendung wp_enqueue_script und wp_enqueue_style.
Für dieses Tutorial zeige ich Ihnen, was Sie in Ihrem Computer platzieren Functions.php Wenn Sie mehr über das Hinzufügen von Dateien auf diese Weise erfahren möchten, lesen Sie das Tutorial zum Einfügen von JavaScript und CSS in Ihr Design.
Um das erforderliche JavaScript für die ordnungsgemäße Funktion von Foundation in Ihrem Design hinzuzufügen, müssen Sie eine Funktion erstellen, die den Aufruf von wp_enqueue_script um sie zu dienen.
Accentsconagua
function responsive_scripts_basic () // Registriere Skripte für unser Theme wp_register_script ('foundation-mod', get_template_directory_uri (). '/js/modernizr.foundation.js', array ('jquery'), true); wp_register_script ('foundation-main', get_template_directory_uri (). '/js/foundation.js', true); wp_register_script ('foundation-app', get_template_directory_uri (). '/js/app.js', true); wp_enqueue_script ('foundation-mod'); wp_enqueue_script ('foundation-main'); wp_enqueue_script ('foundation-app'); add_action ('wp_enqueue_scripts', 'responsive_scripts_basic', 5); Fügen Sie anschließend die Foundation-Stylesheets hinzu, um das Raster flexibel zu gestalten. Fügen Sie diese Funktion nach der gerade erstellten ein.
function responsive_styles () // Stile für unser Theme registrieren wp_register_style ('foundation-style', get_template_directory_uri (). '/css/foundation.css', array (), 'all'); wp_register_style ('foundation-appstyle', get_template_directory_uri (). '/css/app.css', array (), 'all'); wp_enqueue_style ('foundation-style'); wp_enqueue_style ('foundation-appstyle'); add_action ('wp_enqueue_scripts', 'responsive_styles'); Nach dem Speichern gehen Sie zurück und überprüfen Sie Ihren Quellcode, um sicherzustellen, dass Ihre Dateien korrekt hinzugefügt wurden. Es sollte ungefähr so aussehen:
Jeder liebt es, die extra Meile zu gehen, damit die Dinge in Internet Explorer funktionieren, richtig? Um sicherzustellen, dass Ihr Foundation Framework in Internet Explorer reagiert, müssen Sie einige bedingte Anweisungen hinzufügen. Diese sollten in Ihrer Datei header.php vor dem schließenden head-Tag stehen.
>
Jetzt, da Ihr Design über ein Foundation-Setup verfügt, können Sie alle Responsive-Funktionen nutzen, die Sie für das Design mit dem Foundation-Grid-System benötigen. Wie andere responsive Frameworks besteht dieses System aus 12 Spalten. Weitere enthaltene Funktionen sind vordefinierte Schaltflächenstile, Registerkarten, Tabellen und vieles mehr. In der Foundation-Dokumentation finden Sie alle Glocken und Pfeifen sowie Anweisungen zum Arbeiten mit dem Raster.
Es gibt viele kostenlose und erstklassige WordPress-Themes, die responsives Design verwenden. Wenn Sie lieber mit etwas beginnen möchten, können Sie diese Themen ausprobieren:
WordPress Bootstrap ist ein Thema, das in Twitter Bootstrap v.2.0.1 entwickelt wurde. Mit vier verschiedenen Seitenvorlagen zur Auswahl, Kurzwahlnummern und mehreren Seitenleistenoptionen ist sie voll ansprechend. Nach der Installation können Sie bootswatch.com besuchen, um verschiedene Farbversionen des Designs herunterzuladen.
Basierend auf dem Themify-Framework verwendet iTheme2 Medienabfragen für unterschiedliche Anzeigen, verfügt über einen anpassbaren Funktionsschieberegler, ein Social-Media-Widget und zwei verschiedene Design-Skins. Sie können bis zu vier Fußzeilen-Widgets verwenden.
Das Responsive Twenty Ten-Design unterstützt flexible Bilder, Ränder und mobile Bilder. Es wurde als untergeordnetes Thema für das enthaltene zwanzig Zehn-Thema erstellt.
Good Minimal ist ein sauberes, minimalistisch ansprechendes Layout, das sich an eine Vielzahl von Displays und Geräten anpasst. Good Minimal verfügt über zwei verschiedene Stile, unterstützt unbegrenzte benutzerdefinierte Seitenleisten, Kurzcodes, mehrere Dropdown-Menüs und verschiedene andere Funktionen.
Modulo ist ein ansprechendes, fließendes Layout, das Google-Schriftarten, Kurzcodes, mehrere Schieberegler, Portfolio-Seitenvorlagen und Farbanpassungen unterstützt. Modulo enthält außerdem 5 benutzerdefinierte Widgets, darunter eines für die letzten Beiträge mit Miniaturbild-Unterstützung.
Responsive Design wird immer beliebter und zu wissen, wie Sie es in Ihrer zukünftigen Themenkonstruktion einsetzen können, ist entscheidend für den Erfolg. Unabhängig davon, ob Sie Ihrem Design ein Framework hinzufügen oder ein vordefiniertes Design verwenden, das Responsive Design unterstützt, erwarten Ihre Kunden die Unterstützung mehrerer Geräte als Basisdienst.
Sind Themen, die Sie erstellen, responsiv? Verwenden Sie ein responsives Framework, das wir nicht erwähnt haben? Erzählen Sie uns in den Kommentaren alles darüber!
Wenn Sie Hilfe beim Erstellen eines ansprechenden WordPress-Site-Designs benötigen, bestellen Sie einen der einfachen, kostengünstigen WordPress-Services von Envato Studio. Diese Experten werden Ihr Design schnell und problemlos in eine responsive WordPress-Site konvertieren!
