Mobile Wordpress Theming Ziua 3

Bine ați venit la cea mai recentă tranșă de Mobile WordPress Theming. Săptămâna trecută, am creat versiunea HTML a temei WordPress pe care o vom crea în acest tutorial. Până la sfârșitul acestui tutorial, vom avea o temă de bază WordPress care poate fi aplicată pe orice site WordPress existent. Săptămâna viitoare, îl vom împacheta și vom termina. Să mergem imediat la asta!

WordPress Theming Mindset

Pentru acei cititori care nu sunt familiarizați cu crearea de teme WordPress, înainte de a începe să le faceți, trebuie să înțelegeți câteva principii fundamentale ale modului în care funcționează WordPress. WordPress este un cadru de blogare. Acesta este conceput pentru a servi conținutul utilizatorului în cel mai flexibil mod posibil. WordPress vă stochează conținutul și vă oferă instrumentele necesare pentru ao servi așa cum doriți. Prin "jupuirea" datelor WordPress servește, un proces cunoscut și sub numele de "theming", puteți distinge aspectul blogului dvs. Ori de câte ori doriți să schimbați sau să îmbunătățiți un site WordPress, trebuie să scrieți un plugin sau să creați o temă. Pluginurile sunt potrivite dacă modificați sau adăugați funcționalități de bază WordPress. Cu toate acestea, dacă doriți să modificați stilul WordPress, atunci editați sau creați o temă. Nu modificați direct codul WordPress direct. Acest lucru va afecta probabil WordPress, mai ales atunci când aveți nevoie să actualizați versiunile mai târziu.

Început Naked

Cu excepția cazului în care sunteți extrem de inovatoare și unice, aproape toate temele WordPress au aceeași bază. Toți au nevoie de un antet, un corp, un subsol, un stil de bază etc. De fapt, în loc să reinventăm roata, vom folosi o "temă dezbrăcată". După cum sugerează și numele, o temă dezbrăcată este cea mai albastră posibilă. În general, în afară de resetări, există un stil foarte luminos și fragmentul util ocazional pe care îl veți folosi probabil în proiectul dvs. Există o mulțime de soiuri de teme goale pe net. Deci, în funcție de proiect, ați putea decide un altul. Nu există o temă cea mai bună. Pentru acest proiect, am decis să folosesc WordPress-naked. Puteți lua o copie la pagina lor de cod Google. Pentru o mare colecție de teme goale, puteți vizita, de asemenea, articolul speckboy.com.

Instalarea WordPress

Acum avem nevoie de o instalare WordPress la temă. Puteți instala unul pe server dacă aveți unul sau îl instalați local.

Server

Dacă instalați la nivel local, asigurați-vă că aveți un server local de testare. Pentru Windows, WAMP sau EasyPHP sunt alegeri bune. În cazul în Linux, verificați XAMP. Dacă pe un Mac, verificați MAMP. Pentru acest tutorial, vom rula MAMP.

WordPress

Doar du-te la WordPress.org pentru a descărca cea mai recentă versiune de WordPress.

Instalați WordPress pe server

Copiați directorul WordPress în directorul serverului și instalați-l. Acesta nu este un tutorial despre instalarea WordPress. Există o mulțime de tutoriale care fac asta deja ca aceasta.

După ce ați instalat WordPress, copiați directorul tematic gol în wp-content / teme director. Apoi conectați-vă la WordPress, mergeți la Aspect> Teme și selectați-i pe cei goi.

"Îmbrăcați tema"

Acum, că avem tema activă, putem să o schimbăm și să o vedem imediat. Mai întâi, schimbați informațiile tematice care se află în partea superioară a stilului .css. Aici declarați numele temei, autorul etc. În acest caz, l-am modificat după cum urmează:

 / ** Tema Nume: MyTouch Tema URI: http://www.connorzwick.com Versiune: .9 Autor: Connor Zwick Autor URI: http://www.connorzwick.com Tags: simplu, mobil, jqtouch, ajax Licență: GPL Descriere: O temă creată în spiritul felixibilității. Permite oricui să aleagă ca temă mobilă. * /

Antet

WordPress examinează mai întâi fișierul index.php din directorul tematic. Acest fișier este modul în care restul fișierelor tematice sunt încorporate. Dacă te uiți la ea, vei vedea că prima apucă tot conținutul din antet. Aici trebuie să începem. Începeți prin a șterge totul de la Doctype până la eticheta și lipirea în următoarele:

     <?php if(is_home()) bloginfo('name'); else wp_title("); ?>

Acest lucru este copiat direct din capul a ceea ce am făcut săptămâna trecută, cu excepția a două lucruri. Veți observa că toate legăturile la fișierele JS, CSS sau Image au fost prefixate de fragmentul de șablon PHP. Aceasta este o funcție WordPress care va reda adresa URL a fișierului șablon. Acest lucru va ajuta la rezolvarea oricăror probleme pe care le-am avea cu legarea la fișiere statice, deoarece acum le-am legat în mod dinamic de acestea. În al doilea rând, veți observa că ne-am conectat la o foaie de stil în loc să punem toate stilul nostru direct în antetul nostru. Acest lucru este doar pentru dragul neatness. Acestea fiind spuse, dacă urmăriți împreună cu propriile fișiere, asigurați-vă că copiați și inserați stilul în stil.css

După cum puteți vedea, doar prin adăugarea legăturilor antet, jQTouch lucrează deja la magia sa.

Coafura

După cum am menționat mai devreme, am aruncat tot stilul într-o foaie de stil. De asemenea, putem să ștergem presetările pe care le-a primit tema goală. Când totul este spus și făcut, foaia de stil ar trebui să arate cam așa:

 / ** Tema Nume: MyTouch Tema URI: http://www.connorzwick.com Versiune: .9 Autor: Connor Zwick Autor URI: http://www.connorzwick.com Tags: simplu, mobil, jqtouch, ajax Licență: GPL Descriere: O temă creată în spiritul felixibilității. Permite oricui să aleagă ca temă mobilă. * / body.fullscreen #home .info display: none;  #about padding: 100px 10px 40px; text-umbra: rgba (255, 255, 255, 0.3) 0px -1px 0; font-size: 13px; text-align: centru; fundal: # 161618;  #pentru p margin-bottom: 8px;  #about a color: #fff; font-weight: bold; text-decoration: nici unul;  / * Începeți personalizarea aici * / .blog-title border-bottom: 1px solid # 333333;  span.blog-title culoare: #fff; lățime: 100%; afișare: bloc; padding-bottom: 10px;  .post-descriere, .post-autor font-size: 12px; margin-stânga: 75px;  .post-descriere min-height: 75px;  .post-autor margin-bottom: 3px;  .post, .page-author font-size: 13px; culoare: #fff; margin-bottom: 5px;  #blog. înclinată li poziție: relativă;  lună poziție: absolută; lățime: 70px; text-align: centru; fundal: # aa3939; culoare: # f5f2f2; linie-înălțime: 28px; padding-bottom: 5px; raza de sus-dreapta-stânga: 4px; raza de sus-dreapta-dreapta: 4px; . data position: absolute; lățime: 70px; margin-top: 25px; font-size: 40px; text-align: centru; fundal: # f5f2f2; raza de jos-stânga-dreapta: 4px; raza de jos-dreapta-dreapta: 4px;

Acest lucru este aproape exact ceea ce am creat săptămâna trecută. Vom adăuga stilul aici dacă avem nevoie de alte personalizări.

index.php

Din nou, index.php este fișierul care include restul fișierelor tematice. În primul rând, trebuie să sunăm la fișierul header.php. Este destul de simplu:

Acum putem relua din nou fragmentele din săptămâna trecută. Vom începe cu corpul:

    Site-ul WordPress
 Despre

Ne-am oprit în fața elementului din meniul blogului pentru un motiv. Nu vrem ca elementul de blog să fie o opțiune dacă nu avem nicio postare, așa că trebuie să introducem mai multe WordPress PHP aici:

  Articole de blog 12

Practic, verificăm dacă avem posturi cu funcția have_posts () și, dacă facem, afișăm elementul din meniu. Dacă nu, nu afișăm nimic. Probabil că am putea să scăpăm doar cu faptul că am lăsat în afară și eticheta altceva, dar vreau să arăt că dacă doriți să puneți ceva de genul "Fără postări pe blog chiar acum", ați putea. Apoi tocmai am încheiat declarația IF

Acum putem să lipim în mai multe conținuturi din săptămâna trecută:

 Pagini 2
  Linkuri externe
  Abonati-va
 Stare de nervozitate
 Pagina desktop
 
  E-mail
 Dona
 
  Adăugați această pagină în ecranul de întâmpinare pentru a vedea pictograma personalizată, ecranul de pornire și modul ecran complet.

Temă mobilă
Versiunea 0.1 beta
De Connor Zwick

Împingeți conținutul pe mai multe frontiere către toate dispozitivele mobile conectate la internet
folosind celebrul WordPress CMS și JQTouch.

@connorzwick pe Twitter

Închide

Pagini de site

Acasă

Pagini

Despre
Istorie

Ne-am oprit din nou, deoarece adăugăm și altceva în această săptămână. Săptămâna trecută am demonstrat capabilitățile AJAX ale jQTouch prin prinderea blog.html și încărcarea acestuia. Acum, însă, cu integrarea cu WordPress, este mult mai simplu să folosim doar o etichetă de ancorare a aceleiași pagini. Așa că am integrat porțiunea de blog pe pagina index.php.

Ceea ce vom face mai întâi este să verificăm că avem din nou postări. Apoi, vom iniția o buclă în timp și vom crea un element de listă neordonat pentru fiecare element de blog. În interiorul acestei bucăți, puteți vedea că am folosit mai multe funcții de șablon WordPress. Toate sunt destul de explicative. Pentru moment, M este o scurtătură pentru o abreviere de trei litere a lunii și j reprezintă numărul zilei fără numărul 0 (adică 9 nu 09).

   Blog
 Acasă 
  Aceasta este o scurtă descriere a blogului. Aici descrieți scopul. 
     „>
 
 
 De: 
 Citeste mai mult„)); ?>

Apoi restul paginii:

   Pagini de site
 Acasă 
 Pagini
  Despre
 Istorie
 
 
   Pagini de site
 Acasă 
  Titlul postului
 De: Connor Zwick
 Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea sau nu să citească mai mult. Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea sau nu să citească mai mult. Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea să citească mai mult.

În final, vom include un fișier subsol. Pentru această temă, fișierul subsol nu este utilizat, deci într-adevăr nu avem nevoie de el. Dar părăsesc tema deschisă, așa că o vom include oricum. Pentru această temă, vom dori doar etichetă acolo.

PHP Eliminați P din Conținut

Așa cum ați fi observat. Textul extras din articolele din blog este mai mare decât ar trebui să fie. Motivul este că am folosit funcția the_content (), care împachetează extrasul într-o etichetă suplimentară p. Cum rezolvăm acest lucru? Trebuie să adăugăm o linie în partea de sus a fișierului index.php:

Învelire

Acum totul pare corect. Dar mai sunt încă multe lucruri care trebuie acoperite ca postări individuale, căutare, paginare și comentarii înainte ca aceasta să fie o temă completă și utilă! Sper că ați învățat foarte mult și asigurați-vă că ați verificat postul final din această serie săptămâna viitoare!

Cod