Për të, patjetër që do t'ju duhet të shtoni një temë. Ata quhen gjithashtu shabllone. Ky është shtylla kurrizore e çdo burimi në internet.

Ky artikull do të diskutojë fazat e krijimit të një shablloni dhe do të përshkruajë paraqitjen e skedarëve psd.

Do të mësoni gjithashtu për kërkesat themelore teknike për temat e WordPress, çfarë duhet të jetë një shabllon që të jetë. Si rezultat, ju mund të krijoni një faqe interneti me temën tuaj që përputhet saktësisht me kërkesat tuaja.

Ju lutemi vini re se ky tutorial nuk përfshin një përshkrim të shtimit të një teme të gatshme - ky është një manual për gjenerimin e shabllonit tuaj. Nëse e keni shkarkuar temën dhe nuk dini si ta instaloni, atëherë shkoni te seksioni "Paraqitja" dhe shtoni një nga modelet e disponueshme atje. Dhe tani le të hedhim një vështrim më të afërt se çfarë është një temë, për çfarë shërben dhe si ta krijoni vetë.

Për çfarë qëllimesh krijohet një temë manualisht

Një temë (shabllon) është një koleksion skedarësh funksionalë dhe stili që së bashku përcaktojnë dizajnin e një burimi. Tema varet nga mënyra se si do të duket faqja, prandaj është shumë e rëndësishme t'i qaseni saktë procesit të krijimit të një shablloni. Shumë tani po bëjnë pyetjen: "Pse të krijoni temën tuaj nëse mund të shkarkoni një të gatshme në internet dhe falas?" Kjo është një pyetje logjike dhe ka një përgjigje plotësisht gjithëpërfshirëse për të: "Për të bërë shabllonin e përsosur që plotëson plotësisht kërkesat tuaja."

Kur blini ose shkarkoni një dizajn nga një direktori me shabllone falas të WordPress, zakonisht sakrifikoni cilësinë. Si rregull, këto shabllone nuk ju përshtaten gjithçkaje. Por ju përuleni veten, mendoj se një ose dy nuanca nuk janë e gjithë tabloja dhe se më vonë do ta redaktoni temën. Por në fakt, rezulton se faqja mbetet me një temë të papërfunduar që nuk ju pëlqen. Prandaj, është më mirë të bëni gjërat tuaja menjëherë. Dhe megjithëse paraqitja mund të duket e ndërlikuar në fillim, por më pas, kur të mësoni, mund të krijoni edhe shabllone sipas porosisë.

Për më tepër, pasi të krijoni një shabllon, do të ndiheni si një "mjek" i WordPress - do të dini se çfarë ka brenda sajti. Kuptoni se cilët elementë janë përgjegjës për çfarë. Pastaj faqja dhe ju do të flisni me ju. Njihuni me etiketat, strukturën dhe sythe të WordPress. Ose ndoshta dëshironi ta bëni atë në mënyrë profesionale dhe të filloni të bëni jetesën duke krijuar shabllone.

Pra, këtu janë arsyet kryesore pse duhet të krijoni shabllonin tuaj të internetit:

• mësoni gjithçka rreth HTML, CSS dhe një ose dy gjëra rreth PHP;
• do të mund të krijoni, sepse edhe dizajni i ueb-it është art;
• do të jetë e mundur të fitoni para duke shitur tema;
• zbuloni një aftësi të re;
• krijoni një dizajn që do të jetë 100% i përshtatshëm për faqen tuaj të ardhshme.

Çfarë standardesh plotëson tema?

Është shumë e rëndësishme të ndiqni udhëzimet zyrtare kur shkruani shabllonin tuaj. Thyerja e kodit, futja e një etikete në vendin e gabuar dhe anashkalimi i tij - kjo mund të dëmtojë dizajnin dhe të prishë plotësisht pamjen e tij. Ju duhet të njiheni me rregullat për të shkruar kodin PHP, si dhe HTML nëse nuk jeni tashmë të njohur me këto gjuhë. Ju gjithashtu duhet të merreni me fletët e stilit CSS në kaskadë, kështu që mbani mend edhe bazat - ka shumë informacione në internet për këtë. Epo, dhe kërkesa e fundit më pak e rëndësishme është të krijoni një faqe interneti si një stilist, jo si një nxënës shkolle, në mënyrë që të merrni një projekt serioz. Përndryshe, nuk ka kuptim të merreni me këtë biznes.

Të gjitha temat e WordPress janë pritur në dosjen wp-content / themes /. Brenda kësaj dosjeje ka dosje të tjera me tema të veçanta, një skedar me funksione shtesë (functions.php), skedarë stili dhe imazhe. Për të gjetur të dhëna për një temë të caktuar, duhet të shkoni në drejtorinë përkatëse. Kjo do ta vendosë temën "Perëndimore" në dosjen wp-content / themes / vestern /.

Para se të filloni, duhet të paktën t'i hidhni një sy strukturës së temave tuaja të paracaktuara. Faqja e parazgjedhur e WordPress përmban dy shabllone standarde që mund t'i shfletoni. Ky është shablloni i parazgjedhur dhe klasik. Hapni skedarët e tyre në drejtorinë e kërkuar në server dhe krahasoni dallimet e tyre.

Do të vini re se shablloni zakonisht përbëhet nga tre formate skedari:

1. Style.css - një skedar stili përgjegjës për dizajnin e jashtëm të faqes.
2. Functions.php - një skedar funksional që shton veçori të ndryshme në faqe.
3. Skedarë të tjerë php që janë përgjegjës për veçoritë e shfaqjes së shabllonit në sit, integrimin e temës me WordPress. Janë këta skedarë që ju lejojnë të përktheni paraqitjen e psd në një shabllon të plotë.

Le t'i hedhim një vështrim më të afërt secilit prej këtyre skedarëve për të kuptuar se si shkon faqosja e temës së WordPress.

Rregullat për krijimin e skedarit style.css

Së pari, duhet të përputhet me të gjitha specifikat e shënimit CSS. Ky skedar përcakton se si do të duket faqja juaj. Por nuk do të funksionojë nëse nuk shtoni një përshkrim të shabllonit të krijuar në të. Kjo është veçoria e parë e WordPress që duhet marrë parasysh kur transferoni një plan urbanistik psd në motorin WordPress. Ju duhet të specifikoni parametrat e mëposhtëm:

1. Emri i shabllonit.
2. URL-ja që të çon në temë.
3. Përshkrimi që tregon veçoritë kryesore të shabllonit. Shkurtimisht.
4. Emri i autorit. Në këtë rast, shkruani emrin tuaj.
5. Lidhje me autorin, pra me ju. Ju mund të siguroni një lidhje me profilin tuaj në rrjetet sociale.
6. Emri i temës mëmë është fakultativ.
7. Versioni i temës. Nëse krijohet vetëm, atëherë v. 1.0.
8. Përshkrimi i plotë i shabllonit. Mund të shkruani në detaje.

Për të krijuar temën më themelore të WordPress, gjithçka që duhet të bëni është të shtoni një version të redaktuar me një skedar style.css. Në këtë skedar, pranë rreshtit "shabllon", specifikoni emrin e temës mëmë. Për shembull, Classic nëse po redaktoni një shabllon standard. Tani tema e krijuar do të përputhet plotësisht me shabllonin Classic. Prandaj, do t'ju duhet të ngarkoni skedarët në drejtorinë wp-content / themes / classic.

Kështu, ju mund të krijoni temën tuaj të parë, më të thjeshtë, e cila do të jetë një "pasardhës" i një shablloni të përgatitur tashmë. Por ky nuk do të jetë një dizajn i plotë i faqes, por vetëm një përpjekje për ta krijuar atë, kështu që duhet të vazhdoni të hulumtoni.

Karakteristikat e skedarit të funksionalitetit shtesë funksionet.php

Shabllonet nuk përdorin gjithmonë skedarin functions.php, por në shumicën e rasteve është i nevojshëm. Duhet të vendoset në drejtorinë me temën përkatëse. Ju lutemi vini re se nëse ky skedar është në dosjen e shabllonit, atëherë ai do të merret parasysh gjatë inicializimit të temës. Ajo funksionon si një shtojcë. Dhe do të kryejë funksione të tilla që ju i jepni.

Qëllimi kryesor i skedarit functions.php është të përcaktojë funksionet e disponueshme të personalizimit në administrator për një temë të caktuar. Kjo do të thotë, të gjitha funksionet që futni në functions.php do të shfaqen në panelin e administratorit, ose në faqen për përdoruesin. Në mënyrë tipike, kjo është ndryshimi i skemës së ngjyrave për faqen e WordPress, ndryshimi i fontit dhe shumë më tepër. Por ka shumë përdorime për këtë skedar. Megjithatë, kjo është një histori krejtësisht e ndryshme ...

Karakteristikat e skedarëve të shablloneve php

Skedarët php do të jenë përgjegjës për pjesët individuale të faqes. Ato përcaktojnë si faqet përbërëse ashtu edhe titujt, kategoritë dhe seksionet e tjera që do të shfaqen para përdoruesit. Meqenëse ju jeni krijuesi i temës tani, ju takon juve të vendosni se cilët dhe sa skedarë shabllonesh të zgjidhni. Pas zgjedhjes së tyre, funksionet e reja do të shfaqen në panelin tuaj të administratorit. Sa më pak skedarë të zgjidhni, aq më shpejt do të funksionojë faqja, por aq më pak funksionalitet do të ketë. Mendoni me kujdes se cilët skedarë ju nevojiten dhe pa të cilët mund të bëni.

Nëse dëshironi të shtoni një temë minimale në faqen tuaj, ose të provoni paraqitjen tuaj psd, atëherë ju nevojiten vetëm dy skedarë në drejtorinë e shabllonit:

1. Stili.css.
2. Indeksi.php.

Uebmasterët me përvojë arrijnë të modifikojnë skedarin index.php në atë mënyrë që të mjaftojë vetëm për të bërë cilësimet për fundin, shiritin anësor, kërkimin, arkivin, kategoritë, faqet, etj. Por më mirë të përpiqeni të krijoni një shabllon WordPress në secila skedar do të kryejë funksionin përkatës.

Edhe nëse nuk specifikoni aksidentalisht ndonjë skedar shabllon, WordPress do të shtojë automatikisht cilësimet e veta të paracaktuara në sajt. Për shembull, nëse nuk shtoni një skedar përgjegjës për komentet, motori do të gjejë variantet e tij të këtij funksioni në drejtoritë - për shembull, wp-comments.php. Pastaj komentet "aliene" do të futen në strukturën e faqes tuaj dhe nuk do të plotësojnë kërkesat e shabllonit. Për të parandaluar që kjo të ndodhë, duhet të shtoni të gjithë skedarët kryesorë për të shfaqur komponentët e ndryshëm të faqes:

• header.php - përgjegjës për kokën e faqes;
• shiriti anësor.php - shiritat anësor;
• footer.php - fundi i burimeve (pjesa e poshtme);
• comments.php dhe comments-popup.php janë komente.

Pas gjenerimit të secilit prej këtyre skedarëve, në mënyrë që faqja të fillojë t'i shfaqë ato, duhet të vendosni të dhëna për to në skedarin kryesor të shabllonit index.php. Për ta bërë këtë, specifikoni etiketat në index.php që çojnë te skedarët e emërtuar. Për shembull:

• për të shtuar një skedar të kokës së faqes (header.php) shkruani etiketën

  etiketa get_header () tamplate;

• për footer është i njëjtë, por në vend të header specifikoni footer, etj.

Një shembull i përfshirjes së një prej skedarëve shabllon në index.php do të duket kështu:. Ju do të duhet të kërkoni për informacion të veçantë për secilin nga skedarët e specifikuar të modelit kryesor. Gjeni manuale për secilin prej skedarëve, si dhe mostra në mënyrë që të kuptoni të gjitha funksionet e shkruara në shabllone.

Zgjedhja e funksionalitetit të shabllonit

Me kalimin e kohës, do të përballeni me dilemën se cilin lloj shabllon të zgjidhni. Motori ofron një zgjedhje. Ose mund të zgjidhni një shabllon me një Hierarki Shablloni të bashkangjitur, ose një plan urbanistik me etiketa të kushtëzuara.

Opsioni i parë tashmë është shqyrtuar. Të gjithë skedarët e shablloneve php janë hierarkia e shablloneve. Kjo do të thotë, duke ndjekur rregullat e kësaj hierarkie, ju gradualisht gjeneroni skedarë të veçantë të paraqitjes. Kështu, ju do të krijoni një shabllon të plotë nga një numër i komponentëve funksionalë php. Hierarkia në këtë rast funksionon në parimin e ngarkimit sipas kërkesës. Për shembull, nëse keni një skedar kategorie (category.php) dhe përdoruesi e ka kërkuar atë, atëherë kjo pjesë e veçantë e faqes do të ngarkohet në shfletues. Nëse nuk është aty, atëherë skedari i çelësit të shabllonit index.php do të ngarkohet.

Kështu, ju mund të ndryshoni pamjen për pjesët individuale të faqes duke përdorur parimin e hierarkisë së shabllonit. Çdo faqe ka ID-në e saj specifike. Shtoni kategorinë e skedarit-6.php në drejtorinë me temën dhe kur të kërkoni një kategori me ID 6, ky dizajn i veçantë do të hapet. Nëse nuk është aty, cilësimet do të mbeten standarde - index.php do të zgjerohet.

Ndonjëherë parimi i hierarkisë së shabllonit nuk mjafton për të siguruar shfaqjen më të rehatshme të shabllonit. Në këtë rast, programuesit përdorin parimin e dytë - ata prezantojnë Etiketat e Kushtëzuara. Këto etiketa kontrollojnë faqen për kushte të caktuara, dhe nëse nuk janë, ato ndryshojnë pamjen e saj. Kjo do të thotë, këto etiketa funksionojnë në parimin nëse / tjetër (nëse / atëherë). Pra, nuk keni pse të shtoni një det skedarësh php me numrin e secilës kategori, por mund të shkruani kushte për secilën ID një herë.

Si është paraqitja e një paraqitjeje psd në WordPress

Disa njerëz pëlqejnë që së pari të krijojnë një plan urbanistik të modelit të ardhshëm duke përdorur programe të ndryshme, dhe vetëm atëherë ta transferojnë atë në një motor të caktuar. Kjo është vërtet e përshtatshme, sepse disa aplikacione ju lejojnë të gjeneroni dizajne të shkëlqyera pa ndonjë aftësi. Nëse tashmë keni një skedar psd dhe dëshironi ta rregulloni atë për motorin WordPress pa përdorur kodin, atëherë mund të përdorni ndihmën e një prej shërbimeve të njohura.

Ju lutemi vini re se ky është një shërbim me pagesë, kështu që shablloni do të jetë vetëm gjysma juaji. Porositeni këtë shërbim vetëm si mjetin e fundit, nëse faqosja ju duket e mirë, por nuk keni më fuqi për ta shtypur atë. Ka mijëra programues që janë të gatshëm të transferojnë psd në WordPress për një çmim të ulët dhe fjalë për fjalë brenda natës.

PSD është një skedar nga aplikacioni Photoshop. Është si një paraqitje grafike e dizajnit tuaj. Për ta bërë atë, duhet të shtoni HTML-shënjimin në një redaktues teksti. Gradualisht, ju do të ndryshoni secilën nga pikat e këtij shënimi, duke arritur rezultatin përfundimtar, i cili tregohet në paraqitjen. Menjëherë specifikoni qendrimin e shabllonit tuaj, si dhe madhësitë e pjesëve të ndryshme të tij.

Hapi tjetër është shtimi i imazheve të sfondit. Ju gjithashtu mund t'i bëni ato vetë duke përdorur të njëjtin aplikacion Photoshop. Mundësia më e lehtë është krijimi i imazheve të sfondit gradient. Më pas, filloni të krijoni logon tuaj. Zgjidh gradualisht të gjitha kërkesat që kanë lindur - rregulloni kokën e faqes, fundin, shiritin anësor dhe të gjitha pjesët e tij, sipas paraqitjes së bërë. Mos harroni të shtoni skedarë të rëndësishëm shabllon në drejtorinë e tij në mënyrë që faqja të ngarkohet sipas kërkesave tuaja.

Vetëm në këtë mënyrë, duke mësuar gradualisht bazat e gjuhëve të ndryshme të programimit, do të mund të mësoni në mënyrë të pavarur se si të krijoni një faqe interneti. Askush nuk thotë se do të kesh sukses sot apo nesër. Mund të duhen muaj për të kuptuar të gjitha tiparet e procesit të paraqitjes. Por mos u shqetësoni - disa kërkojnë vite. Tani e dini procedurën e përafërt për krijimin e një shablloni nga e para, si dhe transferimin e paraqitjes së psd në një temë të gatshme për një burim në internet në motorin WordPress.

Mirembrema. Me shumë mundësi, ju keni dëgjuar tashmë më shumë se një herë që motori i kërkimit Google filloi t'i kushtojë vëmendje mënyrës se si duket faqja në pajisjet celulare. Dhe nëse dizajni nuk është përshtatur, atëherë një faqe e tillë renditet më keq. Dhe kjo nuk është mirë. Prandaj, sot dua t'ju tregoj se çfarë është një paraqitje e përgjegjshme dhe si ta zbatoni atë në një faqe WordPress.

Siç shkrova më lart, që nga 21 Prilli 2015 Google rendit më mirë ato faqe që janë të përshtatura për pajisjet mobile: telefonat, smartfonët dhe tabletët. Prandaj, është shumë e rëndësishme të ndiqni rregullat nëse dëshironi linjat më të larta në rezultatet e kërkimit dhe, në përputhje me rrethanat, më shumë trafik.

Në përgjithësi, aktivizoni muzikën dhe filloni të mësoni mini-udhëzime për përshtatjen e modeleve për pajisjet celulare.

Vetëm një javë më parë, pasi kalova disa ditë në kompjuter, më në fund bëra shfaqjen korrekte dhe cilësore të këtij blogu në të gjitha pajisjet celulare. Ju mund ta shihni vetë duke shkuar te ky artikull (ose ndonjë tjetër) përmes, për shembull, një smartphone.

Gjithashtu, ka shumë shtojca dhe shërbime të ndryshme për krijimin e një versioni celular. Unë kam folur tashmë për një nga këto shtojca më herët, në. Mund ta lexoni, do të jetë e dobishme, tk. Ky opsion mund të përdoret gjithashtu, është mjaft i përshtatshëm për herë të parë.

Përveç shtojcave dhe shërbimeve, ekzistojnë edhe llojet e mëposhtme të krijimit të një versioni celular:

• Faqe / version i veçantë
• Teknologjia RESS
• Paraqitja adaptive

Ne nuk do të analizojmë secilën metodë, sepse nuk ka nevoje per kete. Për veten time, zgjodha metodën e 4-të, domethënë paraqitjen adaptive, prandaj ky artikull do të jetë objekt i këtij artikulli. Do të doja t'ju paralajmëroja menjëherë se për të përshtatur faqen do t'ju duhet të paktën njohuri minimale për html, css dhe dizajnin e uebit.

Edhe pse, në çdo rast, ju mund të kërkoni ndihmë nga specialistë, përfshirë mua.

Struktura adaptive DIY

Kohët e fundit, ky term ka qenë në buzët e pothuajse të gjithë atyre që janë disi të lidhur me ndërtimin e kantierit. Por çfarë është ajo? Struktura e përgjegjshme është një dizajn i zakonshëm ueb, por mund të përshtatet me çdo rezolutë të ekranit, duke përfshirë pajisjet celulare, për një shikim më të përshtatshëm të faqeve të sajtit.

Cila është bukuria e dizajnit të përgjegjshëm?

1. Nuk ka nevojë të krijoni një dizajn të ri / të veçantë.
2. Nuk ka nevojë të krijoni një faqe të veçantë.
3. Zbatim relativisht i thjeshtë.
4. Google i pëlqen faqet e përgjegjshme 🙂

Për përshtatje, ne do të përdorim një specifikim për CSS3 të quajtur pyetje mediatike. Me ndihmën e këtij rregulli, ne do të jemi në gjendje të krijojmë opsione të ndryshme për shfaqjen e një elementi të faqes për rezolucione ose pajisje të ndryshme. Është shumë komode!

Por, përpara se të shkojmë të "përziejm" në stilet, duhet të shkoni te skedari header.php dhe te etiketa shtoni meta-etiketën e mëposhtme të rëndësishme për të lejuar pajisjen të rregullojë gjerësinë e faqes për t'iu përshtatur ekranit:

Tani, për të filluar, ne do të përshtatim kontejnerin (div "a), i cili shfaq të gjithë elementët e faqes, kokën dhe fundin, dhe do ta lëmë pjesën tjetër për pjesën tjetër të artikullit.

Pra, para së gjithash, ne duhet të analizojmë shabllonin dhe të mbledhim disa të dhëna, domethënë, të përcaktojmë identifikuesin e bllokut të kërkuar dhe gjerësinë e tij fillestare. Për ta bërë këtë, unë rekomandoj përdorimin e veçorisë "Shiko kodin e artikullit" në Chrome ose "Paneli i zhvilluesit" në FireFox - shumë i përshtatshëm. Unë do të përdor opsionin e parë dhe do të marr një model provë që nuk është përshtatur ende dhe do të tregojë gjithçka në të.

Siç mund ta shohim nga imazhi i mësipërm, në rastin tim kontejneri quhet "#Kontainer" dhe është 960 px i gjerë.

Por çfarë na jep? Dhe gjithçka është shumë e thjeshtë. Gjerësia e kontejnerit tonë kryesor është pika e parë në të cilën duhet të shkruajmë një pyetje mediatike. Dhe për këtë ju duhet të shkoni te skedari me stile, zakonisht Style.css dhe në fund të shkruani pjesën e mëposhtme të kodit:

Ekrani @media dhe (gjerësia maksimale: 960 px) (kërkoni përmbajtje)

Kjo do të thotë, i përshtatet gjerësisë maksimale të faqes tuaj, në rastin tim, e përsëris, 960 px, madhësia juaj mund të jetë krejtësisht e ndryshme.

Pas kësaj, ne duhet të plotësojmë treguesit e rinj të bllokut në mënyrë që ata të përshtaten me rezolucione më pak se 960 px gjerësi. Gjithçka është shumë e thjeshtë! Për të filluar, në vend të tekstit "përmbajtja e kërkesës", shkruani sa vijon:

Img (gjerësia maksimale: 100%; lartësia: automatike;) / * përshtatja e imazheve * / #container (gjerësia: 100%; lartësia: automatik;) / * përshtatja e kontejnerit * /

Gjithashtu, përveç përshtatjes së kontejnerit, shkruajmë menjëherë vlerat për imazhet për t'i bërë ato elastike dhe për të mos lejuar që ato të shtrihen më shumë se gjerësia e ekranit.

Pra, ruani skedarin Style.css, përditësoni faqen dhe shikoni sa vijon:

Kjo do të thotë, siç mund ta shohim nga pamja e mësipërme, faqja është zvogëluar automatikisht në gjerësinë e dëshiruar të ekranit, në rastin tim 662px. E shkëlqyeshme, apo jo? Dhe nëse asgjë nuk ka ndodhur, atëherë unë rekomandoj të shkruani rregullin e rëndësishëm për gjerësinë e enës, domethënë do të dalë:

#container (gjerësia: 100%! e rëndësishme; lartësia: automatik;) / * përshtatni kontejnerin * /

Për të kontrolluar përshtatjen, përdor funksionin e të njëjtit panel "Shiko kodin e artikullit".

Gjithashtu, pas përshtatjes së kontejnerit, faqja juaj mund të fillojë të shfaqet gabimisht. Një kapele, shirit anësor, bodrum, etj. mund të lëvizin jashtë. - kjo eshte normale! Sepse është e nevojshme të kryhet ky operacion me pothuajse të gjithë elementët e sitit.

Në pamjen time të mësipërme, përmbajtja e artikullit dhe shiriti anësor shfaqen saktë, sepse gjerësia e tyre është e specifikuar në%, gjë që na lejon të përshtatemi automatikisht me gjerësinë e faqes në tërësi. Por në shumicën e rasteve, shiriti anësor, si elementët e tjerë, shkruhet në piksel, dhe për këtë arsye është e nevojshme t'i përshtatni ato veçmas në gjerësinë e faqes.

Por ne do të flasim për këtë me ju në artikujt e ardhshëm nga seria "Struktura e përgjegjshme e faqes në WordPress". Dhe tani në skedarin me stile duhet të merrni:

Ekrani @media dhe (gjerësia maksimale: 960 px) (img (gjerësia maksimale: 100%; lartësia: automatikisht;) / * përshtatja e imazheve * / #container (gjerësia: 100%; lartësia: automatik;) / * përshtatja e kontejnerit * /)

Fillimisht, do të shkruaja një artikull të gjatë, në të cilin do të tregoja plotësisht dhe do të tregoja qartë se si të bëja një dizajn adaptiv jashtë dizajnit të zakonshëm, por më pas kuptova se kjo nuk ishte e këshillueshme. Është shumë më mirë të perceptoni gradualisht informacionin dhe ta zbatoni menjëherë në praktikë, gjë që në fakt ju këshilloj ta bëni.

Krijimi i një teme WordPress, mund të shkoni në disa mënyra. Mund të shkruani kod nga e para, të modifikoni një temë të gatshme ose të përdorni një të veçantë kornizë... Në këtë përmbledhje, ne do të shqyrtojmë opsionin e tretë, i cili, nga njëra anë, nuk e kufizon imagjinatën tuaj në një temë të krijuar tashmë, dhe nga ana tjetër, ju lejon të shpëtoni nga operacionet rutinë, duke u fokusuar në dizajn dhe jo në kodimin e mërzitshëm.

Sidoqoftë, edhe përkundër avantazheve të dukshme të përdorimit të kornizave, nuk ka asnjë mendim të vetëm midis ekspertëve për to. Disa njerëz mendojnë se kornizat ofrojnë një nxitje të konsiderueshme në shpejtësinë dhe cilësinë e zhvillimit. Të tjerë, megjithatë, besojnë se ata i kufizojnë zhvilluesit duke i vendosur në kufij të caktuar. Dhe nëse duhet të zgjidhni një detyrë të jashtëzakonshme, atëherë përpjekjet e shpenzuara për të anashkaluar funksionalitetin e kornizës mohojnë avantazhet e tij. Për më tepër, koha e shpenzuar për zotërim mund të krahasohet me kohën e shpenzuar për kodim (megjithatë, është e qartë se në rastin e një kornize, kjo do të jetë një kosto një herë).

Sido që të jetë, dhe zgjedhja e përdorimit të kornizës është e juaja. Vetëm ju, bazuar në përvojën tuaj dhe detyrën përpara jush, mund të vendosni nëse do ta përdorni apo jo. Dhe për ta bërë këtë, duhet të paktën ta "prekni", gjë që ne propozojmë ta bëni, duke përdorur, natyrisht, një nga produktet falas për të filluar.

Cherry Framework nga TemplateMonster

Pavarësisht historisë së tij të shkurtër, Korniza e Qershisë arriti të fitojë shumë vlerësime pozitive.

Lëshimi i fundit, i katërt i këtij produkti ju lejon të çaktivizoni opsionet e panevojshme, duke lënë aktive vetëm ato që janë të nevojshme në këtë rast të veçantë. Pak korniza mund të mburren me një mundësi të tillë dhe ata që e kanë vlerësuar tashmë nuk ka gjasa të jenë në gjendje ta braktisin atë në të ardhmen.

Karakteristikat kryesore të qershisë:

• Struktura modulare e pavarur ju lejon të përdorni komponentët Cherry veçmas, si mjete të pavarura. Tom J. Nowell i ekipit Automattic është i bindur se çdo kornizë e mirë duhet ta ketë këtë aftësi;
• Redaktori dhe grupi i kodeve të shkurtra duke ju lejuar të shtoni objekte të ndryshme në çdo vend të faqes;
• Aftësia për të rregulluar pozicionin e një elementi (logo, meny ose shirit kërkimi) në lidhje me kokën ose fundin;
• Minifikues CSS- një mjet inovativ që ju lejon të kombinoni CSS nga skedarë të ndryshëm në një dhe ta minimizoni atë për të shpejtuar ngarkimin;
• Opsioni rezervë- një opsion shumë i përshtatshëm që ju lejon të "riktheheni" në një gjendje të mëparshme nëse nuk jeni të kënaqur me rezultatin e redaktimit;
• Mekanizëm Plugin që ofron një zgjidhje të shpejtë për detyra të ndryshme. Ky është shtimi i rrëshqitjeve, shiritave anësor dhe llojeve të ndryshme të shënimeve - për rishikime, portofol, etj .;
• E përputhshme me mjetet e palëve të treta;
• Përgjegjshmëria dhe pajtueshmëria me WPML janë dy funksione jetike sot që ju lejojnë të krijoni sajte shumëgjuhëshe të përshtatura për çdo pajisje, nga telefonat inteligjentë te kompjuterët.

Hybrid Core nga ThemeHybrid

Bërthama hibride lehtë për t'u instaluar dhe konfiguruar kornizë, i cili ju lejon të zhvilloni projekte komplekse pa përdorur sasi të mëdha kodimi. Është në përputhje me skemën për optimizim të mirë të SEO. Përveç kësaj, Hybrid Core ka shumë veçori që thjeshtojnë shumë punën e zhvilluesit. Ndër to janë të tilla si:

• Një navigim i bukës që funksionon shkëlqyeshëm në çdo faqe, duke përfshirë llojet e postimeve të personalizuara.
• Versioni i korrigjuar dhe i optimizuar i kodit të shkurtër që siguron kontroll të plotë mbi galerinë e imazheve
• Media Grabber është një funksion që ju lejon të kapni çdo përmbajtje mediatike (përfshirë nga një shënim) dhe ta përdorni atë kudo në sajt.
• mesazhe, duke ju lejuar të krijoni shabllone për lloje të ndryshme shënimesh, pa u kufizuar në faqen në tërësi.
• Një zgjerim i veçorisë standarde të faqes për të kontrolluar faqosjen e përmbajtjes në një faqe me rezultate kërkimi, faqe të arkivuara dhe më shumë.
• Ngarkimi automatik i mbështetjes shumëgjuhëshe për temat e prindërve dhe fëmijëve.

Gantry nga RocketTheme

Gantry është një përpjekje e profesionistëve në RocketTheme për të kombinuar të gjitha përparimet e tyre në zhvillimin e temave të WordPress në një kornizë të vetme. Dhe përpjekja, duhet të them, është shumë e suksesshme. E ndërtuar duke përdorur një rrjet dinamik, kjo kornizë e lehtë mbështet SCSS, CSS dhe LESS.

Hidhini një sy listës së veçorive kryesore të Gantry:

• Layout Manager ju jep liri të plotë për të hartuar paraqitjen tuaj.
• Një sistem i menaxhimit të përmbajtjes që ju lejon të krijoni, modifikoni dhe publikoni materiale.
• Një dizajnues vizual i menusë që mbështet menutë me shumë nivele dhe krijimin e artikujve të menusë me ikona.
• Megamenu ju lejon të krijoni meny jo standarde drop-down, ku jo vetëm lidhjet, por edhe çdo html - tabela, forma, lista, teksti i formatuar mund të veprojnë si nën-artikuj
• Ndërfaqja e administratorit e krijuar nga Ajax që është jashtëzakonisht e shpejtë.
• Motori i fuqishëm i modelimit Twig.
• Gantry gjithashtu krenohet me një konfigurues në qendër YAML, shirita anësor rrëshqitës, aftësi të fuqishme trashëgimie dhe një shumëllojshmëri ikonash dhe shkronjash.

Pistë nga Parallelus

Pistëështë një tjetër zgjidhje me burim të hapur e krijuar për ta bërë më të lehtë zhvillimin e temave për Wordpress. Temat e krijuara me të mund të shpërndahen si një produkt i pavarur, i pavarur nga vetë korniza.

Karakteristikat kryesore të Runway:

• Gjenerator i temave për krijimin, kopjimin dhe modifikimin e temave.
• Ndërtues temash- projektuar për të krijuar panele admin dhe regjistrime të tipit jo standard (të përcaktuar nga përdoruesi).
• Struktura modulare që ju lejon të shtoni funksionalitetin e kërkuar duke përdorur shtojcat fjalë për fjalë me një klik.

Wonderflux nga Jonny Allbut

Një tjetër kornizë me burim të hapur në përzgjedhjen tonë - Wonderflux. Një produkt cilësor që do t'ju kursejë kohë zhvillimi pa humbur asnjë efikasitet.

Karakteristikat kryesore të Wonderflux:

• Shënimi dinamik që lejon që tema të përshtatet me çdo madhësi ekrani.
• Parametrat fleksibël të paraqitjes që mund të ndryshohen menjëherë.
• Një koleksion prej mbi 100 kodesh të shkurtra që ju lejon të futni çdo lloj kodi ose përmbajtje në një temë
• Cilësimet administrative për konfigurim të lehtë të faqes.
• Pajtueshmëria me shtojcat Wordpress ju lejon të zgjidhni pothuajse çdo detyrë
• Një verifikues kodi që siguron përputhjen me standardet e uebit, i cili është një kusht i domosdoshëm për optimizimin cilësor të SEO.

Unyson nga ThemeFuse

Unyson është një kornizë e pasur funksionalisht e krijuar si për zhvillues ashtu edhe për projektues. Ju lejon të redaktoni pjesën e përparme të një sajti ose blogu nga paneli administrativ dhe ka një dritare paraprake në të cilën mund të vlerësoni menjëherë ndryshimet e bëra.

Karakteristikat kryesore:

• Zvarrit dhe lësho ndërtues faqesh.
• Instalimi i demonstrimit të përmbajtjes - Një shtesë që ju lejon të shfaqni përmbajtjen saktësisht siç duket kur modifikohet.
• Më shumë se 20 opsione për të thjeshtuar krijimin e kontejnerëve, skedave dhe formularëve për panelin e administratorit
• Panele rrëshqitëse anësore dinamike që mund të personalizohen individualisht për secilën faqe.
• Rezervimi automatik direkt nga paneli i administratorit. Rezervimet e rregullta të planifikuara janë të mundshme (ditore, javore, mujore, etj.).
• Breadcrumbs (ak.a. breadcrumbs) duke shtuar navigim të thjeshtë dhe të drejtpërdrejtë
• Moduli i shfaqjes së rrëshqitjes që mbështet përmbajtjen e fotografive dhe videove.

Sigurisht, kjo nuk është një listë e plotë e të gjitha veçorive të Unyson. Duhet përmendur edhe e veçanta module për SEO, formularët e kontaktit, portofoli, kalendari i ngjarjeve, vlerësimi i yjeve, mediat sociale dhe integrimi i Flickr.

PressWork

Korniza falas e Wordpress-it e krijuar duke përdorur HTML5 dhe CSS3 dhe synon një gamë të gjerë përdoruesish - zhvillues, projektues, blogerë.

Këtu janë disa nga veçoritë e tij:

• Redaktori Front-End - aftësia për të redaktuar pjesën e përparme duke përdorur një redaktues zvarrit dhe lësho.
• Një grup shtojcash që zgjerojnë funksionalitetin bazë të kornizës për zgjidhjen e një problemi specifik.
• Media Queries është një modul përgjegjës për pamjen optimale në çdo pajisje.
• Prania në grupin e skedarëve PSD për redaktimin e temës, për shembull, ndryshimi i logos ose elementeve grafike.

Reverie nga ThemeFortress

Një kornizë shumëfunksionale për krijimin e blogjeve, sistemeve të menaxhimit të përmbajtjes, librave në internet ose çdo lloj faqeje tjetër. Mund të përdoret si një mjet kryesor, si dhe një mjet ndihmës për krijimin e temave të prejardhura.

Karakteristikat kryesore:

• Korniza bazohet në Fondacionin ZURB dhe trashëgon të gjithë fleksibilitetin dhe fuqinë e tij.
• HTML5 dhe mikroformati hNews ofrojnë kod të qartë, të kuptueshëm dhe të lehtë për t'u lexuar. Për etiketat HTML5, mund të përdoren veçoritë e personalizuara të Wordpress.
• Ka mekanizma për t'u përshtatur me madhësinë e ekranit, kështu që duket po aq i mirë në telefonat inteligjentë dhe PC.
• Ndjek konceptin e minimalizmit, duke ofruar vetëm dy miniaplikacione dhe dy meny të personalizuara.
• Nëse keni nevojë të bëni ndryshime në dizajn, ofrohet redaktimi i drejtpërdrejtë i SCSS dhe CSS me porosi.

Nga minuset vlen të theksohet optimizimi i pjesshëm i SEO prandaj rekomandohet përdorimi i një shtojce shtesë për këtë qëllim.

Vafpress

Me Vafpress, krijimi i temës së WordPress backend është më i lehtë se kurrë.

Për ta bërë këtë, zhvilluesi ka në dispozicion të tij:

• Ngarkimi i skriptit të kontrollit që lejon ngarkimin e vetëm blloqeve të nevojshme pa mbingarkuar pjesën e përparme me kod të panevojshëm.
• Mbështetje për lloje të ndryshme fushash: tekst, lista me shumë zgjedhje, kuti kontrolli, butona radio dhe të tjera
• Ndërtues i fuqishëm i menusë me shumë nivele. Përdor XML për ndërtim, i cili më pas mund të konvertohet në një grup PHP.
• Ndërtuesi i Metabox - Ju lejon të shkruani metabox në vargjet PHP.
• Mbështetje për grupet e fushave të përsëritura.

nënvizon

Disa zhvillues e konsiderojnë Underscore si një kornizë të plotë, megjithëse disa, duke përfshirë vetë autorët, e pozicionojnë produktin e tyre si një lloj teme paraardhëse për krijimin e temave të plota. Sido që të jetë, përdorimi i nënvizave do të kursejë ndjeshëm kohën dhe përpjekjen e shpenzuar për zhvillimin e temave për Wordpress.

Karakteristikat kryesore të Underscore:

• Aftësia për të krijuar tituj të personalizuar.
• Etiketat e personalizuara në shabllone shmangin dyfishimin e kodit.
• Skript për konvertimin e menysë në një listë rënëse të ndërrueshme për t'u shfaqur në pajisjet celulare.
• Dy modele paraqitjeje me një shirit anësor në të djathtë ose në të majtë.
• Lean CSS për ta bërë më të lehtë zhvillimin.
• 404 faqe.

konkluzioni

Siç mund ta shihni, numri i kornizave të rëndësishme është mjaft i madh dhe, ndoshta, vetëm pas rishikimit tonë, ju do të vendosni të provoni një prej tyre në projektin tuaj të ardhshëm.

Tani do të shpjegoj se si të krijoj një temë WordPress nga një shabllon i thjeshtë HTML duke përdorur shembullin e dizajnit nga ai artikull.

Mund t'ju duhet të përshtatni dizajnin për WordPress për shumë arsye, për shembull, po transferoni faqen tuaj të internetit dikur statike në një CMS, ose ju pëlqen një dizajn që nuk është ende në koleksionin e WordPress, ose thjesht dëshironi të kuptoni se si temat e këtij CMS funksionojnë nga brenda.

Pra, le të fillojmë.

Shpërndarja e kodit në skedarë

1. Shkarkoni shabllonin dhe zbërthejeni atë në dosjen tuaj të temave të WordPress (adresa si wordpress_blog_adresa / wp-content / tema /). Riemërtoni dosjen e temës sipas dëshirës tuaj nëse dëshironi. Për shembull, shablloni im ndodhet në wordpress_blog_adresa / wp-content / tema / MyTheme /.

2. Riemërtoni skedarin stilet.css v stil.css.

3. Hapur stil.css në një redaktues kodi (siç është Notepad ++) dhe në fillim të tij, ngjitni rreshtat e mëposhtëm:

/ * Emri i temës: URI i temës MyTheme: http://test1.ru Autori: NoName URI i autorit: http://test1.ru Përshkrimi: Shembull i testit Versioni: 1.0.0 Licenca: Licenca e përgjithshme publike GNU v2 ose më vonë URI e licencës : http://www.gnu.org/licenses/gpl-2.0.html * /

Siç mund ta keni marrë me mend, ky është informacion shërbimi në lidhje me temën e dizajnit: titulli, autori, përshkrimi, licenca, versioni, etj. Ju mund të zëvendësoni pjesët e duhura të rreshtave me tuajin, domethënë të vendosni autorësinë, versionin tuaj, përshkrimi dhe të dhëna të tjera.

4. Krijoni skedarë header.php, indeks.php, shirit anësor.php, footer.php dhe shpërndani kodin nga index.html.

4.1. V header.php kopjoni kodin rresht pas rreshti meqenëse ky skedar është përgjegjës për pjesën e sipërme të faqes. stilet.css zëvendësoni në kodin me stil.css- emri i ri i vlefshëm i skedarit.

4.2. V indeks.php ngjitni kodin e bllokut kryesor (nga rreshti sipas rreshtit ).

4.3. V shirit anësor.php kopjoni kodin e menysë anësore (nga në ).

4.4. V footer.php ngjitni rreshtat e mbetur (me deri në fund të dokumentit index.html).

5. Fshij index.html.

6. Shkoni te paneli i administratorit dhe sigurohuni që shablloni MyTheme të shfaqet në seksion Pamja -> Temat... Mund të provoni edhe ta shikoni ose aktivizoni, por asgjë e mirë nuk do të vijë ende, sepse ne nuk e kemi integruar ende shabllonin me WordPress.

Përshtatja e kokës

Tani do të fillojmë nga një shabllon statik për të krijuar një temë dinamike, në të cilën do të ngarkohen të dhënat dhe cilësimet e WordPress.

Do të ketë inserte PHP në shabllon. Ky kod fillon me... Midis tyre është kodi PHP që më shpesh thërret funksionet CMS.

1. Hapni skedarin header.php dhe zëvendësoni kodin që gjendet në të përpara bllokut

tek tjetra:

> "> "> "type =" tekst / css "media =" ekran "/>

Bllokun e bëmë dinamik

Kodi thërret një funksion që kthen atributet e gjuhës në kontejner.

">

Në vend që të shkruanim kodimin si një konstante, ne thirrëm një funksion që merr vlerën nga cilësimet CMS dhe e zëvendëson automatikisht në kod, domethënë, për të ndryshuar kodimin, nuk keni më nevojë të redaktoni skedarin e temës.

Një funksion i rëndësishëm për funksionimin e faqes me stile, shtojca dhe skripta.

2. Shkoni te redaktimi i skedarit index.php. Në fillim shkruani

,

Linjat thërrasin kokën, shiritin anësor dhe skedarët e poshtëm të faqes.

Tani mund të shikoni ose madje aktivizoni MyTheme. Si rezultat, shfletuesi do të shfaqë shabllonin tashmë të njohur me një menu statike dhe një faqe të vetme. Për ta bërë menunë dinamike dhe të personalizueshme, dhe në vend që një faqe të shfaq të gjitha materialet e vendosura në faqe, duhet ta transformoni më tej shabllonin.

Duke e bërë menunë e sipërme dinamike

Deri më tani, ne kemi një temë krejtësisht statike të dizajnit, duke përfshirë një me një menu të sipërme horizontale të pandryshuar. Ndërsa nuk mund të konfigurohet nga paneli i administratorit, dhe nëse e lini kodin ashtu siç është, atëherë për të futur / fshirë / zhvendosur artikujt, do t'ju duhet të modifikoni skedarin çdo herë header.php, e cila është jashtëzakonisht e papërshtatshme.

Për të mos filozofuar me dinakëri dhe për të mos zhytur në humnerën e botës magjepsëse të programimit, ne do t'i caktojmë një emër statik menusë dinamike. Ngjitni kodin në vend të tabelës së menusë horizontale

në mënyrë që të merrni sa vijon:

Artikujt kryesorë të lidhur