4 Möglichkeiten, die mobile Version Ihres WordPress Theme zu verbessern

Artikel geschrieben von:
  • WordPress
  • Aktualisiert: Juli 29, 2013

Mobile Version WordPress

Seien wir ehrlich: Die mobilen Geräte werden immer beliebter. Das Desktop-Browsing wächst nicht mehr, es nimmt tatsächlich ab, während das Handy mit all diesen großartigen Smartphones und Tischen schnell wächst.

Laut Net MarketShare machen mobile Geräte 10% des gesamten Web-Traffics aus. Es ist eine große Zahl und in einigen Nischen und Ländern noch größer. Aber das Wichtigste ist die besondere Aufmerksamkeit, die Mobilgeräte benötigen, weil der Bildschirm nur wenig Platz bietet und mobile Verbindungen in der Regel langsamer sind als die Desktop-Verbindung.

Viele WordPress-Themes reagieren, aber Sie wissen, wir haben immer Raum für Verbesserungen. Hier sehen Sie 4-Technologien und Möglichkeiten, sie zu nutzen, um das mobile Erlebnis für Ihre Benutzer zu verbessern.

#1 Ol 'Medientypen

Vor ein paar Jahren, als IE5.5 und IE6 noch am Leben waren, begannen mobile Browser gerade erst herauszuplatzen (und Opera war bei weitem die beste), und die Leute begannen zu erkennen, dass die Dinge einfach kaputt gingen, seitdem Telefone einfach nicht konnten einfache Dinge wie CSS verarbeiten (ganz zu schweigen von JS, Flash und so weiter).

Eine komplett getrennte mobile Website war die einzige Option, wenn die Medientypen uns retten konnten. Die Idee war einfach: Sie könnten dem Browser mitteilen, ob die von Ihnen zur Verfügung gestellte Datei "erweiterte" CSS-Regeln (für Desktops) oder einfache CSS-Regeln (für Handhelds oder Drucke) ist. Die Syntax ist so einfach:

<link rel = "stylesheet" href = "Handheld.css" type = "text / css" media = "Handheld" />

Dies kann eine gute Option sein, um ein völlig anderes Design für Ihre mobile Website zu erstellen. Aber du solltest es einfach nicht benutzen.

Medientypen mögen zunächst gut klingen, aber ein einfaches Problem kam mit modernen Smartphones: das Fehlen von Browser-Unterstützung. Die meisten großen Spieler da draußen ignorierten diese Art von Funktionalität (wie Apple)
Dann kommen Medienanfragen, um uns zu retten.

#2 Media Queries und wie man das mobile Erlebnis wirklich verbessert

Dies ist bei weitem die beliebteste Methode zum Erstellen einer mobilen Version Ihrer Website.

Sie können bestimmte Punkte basierend auf der Größe des Browsers, der Bildschirmgröße des Geräts, der Pixeldichte (ja, Retina!) Und sogar der Medientypen festlegen.

Hier ist eine einfache Medienabfrage:

@media (max-width: 700px) {body {Hintergrund: Rot; }}

Das ist so ziemlich wie beim Programmieren. IF "Browserbreite ist 700 oder niedriger", THEN "Wenden Sie den folgenden CSS-Code an".

Child Theme

Lassen Sie uns einen neuen Ordner in Ihrem / themes erstellen und nennen Sie twentyMobile. Ich weiß, Zwanzig Zwölf benutzt bereits Medienfragen, aber wir sind hier, um zu lernen, oder?

Erstellen Sie eine style.css-Datei und fügen Sie diesen Inhalt hinzu:

/ * Themenname: mobiles Design Vorlage: twentytwelve * / @import url (“../ twentytwelve / style.css”); @media Handheld, nur Bildschirm und (max. Breite: 767px) {nav ul {display: none;} nav select {display: block}}

Oben haben wir das untergeordnete Thema CSS erstellt und außerdem eine Regel hinzugefügt, die nur auf mobile Geräte ausgerichtet ist, die das Hauptmenü ausblenden und eine Auswahl anzeigen. Wenn Sie also ein Menü in einer Auswahl haben, können Sie viel Platz sparen, anstatt es als ul / li-Elemente anzuzeigen

#3 Extreme Verjüngungskur mit jQuery Mobile

jQuery mobile ist ein großartiges Framework, das die jQuery-Funktionalität nutzt, um das mobile Erlebnis durch optimierte Widgets und UI-Elemente zu verbessern.

Das HTML, das benötigt wird, damit es funktioniert, ist ziemlich einfach, es verwendet nur die HTML-Datenattribute zu und JS, um UI-Widgets zu erkennen und zu erstellen.

Aber damit jQuery Mobile in Ihrem WordPress-Blog richtig funktioniert, müssen Sie zuerst das mobile jQuery-Skript aufrufen. Kehren Sie zu unserem untergeordneten Thema zurück, kopieren Sie die Datei header.php des Hauptthemas und fügen Sie diese Zeilen in das head-Tag ein:

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ script>

Ich sollte erwähnen, dass Sie für kommerzielle Vorschläge wp_enqueue _script verwenden sollten, damit Sie Bibliotheken auf Ihrer Site nicht duplizieren.
Jetzt können wir mit so ziemlich jedem beliebigen UI-Element spielen. jQuery mobile hat viele UI-Widgets, die Sie in einem Theme verwenden können, aber wir wenden die Seite und die reduzierbaren Panels an.
Dies ist die grundlegende HTML-Syntax:

<div data-role = "page"> <div data-role = "Kopfzeile"> </ div> <div data-role = "Inhalt"> </ div> <div data-role = "Fußzeile"> </ div> </ div>

Mit diesem Code erstellen Sie eine neue "Seite" und die Kopf-, Inhalts- und Fußzeilenbereiche. Die Kopf- und Fußzeile sind festgelegt, und der Inhalt wird basierend auf der aktuellen Seite geändert. Sie können also mehrere Seiten einmal laden und sie einfach ausblenden, indem Sie unterschiedliche IDs zuweisen.
Dies ist der grundlegende HTML-Code für reduzierbare Bereiche:

<div data-role = "collapsible-set"> <div data-role = "collapsible-set" data collapsed = "true"> <p> Inhalt des reduzierbaren Bereichs </ p> </ div> </ div>

Es ist ziemlich einfach, dort eine Schleife zu implementieren, oder? Nun, Ihr Code sieht folgendermaßen aus:

<div data-role = "collapsible-set"> <? while (have_posts ()) {...?> <div data-role = "collapsible" data-collapsed = "true"> </ div> <? ...}?> </ div>

Das Auswahlmenü wurde überarbeitet

Mit dem Code, den wir oben gesehen haben (im Abschnitt Medienabfragen), können Sie Ihr gewohntes Menü ausblenden und ein spezielles Auswahlmenü anzeigen. jQuery erlaubt Ihnen, es ohne viel PHP-Code hinzuzufügen (um ehrlich zu sein, brauchen wir überhaupt kein PHP). Lassen Sie uns eine neue Datei erstellen und diesen Code dort hinzufügen:

jQuery (function ($) {// wenn das DOM fertig ist $ (document) .ready (function () {// erstellen wir das select-Element $ ("<select />").appendTo("nav"); / / Gehen Sie mit der neuen Option zu… $ ("<option />", {"value": "", "text": "Gehe zu ..."}). AppendTo ("nav select");}); / / Nun haben wir das select erstellt, lass es uns füllen: $ ("nav .menu a"). Each (function () {// für jeden LINK findest du im Menü var aux = $ (this); $ ("<option.) /> ", {" value ": aux.attr (" href ")," html ": aux.text ();}). appendTo (" nav select "); // ein neues Element an das select anhängen)} // dann setzen wir die Dropdown-Funktion so, dass sie umgeleitet wird, wenn wir ein neues Element auswählen $ ("nav select"). change (function () {window.location = $ (this) .find ("option: selected"). val ();});});

Dadurch wird ein neues mobiles Menü erstellt, ABER das Problem ist, dass wir jquery mobile sogar in der "normalen" Version der Site laden. Aus diesem Grund können wir auch einige Plugins verwenden, um unsere Website zu verbessern.

#4 - Alles mit Mobile Detector zusammenpacken

Dieses großartige Plugin erstellt eine neue Funktionalität, die es uns ermöglicht, Themen abhängig vom Benutzergerät bedingt zu laden. Und es funktioniert mit einfachen bedingten Regeln wie folgt:

<? php if (MobileDTS :: ist ('android')) {....} elseif (MobileDTS :: ist ('mobil')) {....} else {}?>

Die MobileDTS-Methode prüft das aktuelle Gerät und gibt dann ein einfaches Wahr / Falsch zurück. Dann können wir eine magische Funktion namens switch_theme () verwenden, um ein neues Thema zu setzen, und Sie können Plugin-Bedingungen wie MobileDTS :: is_switcher_enabled () verwenden, um beispielsweise einen Link zu einer Desktop-Version zu erstellen, wenn Sie Mobile verwenden.

Fazit

Hast du jemals mobile Plugins oder Funktionen in deinem WordPress Theme benutzt? Welche Methode bevorzugen Sie? Sei nicht schüchtern und teile deine Gedanken!

Artikel von Rochester Oliveira

Ich bin ein Webdesigner und Unternehmer aus Itajubá (MG), Brasilien. Ich liebe es, über obskure Themen zu schreiben und coole Sachen zu machen.

Verbindung herstellen: