Mobiele WordPress-thema's dag 2

Vorige week hebben we, jQTouch, het raamwerk onderzocht dat we zouden gebruiken om ons mobiele wordpress-thema te maken. Deze week gaan we verder waar we gebleven waren en pasten we toe wat we hebben geleerd om de themabestanden te maken die we zullen gebruiken om te integreren met een WordPress-thema. Laten we ernaar toe gaan!

Beginnen

Om te beginnen gebruiken we een standaardinstallatie van jQTouch die we vorige week hebben gedownload. Om het simpel te houden, gaan we zoveel mogelijk van de standaard jQTouch-functionaliteit gebruiken.

Kopieer eerst de inhoud van de hoofddemo-directory (demo's / main) en plak deze in de jQTouch-hoofdmap:

Aangezien onze bloglayout zeer vergelijkbaar zal werken met deze demo, is het logisch om vanaf dat punt te beginnen. Nadat u dit hebt gedaan, moet u enkele links naar de JS- en CSS-bestanden bijwerken. De eerste 60 regels waar je je niet echt zorgen over hoeft te maken. Ze zorgen er feitelijk voor dat jQTouch werkt zoals het werkt. Vervang het begin van het bestand door dit:

    jQTouch β

Na de einde-scripttag moet u een stijltag zien. Dit is waar je weet dat je kunt stoppen.

De indexpagina

We integreren niet met Wordpress in dit deel van de tutorial. In plaats daarvan maken we het thema in gewone HTML en villen het vervolgens naar een thema in de volgende zelfstudie. Dat gezegd hebbende, moeten we de standaardindexinhoud vervangen door realistische bloginhoud. Selecteer alle inhoud tussen de body-tags en verwijder deze. Nu vullen we het terug met inhoud. Vorige week hebben we alle basisprincipes van jQTouch besproken, dus alles hieronder zou een beoordeling moeten zijn:

   Wordpress-site
 Wat betreft 
   
 
 
  Blog artikelen 12
 Pages 2
 
 Externe links
  abonneren
 tjilpen
 Desktoppagina
 
  E-mail
 schenken
 
  Voeg deze pagina toe aan uw startscherm om het aangepaste pictogram, het opstartscherm en de modus Volledig scherm te bekijken.
 
 
   
 Mobiel thema
Versie 0.1 bèta
 Van Connor Zwick
 Duw uw inhoud over meer grenzen naar alle op het internet aangesloten mobiele apparaten
 met behulp van de wereldberoemde Wordpress CMS en JQTouch.
  @connorzwick op Twitter 
 

Dichtbij
 
    Site-pagina's
 Huis 
 Pages
  Wat betreft
 Geschiedenis
 
 
   Site-pagina's
 Huis 
 Pages
  Wat betreft
 Geschiedenis
 
 
   Site-pagina's
 Huis 
  Titel plaatsen
 Door: Connor Zwick
 Dit is een korte beschrijving. Hier zal een kort uittreksel van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen. Dit is een korte beschrijving. Hier zal een kort uittreksel van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen. Dit is een korte beschrijving. Hier zal een kort fragment van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen.

Zoals u kunt zien, hebben we een aantal menu's, titelbalken en zelfs een AJAX-geladen blog.html-pagina toegevoegd. Maar alles hierboven zou beoordeling moeten zijn. Als je het verwarrend vindt, herlees dan de post van vorige week.

De blogpagina

Met jQTouch probeerden we zoveel mogelijk op de eerste pagina te houden. Zoals u kunt zien, hebben we dat grotendeels grotendeels hierboven gedaan. Maar voor een blog is dit niet erg realistisch, omdat een blog constant wordt bijgewerkt en in bijna alle gevallen zou het zeer inefficiënt zijn om alle blogberichten ook op één pagina te laden. Daarom hebben we voor het menu-item blog niet gekoppeld aan een ankeritem op dezelfde pagina, maar eerder aan een nieuw HTML-bestand. Echter, jQTouch zal dit naadloos in de site laden.

Deze blogpagina is een overzicht van alle recente blogartikelen. Dus wat willen we op deze pagina?

Een blogbeschrijving
Titels plaatsen
Post auteur
Bericht uitdelen
Post-datum

Dus eigenlijk de basis. We gaan elk bericht verpakken in een ongeordende lijst en vervolgens een lijstitem. Om de site een beetje kleurrijker en grafisch aantrekkelijker te maken, zullen we de datum ook opmaken als de trend in de kalenderdatum. Als je niet weet waar ik het over heb, kijk dan hieronder of naar de preview van het bericht van vorige week. We zullen ook een kleine aangepaste stijl moeten toevoegen, dus we zullen enkele klassen toevoegen. Zoals dit:

  Titel plaatsen
 juni
 30
 Door: Connor Zwick
 Dit is een korte beschrijving. Hier zal een kort fragment van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen.

Het is niet het meest semantische gebruik van lijsten, maar het zal in een seconde logischer zijn. Bij het ontwerpen van dit thema hebben we een dilemma. We hebben een beperkte schermruimte, dus we kunnen blogposts comprimeren zodat gebruikers meer kunnen zien, of we kunnen ze uitbreiden zoals hierboven en lezers een beter idee geven van waar het bericht over gaat. Of we kunnen het eenvoudig maken en beide doen. In dit thema laten we 5 uitgevouwen berichten zien, zoals hierboven, en laten we hieronder 5 berichttitels zien. We kunnen dit bereiken met een eenvoudig menu:

 Meer berichten:
  Titel plaatsen
 Titel plaatsen
 Titel plaatsen
 Titel plaatsen
 Titel plaatsen

De blogpagina samenvoegen

Nu moeten we alleen de twee stukjes boven elkaar plaatsen en in een jQTouch-pagina plaatsen. We hoeven geen link te maken naar JS-bestanden of CSS op de blogpagina. Beschouw de blogpagina als een PHP als je bekend bent met PHP. Denk anders aan jQTouch als het verkrijgen van de inhoud en deze vervolgens rechtstreeks in de hoofdindexpagina invoegen. Dit is het volledige blog.html-bestand:

   blog
 Huis 
  Dit is een korte beschrijving van blog. Hier beschrijf je het doel. 
  Titel plaatsen
 juni
 30
 Door: Connor Zwick
 Dit is een korte beschrijving. Hier zal een kort fragment van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen.
 
  Titel plaatsen
 juni
 30
 Door: Connor Zwick
 Dit is een korte beschrijving. Hier zal een kort fragment van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen.
 
  Titel plaatsen
 juni
 30
 Door: Connor Zwick
 Dit is een korte beschrijving. Hier zal een kort fragment van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen.
 
  Titel plaatsen
 juni
 30
 Door: Connor Zwick
 Dit is een korte beschrijving. Hier zal een kort fragment van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen.
 
  Titel plaatsen
 juni
 30
 Door: Connor Zwick
 Dit is een korte beschrijving. Hier zal een kort fragment van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen.
 
 Meer berichten:
  Titel plaatsen
 Titel plaatsen
 Titel plaatsen
 Titel plaatsen
 Titel plaatsen
 
 
   Evenementen test
 AJAX Home 
  Dit zou zijn waar de post zou gaan.

Custom Styling

Ik heb eerder gezegd dat we een aangepaste CSS moeten toevoegen om de blogpagina op te maken. Deze tutorial is niet gericht op de basis van CSS, dus ik ga ervan uit dat je de grondbeginselen kent. Dat gezegd zijnde, ik zal alle CSS3 die we gebruiken behandelen, wat teleurstellend heel weinig is. Alleen grensradius, wat vrij duidelijk is. We gebruiken grens- [boven / onder] - [links / rechts] -radius om de kalender ronde hoeken te geven:

 .blog-title border-bottom: 1px solid # 333333;  span.blog-title color: #fff; breedte: 100%; weergave: blok; padding-bottom: 10px;  .post-description, .post-auteur font-size: 12px; marge links: 75 px;  .post-auteur margin-bottom: 3px;  .post, .page-auteur font-size: 13px; kleur: #fff; margin-bottom: 5px;  #blog .rounded li position: relative;  .month positie: absoluut; breedte: 70 px; text-align: center; achtergrond: # aa3939; kleur: # f5f2f2; regelhoogte: 28 px; padding-bottom: 5px; border-top-left-radius: 4px; border-top-right-radius: 4px;  .date positie: absoluut; breedte: 70 px; margin-top: 25px; lettertypegrootte: 40px; text-align: center; achtergrond: # f5f2f2; grens-onder-links radius: 4px; border-bottom-right-radius: 4px;

Test het uit

Als alles goed ging, zou je een werkende site moeten hebben! In de laatste zelfstudie hebben we ook de test besproken, maar als beoordeling zal ik de officiële Apple iPhone Simulator gebruiken. Om de simulator te kunnen gebruiken, moet je de iOS SDK downloaden in het ontwikkelaarscentrum van Apple. Als u de SDK downloadt, moet u zich eerst als een iPhone-ontwikkelaar registreren (registratie is gratis) en hebt u een Mac met OS X Snow Leopard nodig. Heb je geen Mac of wil je je niet registreren als iPhone-ontwikkelaar? Geen zorgen, je kunt bijna elke andere browser volgen, maar je resultaten zijn misschien minder nauwkeurig dan de mijne (laten we hopen dat niemand die dit leest nog IE6 draait).

Ga je gang en open de iPhone Simulator of je browser naar keuze. Als je Xcode en de iOS SDK hebt geïnstalleerd, zou je in staat zijn om gewoon in "Spotlight" naar "Simulator" te zoeken om de applicatie te vinden.

We zijn klaar voor vandaag!

Nu we de HTML voor het thema hebben gemaakt, hoeven we het alleen nog maar naar een WordPress-thema te brengen, en we hebben een mobiel thema voltooid! Voel je vrij om met de demo-bestanden te spelen en aan te passen wat we vandaag hebben gedaan voor je eigen site.

Code