Mobile Wordpress Theming Ziua 4

Bine ați venit la ultima tranșă a Seriei Mobile WordPress Theming! În acest tutorial, vom încărca dinamic postările și paginile în aplicația noastră web mobilă. Până la urmă, vom avea o temă mobilă WordPress utilizabilă! Să mergem imediat!

Schimbarea miniaturii tematice

În primul rând, pe măsură ce pachetăm această temă, va trebui să schimbăm miniatura de temă în cele din urmă pentru a înlocui miniatura care a venit cu tema originală inițială. Pentru aceasta, eu am instalat doar o captură de ecran a temei în panza 300 x 225. De asemenea, am dat tema un nume oficial: MyTouch. S-ar putea să nu fie cel mai creativ, dar, hei, funcționează. Numele fișierului este screenshot.png și este localizat în directorul rădăcină al oricărei teme.

Schimbarea Permalink Stucture

Aceasta este partea unică a acestei serii. Pentru a obține capabilitățile AJAX ale jQTouch pentru a încărca postări individuale pe blog, trebuie să modificăm structura permalink a blogului. Acest lucru se datorează faptului că din cutie, jQTouch poate încărca doar fișiere statice. Cu toate acestea, WordPress este altceva decât static - este dinamic la extrem. Așa că vom încerca jQTouch, creând pagini "statice virtuale". Acest lucru este de fapt destul de simplu cu WordPress. Mergeți la Setări> Permalink și alegeți Structura personalizată. Apoi utilizați următoarele:

 /%category%/%postname%.html 

Partea importantă aici este .html pe care l-am adăugat. Totul inainte de asta depinde de tine.

Schimbarea paginii Permalinks

Din păcate, paginile funcționează puțin diferit cu permalinks. Pentru a obține o extensie .html pentru pagini, trebuie să instalați un plugin numit .html pe Pagini. Aceasta va adăuga .html după toate paginile și va face jQTouch să funcționeze din nou pentru pagini.

Încărcați posturile

Elimina

Etichete

În primul rând, trebuie să eliminăm etichetele secțiunii care înfășoară postările din blog. Acest lucru permite jQTouch să înțeleagă structura paginii, ceea ce va face încărcarea postărilor pe blog mult mai ușoară și mai rapidă. Acum, secțiunea blog a index.php ar trebui să arate astfel:

 

Blog

Acasă
Aceasta este o scurtă descriere a blogului. Aici descrieți scopul.
  • „>

    De:

    Citeste mai mult„)); ?>

single.php

Single.php este fișierul folosit pentru a vizualiza o postare individuală. Trebuie să modificăm acest lucru, astfel încât să fie doar o secțiune div pe care o putem viza și încărca cu ușurință folosind AJAX. În primul rând, trebuie să verificăm dacă există postări de afișat. Apoi, vom începe o buclă pentru a afișa conținutul mesajului. Am acoperit deja aproape toate funcțiile de șablon WordPress de mai jos, astfel încât acestea ar trebui să fie destul de explicative:

  

Postare pe blog

Blog
  • „>

    De:

Scuze, nicio postare nu se potriveste criteriilor dumneavoastra.

Singurul lucru care este cu adevărat nou este comments_template (). Acest lucru inserează practic șablonul de comentariu, despre care vom vorbi puțin.

Coafura

Vom avea nevoie, de asemenea, să adăugăm un pic mai mult stil la stil.css pentru a face acest aspect bun:

 .lună-mică poziție: absolută; lățime: 35px; text-align: centru; fundal: # aa3939; culoare: # f5f2f2; linia-înălțime: 14px; padding-top: 2px; padding-bottom: 3px; raza de sus-dreapta-stânga: 4px; raza de sus-dreapta-dreapta: 4px; font-size: 12px; margin-top: -8px; dreapta: 15px; . dată-mică poziție: absolută; lățime: 35px; margin-top: 11px; font-size: 18px; text-align: centru; fundal: # f5f2f2; raza de jos-stânga-dreapta: 4px; raza de jos-dreapta-dreapta: 4px; dreapta: 15px;  .post-autor-text, .post-text font-size: 13px; culoare: #fff; margin-bottom: 5px; text-align: justify; linia-înălțime: 18px;  .avatar-32 float: right; margin-dreapta: 35px; margin-top: -4px;  h3 margine-stânga: 5px;  

Comentarii

Am menționat șablonul de comentarii în ultimul pas. Acum trebuie să definim asta. Pentru a face acest lucru, deschideți comments.php.

Securitate și titlu

Trebuie să rețineți că acesta este un șablon. Și ca atare, trebuie să fim flexibili. Nu toate blogurile vor dori ca comentariile să fie activate. Unii vor dori numai comentarii private. Ai idee. Această primă parte este destul de standardă pentru multe șabloane, dar trebuie să verificăm dacă comentariile sunt deschise, ce tip de post este, apoi introduceți titlul zonei de comentariu. Facem acest lucru cu următorul cod:

 post_password) && $ _COOKIE ['wp-postpass_'. COOKIEHASH]! = $ Post-> post_password):?> 

Afișați comentariile

Acum trebuie să afișăm comentarii. În primul rând, trebuie să verificăm dacă avem comentarii despre post. Apoi vom începe o buclă foreach și vom tipări fiecare comentariu:

   
  • „>


    Editați acest "),"); ?>

Comentariu RSS Feed / Trackback URL

O altă caracteristică destul de standard este includerea unui flux RSS pentru comentariile fiecărei postări, precum și un URL trackback. Trebuie să vizăm o fereastră nouă pentru ca jQTouch să funcționeze corect. Acest lucru complică Comentariile RSS un pic, pentru că nu există o funcție din tema WordPress din cutie pe care o putem folosi că putem specifica o țintă goală. Din fericire, convenția WordPress este practic doar post url / feed. Prin urmare, putem crea propriile noastre:

 
  • / feed "target =" _ blank "> Comentarii post RSS
  • "target =" _ blank "> URL-ul Trackback

Lasa un comentariu

Acum vom adăuga capacitatea de a adăuga un comentariu. În primul rând, trebuie să verificați dacă comentariile sunt deschise (există o funcție pentru asta). Apoi adăugați un titlu, permițând utilizatorului să știe că pot. Apoi trebuie să verificăm dacă cineva poate lăsa un comentariu sau dacă trebuie să fiți înregistrat. Apoi deschidem formularul. Atunci vom crea o formă în stilul jQTouch. Apoi închidem totul. Ar trebui să înțeleagă mai jos:

  

    /wp-login.php?action=logout "title ="„>

Comentariul dvs. va apărea după aprobare.

ID); ?>

Pagini

De asemenea, trebuie să ne asigurăm că acoperim paginile din această temă. În cadrul index.php, trebuie să afișăm toate paginile dintr-un meniu. Apoi ne putem conecta la conținutul propriu-zis al paginilor, așa cum am făcut-o cu postările din blog. Este foarte simplu să listați paginile din WordPress. Vom adăuga însă un parametru. Implicit, funcția de șablon va adăuga un element din lista de titluri. Vom remedia acest lucru:

 

Pagini de site

Acasă

Pagini

Page.php

Page.php este versiunea de pagină a single.php a postului. Acestea fiind spuse, va fi și un fișier foarte asemănător.

  

Postare pe blog

Pagini
  • „>

    De:

Ne pare rău, nicio pagină nu corespunde criteriilor dvs..

Ce??

Acum avem o temă WordPress utilizabilă pe care oricine o poate folosi pentru a ajunge la publicul mobil de pe blogul WordPress de pe desktop. Dar ce acum? Există încă mult spațiu pentru îmbunătățire pe această temă (ar putea exista un tutorial privind adăugarea funcționalității de căutare, sau poate că nu există cine știe;] - scrieți un comentariu dacă doriți să vedeți unul) și de aceea Îl eliberez ca o sursă deschisă pentru comunitate să folosească și să se îmbunătățească. Puteți descărca și accesa proiectul la adresa http://code.google.com/p/wp-mobile/. Îi încurajez pe toată lumea să o folosească și să o facă proprie. Mi-ar plăcea să văd unii oameni care folosesc acest lucru, așa că asigurați-vă că vă trimiteți un link către un e-mail! Ce părere ai!

Cod