Letzte Woche haben wir jQTouch untersucht, welches Framework wir verwenden würden, um unser mobiles WordPress-Theme zu erstellen. Diese Woche werden wir an der Stelle fortfahren, an der wir aufgehört haben, und das, was wir gelernt haben, um die Designdateien zu erstellen, die wir zur Integration in ein WordPress-Theme verwenden werden. Lasst uns anfangen!

Start ab

Zunächst verwenden wir eine Standardinstallation von jQTouch, die wir letzte Woche heruntergeladen haben. Um es einfach zu halten, werden wir so viel wie möglich von der jQTouch-Standardfunktionalität verwenden.

Kopieren Sie zunächst den Inhalt des Haupt-Demoverzeichnisses (demos / main) und fügen Sie ihn in den jQTouch-Hauptordner ein:

Da unser Blog-Layout dieser Demo sehr ähnlich ist, ist es sinnvoll, von diesem Punkt aus zu beginnen. Nachdem Sie dies getan haben, müssen Sie einige Links zu den JS- und CSS-Dateien aktualisieren. Die ersten 60 Zeilen müssen sich darüber hinaus nicht wirklich sorgen. Sie sind im Grunde das, was jQTouch so macht, wie es funktioniert. Ersetzen Sie den Anfang der Datei durch Folgendes:

Nach dem End-Skript-Tag sollte ein Stil-Tag angezeigt werden. Hier wissen Sie, dass Sie aufhören können.

Die Indexseite

In diesem Teil des Lernprogramms integrieren wir uns nicht mit Wordpress. Stattdessen erstellen wir das Design in normalem HTML-Code und legen es im nächsten Tutorial zu einem Design fest. Allerdings müssen wir den Standardindexinhalt durch realistische Bloginhalte ersetzen. Wählen Sie den gesamten Inhalt zwischen den Body-Tags aus und löschen Sie ihn. Jetzt werden wir es wieder mit Inhalten füllen. Letzte Woche haben wir alle Grundlagen von jQTouch behandelt. Daher sollte alles, was im Folgenden aufgeführt ist, eine Überprüfung sein:

 
 
 
Wordpress-Site
 Über 
 
 
 
 
 
 
 
Blog-Artikel 12
 
Seiten 2
 
 
Externe Links
 
 
Abonnieren
 
Twitter
 
Desktop-Seite
 
 
 
Email
 
Spenden
 
 
 
Fügen Sie diese Seite Ihrem Startbildschirm hinzu, um das benutzerdefinierte Symbol, den Startbildschirm und den Vollbildmodus anzuzeigen.
 
 
  
 
 
Mobile Theme
Version 0.1 Beta
 Durch Connor Zwick
 
Übertragen Sie Ihre Inhalte über alle Grenzen hinweg auf alle mit dem Internet verbundenen mobilen Geräte
 mit dem weltbekannten Wordpress CMS und JQTouch.
 
 @connorzwick auf Twitter 
 


Schließen
 
  
 
 
Site-Seiten
 Zuhause 
 
Seiten
 
 
Über
 
Geschichte
 
 
 
 
 
Site-Seiten
 Zuhause 
 
Seiten
 
 
Über
 
Geschichte
 
 
 
 
 
Site-Seiten
 Zuhause 
 
 
Titel veröffentlichen
 
Durch: Connor Zwick
 
Dies ist eine kurze Beschreibung. Hier ein kurzer Auszug aus dem Beitrag, damit der Zuschauer beurteilen kann, ob er oder sie mehr lesen möchte. Dies ist eine kurze Beschreibung. Hier ein kurzer Auszug aus dem Beitrag, damit der Zuschauer beurteilen kann, ob er oder sie mehr lesen möchte. Dies ist eine kurze Beschreibung. Hier ist ein kurzer Auszug aus dem Beitrag, damit der Zuschauer beurteilen kann, ob er oder sie mehr lesen möchte.
 
 

Wie Sie sehen, haben wir einige Menüs, Titelleisten und sogar eine mit AJAX geladene blog.html-Seite hinzugefügt. Aber alles darüber sollte überprüft werden. Wenn Sie etwas davon verwirrend finden, lesen Sie bitte den Post der letzten Woche erneut.

Die Blogseite

Mit jQTouch haben wir versucht, so viel wie möglich auf der Startseite zu behalten. Wie Sie sehen, haben wir das zum größten Teil oben gemacht. Für einen Blog ist dies jedoch nicht sehr realistisch, da ein Blog ständig aktualisiert wird und es in fast allen Fällen sehr uneffektiv wäre, alle Blogeinträge auf eine Seite zu laden. Deshalb haben wir beim Blog-Menüelement nicht auf ein Ankerelement auf derselben Seite verlinkt, sondern auf eine neue HTML-Datei. JQTouch lädt diese dann nahtlos in die Site.

Diese Blogseite enthält eine Liste aller aktuellen Blogartikel. Was wollen wir also auf dieser Seite??

• Eine Blogbeschreibung
• Titel veröffentlichen
• Autor verfassen
• Postauszug
• Nach Datum

So ziemlich die Grundlagen. Wir werden jeden Beitrag in eine ungeordnete Liste und dann in einen Listeneintrag packen. Um die Site ein wenig farbenfroher und grafisch ansprechender zu gestalten, werden wir das Datum auch so formatieren, dass es dem Trend des Kalendertags entspricht. Wenn Sie nicht wissen, wovon ich rede, schauen Sie unten oder in der Vorschau des Postings der letzten Woche. Wir müssen auch ein wenig benutzerdefiniertes Styling hinzufügen, also fügen wir einige Klassen hinzu. So was:

 
 
Titel veröffentlichen
 
Jun
 
30
 
Durch: Connor Zwick
 
Dies ist eine kurze Beschreibung. Hier ist ein kurzer Auszug aus dem Beitrag, damit der Zuschauer beurteilen kann, ob er oder sie mehr lesen möchte.
 

Es ist nicht die semantischste Verwendung von Listen, aber es wird in einer Sekunde sinnvoller. Bei der Gestaltung dieses Themas haben wir ein Dilemma. Wir haben nur wenig Platz auf dem Bildschirm, sodass wir Blogbeiträge entweder komprimieren können, damit die Benutzer mehr sehen können, oder wir können sie wie oben erweitern und den Lesern eine bessere Vorstellung davon vermitteln, worum es in dem Beitrag geht. Oder wir könnten es einfach machen und beides tun. In diesem Thema werden wir wie oben 5 erweiterte Beiträge anzeigen. Anschließend werden nur 5 Titel angezeigt. Wir können dies mit einem einfachen Menü erreichen:

 
Weitere Beiträge:
 
 
Titel veröffentlichen
 
Titel veröffentlichen
 
Titel veröffentlichen
 
Titel veröffentlichen
 
Titel veröffentlichen
 

Blog-Seite zusammenstellen

Jetzt müssen wir nur noch die beiden Teile zusammenfügen und in eine jQTouch-Seite einfügen. Wir müssen auf der Blogseite keinen Link zu JS-Dateien oder CSS erstellen. Stellen Sie sich die Blogseite als PHP-Include vor, wenn Sie mit PHP vertraut sind. Ansonsten denken Sie an jQTouch, als würden Sie den Inhalt abrufen und ihn dann direkt in die Hauptindexseite einfügen. Dies ist die gesamte blog.html-Datei:

 
 
 
Blog
 Zuhause 
 
 Dies ist eine kurze Beschreibung des Blogs. Hier beschreiben Sie den Zweck. 
 
 
Titel veröffentlichen
 
Jun
 
30
 
Durch: Connor Zwick
 
Dies ist eine kurze Beschreibung. Hier ist ein kurzer Auszug aus dem Beitrag, damit der Zuschauer beurteilen kann, ob er oder sie mehr lesen möchte.
 
 
 
Titel veröffentlichen
 
Jun
 
30
 
Durch: Connor Zwick
 
Dies ist eine kurze Beschreibung. Hier ist ein kurzer Auszug aus dem Beitrag, damit der Zuschauer beurteilen kann, ob er oder sie mehr lesen möchte.
 
 
 
Titel veröffentlichen
 
Jun
 
30
 
Durch: Connor Zwick
 
Dies ist eine kurze Beschreibung. Hier ist ein kurzer Auszug aus dem Beitrag, damit der Zuschauer beurteilen kann, ob er oder sie mehr lesen möchte.
 
 
 
Titel veröffentlichen
 
Jun
 
30
 
Durch: Connor Zwick
 
Dies ist eine kurze Beschreibung. Hier ist ein kurzer Auszug aus dem Beitrag, damit der Zuschauer beurteilen kann, ob er oder sie mehr lesen möchte.
 
 
 
Titel veröffentlichen
 
Jun
 
30
 
Durch: Connor Zwick
 
Dies ist eine kurze Beschreibung. Hier ist ein kurzer Auszug aus dem Beitrag, damit der Zuschauer beurteilen kann, ob er oder sie mehr lesen möchte.
 
 
Weitere Beiträge:
 
 
Titel veröffentlichen
 
Titel veröffentlichen
 
Titel veröffentlichen
 
Titel veröffentlichen
 
Titel veröffentlichen
 
 
 
 
 
Events testen
 AJAX-Startseite 
 
 Hier würde die Post hingehen. 
 

Kundenspezifisches Styling

Ich habe bereits erwähnt, dass wir zum Formatieren der Blogseite ein benutzerdefiniertes CSS hinzufügen müssen. Dieses Tutorial konzentriert sich nicht auf die Grundlagen von CSS. Ich gehe also davon aus, dass Sie die Grundlagen kennen. Davon abgesehen werde ich jedes CSS3 behandeln, das wir verwenden, was enttäuschend wenig ist. Nur Grenzradius, was ziemlich selbsterklärend ist. Wir verwenden border- [top / bottom] - [left / right] -radius, um dem Kalender Ecken zu geben:

 .blog-title border-bottom: 1px fest # 333333;  span.blog-title color: #fff; Breite: 100%; Bildschirmsperre; Polsterung unten: 10px;  .post-description, .post-author font-size: 12px; Rand links: 75px;  .post-author margin-bottom: 3px;  .post, .page-author Schriftgröße: 13px; Farbe: #fff; Rand unten: 5px;  #blog .rounded li position: relative;  .month position: absolut; Breite: 70px; Text ausrichten: Mitte; Hintergrund: # aa3939; Farbe: # f5f2f2; Zeilenhöhe: 28px; Polsterung unten: 5px; Rand oben links Radius: 4px; Rand oben rechts Radius: 4px;  .date position: absolut; Breite: 70px; Rand oben: 25px; Schriftgröße: 40px; Text ausrichten: Mitte; Hintergrund: # f5f2f2; Rand unten links Radius: 4px; Rahmen unten rechts: 4px; 

Testen Sie es aus

Wenn alles reibungslos verlief, sollten Sie eine Arbeitsstelle haben! Im letzten Tutorial haben wir uns auch mit Tests befasst, aber als Review verwende ich den offiziellen Apple iPhone Simulator. Um den Simulator ausführen zu können, müssen Sie das iOS-SDK im Apple Developer Center herunterladen. Zum Herunterladen des SDK müssen Sie sich zuerst als iPhone-Entwickler registrieren (die Registrierung ist kostenlos) und einen Mac mit OS X Snow Leopard. Sie haben keinen Mac oder möchten sich nicht als iPhone-Entwickler registrieren? Keine Sorge, Sie können mit fast jedem anderen Browser mitverfolgen, aber Ihre Ergebnisse sind möglicherweise weniger genau als meine (hoffen wir, dass niemand liest, dass hier immer noch IE6 läuft)..

Öffnen Sie den iPhone Simulator oder Ihren Browser Ihrer Wahl. Wenn Sie Xcode und das iOS-SDK installiert haben, sollten Sie einfach nach "Simulator" suchen können, um die Anwendung zu finden.

Wir sind für heute fertig!

Nun, da wir den HTML-Code für das Design erstellt haben, müssen wir nur noch ein WordPress-Theme erstellen und wir haben ein fertiges Mobile-Theme! Fühlen Sie sich frei, mit den Demo-Dateien herumzuspielen und passen Sie an, was wir heute für Ihre eigene Website gemacht haben.