Realizarea Unei Teme Web Responsive Pentru Platforma WordPress Cms

Byadmin

Realizarea unei teme web responsive pentru platforma wordpress cms

Cuprins

CAPITOLUL I. Introducere

CAPITOLUL II. Tehnologii folosite

2.1. WordPress

2.2. PHP

2.3. MySQL

2.4. HTML

2.5. CSS

2.6. JavaScript

2.7. Bootstrap

2.8. Responsive Web Design

CAPITOLUL III. Prezentarea lucrării

3.1. Descriere

3.2. Structura

3.3. Implementare

CAPITOLUL IV. Concluzii

Bibliografie

CAPITOLUL I. Introducere

Lucrarea de față are ca și scop realizarea unei teme web responsive pentru platforma WordPress . Această temă este de tip portofoliu având ca scop prezentarea personală a utilizatorului, fiind o temă simplă și ușor de utilizat.

Tema este realizată cu ajutorul platformei WordPress CMS (Content Management System), o platformă cu un sistem flexibil și ușor de folosit. Este disponibilă gratuit și este dedicată în general atât publicării personale cât și pentru crearea unor aplicații web complexe (ex: magazin online folosind e-commerce etc).

În ceea ce privește tehnologiile folosite pentru dezvoltarea acestei teme, am folosit în mare parte PHP, CSS, HTML. Tema este alcătuită din două părți principale, partea din față (frontend) și partea din spate (backend). Frontend-ul reprezinta design-ul aplicației și poate fi accesat de către toți vizitatorii site-ului iar backend-ul reprezintă partea de administrare a aplicației accesibilă doar de către utilizatorul temei.

CAPITOLUL II. Tehnologii folosite

2.1. WordPress

WordPress CMS (Content Management System) este o platformă de tip sursă deschisă pentru a crea și menține un web-site sau blog. Platforma WordPress CMS este în totalitate scrisă in limbajul PHP și folosește pentru gestionarea bazelor de date sistemul MySql. Totodată folosește limbajele HTML și CSS pentru a putea dispune de un sistem de șabloane complex.

WordPress fost prima dată lansat de către Matt Mullenweg în 27 mai 2003 ca dezvoltator principal pentru blog-uri, dar în timp transformandu-se intr-o platformă puternică cu caracteristici complete, extrem de personalizabil pentru a putea a crea aproape orice tip de site-uri web.

Caracteristici

WordPress este o platformă puternică de publicare semantică, și vine cu un set mare de caracteristici concepute pentru a trăi o experiență ca editor pe internet pe cât posibil de ușoară, plăcută și atrăgătoare. Platforma este distribuită gratuit indiferent de scopul pentru care este utilizată, fie pentru un blog personal cât și pentru site-ul unei companii. WordPress este cea mai de încredere și complexă platformă pentru managementul unui blog având o gamă foarte largă de funcționalități și o interfață extrem de personalizabilă, astfel ea putând fi modificată din codul sursă pentru a putea optimiza sau adăuga în funcție de preferințele utilizatorului.

Facilitățile WordPress include plugin-uri sau add-on-uri și teme (aspectul interfeței cu unitilizatorul). WordPress este folosit de peste 14, 7% din site-urile din  top 1 milion monitorizate de Alexa.com. Totodată aproximatix 22% din noile site-uri, sunt construite pe platforma WordPress, iar în jur de 60 de milioane de site-uri folosesc deja WordPress. Platforma WordPress o putem caracteriza prin simplitatea și numeroasele plugin-uri de care dispune, create de către dezvoltatori dar și de către utilizatori. Plugin-urile constituie un avantaj enorm, ele au puterea de a modifica funcționalitatea WordPress-ului ca apoi transformandu-l în aproape orice tip de web-site (ex: magazin online, blog etc).

Teme

O temă WordPress este o colecție de fișiere care lucrează împreună pentru a produce o interfață grafică cu un design unificator care stau la baza unui weblog. Aceste fișiere sunt numite fișiere șablon. O temă modifică modul în care site-ul este afișat, fără a modifica software-ul de bază. Temele pot include fișiere personalizate șablon, fișiere imagine (*.jpg, *.gif), foi de stil (*.css), pagini personalizate, precum și orice alte fișiere de cod necesare (*.php).

Utilizatorii WordPress au posibilitatea de a instala și a schimba temele pentru blog-ul sau site-ul dorit. Cu ajutorul temelor utilizatorii pot schimba funcționalitatea și aspectul unui site WordPress, fără a afecta conținutul și structura site-ului. Temele pot fi instalate cu ajutorul instrumentului de administrare din interfața utilizator numit “Appearance” sau folderele acestora pot fi încărcate direct în folderul “Themes”, fie local sau pe server prin intermediul FTP (File Transfer Protocol). Temele sunt bazate pe PHP, HTML, CSS și pot fi modificate, incluzând astfel facilități noi sau modificându-le aspectul pentru furnizarea unor caracteristici avansate.

La ora actuală există mii de teme pentru WordPress, unele gratuite, altele premium (cu plată) fiecare având un set de caracteristici și funcționalități diferite în funcție de nevoile utilizatorului. Utilizatorii WordPres pot de asemenea crea și dezvolta propriile teme dacă au cunoștința și abilitatea necesară de a face acest lucru.

Șabloane

Șabloanele sunt fișierele care controlează modul în care site-ul WordPress va fi afișat pe web. Aceste fișiere obține informațiile din baza de date MySql pentru a genera codul HTML care este trimis către browser-ul web. Prin intermediul sistemului său, WordPress permite utilizatorului să definească oricâte șabloane are nevoie pentru o singură tema. Fiecare dintre aceste fișiere pot fi configurate pentru a putea fi utilizate în situații diferite.

Șabloanele WordPress se potrivesc ca piesele unui puzzle pentru a genera paginile web de pe site-ul utilizatorului. Unele șabloane (șabloanele antet și subsol, de exemplu) sunt utilizate pe toate paginile web, în timp ce altele sunt utilizate numai în anumite condiții.

Diagrama din figură prezintă ordinea accesării șabloanelor pentru crearea paginilor WordPress.

Figura 1. Ierarhia Șabloanelor WordPress

Plugin-uri

Plugin-urile sunt niște instrumente pentru a putea extinde funcționalitatea WordPress-ului, el fiind proiectat pentru a avea o interfață cât mai flexibilă și maleabilă. Folosirea plugin-urilor este o facilitate foarte populară și importantă, care permite utilizatorilor și dezvoltatorilor să îmunătățească un site WordPress cu caracteristici aditionale celor standard.

Figura 2. Interfața cu plugin-uri

Există o bază de date de peste 30 de mii de plugin-uri gratuite pe site-ul WordPress.org fiecare dintre acestea oferind funcții personalizate și caracteristici astfel încât fiecare utilizator poate adapta site-ul lor la nevoile lui specifice. Acestea adaugă sau modifică facilități, cum ar fi SEO (Search Engine Optimization – optimizarea pentru motoarele de căutare), adăugarea de slidere de imagini, formulare, widget-uri, bare de navigare și așa mai departe. Plugin-urile pot fi de asemenea gratuite sau premium în funcție de complexitatea și funcționalitatea acestora.

Widget-uri

Widget-urile sunt mici module care oferă posibilitatea de drag-and-drop a conținutului pe barele laterale a site-ului. Unele din aceste widget-uri adaugă facilități ca formulare de contact sau de cerere ofertă, afișarea unei liste de categorii, arhive, galerie de imagini și multe altele.

Widget-urile au fost inițial concepute pentru a oferi utilizatorului control asupra aspectului și structurii temei WordPress printr-un mod simplu și ușor De obicei aceste module sunt afișate în antet, pe bara laterală sau în subsolul paginii, dar acestea pot fi afișate și in alte locații de pe site numai prin personalizarea facută de către un programator cu ajutorul proprietății “widgetized” pentru a le putea include și în altă parte a structurii site-ului. Ordinea și plasarea widget-urilor este stabiliă de către tema WordPress prin intermediul fișierului functions.php.

Folosirea widget-urilor nu necesită nici o experiență în domeniu dezvoltării web sau a programării. Ele pot fi adăugate, șterse, rearanjate prin intermediul panoului “Widgets” de pe pagina de administrare a WordPress-ului. Unele widget-uri oferă personalizare și opțiuni, cum ar fi formulare de completat, include sau exclude date și informații, imagini opționale, precum și alte caracteristici de personalizare.

Mobilitate – Responsive

Există și aplicații native WordPress pentru WebOS, iOS, Android, Windows Phone, BlackBerry. Aplicațiile oferă o gamă limitată de facilități, care include crearea sau actualizarea de articole și pagini, adăugarea de imagini și link-uri.

WordPress dispune totodata si de tehnologia Responsive, astfel însemnând că aspectul este flexibil și conținutul se adaptează vizualizării pe PC, tableta și smartphone-uri.

Alte caracteristici

WordPress oferă tehnologia multi-site. Este aceeași tehnologie care alimentează mai mult de 20 de milioane de site-uri de pe WordPress.com și site-uri la nivel mondial, cum ar fi CNN și New York Times. Tehnologia multi-site permite utilizatorilor să aibă un control administrativ complet asupra site-ului lor, fără nici o problemă de securitate. Fiecare site poate avea propriul său aspect (teme), propria funcționalitate (de plug-in-uri), și de a gestiona proprii săi utilizatori, între timp ce politicile de la nivelul întregii rețele și actualizările de securitate pot fi accesate la un click distanță.

WordPress de asemenea mai oferă și integrated link management ; o structura de linkuri prietenoasă, are abilitatea de a lega multiple categorii de articole și ofera suport pentru etichetarea articolelor și post-urilor. Mai sunt incluse și filtrele automate, furnizând formatare standardizată și stilizarea textului în articole (ex: convertirea ghilimelelor simple în ghilimele deștepte). WordPress mai dispune de standardele Trackback și Pingback pentru afișarea link-urilor către alte site-uri care sunt legate de un post sau articol.

WordPress.org vs WordPress.com

Diferența majoră dintre WordPress.org si WordPress.com este cine găzduiește site-ul utilizatorului. Cu WordPress.org utilizatorul își găzduiește propriul site sau blog, și are acces la software-ul gratuit WordPress de unde se poate descărca și instala pe serverul web propriu. Pe de altă parte, WordPress.com, are grijă de găzduirea site-ului utilizatorului și nu necesită descărcarea software-ului, plătirea găzduirii site-ului sau gestionarea serverului web.

2.2. PHP

Introducere

PHP este un limbaj de programare ideal pentru dezvolarea unei pagini web dinamice. Sintaxa lui provine din limbajele Java, Perl și C, este un limbaj open-source, poate fi rulat pe mai multe platforme și se poate conecta la mai multe tipuri de baze de date. Scopul lui este de a oferi programatorilor web crearea rapidă a paginilor web generate dinamic.

PHP poate genera conținut HTML pe baza unor fișiere existente sau pornind de la zero, astfel afișând o imagine sau orice alt conținut accesibil prin web. În cadrul procesului, PHP poate să consulte baza de date, fișierele externe sau alte resurse, poate sa trimită e-mail-uri sau poate executa comenzi ale sistemului de operare.

Diferența față de alte limbaje de scripting (ex: JavaScript) este faptul că PHP este un interpretor server-side, adică operațiile fiind executate de către server și nu pe calculatorul utilizatorului. Pentru a testa paginile create în PHP e nevoie de un server web și pachetul PHP instalat.

La început PHP a fost creat ca și o simplă platformă de scripting numită „Personal Home Page”. Numele de PHP provine din limba engleză și este un acronim recursiv, pentru PHP: Hypertext Preprocessor. Site-ul PHP.net este practic un manual online și deține toate informațiile necesare despre acest limbaj care este întreținut de către comunitatea din jurul proiectului. Raspunsurile la multe dintre problemele întâmpinate pot fi găsite pe acest site și este recomandat atât pentru începători cât și pentru programatorii cu experiență.

Caracteristici

Pe scurt, PHP-ul este unul din cele mai folosite limbaje de programare server-side, conform unui studiu efectuat de către Netcraft prin aprilie 2002, apărând pe 9 din cele 37 milioane de domenii cercetate în studiu și de asemenea și este recomandat atât pentru începători cât și pentru programatorii cu experiență.

Caracteristici

Pe scurt, PHP-ul este unul din cele mai folosite limbaje de programare server-side, conform unui studiu efectuat de către Netcraft prin aprilie 2002, apărând pe 9 din cele 37 milioane de domenii cercetate în studiu și de asemenea există un grafic al creșterii folosirii PHP-ului pe site-ul oficial. Popularitatea de care se bucură acest limbaj de programare se datorează următoarelor caracteristici :

Faptul ca este disponibil în mod gratuit, probabil este cea mai importantă caracteristică a PHP-ului, dezvoltarea PHP-ului sub licența open-source a determinat adaptarea rapidă a PHP-ului la nevoile Web-ului, eficientizarea și securizarea codului.

PHP dispune de o structură foarte simplaă iar sintaxa limbajului este destul de liberă; nu este nevoie de includere de directive de compilare sau de alte biblioteci, codul PHP este inclus într-un document executându-se între marcajele speciale.

Accesibilitatea este o altă caracteristică importantă, fiind disponibil și aflandu-se la dispoziția oamenilor și pe alte browsere sau device-uri.

PHP-ul se folosește de mecanisme de alocare a resurselor, ele fiind foarte necesare unui mediu multiuser, așa cum este Web-ul, eficiența acestuia crescând considerabil.

În ceea ce priveste securitatea, PHP-ul pune la dispoziția programatorului un set flexibil și eficient de măsuri de siguranță.

Flexibilitatea este o caracteristica vizibilă, PHP fiind modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnologii și nefiind legat de un anumit server web, PHP-ul a fost integrat pentru numeroasele servere web existente: Apache, IIS, Zeus, server, etc.

PHP poate fi rulat pe majoritatea sistemele de operare, începând de la Linux, mai multe variante Unix (inclusiv HP-UX, Solaris și OpenBSD), Windows, Mac OS X, RISC OS și altele. PHP poate interacționa, de asemenea, cu majoritatea dintre serverele web din ziua de azi, acestea incluzând Apache, IIS, și multe altele.

Sintaxa de bază

Regulile de bază ale PHP-ului sunt după cum urmează:

Denumirea fișierelor. Pentru a face un script PHP să meargă, fișierul în care se află sau fișierul sursă trebuie să se termine în extensia .php. Ca și HTML, fisierele sunt salvate ca text.

Comentarii. Un lucru important, este obiceiul de a lăsa comentarii asupra codului creat, astfel încât peste mai mult timp de pauză să se înțeleagă cu ușurință ce anume vrea să însemne codul respectiv. Modul în care se pun comentariile (ele nu vor fi afișate sau executate ca și cod) este cu ajutorul “//” la începutul fiecărei linii sau pe mai multe linii totul fiind înconjurat în tag-urile “/*” și “*/”.

În exemplul următor va fi prezentat un cod în PHP ce afișează un simplu mesaj și comentarii în interiorul codului în diferite moduri :

<?php

# acesta este un comentariu pe o singură linie

// un alt comentariu pe o singură linie

/* în comentariul pe mai multe linii

se pot comenta linii de cod php

echo 'acesta este un echo comentat';

*/

echo 'Hello World!';

?>

Codul PHP de asemenea poate fi și imbricat în cod HTML:

<!DOCTYPE html>

<html>

<head> <title> PHP test page </title> </head>

<body>

<p>

<?php print (‘Hello World!’); ?>

</p>

</body>

</html>

La fel ca HTML, formatarea efectivă a codului PHP (în cazul în care sunt spații, sfârșituri de linie, etc.- cum se poate observa în codul de mai sus cum funcția „print ( )” este scrisa pe o singură linie, față de funcția “echo ( )” care este scrisă pe un alt rând) nu va afecta rezultatul cu excepția acelor părți ale codului care spun browser-ului cum să afișseze pagina. Se cuvine să se utilizeze spațiu și identare pentru a face codul mai ușor de înțeles.

Fiecare bucată de cod PHP incepe cu tag-ul „<?php” (sau prescurtat „<?” dacă serverul este configurat să suporte această prescurtare) și pentru a incheia codul PHP scris se finalizează cu tag-ul „?>”. Cu câteva excepții, fiecare instrucțiune separată se va termina cu punct și virgulă.

Funcția „print( )” este una dintre exceptiile ce merge și fara punct și virgulă.

Pașii pentru crearea unei pagini PHP

Pentru a crea o simplă pagină PHP funcționabilă, codul de mai sus poate fi salvat într-un fișier cu orice nume, fara spații, ce se termină în extensia .php (ex: numefișier.php). Se instalează un server local, apoi se salvează fișierul respectiv în folderul root al serverului (ex: wwwroot, htdocs etc.)

Următorul pas este de a deschide fișierul în browser. Din moment ce e nevoie de un server pentru a rula codul PHP, fișierul trebuie deschis printr-un URL pentru a găsi fișierul corespunzător prin web server. În funcție de configurația serverului, calea către fișier ar trebui să arate asemănător cu http://localhost/numefișier.php.

Dacă este configurat corect si totul a decurs bine și fără alte erori, PHP va trimite conținutul către server, iar serverul va răspunde browser-ului în următorul format:

<html>

<head> <title> PHP test page</title> </head>

<body>

<p>Hello World</p>

</body>

</html>

După cum se observă, tag-urile PHP, au dispărut, tocmai din cauza ca tag-urile PHP sunt trimise către server iar mai apoi acestea sunt transformate dinamic și astfel rezultând conținutul paginii.

2.3. MySQL

Despre MySQL

MySQL este un sistem de gestiune a bazelor de date relaționale (SGBDR), este cel mai popular și cel mai folosit SGBDR open-source la ora actuală el fiind o component principală a stivei LAMP (Linux, Apache, MySQL, PHP)

Numele aplicației vine de la fiica co-fondatorul Michael Widenius pe nume My, iar SQL este abrevierea la Strductured QueryLanguage. În prezent această aplicație este deținută de către o companie suedeză gigant, important în soluții IT, acest gigant poartă numele de Oracle Corporation.

O bază de date reprezintă o colecție de date structurate, acestea pot fi de la o simplă listă de cumărături până la o galerie foto sau pot deține vaste informați într-o rețea corporativă. MySql se folosește foarte des în combinație cu PHP, adesea este numit Duo-ul Dinamic, acesta are puterea mult mai mare fiind capabil să realizeze aplicații în orice limbaj de programare major.

Această tehnologie este o componentă completă a platformelor LAMP sau WAMP, aceste prescurtări derivând de la Linux/Windows-Apache-PHP/Perl/Python. MySQL este cel mai ușor de folosit și de învățat decât multe din aplicațiile de gestiune a bazelor de date, asta confirmând multe dintre cărțile de specialitate.

Pentru administrarea bazelor de date folosind MySql există mai multe posibilități, se poate folosi o interfață grafică precum phpMyAdmin sau sau de altfel se poate folosi linia de comandă. Acesta poate fi rulat pe mai multe tipuri de sisteme de operare existente, cum ar fi: FreeBSD, Linux, Mac OS X, pe Windows XP/Vista/7/8.

Pentru uzul comercial, exista mai multe ediții plătite disponibile, ele oferind multe alte funcționalități suplimentare. Aplicațiile ce folosesc baza de date MySQL sunt următoarele: TYPO3, MODx, Joomla, WordPress, phpBB, MyBB, Drupal și multe alte software-uri. MySQL este, de asemenea, utilizat în site-uri de rang înalt pe piața web, cum ar fi: Google, Facebook, Flickr, Twitter și YouTube.

Proiectarea unei baze de date

Când se crează un tabel într-o bază de date este important să se țină cont de “cheia primară”. Coloanele dintr-un tabel trebuie să se bazeze pe cheia primară în totalitatea sa. O altă operație importantă este specificarea unui tip de date pentru fiecare coloană.

Majoritatea bazelor de date relaționale acceptă următoarele tipuri de date generale:

Caracter

Întreg

Zecimal

Data și ora

Binar

În tabelul de mai sus este prezentat un rezumat al tipurilor de date cele mai frecvent utilizate, acceptate de MySQL și de majoritatea bazelor de date relaționale. MySQL are capacitatea de a accepta mult mai multe tipuri de date, dar acestea sunt cel mai mult folosite.

Câteva indicații generale pentru selectarea tipurilor de date:

Se alege BLOB ca tip pentru datele ce nu necesită manipulare

Se alege un tip de dată sau oră adecvat pentru coloanele care conțin date calendaristice sau ore

Se alege un tip numeric pentru coloanele folosite pentru mai multe calcule:

Pentru cantități foarte mari sau mici, se alege DOUBLE ca tip de date

Pentru coloane ce conțin numere fară partea zecimală, de dimensiuni medii, se alege SMALLINT sau INTEGER

Pentru alte coloane ce conțin date numerice, se alege DECIMAL ca tip de date

CHAR sau VARCHAR este de preferat pentru celelalte coloane, chiar și pentru cele care conțin cifre, cum ar fi cod postal.

Crearea, ștergerea și modificarea unui tabel în MySQL

Utilizatorul unei baze de date are posibilitatea de a efectua mai multe categorii comenzi asupra datelor stocate în baza de date, cum ar fi:

INSERT – adăugarea de date în coloana specificată

DELETE – ștergerea unora din datele existente

UPDATE – permite actualizarea rândurilor care conțin coloana specificată

QUERY – interogarea bazei de date, pentru a afla anumite informații, selectate după un criteriu ales

Pentru a crea o bază de date se folosește comanda:

CREATE DATABASE nume_db;

Înainte de a crea un tabel in baza de date, prima data se acceseaza, folosind comanda “USE” apoi se pot crea tabele cu ajutorul “CREATE TABLE” sau se poate șterge cu “ALTER TABLE” :

USE nume_db;

CREATE TABLE carte(carteID CHAR(10), titlu VARCHAR (255), pret DECIMAL(5,2));

DROP TABLE tabel;

2.4. HTML

Introducere

HTML este prescurtarea de la Hypertext Markup Language și este un set de simboluri de marcare sau coduri inserate într-un fișier destinat pentru afișarea pe o pagină WWW. Marcajul spune browser-ului Web cum să afișeze în pagină cuvintele și imaginile pentru utilizator. Fiecare cod de marcare individual este menționat ca un element (dar majoritatea utilizatorilor se referă la el ca o etichetă).

HTML are un format de tip text, el fiind proiectat pentru a putea fi citit de către utilizatori folosind un editor de text simplu. HTML poate fi generat direct de către tehnologii de codare de tip server-side cum ar fi PHP, ASP sau JSP. HTML este, de asemenea, utilizat în e-mail, majoritatea aplicațiilor de e-mail folosind un editor HTML pentru compunerea acestora și un motor de prezentare a e-mail-urilor de acest tip.

Noțiuni de bază

Paginile HTML au extensia .html și sunt formate din tag-uri sau etichete, marea majoritate a tag-urilor sunt alcătuite din perechi, una de deschidere <tag> și cealaltă de închidere </tag>, mai sunt și unele exceptii, atunci când unele tag-uri nu se închid, ele folosind <tag /> . HTML-ul nu este un limbaj de programare case sensitive, adica nu face deosebirea între literele mari și mici.

Componentele unui document HTML sunt:

Versiunea HTML a documentului

Zona Head cu tag-urile <head> </head>

Zona Body cu tag-urile <body> </body>

Ultima versiune este HTML5 și în continuare este în curs de dezvoltare, ea aducând o multitudine de îmbunătățiri și elemente noi, cum ar fi:

Elemente semantice / structurale

<article> – definește un articol în document

<footer> – definește subsolul documentului sau o secțiune

<header> – definește antetul documentului sau o secțiune

<aside> – definește conținut pe langă conținutul paginii

<section> – definește o secțiune în document

Elemente pentru formulare

<datalist> – definește opțiunile predefinite pentru controale de intrare

<keyegen> – definește un domeniu generator de chei-pereche, pentru formulare

<output> – definește rezultatul unui calcul

Elemente de grafică

<canvas> – definește desenarea grafică folosind JavaScript

<svg> – definește desenarea grafică folosind SVG

Elemente media

<audio> – definește sunetul sau conținutul audio

<video> – definește conținutul video

<embed> – definește containerele pentru aplicații externe (cum ar fi plug-in-urile)

<source> – definește sursa pentru <video> și <audio>

Structura unei pagini HTML

Crearea unui document simplu HTML

Pașii în crearea unui nou document HTML sunt foarte simpli și nu necesită niciun fel de cunoștințe de programare:

Cu un editor de text se scrie codul de mai jos după care se salvează în general cu numele de index.html, ca fiind pagina principala.

Se deschide fișierul cu un browser (ex: Google Chrome) și se poate observa titlul paginii scris între tag-urile <title> </title> din secțiunea head, și conținutul din body.

<!DOCTYPE html>

<html>

<head> <title> Titlul Site-ului </title> </head>

<body>

<p> O descriere a site-ului </p>

</body>

</html>

După cum se observă, tag-urile PHP, au dispărut, din cauza ca tag-urile PHP sunt trimise către server iar apoi acestea sunt transformate dinamic și astfel rezultând conținutul paginii.

2.5. CSS

Acronimul CSS provine din limba engleză de la Cascading Style Sheets, tradus “foi de stil în cascadă”, și este un standard pentru formatarea elementelor unui document HTML. În zilele noastre CSS a ajuns să fie un limbaj exclusiv doar pentru web design, însă el poate fi folosit și în alte medii de programare.

CSS nu necesită cunoștințe avansate în domeniul programării web, dar cum CSS conlucreaza implicit cu HTML, cunoștințele de bază sunt necesare. El este utilizat atât de către autorii cât si de către cititorii paginii web, pentru a define color, layout, fonturi, sau alte aspecte legate de prezentarea documentelor. Pe lângă HTML, foile de stil se pot utiliza și pentru formatarea elementelor XHTML, XML și SVGL prin intermediul unor fișiere externe sau în cadrul documentului cu ajutorul elementului <style> sau atributul style.

Versiunea CSS3 reprezintă ultimul upgrade în prezent, aducând câteva atribute noi și ajuntând la dezvoltarea web design-ului. Mai jos sunt numerotate câteva dintre modulele noi adâugate pentru formatarea elementelor HTML :

Selectori

Modele de tip cutie

Fundaluri și Borders

Valori de imagine și conținut înlocuit

Efecte de text

Transformări 2D/3D

Animații

Layout-uri de coloane multiple

Interfață utilizator

Noțiuni de bază

Obiectele CSS, indiferent de ce tip sunt, ele au în componență următoarele elemente de bază:

Selectorii – identifică un obiect, ei pot fi de tip etichete HTML, clase sau identificatori

Proprietăți – identifică o proprietate a obiectului, referindu-se în general la aspect

Valorile – sunt atributele unei proprietăți, ele pot fi cuvinte cheie, valori numerice sau procentuale.

Sintaxa generală a undei reguli CSS: selector {proprietate:valoare;}

O declararație în CSS se termină mereu cu caracterul “ ; “ (punct și virgulă), iar grupul de declarații este scris în acolade “{ }”.

Un exemplu de cod simplu în CSS:

p {

font-family: Comic Sans MS;

font-size:11px;

color: #808080;

}

sau

p{font-family:Comic Sans MS;font-size:11px;color:#808080;}

Codul de mai sus resultă în următorul rând:

Acesta este un text cu fontul Comic Sans MS,dimensiunea de 11 pixeli și culoarea gri.

Stilurile pentru o pagină pot fi definite în partea de Head a documentului HTML (intern), se pot defini intr-un fișier CSS extern, sau se poate aplica câte un stil diferit la fiecare tag HTML din secțiunea Body (in-line).

Folosirea unui fișier extern CSS este mult mai util deoarece poate fi folosit în mai multe situații, un fișier CSS poate fi folosit pentru mai multe fișiere HTML iar timpul necesar reintroducerii codului în fiecare pagină este eliminat.

Legătura paginilor HTML cu fișierele extene CSS se face prin intermediul liniei:

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

Comenzile încorporate (embedded) sunt cele găzduite între perechea de tag-uri <head> și </head> din conținutul fișierului.

Comenzile în linie (inline) sunt cele mai folosite, ele suprascriu orice altă comandă CSS. Sunt amplasate în interiorul etichetelor HTML aflate în zona Body.

2.6. JavaScript

JavaScript sau JS prescurtat, este unul dintre cele mai cunoscute limbaje de programare, este un limbaj orientat pe obiecte bazat pe conceptual prototipurilor. Este utilizat pentru realizarea unor sarcini dinamice obținute prin intermediul unui limbaj de marcare, cum ar fi HTML, scripturile fiind interpretate și executate de către browser. La început a fost lansat sub numele de “LiveScript” dar mai apoi s-a schimbat în JavaScript, aceasta fiind o strategie de marketing.

JS face posibil ca paginile să fie mai interactive, de exemplu, chestionarele și sondajele de opinie sunt create cu ajutorul limbajului interpretativ JavaScript. Cu ajutorul lui JavaScript se poate manipula foarte ușor conținutul paginilor web în funcție de data, ora, sistemul de operare folosit sau browser, creănd astfel site-uri interactive care să comunice cu vizitatorii, validarea conținutului unui formular, crearea animațiilor personalizate, site-uri dinamice și multe altele.

Noțiuni generale

Extinderea paginilor HTML sau XHTML prin folosirea limbajului JavaScript conferă paginilor web mai multă putere iar documentelor HTML respectiv HTML mai multă flexibilitate. Prin inserarea unui script în documentele HTML/XHTML, JS permite programatorilor să creeze pagini web dinamice.

Scripturile JavaScript sunt inserate cu ajutorul tag-urilor de început și de sfârșit: <script> cod JS </script>.

Tag-ul <script> conține următoarele atribute:

Type – indică tipul limbajului de script

Ex: <script type=”text/JavaScript”>

..cod JS..

</script>

Language – identifică limbajul de script și versiunea

Ex: <script type=”text/JavaScript” language=”JavaScript”>

..cod JS..

</script>

Src – precizeaza url-ul fișierului extern ce conține script-ul

Ex: <script type=”text/JavaScript” src=”script.js”>

..cod JS..

</script>

2.7. Bootstrap

Bootstrap este o colecție gratuită de instrumente pentru crearea de site-uri și aplicații web. Acesta conține șabloane HTML și sunt bazate pe CSS pentru tipografie, formulare, butoane, navigare și alte componente de interfață, precum și extensii opționale JavaScript.

În august 2011, Twitter a lansat Bootstrap ca și open source iar în februarie 2012 a fost cel mai cautat proiect de dezvoltare de pe GitHub, menținându-și poziția și la ora actuală.

Caracteristici

Bootstrap este compatibil cu cele mai recente versiuni ale tuturor browserelor importante. Se degradează cu grație atunci când este utilizat în browserele mai vechi, cum ar fi Internet Explorer 8.

Începând cu versiunea 2.0 sprijină, de asemenea, web design receptiv. Acest lucru înseamnă că aspectul de pagini web se ajustează dinamic, luând în considerare caracteristicile dispozitivului utilizat (desktop, tabletă, telefon mobil, etc). Odată cu versiunea 3.0, Bootstrap a adoptat o filosofie de design mobil, subliniind un design receptiv în mod implicit.

Bootstrap este un framework open source și este disponibil pe GitHub. Dezvoltatorii sunt încurajați să participe la proiect și de a face propriile contribuții la aceasta platforma.

Structura și funcționalitate

La baza dezvoltării framework-ului Bootstrap stă pre-procesorul LESS, a fost ales datorită vitezei de compilare a codului foarte mare (de 6 ori mai bună decât SASS) și pentru flexibilitate în ceea ce privește utilizarea JavaScript-ului. El oferă dezvoltatorului posibilitatea ajustării design-ului prin definirea sau setarea unui set de variabile/parametri și recompilarea surselor LESS ca apoi rezultând un set de fișiere CSS.

El are la bază un sistem grid (având o lățime de 1170 pixeli) și vine cu tehnologia responsive design. Alternativ, dezvoltatorul poate utiliza un layout de lățime variabilă. Pentru ambele cazuri, setul de instrumente are patru variante pentru a se putea folosi de diferite rezoluții și tipuri de dispozitive:

telefoane mobile

portret si peisaj

tablete și PC-uri cu rezoluție mică și mare. Fiecare variație reglează lățimea coloanelor.

Bootstrap oferă un set de foi de stil, care oferă definiții de stil de bază pentru toate componentele cheie HTML. Acestea oferă o uniformă, aspect modern pentru formatarea textului, tabelelor și elemente de formulare.

Pe lângă elementele HTML regulate, Bootstrap conține alte elemente de interfață utilizate frecvent. Acestea includ butoane cu funcții avansate (de exemplu, gruparea de butoane sau butoane cu opțiune drop-down, face și liste de navigare, tab-uri orizontale si verticale, navigare, paginare, etc), etichete, capabilități avansate tipografice, miniaturi, mesaje de avertizare și bară de progres.

Bootstrap vine cu mai multe componente JavaScript în formă de plugin-uri jQuery. Ele oferă elemente suplimentare de interfață cu utilizatorul, cum ar fi casete de dialog, ponturi și carusele. Acestea extind și funcționalitatea unor elemente de interfață existente, inclusiv o funcție de auto-completare pentru câmpurile de introducere.

Pentru această temă am implementat framework-ul Bootstrap pentru mai multe componente:

Navigator – acesta este full-responsive fiind adaptabil la orice tip de ecran;

Fig.2. Navigator Bootstrap Responsive

<nav class="navbar navbar-inverse" role="navigation">

<div class="container-fluid container">

<!– Brand and toggle get grouped for better mobile display –>

<div class="navbar-header">

<h1><a class="navbar-brand" href="#">Navigation</a></h1>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<?php wp_nav_menu( array('menu'=> 'primary','theme_location'=> 'primary','depth'=> 2,'container'=> 'div', 'container_class'=> 'collapse navbar-collapse container', 'container_id'=> 'bs-example-navbar-collapse-1','menu_class'=> 'nav navbar-nav','fallback_cb'=> 'wp_bootstrap_navwalker::fallback','walker'=> new wp_bootstrap_navwalker()));

?>

</div>

</nav>

Codul sursă pentru navigator este inclus în partea de antet din punct de vedere structural, sau mai bine zis în șablonul de header.php

Tabs – am folosit o interfață a documentelor pe file (de tip tabbing) pentru pagina de galerie, pentru a putea schimba categoriile imaginilor adăugate de către administrator; de asemenea funcționează și în varianta responsive.

Codul pentru interfața documentelor pe file, este alcătuit din două părti, prima parte semnificând tab-urile în sine cu afișând numele categoriilor pe fiecare tab, iar a doua parte constituie conținutul documentelor, mai exact imaginile afișate în funcție de categoria selectată.

Tab-urile de navigare

<ul class="nav nav-tabs">

<?php

$args=array('orderby' => 'name','order' => 'ASC','taxonomy' => 'categories');

$categories=get_categories($args);

foreach($categories as $category) {

echo '<li><a href="#tab-' . $category->name . '" data-toggle="tab" title="' . sprintf( __( "View all pictures in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a> </li> '; }

?>

</ul>

Conținutul tab-urilor

<div class="tab-content et_pt_gallery clearfix ">

<?php

$args=array('orderby' => 'name','order' => 'ASC','taxonomy' => 'categories');

$categories=get_categories($args);

foreach($categories as $category) {

echo '<div class="tab-pane fade in active" id="tab-' . $category->name . '">';

$gallery_cat = $category->name;

$query = new WP_Query( array('post_type' => 'galleries','categories' => $gallery_cat));

if ( $query->have_posts() ) : while ($query-> have_posts() ) : $query->the_post(); ?>

<div class="et_pt_gallery_entry">

<div class="et_pt_item_image">

<a href="<?php the_field('image')?>" rel="lightbox"><img src="<?php the_field('image')?>"> </a>

</div>

</div>

<?php endwhile; endif; wp_reset_query(); echo '</div>'; } ?>

</div>

Fig. 3. Interfața documentelor pe file + responsive

2.8. Responsive Web Design

Conceptul de responsive web design (RWB) sau web design receptiv este o abordare relativ nouă în materie de web design,referindu-se la procesul de design și dezvoltare al unui website astfel încât să poată fi capabil să răspundă la acțiunile vizitatorului detectând dispozitivul de pe care este vizualizat : desktop, tabletă sau telefon, oferind o foarte bună experiență pentru o bună navigare.

Teoria din spatele unui design responsive presupune utilizarea unor tehnici de codare CSS si HTML dar și de optimizare a imaginilor, grid-uri fluide, astfel încat website-ul să se poată adapta oricărui dispozitiv. Cu alte cuvinte, Responsive Web Design reprezintă tehnica ce sugerează ca design-ul web și codarea unui website trebuie să răspundă comportamentului și mediului utilizatorului în funcție de rezoluția ecranului, platform și orientare.

În mai 2010, Ethan Marcotte a introdus pentru prima oară conceptual de responsive web design, subiectul fiind abordat într-un articol scris de el pentru “A List Apart”. El a folosit trei instrumente principale pentru a crea un site care arată bine la diferite rezoluții, acestea fiind:

Griduri fluide. Ele au luat locul celor fixe datorită multitudinii de rezoluții existente în present, acestea bazându-se pe calculul proporțiilor și iși pot modifica lățimea și înălțimea în funcție de rezoluție, astfel dimensiunile masurându-se în procente și unități relative.

Imagini flexibile. Imaginile își pot modifica dimensiunile în funcție de rezoluția dispozitivului și dimensiunea gridului. Este recomandat ca fiecare poză să fie salvată pe server sau local în mai multe dimensiuni, ca mai apoi când este încarcată pe site pentru a se potrivi rezoluției pentru respectivul dispozitiv.

Interogările media sau media queries. Reprezintă un procedeu efficient de a încarca diferite proprietăți CSS în funcție de rezoluție. Site-ul recunoaște automat tipul dispozitivului și rezoluția acestuia încărcând proprietățile CSS corespunzătoare.

Avantaje

Există doar o singură versiune care funcționează bine pe orice dispozitiv, astfel nefiind necesare versiuni special de mobil care trebuiesc dezvoltate separate.

Posibilitate de sharing (distribuire) a aceluiași URL (link) între diverse dispositive.

Dispune de o experiență bună de navigare adaptându-se rezoluției, astfel eliminând erorile de navigare, scroll-ul orizontal, ascunderea butoanelor prea mici pentru rezoluția selectată etc.

Dezavantaje

Timp prelungit pentru dezvoltare, astfel apar și costuri mari.

Apar probleme la incompatibilități între browsere sau erori de afișare.

Dificultăți datorate faptului că acest concept introduce un nou nivel de complexitate a layout-urilor.

Fig. 4. Responsive Design, ecran desktop și telefon

CAPITOLUL III. Prezentarea lucrării

3.1. Descriere

Lucrarea constă în realizarea unei teme de tip portofoliu sau blog pentru platforma WordPress CMS. Tabelele din baza de date a temei sunt generate automat de către WordPress, făcând legătura dintre interfața utilizator a WordPress-ului și baza de date la instalare prin intermediul fișierului wp-config.php

Tema este alcătuită din două părți principale:

Front-end – este partea de design a temei unde toți vizitatorii blogului au acces; ei pot decât să lase comentarii, sa trimită feedback-uri sau e-mail-uri prin intermediul paginii de contact.

Back-end – este partea de administrare a temei, unde doar administratorul sau administratorii au acces, este partea de unde se controlează tot ce este vizibil pe partea de front-end al site-ului, cum ar fi: adăugarea, ștergerea sau modificarea paginilor, acceptarea sau anularea comentariilor postate de către vizitatorii blogului, adaugarea sau stergerea plugin-urilor respectiv widget-urilor etc.

3.2. Structura

Harta temei

Fig. 5. Ierarhia șabloanelor în ordinea funcționalității lor

În figura de mai sus este prezentată ierarhia completă de șabloane a temei. Se citește de la dreapta la stânga finalizând cu șablonul “index.php”.

Ierarhia fișierelor șablon – Generalități

WordPress foloseste Query String – informații conținute în fiecare link pe site pentru a decide care șablon sau set de șabloane vor fi utilizate pentru a afișa pagina.

În primul rând, WordPress potrivește fiecare interogare șir cu interogarea tipuri – adică se decide ce tip de pagină (o pagină de căutare, o pagină categorie, pagina de start, etc), se solicită. Șabloanele sunt apoi alese și conținutul paginii web este generat în ordinea sugerată de către ierarhia șabloanelor WordPress.

WordPress caută fișierele șablon cu nume specific în directorul temei curente și folosește primul fișier șablon ce se potrivește enumerat în secțiunea de interogare corespunzătoare de mai jos.

Cu excepția fișierului șablon de bază index.php, dezvoltatorii temelor WordPress pot alege dacă doresc să pună în aplicare un anumit fișier șablon sau nu. Dacă WordPress nu poate găsi un fișier șablon cu un nume de potrivire, se sare la următorul nume de fișier din ierarhie. Dacă WordPress nu poate găsi nici un fișier șablon de potrivire, index.php (șablonul principal al temei), va fi utilizat.

De exemplu, dacă pagina blog are următoarea cale: http://exemplu.org/blog/ și un vizitator accesează un link către o pagină de categorie, http://exemplu/blog/categoria/noutăți/. Mai jos  voi prezenta cum trebuie să se comporte WordPress folosind ierarhia șabloanelor pentru a găsi și de a genera fișierul corect.

WordPress caută un fișier șablon în directorul temei curente care se potrivește cu ID-ul categoriei:

Dacă ID-ul categoriei este 5, WordPress caută un fișier șablon numit category-5.php.

Dacă lipsește, mai departe, WordPress caută un fișier șablon generic de tip cateogrie, category.php.

Dacă nici acest fișier nu există,  WordPress caută un fișier șablon generic de tip arhivă, archive.php.

Dacă și acesta lipsește, WordPress se întoarce la șablonul principal al temei, index.php.

Dacă un vizitator accesează pagina de Blog, http://exemplu.org/blog :

WordPress determină mai întâi dacă are o pagină de start statică. Dacă pagina de start a fost setată, WordPress încarcă pagina în funcție de ierarhia paginilor șabloane.

În cazul în care pagina de start statică nu a fost setată, WordPress caută după fișierul șablon home.php și îl folosește pentru a genera pagina solicitată.

Dacă și home.php lipsește, WordPress caută dupa fișierul index.php în directorul temei activate și folosește acel șablon pentru a genera pagina.

3.3. Implementare

Ierarhia șabloanelor în detaliu

Următoarele secțiuni descriu ordinea în care fișierele șablon sunt accesate de către WordPress pentru fiecare tip de interogare.

Pagina șablon “Home”

Șablonul Home este utilizat pentru a genera postările de pe pagina de Blog, afișându-le pe pagina principala sau pe o pagină statică. Un lucru important, este acela că șablonul Front Page de pe pagina principala are prioritate față de șablonul Home.

Mai jos este afișat codul din interiorul șablonului Home care generează postările publicate de către administrator din partea de backend al site-ului:

<?php get_header(); ?>

<div class="grid_12 omega clearfix">

<div class="grid_8">

<?php if (have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', 'post' ); ?>

<?php endwhile; endif; ?>

</div>

<div class="grid_4 omega blog-sidebar">

<?php if ( dynamic_sidebar( 'blog_sidebar' ) ): ?>

<?php else: ?>

<h5>Widget 1</h5>

<p>Place a widget in the widget area</p>

<?php endif; ?>

</div>

</div>

<?php

if ( function_exists('paging') ) {

    paging();

}

?>

<?php get_footer(); ?>

Mai departe, voi prezenta codul de mai sus în câteva cuvinte:

funcțiile get_header() și get_footer() includ fișierele șabloane header.php respectiv footer.php din directorul temei curente. Ele pot accepta ca parametru un alt nume al șablonului decât cel default, ex: footer-nume.php, deci get_footer(‘nume’).

funcția get_template_part(‘content’, ‘post’), încarcă o parte șablon într-un șablon (altele decât bara laterală, subsol sau antet). După cum se observă, funcția acceptă doi parametri, numele de slug pentru șablonul generic (‘content’) și numele pentru șablonul de specialitate (‘post’).

dynamic_sidebar (‘blod_sidebar’) – această funcție apelează fiecare widget activ în ordinea lor din backend, care mai departe afișează conținutul lor pe bara laterală (sidebar).

funcția function_exists (‘paging’), verifică dacă funcția paging() există, apoi o execută.

Fig. 6. Pagina șablon home.php

Pagina șablon “Front Page” sau pagina de start

Fișierul șablon front-page.php este utilizat pentru a genera informațiile pentru pagina de start a site-ului. Șablonul de Front Page are prioritate față de șablonul Home pentru blog. Codul din interiorul fișierului l-am prezentat în mai multe secțiuni pentru o ordonare și ințelegere a codului mai bună:

Sețiunea Homepage Slider

<?php get_header(); ?>

</div><!– End of Header –>

<div id="featured" class="clearfix flexslider">

<ul class="slides">

<?php $args = array('post_type' => 'work');

$the_query = new WP_Query( $args ); ?>

<?php if (have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<li style="background-color: <?php the_field('background_color'); ?>">

<div class="container">

<div class="grid_8">

<a href="<?php the_permalink(); ?>"> <img class="crop" src="<?php the_field('homepage_slider_image'); ?>" alt="<?php the_title(); ?> Project Screenshot">

</a>

</div>

<div id="featured-info" class="grid_4 omega">

<h5>Featured Project</h5>

<p><?php the_field( 'excerpt' ); ?></p>

<h3 style="color: <?php the_field('button_color'); ?>"><?php the_title(); ?></h3>

<a class="btn blue" style="background-color:<?php the_field('button_color'); ?>" href="<?php the_permalink(); ?>">View Project &rarr;</a>

</div>

</div> <!– End of container –>

</li>

<?php endwhile; endif; ?>

</ul>

</div> <!– End of Featured Slider –>

În această secțiune, după cum îi spune și numele, avem prezentat un slider de tip full-width, adică lățimea acestuia având dimensiunea ecranului. Acest slider face legătura cu proiectele adăugate de către utilizator, astfel afișându-le în pagina de start a site-ului în ordinea adăugării lor. Afișarea proiectelor în slider-ul de pe pagina de start este opțională, astfel se poate selecta care proiecte să apară în slider.

Secțiunea Work, ce conține proiectele adăugate, a fost creată prin intermediul tipului de post personalizat (custom post type), funcționalitatea fiind asemănătoare cu post-urile default create de către WordPress. A fost creată cu ajutorul unei matrici ce apelează tipul de post personalizat Work. În continuare avem o condiție care verifică dacă avem proiect, mai apoi extrăgând datele adăugate de către utilizator la crearea unui proiect, cum ar fi: imagini ( the_field(‘homepage_slider_image’) ), culoarea fundalului respectiv culoarea butonului ( the_field(‘background_color’/’button_color’) ), titlul proiectului ( the_title() ).

Secțiunea Featured Posts

<div class="grid_12 omega">

<h5>Featured Post</h5>

</div>

<?php

$args = array('post_type' => 'post','category_name' => 'featured','posts_per_page' => 1);

$the_query = new WP_Query( $args );

?>

<?php if (have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<div class="push_1 grid_11 omega clearfix">

<article>

<?php get_template_part('content', 'post'); ?>

</article>

</div>

<?php endwhile; endif; ?>

Featured posts, afișeaza toate posturile din categoria “Featured” în pagina de start. Întotdeauna afișează ultimul post adăugat în categoria “Featured” (‘category_name’ => ‘featured’, ‘posts_per_page’=> 1)

Această secțiune folosește un alt șablon, acesta fiind content-post.php, cu ajutorul căruia are afișate mai multe detalii, cum ar fi: de către cine a fost adăugat postul, în ce dată a fost adăugat, categoriile din care face parte postul și câte comentarii are postarea respectivă.

Secțiunea Recent Posts

<div class="grid_6 recent-post">

<article>

<h5>Recent Posts</h5>

<?php

$args = array('post_type' => 'post','cat' => -1,'posts_per_page' => 2);

$the_query = new WP_Query( $args );

?>

<?php if (have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<?php get_template_part( 'content', 'post' ); ?>

<?php endwhile; endif; ?>

</article>

</div>

Mai departe avem un cod asemănator celui de mai sus, având câteva funcționalități diferite. Această secțiune are rolul de a afișa ultimele două postări adăugate recent. De asemenea folosește șablonul content-post.php pentru afișarea detaliilor din conținutul unui post.

Secțiunea Latest Project

<?php

$args = array('post_type' => 'work','posts_per_page' => 1);

$the_query = new WP_Query( $args );

?>

<?php if (have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<?php get_template_part( 'content', 'work' ); ?>

<?php endwhile; endif; ?>

Această secțiune afișează ultimul proiect adăugat pe pagina de start a site-ului, pentru o bună. El folosește șablonul content-work.php pentru afișarea detaliilor

Fig. 7. Featured post, Recent post, Latest Project

Pagina șablon de “Single Post”

Acest șablon este folosit pentru generarea unei pagini de tip single post. Ordinea prioritară a generării șabloanelor este următoarea:

single-{post_type}.php – prima dată au prioritate cele de tip post_type, în cazul de față, single-galleries.php și single-work.php

dacă nu există, folosește șablonul default, respectiv single.php

iar dacă nu există șablonul de single.php creat, trece la index.php

În tema prezentată, structura șablonului single.php este modificată, astfel schimband funcționalitatea de default. El accesează un alt șablon, respectiv content-post.php, acesta fiind apelat cu ajutorul funcției get_template_part(). Se observă ca șablonul content-post.php este folosit și în pagina de start. Șabloanele pot fi generalizate, ca apoi sa poată fi apelate în mai multe fisiere șabloane deodată, astfel ușurând munca dezvoltatorului, constituind un avantaj enorm.

Conținutul șabloanelor single-galleries.php și single-work.php au în spate un cod relativ simplu și foarte ușor de înțeles.

<?php if (have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h3><?php the_title(); ?></h3>

<div class="intro"> <p><?php the_field( 'description' ); ?></p> </div> <hr>

<div class="project-images"> <?php the_field( 'project_images' ); ?> </div>

<p> <a class="btn blue" href="<?php print $_SERVER['HTTP_REFERER'];?>" style="background-color: <?php the_field('button_color'); ?>">

Go Back &larrhk;</a>

</p>

<?php endwhile; endif; ?>

Fig.8. Conținutul șablonului single-work.php

verifică dacă sunt adăugate posture de tip proiecte, dacă condiția este adevărată, afișează conținutul proiectului ce conține titlul acestuia, descrierea proiectului, imagini și mai jos un buton de “Go Back” care te întoarce înapoi pe pagina de proiecte.

codul pentru single-galleries.php este foarte asemănător cu cel de mai sus, el generând o imagine cu o scurtă descriere a acesteia.

CAPITOLUL IV. Concluzii

În această lucrare a fost prezentată o aplicație web responsive, mai exact o temă WordPress de tip portofoliu sau blog, concepută pentru uz personal. Pe parcursul lucrării au fost prezentate elementele principale utilizate de către platforma WordPress pentru crearea unei teme. Tema a fost creată de la zero, fără vreun framework special pentru teme WordPress (ex: Thematic) sau alte teme simple deja create modificându-le ulterior.

În Capitolul II sunt prezentate toate tehnologiile utilizate pentru proiectarea acestei teme WordPress. Acest capitol se poate considera a fi o sursa de documentație pentru eventualele proiecte sau pur și simplu, de ce nu, un plus în cultura generală a cititorului în ceea ce privește tehnologiile web folosite în ziua de astăzi.

Capitolul III prezintă realizarea efectivă a aplicatiei web, pornind de la descrierea temei pana la structura și implementarea acesteia. În acest capitol s-au atins toate punctele importante în realizarea unei teme pentru platforma WordPress CMS.

Am ales platforma WordPress deoarece în primul rând este un program gratuit și disponibil pentru dezvoltarea web. Este o platforma foarte flexibilă în utilizare atât pentru programatori cât și pentru utilizatorii de rând și dispune de un set extins teme sau de plugin-uri aproape pentru orice funcționalitate. Un avantaj important al WordPress-ului este că îți crează automat tabelele din baza de date fară ca dezvoltatorul să fie nevoit sa le adauge manual.

Dezvoltarea continuă a acestei aplicații constituie în sine o metodă de îmbunătățire din mai multe puncte de vedere, cum ar fi: adăugarea mai multor interfețe grafice, adăugarea unor noi funcționalități etc.

Bibliografie

[1] – http://codex.wordpress.org/Theme_Development

[2] – http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

[3] – http://www.qualitytuts.com/wordpress-custom-breadcrumbs-without-plugin/

[4] – http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/

[5] – Tutorial despre implementarea bootstrap intr-o temă WP – http://youtu.be/N5ulK2e8P48

[6] – http://www.siteground.com/tutorials/wordpress/wordpress_create_theme.html/

[7] – https://www.worldit.info/articole/cum-sa-programezi-o-tema-wordpress/

[8] – http://ro.wikipedia.org/wiki/WordPress

[9] – http://www.webmonkey.com/2010/02/php_tutorial_for_beginners/

[10] – http://php.about.com/od/learnphp/p/learn_php_free.htm

[11] – http://php.net/manual/en/intro-whatis.php

[12] – http://en.wikipedia.org/wiki/MySQL

[13] – http://www.w3schools.com/sql/default.asp

[14] – http://en.wikipedia.org/wiki/MySQL

[15] – http://www.yourhtmlsource.com/starthere/whatishtml.html

[16] – http://www.marplo.net/curs_css/introducere.html

[17] – http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

[18] – http://webblog.bestwebimage.ro/2014/03/ce-inseamna-design-responsive/

[16] – http://www.codecademy.com/

Bibliografie

[1] – http://codex.wordpress.org/Theme_Development

[2] – http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

[3] – http://www.qualitytuts.com/wordpress-custom-breadcrumbs-without-plugin/

[4] – http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/

[5] – Tutorial despre implementarea bootstrap intr-o temă WP – http://youtu.be/N5ulK2e8P48

[6] – http://www.siteground.com/tutorials/wordpress/wordpress_create_theme.html/

[7] – https://www.worldit.info/articole/cum-sa-programezi-o-tema-wordpress/

[8] – http://ro.wikipedia.org/wiki/WordPress

[9] – http://www.webmonkey.com/2010/02/php_tutorial_for_beginners/

[10] – http://php.about.com/od/learnphp/p/learn_php_free.htm

[11] – http://php.net/manual/en/intro-whatis.php

[12] – http://en.wikipedia.org/wiki/MySQL

[13] – http://www.w3schools.com/sql/default.asp

[14] – http://en.wikipedia.org/wiki/MySQL

[15] – http://www.yourhtmlsource.com/starthere/whatishtml.html

[16] – http://www.marplo.net/curs_css/introducere.html

[17] – http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

[18] – http://webblog.bestwebimage.ro/2014/03/ce-inseamna-design-responsive/

[16] – http://www.codecademy.com/

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Realizarea Unei Teme Web Responsive Pentru Platforma WordPress Cms (ID: 150342)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Similar Posts