Krijimi i një teme të thjeshtë WordPress. Krijimi i një grupi të thjeshtë të temave WordPress për modelin

Për të bërë faqen tuaj WordPress, patjetër që do t'ju duhet të shtoni një temë. Ato quhen gjithashtu shabllone. Ky është themeli i ç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.

Ju gjithashtu do të mësoni në lidhje me kërkesat themelore teknike për temat WordPress, se çfarë duhet të jetë një model në mënyrë që ai të funksionojë në thelbin e WordPress. Si rezultat, ju mund të krijoni një faqe në internet me temën tuaj që përputhet saktësisht me kërkesat tuaja.

Ju lutemi vini re se ky manual nuk përfshin një përshkrim të shtimit të një teme të gatshme - ky është një manual për gjenerimin e modelit tuaj. Nëse e keni shkarkuar temën dhe nuk dini si ta instaloni, atëherë shkoni te paneli i administratorit WordPress, në seksionin "Pamja" dhe shtoni një nga modelet e disponueshme atje. Dhe tani le të shohim nga afër se çfarë është një temë, për çfarë është dhe si ta krijoni vetë.

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

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

Kur blini ose shkarkoni një dizajn nga një direktori i shablloneve WordPress falas, ju zakonisht sakrifikoni cilësinë. Në mënyrë tipike, këto modele nuk funksionojnë për ju. Por ju jepni dorëheqjen vetë, unë mendoj se një ose dy nuanca nuk janë e gjithë tabloja, dhe se më vonë do të 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 menjëherë gjërat tuaja. Dhe megjithëse paraqitja mund të duket e komplikuar në fillim, por më pas, kur mësoni, mund të krijoni edhe shabllone të personalizuara.

Përveç kësaj, pasi të krijoni një model, do të ndiheni si një "medic" i WordPress - do të dini se çfarë faqe ka brenda. Kuptoni cilat elementë janë përgjegjës për çfarë. Pastaj faqja dhe ju do të bisedoni me ju. Njoftohuni me etiketat, strukturën dhe sythe WordPress. Apo ndoshta ju doni ta bëni atë në mënyrë profesionale dhe filloni të jetoni duke krijuar shabllone.

Kështu që, këtu janë arsyet kryesore pse duhet të krijoni modelin tuaj të internetit:

• mësoni gjithçka rreth HTML, CSS dhe një ose dy gjëra rreth PHP;
• do të jeni në gjendje të krijoni, sepse dizenjimi i uebit është gjithashtu një art;
• do të jetë e mundur të fitosh para duke shitur tema;
• zbuloni një aftësi të re;
• krijoni një dizajn që do të jetë 100% i përshtatshëm për sitin tuaj të ardhshëm.

Çfarë standardesh plotëson tema?

Veryshtë shumë e rëndësishme të ndiqni udhëzimet zyrtare kur shkruani modelin tuaj. Thyerja e kodit, futja e një etikete në vendin e gabuar dhe kapërcimi i tij - kjo mund të dëmtojë modelin 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 njohur tashmë me këto gjuhë. Ju gjithashtu duhet të merreni me fletët e stilit CSS të kaskadës, kështu që mbani mend gjithashtu bazat - ka shumë informacion në internet në lidhje me këtë. Epo, dhe kërkesa e fundit më pak e rëndësishme është të krijoni një faqe në internet si një krijues, jo si një shkollë, në mënyrë që të merrni një projekt serioz. Përndryshe, nuk ka kuptim të merresh me këtë biznes.

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

Para se të filloni, së paku duhet të hidhni një vështrim në strukturën e temave të para-ndërtuara. Faqja e paracaktuar WordPress përmban dy shabllone standarde që mund të shfletoni. Ky është modeli Default dhe Classic. Hapni skedarët e tyre në direktorinë e kërkuar në server dhe krahasoni ndryshimet e tyre.

Ju 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 është një skedar funksional që shton veçori të ndryshme në faqe.
3. Skedarë të tjerë php që janë përgjegjës për tiparet e shfaqjes së shabllonit në sit, integrimin e temës me WordPress. Janë këto skedarë që ju lejojnë të përktheni paraqitjen psd në një model të plotë.

Le të shohim më nga afër secilën nga këto skedarë në mënyrë që të kuptojmë se si shkon paraqitja e temës WordPress.

Rregullat për krijimin e skedarit style.css

Së pari, duhet të jetë në përputhje me të gjitha specifikat e shënimit të CSS. Kjo skedar përcakton se si do të duket faqja juaj. Por nuk do të funksionojë nëse nuk i shtoni një përshkrim të modelit të krijuar. Kjo është karakteristika e parë WordPress që duhet të mbani mend kur transferoni një plan urbanistik PSD në motorin WordPress. Ju duhet të specifikoni parametrat e mëposhtëm:

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

Për të krijuar temën më themelore të WordPress, thjesht duhet të shtoni një version të redaktuar me një skedar të vetëm style.css. Në këtë skedar, pranë vijës "shabllon", specifikoni emrin e temës mëmë. Për shembull, Classic nëse jeni duke redaktuar një model standard. Tani tema e krijuar do të përputhet plotësisht me modelin Classic. Prandaj, do t'ju duhet të ngarkoni skedarët në drejtorinë wp-content / themes / klasike.

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 tashmë të përgatitur. Por ky nuk do të jetë një dizajn i plotë i faqes, por vetëm një përpjekje për ta bërë atë, kështu që ju duhet të vazhdoni të hulumtoni.

Karakteristikat e funksioneve shtesë të funksioneve të skedarit.php

Shabllonët nuk përdorin gjithmonë skedarin Funksionet.php, por në shumicën e rasteve është e nevojshme. Duhet të vendoset në direktori me temën përkatëse. Ju lutemi vini re se nëse kjo skedar është në dosjen e modelit, atëherë ajo do të merret parasysh kur inicioni temën. Funksionon si një shtojcë. Dhe do të kryejë funksione të tilla siç i jepni ju.

Qëllimi kryesor i skedarit Funksionet.php është të përcaktojë funksionet e personalizimit të disponueshëm në administrator për një temë të caktuar. Kjo do të thotë, të gjitha funksionet që futni në Funksionet.php do të shfaqen në panelin e administratorit, ose në faqen për përdoruesin. Në mënyrë tipike, kjo është duke ndryshuar skemën e ngjyrave për faqen WordPress, duke ndryshuar fontin dhe më shumë. Por ka shumë përdorime për këtë skedar. Sidoqoftë, kjo është një histori krejt tjetër ...

Karakteristikat e skedarëve të shabllonit php

Skedarët php do të jenë përgjegjës për pjesë të veçanta të faqes. Ato përcaktojnë si faqet përbërëse ashtu edhe titujt, kategoritë dhe pjesët e tjera që do t'i shfaqen përdoruesit. Pasi që ju jeni krijuesi i temës tani, ju mbetet juve të vendosni se cilat dhe sa skedarë shablloni 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 faqja do të funksionojë, por më pak funksionalitet do të ketë. Mendoni me kujdes se cilat skedarë ju duhen dhe pa cilat mund të bëni.

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

1. Stili.css.
2. Indeksi.php

Webmasterat me përvojë arrijnë të modifikojnë skedarin index.php në një mënyrë të tillë që mjafton vetëm të bëni cilësime për fundin, shiritin anësor, kërkimin, arkivin, kategoritë, faqet, etj. Por më mirë të përpiqeni të bëni një model WordPress në të cilin do të jetë çdo skedar kryejnë funksionin përkatës.

Edhe nëse nuk specifikoni aksidentalisht ndonjë skedar shablloni, WordPress automatikisht do të shtojë cilësimet e veta të paracaktuara në sit. Për shembull, nëse nuk shtoni një skedar përgjegjës për komentet, motori do të gjejë versionet e tij të këtij funksioni në drejtoritë - për shembull, wp-comments.php. Pastaj komentet "e huaja" do të priten në strukturën e faqes tuaj dhe nuk do të përmbushin kërkesat e modelit. Për të parandaluar që kjo të ndodhë, duhet të shtoni të gjithë skedarët kryesorë për të shfaqur përbërësit e ndryshëm të faqes:

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

Pas gjenerimit të secilës prej këtyre skedarëve, që faqja të fillojë t'i shfaqë ato, duhet të futni të dhëna mbi to në skedarin kryesor të modelit index.php. Për ta bërë këtë, specifikoni në index.php etiketat që çojnë në skedarët e emëruar. Për shembull:

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

  get_header () etiketa tamplate;

• për fundin e faqes është e njëjtë, por në vend të kokës, specifiko fundin, etj.

Një shembull i përfshirjes së njërit prej skedarëve të shabllonit në index.php do të duket kështu:. Ju do të duhet të kërkoni për informacion të veçantë për secilin prej skedarëve kryesorë të specifikuar të kyçit. Gjeni manualë për secilën 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 një dilemë se cilin lloj shablloni duhet të zgjidhni. Motori siguron një zgjedhje. Ose mund të zgjidhni një shabllon me Hierarkinë e Modelit të lidhur, ose një paraqitje me Etiketa të Kushtëzuara.

Opsioni i parë tashmë është konsideruar. Të gjithë skedarët e shabllonit php janë Hierarkia e Modelit. Kjo është, duke ndjekur rregullat e kësaj hierarkie, ju gradualisht krijoni skedarë të veçantë të paraqitjes. Kështu, ju do të krijoni një model të plotë nga një numër përbërësish funksionalë të php. Hierarkia në këtë rast funksionon mbi parimin e ngarkesës 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 kryesor i shabllonit index.php do të ngarkohet.

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

Ndonjëherë parimi i hierarkisë së shabllonit nuk është i mjaftueshëm 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ë një sit 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 if / other (nëse / atëherë). Kështu që nuk duhet të shtoni një det me skedarë php me numrin e secilës kategori, por mund të shkruani kushtet për secilën ID një herë.

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

Disa njerëz pëlqejnë së pari të krijojnë një plan urbanistik të dizajnit të ardhshëm duke përdorur programe të ndryshme, dhe vetëm pastaj ta transferojnë atë në një motor të caktuar. Kjo është me të 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 kompensoni motorin WordPress pa përdorur ndonjë kod, atëherë mund të përdorni ndihmën e njërit prej shërbimeve të njohura.

Ju lutemi vini re se ky është një shërbim me pagesë, kështu që modeli do të jetë vetëm gjysma juaj. Porositni këtë shërbim vetëm si një mundësi të fundit, nëse paraqitja ju duket e mirë, por nuk keni më forcën për ta modeluar atë. Ka shumë programues që janë gati 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 Photoshop. Likeshtë si një paraqitje grafike e dizajnit tuaj. Për ta kompensuar, duhet të shtoni shënimin html në një redaktues teksti. Gradualisht, ju do të ndryshoni secilën nga pikat e kësaj shenje, duke arritur rezultatin përfundimtar, i cili tregohet në paraqitjen. Menjëherë specifikoni përqendrimin e modelit tuaj, si dhe madhësitë e pjesëve të tij të ndryshme.

Hapi tjetër është të shtoni imazhe në sfond. Mund t'i bëni vetë duke përdorur të njëjtin aplikacion Photoshop. Opsioni më i lehtë është krijimi i imazheve të sfondit gradient. Tjetra, filloni të krijoni logon tuaj. Zgjidhni gradualisht të gjitha kërkesat e paraqitura - rregulloni titullin e faqes, fundin e faqes, 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 shablloni në drejtorinë e tij në mënyrë që faqja të ngarkohet në përputhje me kërkesat tuaja.

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

Përshëndetje, sot vendosa të botoj një artikull për krijimin e një faqosje të faqes në internet, dhe të cilin ne më pas do ta paraqesim dhe do ta tërheqim motor shtypi... Prandaj, nëse nuk doni të humbni botimin e këtyre artikujve, atëherë pa dyshim regjistrohuni në azhurnimet e blogut dhe pas botimit të artikullit menjëherë do të mësoni për të. Krijimi i një faqosje të faqes psd dhe krijimi i një shablloni wordpress, është në të vërtetë një proces shumë i thjeshtë dhe jam i sigurt që ju mund të ndiqni udhëzimet e mia dhe t'i merrni vetes një model krejtësisht unik.

Për të krijuar një model, nuk kemi nevojë për shumë njohuri, njohuri Html dhe CSS, thjesht lexoni artikujt në temat në këtë blog. Kushtojini vëmendje të veçantë përdorimit të etiketave DIV dhe etiketave SPAN.

Tani le të kuptojmë se çfarë na duhet në mënyrë që të krijojmë një plan urbanistik të PSD-së dhe më pas ta krijojmë këtë model për sitin. Në fakt, nuk ju nevojiten shumë për këtë, një program fotoshop që mund të shkarkohet në Internet, shpresoj se ky nuk do të jetë problem për ju dhe shkarkoni materialet burimore për këtë.

Gjithashtu së shpejti do të botoj artikuj në të cilët do të flas për mënyrën e krijimit të teksteve dhe sfondeve për sitin, prandaj regjistrohuni në azhurnimet e blogut

Krijimi i dokumentit.

Tani le të fillojmë të krijojmë paraqitjen dhe të krijojmë një dokument të ri. Zgjidhni skedarin - krijoni. Zgjidhni dimensionet për dokumentin 960 në 1600 piksele.

Vizatoni dy udhëzues, majtas dhe djathtas. Për ta bërë këtë, thjesht klikoni mbi vizore dhe vizatoni linja.

Tani duhet të ndryshojmë përmasat e kanavacës. Për këtë ne zgjedhim Madhësia e imazhit kanavacë dhe vendosni madhësinë e kanavacës në 1200 x 1600 pixel. Pas kësaj, mbushni këtë zonë me të bardhë duke përdorur Paint Bucket Tool.

Grupet për modelin.

Tani le të krijojmë grupe për sitin. Le të krijojmë grupe standarde si në të gjitha modelet: kryefjala, menuja, përmbajtja, kolona anësore dhe faqja e faqes. Veryshtë shumë e lehtë për ta bërë këtë, në menunë e shtresave, klikoni në imazhin e dosjes; për të riemëruar grupin e krijuar, thjesht duhet të klikoni dy herë në emër dhe të futni emrin e dëshiruar.

Titulli i faqes.

Tani le të fillojmë duke krijuar një titull për sitin. Gjëja e parë që duhet të bëni është të hapni një cilësi të quajtur "Cilësi 1"... Dhe tani ne kemi nevojë për të prerë sfondin e zi, është shumë e lehtë për ta bërë këtë, zgjidhni mjetin "Shkop magjik" dhe klikoni në sfondin e zi, tani klikoni me të djathtën në zonën e dritës dhe zgjidhni artikullin "Përmbys zgjedhjen".

Hapi tjetër është të vendosni saktësinë e kufijve tanë, të zgjidhni butonin e djathtë të miut dhe artikullin për të përsosur buzën. Dhe vendosni të gjitha cilësimet siç tregohet në foto.

Tani zgjedhim “ shtresat - të reja - kopjoni në shtresën e re". Tani merrni shtresën me miun dhe tërhiqeni atë mbi vizatimin tonë.

Hapi tjetër është të rrokullisni vizatimin. Për ta bërë këtë, zgjidhni Ndrysho-Transformo-Rrotullo 90 gradë në drejtim të akrepave të orës. Pas kësaj, duke shtypur butonin e majtë të miut, do të duhet të zhvendosni shtresën tuaj, siç tregohet në foton më poshtë.

Tani duhet të rrisim ngopjen e imazhit tonë dhe për këtë shkojmë në skedinë Imazhe - Korrigjim - Ngjyrosje / Saturim... Tani duhet të zvogëlojmë shkëlqimin e fotos në -100. Dhe kjo është ajo që duhet të marrim:

Tani le të shkruajmë logon e faqes sonë të internetit. Për këtë duhet të instalojmë një font të ri. Unë mendoj se ju keni shkarkuar tashmë skedarin burim dhe ka edhe një skedar font në arkiv. Gjëja e parë që duhet të bësh është të heqësh zinxhirin e fontit. Tani duhet të shkojmë në dosje (më shpesh kjo është C: / windows - Fonts Drive).
Dhe kopjoni të gjitha skedarët e shkronjave atje. Tani rindizni programin, dhe kjo font do të jetë në dispozicion për ju.
Tani zgjidhni mjetin Tekst dhe zgjidhni shkronjën tonë, ngjyrosni të bardhën dhe krijoni një logo pranë udhëzuesit të majtë. Ja çfarë kam marrë.

Tani le të krijojmë një menu në anën e djathtë. Do të përbëhet nga tre pika kryesore dhe kjo është Shtëpia, Kontaktet dhe për autorin. Zgjidhni përsëri mjetin Teksti dhe klikoni ato në vendin e duhur. Ngjyra është e bardhë dhe shkronja është Latine e gjerë dhe madhësia është 18 pixel.

Krijoni një shtresë të re. Tani merrni mjetin "lasso drejt" dhe zgjidhni butonin rreth njërës prej etiketave.

Dhe mbushni zonën e zgjedhur me ngjyrën 2A2A2A. Tani ndryshoni rendin e shtresave, transferoni shtresën me mbishkrimin mbi shtresën me mbushjen.

Përmbajtja kryesore e faqes.

Dhe tani kemi një buton menuje pasi të klikohemi. Tani duhet të shkojmë në dosjen Content dhe të krijojmë një shtresë të re në të.

Ne hapemi foto 3 dhe vendoseni poshtë të gjitha shtresave. Me ndihmën e transformimit, ne rrisim madhësinë e fotos derisa ajo të mbushë të gjithë hapësirën.

Tani rregulloni shkëlqimin dhe kontrastin e strukturës. Për ta bërë këtë, shtypni butonat Ctrl + Shift + U... Zgjidhni Imazhin - Korrigjimin - Lakoret.

Ne vendosim cilësimet si në foto.

Krijoni një shtresë të re dhe tani ne do të zgjedhim zonën e përmbajtjes me ju. Zona e përmbajtjes do të jetë e bardhë dhe 660 në 1200 piksel. Për ta bërë këtë, zgjidhni mjetin "zona drejtkëndëshe dhe stili i caktuar - përmasat e specifikuara", ku duhet të fusim dimensionet e fushës, dhe pastaj të plotësojmë fushën me mjetin "Plotëso".

Tani duhet të vendosim një goditje në fushën tonë. Zgjidhni shtresën në të cilën ndodhet fotografia jonë dhe klikoni në butonin "Shto stilin e shtresës", në menunë zbritëse zgjidhni Stroke.

Dhe vendosni cilësimet e mëposhtme - trashësia 1 piksel dhe ngjyra c8c7c7.

Tani ju hapni foto 4, duke përdorur shkallëzimin ne zvogëlojmë madhësinë, duhet të jetë rreth dhjetë pixel më i madh nga fusha e bardhë në të djathtë dhe të majtë. Në pjesën e sipërme dhe të poshtme, duhet të vendosësh 50-60 piksel.

Tani shtypim kombinimet e butonave Ctrl + Shift + U për të desaturuar strukturën dhe për të rregulluar shkëlqimin duke përdorur lakoret. Cilësimet si në foto.

Zgjidhni shtresën me kanavacën tonë të bardhë, klikoni me të djathtën dhe zgjidhni artikullin " Zgjidhni piksele».

Tani zgjidhni shtresën gri dhe klikoni zgjedhja - modifikimi - ngjeshja, dhe vendoseni që të tkurret me tre pixel. Pas kësaj ne kemi nevojë për të përmbysur zgjedhjen tonë, ne tashmë e kemi bërë këtë, dhe është e lehtë për të bërë këtë, zgjidhni Përzgjedhja-përmbysja, Shtyp butonin Del... Ja se çfarë duhet të marrim:

Tani krijoni një maskë për të njëjtën shtresë gri.

Zgjidhni një gradient bardh e zi dhe klikoni me të majtën për të vizatuar nga mesi në fund të faqes dhe kështu zbutni tranzicionin.

Tani le të krijojmë butonat e navigimit në faqe. Për ta bërë këtë, ne vetëm duhet të vizatojmë një drejtkëndësh të zi, ju mund të zgjidhni madhësinë sipas gjykimit tuaj. Gjithashtu, në secilin buton duhet të regjistroni emrin e faqeve. Për etiketat, përdorni fontin Times New Roman dhe madhësinë 18 piksele.

Tani le të hapim një fotografi me ikona dhe t'i shtojmë ato në anën e kundërt të menusë kryesore. Tani duhet të fusim përmbajtjen në të dy anët me njëzet piksel. Tani duhet të shtojmë një titull në artikullin tonë të parë, ngjyra e tekstit është e zezë. Për datën dhe numrin e komenteve, kam përdorur ngjyrën cb8154.

Tani, vizatoni një vijë për të ndarë titullin nga përmbajtja kryesore e faqes. Në mënyrë që të vizatoni një vijë të drejtë, duhet të zgjidhni mjetin me laps dhe të mbani të shtypur butonin Shift dhe të vizatoni një vijë duke shtypur në fillim dhe duke tërhequr në fund të vijës.

Tani duhet të krijojmë një vend për pamjen paraprake. Për ta bërë këtë, krijoni një drejtkëndësh me dimensionet që na nevojiten, vendosa të bëj 165 x 165 piksel dhe ta mbush me të zezë. Zbatoni cilësimet në të: goditje dhe hije.

Goditje në tru.

Hije.

Tani le të shtojmë një tekst falas. Ja se çfarë duhet të marrim:

Tani pas përfundimit të artikujve, duhet të ndani 30 pikselët dhe ngjyrën gri (СССССС). Pastaj vizatoni katër katrorë 32 x 32 px dhe mbushni ato me të kuqe 8E0A13.

Vizatimi i një forme kërkimi.

Për ta bërë këtë, ne vetëm duhet të vizatojmë një zonë drejtkëndëshe me ngjyrë të bardhë, të aplikojmë një hije të brendshme në të.

Tani ne vizatojmë një buton të kuq me të njëjtën madhësi 32 me 32 dhe të kuqe dhe futim fjalën “ Kërko».

Shtylla anësore.

Në një shtresë të re, vizatoni një drejtkëndësh të gjerë 270px dhe mbusheni me ngjyrën 1F1F1F. Ne gjithashtu shtojmë një titull që është i njëjtë i gjerë 270px dhe i lartë 25px, i mbushur me të zezë.

Tani duhet të shkruajmë kategori për blogun. Teksti në shkronjën Times New Roman, me madhësi 16 pixel. Ju duhet të shtoni një fotografi në secilin element të menusë. Ne zgjedhim " Shifër arbitrare"Dhe zgjidh formën e pikës raster" Ornament 4”Dhe plotësojeni me 818181.

Fund faqja e faqes.

Ne nuk do të shqetësohemi shumë me fundin, thjesht mbushni të gjithë fushën me të zezë dhe shtoni një menu me shkronjën Times New Roman, 18 pixel në madhësi dhe ngjyra E6E6E6.

Nëse dëshironi të shkarkoni një model që ka dalë, atëherë klikoni në butonin dhe një lidhje shkarkimi do të jetë në dispozicion për ju. Me këtë përfundon artikulli dhe mendoj se tani e dini që hapi i parë për të krijuar një shabllon wordpress është krijimi i faqosjes së faqes PSD.

Ky artikull do t'ju ndihmojë të krijoni temën më të thjeshtë të WordPress. Megjithëse Codex siguron dokumentacion të gjerë për këtë temë, për një fillestar mua më duket paksa shqetësuese. Prandaj, në këtë "tutorial" do t'ju tregoj se si funksionojnë temat e WordPress dhe do t'ju tregoj se si të përshtatni një model të papërpunuar HTML për to. Kjo nuk kërkon njohuri të PHP nga ju, por është mirë nëse dini Photoshop dhe CSS për të krijuar një dizajn.

1. Blog përpara

Para se të fillojmë, le të hedhim një vështrim në temën e paracaktuar të WordPress dhe të kuptojmë se nga çfarë përbëhet. Le të shënojmë elementet (titulli, titulli i postimit, forma e kërkimit, navigimi, faqja, etj.).

Faqja e parë standarde ( indeksi.php)

Single standarde ( beqare.php)

2. Paraqitjet në Photoshop

Bazuar në pamjen dhe ndjesinë e temës së paracaktuar, hartoni faqosje në Photoshop për blogun tuaj. Për këtë shembull, unë jam duke përdorur GlossyBlue, një nga temat e mia falas. Shkarkoni demo.zip për të parë skedarin e përfunduar Photoshop.

3. HTML dhe CSS

Kur dizajni PSD është gati, krijoni një model HTML + CSS për secilën faqe. Duke ndjekur hapat e këtij udhëzimi, ju mund të përdorni skedarët e mi HTML nga GlossyBlue demo.zip... Pas shpaketimit të arkivit, do të shihni indeksi.html, i vetëm.htmldhe faqe.html... Tjetra, do t'i përdor për t'i kthyer në një model.

Pse së pari të krijoni HTML statik? Kjo është kryesisht e nevojshme sepse do të thjeshtojë shumë procesin e zhvillimit. Zakonisht krijoj një skedar HTML për secilin model, kontrolloj vlefshmërinë e tyre (shënimi HTML dhe CSS) në të gjithë shfletuesit. Pas kësaj, mbetet vetëm të prisni dhe ngjisni kodin WordPress. Kështu që nuk duhet të shqetësoheni për gabimet HTML ose CSS.

4. Si funksionon tema WordPress

Nëse shkoni në dosjen e paracaktuar të temës ( wp-përmbajtja / temat / parazgjedhur), do të shihni shumë skedarë php (të quajtur skedarë shablloni) dhe një skedar stili.css... WordPress zakonisht përdor disa skedarë shablloni ( indeksi.php , header.php, sidebar.php,dhe footer.php).

Më shumë detaje në Codex: "Arkitektura e sitit" dhe "Hierarkia e Modelit".

5. Dopjoni skedarët e modelit

Kopjoni dosjen HTML nga GlossyBlue në dosje wp-përmbajtja / temat... Pas kësaj, shko te direktoria e paracaktuar e temës, kopjo komentet.php dhe forma e kërkimit.php në dosje shkëlqim i shkëlqyeshëm.

6. Stili.css

Shkoni në dosjen e paracaktuar të temës, hapni skedarin stili.css... Kopjoni tekstin e komentuar në fillim të skedarit dhe ngjiteni në të stili.css Temat me shkëlqim blu. Ju mund të ndryshoni titullin dhe informacionin e autorit nëse dëshironi.

7. Ndarja e skedarëve

Tani duhet të kuptojmë se ku t'i ndajmë skedarët HTML në pjesë: header.php, sidebar.php dhe footer.php... Pamja e ekranit më poshtë tregon një version të thjeshtuar të skedarit tim indeks, si dhe parimin e ndarjes së tij.

8. Header.php

Zbuloni indeksi.html... Ju duhet të prerë pjesën nga lart atje ku mbaron, ngjisni atë në një skedar të ri php dhe ta ruani si të tillë kokë.php.
Shko te parazgjedhja e dosjes së temës, hap të re kokë.php... Kopjoni dhe zëvendësoni etiketat aty ku e kërkon kodi php: titulli, lidhja, fletët e stileve, klasa h1 dhe div \u003d përshkrimi.

Menuja e lundrimit (wp_list_pages) Zëvendësoni etiketat li në ul id \u003d nav ndezur;

9. Shiriti anësor.php

Kthehuni te indeksi.html, prerë kodin atje ku fillon forma id \u003d forma e kërkimit dhe para se të mbyllet etiketimi div id \u003d shirit anësor, vendoseni në një skedar të ri php dhe ruajeni si shirit anësor.php.

• Zëvendëso forma id \u003d forma e kërkimit me gjithë përmbajtjen të ndezur.
• Zëvendësoni etiketat li kategoritë në
• Zëvendësoni etiketat li arkivat në

10. Footer.php

Kthehuni te indeksi.html... Nxirrni nga aty kodin div id \u003d fund përfshirëse me div tag id \u003d fundi i faqes deri në fund / html pastaj vendosni të reja footer.php.

Hyrjet e fundit Këtu kam përdorur query_post për të shfaqur 5 postimet më të fundit në blog.

"Komentet e fundit" "Komentet e fundit" të krijuara nga shtojca (përfshirë në dosjen e temës)

11. Indeksi.php

Tani në tuajin indeksi.html duhet vetëm të qëndrojë div id \u003d përmbajtja... Ruani skedarin si indeksi.php... Vendosni linjat: get_header, get_sidebardhe merrni_footer sipas renditjes që ato paraqiten në model.

12. Analizimi i ciklit

Ky lak shfaq postimet e blogut në vijimësi bazuar në cilësimet tuaja. Pamja e ekranit më poshtë ilustron se si funksionon. Fillimisht, cikli kontrollon për praninë e rekordeve dhe nëse nuk gjen ndonjë, lëshon një mesazh "Nuk u gjet".

13. Kopjimi i një cikli

Shko te drejtoria e parazgjedhur e temës, hap indeksi.php... Kopjoni lakun nga standardi indeksi.php në mes tuaj div id \u003d përmbajtja ../ div... Pas kësaj, zëvendësoni tekstin statik me etiketat e shabllonit WordPress: data e postimit, titulli, kategoria, komentet, lidhja tjetër dhe e mëparshme.

14. Paraqitja e temës

Urime! Ju keni krijuar pjesën publike (pjesa kryesore e modelit). Tani shkoni në panelin e administratorit, shkoni te faqeshënuesi Projektimi, ju duhet të shihni një temë GlossyBlue. Aktivizojeni atë dhe shkoni në seksionin publik për të parë rezultatin në veprim.

15. Beqar.php

Timeshtë koha për të krijuar një model beqare.php... Nëse dëshironi, mund të përsërisni hapat, duke transferuar kodin nga tema standarde. Por më duket më e lehtë të përdor të sapo krijuarën indeksi.phpduke e ruajtur si beqare.php... Zbuloni beqare.php nga tema standarde dhe kopjoni etiketat e modelit atje ku dëshironi. Tjetra, lidheni komente_template... Skenari i mëposhtëm tregon ndryshimet që kam bërë:

16. Faqja.php

Tani e re beqare.php ruaj me titull faqe.php... Hiq datën e postimit, formularin e komentit, lidhjet e ardhshme / të mëparshme. Kjo është e gjitha - shablloni juaj. faqe.phpgati

17. Fshirja e skedarëve HTML

Fshini të gjitha skedarët HTML nga dosja shkëlqim i shkëlqyeshëm(nuk do të na duhen më). Kjo është teknikisht e mjaftueshme për të krijuar një temë themelore të WordPress. Ju mund të keni vërejtur se ka më shumë skedarë PHP në temën standarde. Epo, në fakt, nuk ju duhen vërtet nëse keni nevojë për një temë të thjeshtë. Për shembull, nëse kërko.php ose 404.php nuk do të jetë në dosjen e temës, WordPress do të përdorë automatikisht indeksi.php për të shfaqur faqen. Lexoni Hierarkinë e Modelit për më shumë detaje.

18. Modeli i faqes WordPress

Për një shembull përfundimtar - Unë do t'ju tregoj se si të përdorni një Model Page për të krijuar një faqe Arkivi që do të përmbajë një listë të të gjitha postimeve në blogun tuaj (i dobishëm për një sitemap). Kopjoni arkivat.php nga dosja e paracaktuar e temës. Hiqni kodin e panevojshëm dhe përfundoni me diçka të tillë:

Shabllonet falas të faqeve të internetit PSD janë të dobishme për vendosjen e biznesit, portofolit dhe llojeve të tjera të faqeve të internetit. Ato mund të gjenden kudo në Internet. Për të mos thënë që shumica e tyre janë të shëmtuar, por rrallë do të gjesh diçka që do të tejkalonte standardet e tua. Meqenëse Adobe Photoshop është një nga programet “e lehtë për t’u përdorur, e vështirë për t’u zotëruar”, shumë fillestarë dhe profesionistë zgjedhin të shkojnë me shabllonet PSD për faqen e tyre të parë në internet. Kjo për shkak se shabllonet PSD në internet janë të lehta për tu konfiguruar, modifikuar dhe përdorur. Sidoqoftë, duhet të merrni ato shabllone uebi nga burime të besueshme. Easyshtë e lehtë të biesh në dashuri me një dizajn të modelit të uebit, ta shkarkosh me entuziazëm dhe ta shpaketosh në Photoshop, vetëm për të kuptuar se është një rrëmujë e plotë dhe nuk mund ta gjesh rrugën përreth tij.

Shabllonet e mira të uebit janë estetikisht të këndshme, qetësuese për sytë. Nga ana tjetër, shabllonet e shkëlqyera në internet, kombinojnë atë lloj bukurie me përdorshmërinë për të krijuar shabllonet më të mira tërheqëse dhe të lehta për t'u përdorur.

Pavarësisht nëse doni një shabllon uebi të portofolit, një shabllon personal të blogut, një shabllon të tregtisë elektronike ose një shabllon restoranti, do ta gjeni me të vërtetë të dobishme këtë listë të shablloneve më të mira falas PSD.

SHKARKIME TL PAKUFIZUARA: 500,000+ Modele Uebfaqeje & Asete Dizajnimi

Të gjitha modelet e faqes në internet që ju nevojiten, dhe shumë elementë të tjerë të dizajnit, janë në dispozicion për një pajtim mujor në Envato Elements. Abonimi kushton 29 dollarë në muaj dhe do t'ju japë qasje e pakufizuarnë një bibliotekë masive dhe në rritje të 500,000+ artikuj që mund të shkarkohen aq shpesh sa ju nevojiten (Fotografi të aksioneve, gjithashtu)!

SHKARKO TANI

Kur ta keni gati modelin, vjen koha ta shfaqni në një mënyrë që do të frymëzojë të gjithë. Ndërsa mund të përdorni një pamje të thjeshtë të ekranit, ju gjithashtu mund t'i çoni gjërat në një shkallë krejtësisht të re me një model të faqes në internet të PSD. Kjo pako e veçantë përfshin shtatë stile të ndryshme që ju t'i merrni në përfitimin tuaj. Nga iMac, Macbook dhe një faqe në dy iPhone dhe Macbook të prerë, opsionet janë atje, në majë të gishtave tuaj. Ju gjithashtu mund të modifikoni sfondin duke e mbajtur atë transparent ose të shtoni ngjyrë ose madje imazh. Bëni gjërat siç i pëlqeni dhe shfaqni punimet tuaja në dritën më të mirë të mundshme.

Makete super minimale, të pastra dhe mbresëlënëse të pajisjeve të cilat mund t'i përdorni për të shfaqur fleksibilitetin e faqes suaj të internetit. Në çantë, ka dymbëdhjetë variacione të ndryshme, secila origjinale, krijuese dhe tërheqëse e vëmendjes. Për më tepër, ju mund të zgjidhni midis Macbook, iPad dhe iPhone. Thjesht tërhiqni dhe lëshoni krijuesit tuaj dhe lini që modeli i dëshiruar t'i shfaqë ato menjëherë. Të mirat e tjera përfshijnë njëmbëdhjetë mbulesa hije, sfond të personalizueshëm dhe gjashtë opsione kryesore ngjyrash. Tani keni një zgjidhje të plotë për të bërë një prezantim që do të kthejë kokën. Nëse mbajtja e gjërave të thjeshta dhe minimale është filxhani juaj i çajit, kjo paketë modeli është perfekte për ju.

Një shabllon mahnitës, modern dhe miqësor për përdorimin e faqes në internet me gjashtë pamje të ndryshme izometrike. Në rast se ky është stili i prezantimit që do të donit të sportonit për praninë tuaj në internet, bëjeni atë të ndodhë brenda pak kohe. Nuk ka nevojë të kaloni orë të panumërta se si dëshironi të shfaqni punën tuaj kur një model mund ta bëjë atë të ndodhë me një gisht të shpejtë. Thjesht rrëshqisni në planet tuaja dhe kjo është mjaft e mjaftueshme. Ju mund të shtoni paraqitje të shumëfishta të faqeve për të shfaqur të gjithë faqen tuaj të internetit, si dhe të redaktoni sfondin. Me pak fjalë, produkti përfundimtar do të jetë një kryevepër e vërtetë, duke ju ndihmuar të fitoni klientë të rinj.

Një koleksion i plotë i modeleve të ndryshme të faqeve në internet që shfaqin pajisje të ndryshme. Tani mund të shtyni fleksibilitetin e faqes tuaj në iPhone, iMacs, Macbooks dhe iPad. Gjithashtu, do të gjeni katërmbëdhjetë skena të ndryshme PSD me dimension 4000 x 2500 px. Ju mund t'i përdorni këto për të gjitha llojet e prezantimeve të ndryshme që shkojnë përtej vitrinës së dizajnit të faqes në internet. Karakteristikat e tjera përfshijnë rregullimin e hijeve dhe dritës, objekte inteligjente (thjesht tërhiqni dhe lëshoni), zoom 50% dhe më shumë. Ju gjithashtu mund të ndryshoni ngjyrën e sfondit dhe të shijoni personalizim shumë të hollësishëm. Me redaktim dhe përmirësim super të shpejtë, ju mund të keni prezantime të ndryshme të ndryshme të disponueshme menjëherë brenda pak minutash.

Një tjetër alternativë fantastike për të gjithë shabllonet e tjera të talljeve në faqet e internetit, ku kërkoni një pajisje për të shfaqur dizajnin tuaj. Në këtë rast, ju merrni dymbëdhjetë skedarë të ndryshëm PSD të përfshirë në çantë, përmasat 4000 x 2500 px. Objektet dhe hijet janë të ndara për redaktim të përsosur. Kini parasysh, kjo pako e modeleve vjen me udhëzime të cilat do t'ju ndihmojnë në udhëtimin tuaj për të realizuar një shfaqje të mrekullueshme dhe foto-realiste të dizajnit të faqes tuaj. Falë shtresave të objekteve inteligjente, nuk keni nevojë të investoni shumë kohë dhe energji në aktivizimin e këtyre paraqitjeve të modeleve. Thjesht rrëshqisni në imazhin tuaj dhe shikojeni atë në veprim në një çast.

Avire

Avire është një model shumë i personalizueshëm me një faqe që përmban një dizajn të stilit të sheshtë. Simpleshtë e thjeshtë për t’u përdorur dhe modifikuar për t’iu përshtatur nevojave tuaja. Me disa ndryshime këtu dhe atje, ai padyshim mund të plotësojë të gjitha kërkesat tuaja.

Hexal

Hexal është një model unik i portofolit që garantohet të lërë përshtypje të qëndrueshme për vizitorët e faqes suaj të internetit. Definitelyshtë padyshim perfekt për krijuesit e faqeve në internet, dizajnerët grafikë dhe këdo me një mendje krijuese.

Dizajn i strukturuar

Ju mund ta përdorni këtë skedar falas PSD për qëllime personale dhe komerciale. Isshtë një model ueb portofoli me një faqe që u shërben njerëzve krijues.

Kaloni

Switch është një shabllon bootstrap 3D për shumë qëllime, që do të thotë se mund të bëhet gjithçka që dëshironi të jetë! Shërben si një model i shkëlqyeshëm me një faqe që ofron zgjidhje të ndryshme për të gjitha nevojat tuaja.

Kappe

Kappe është një shabllon krijues me shumë qëllime. Me dizajnin e tij të bazuar në rrjet, ju mund të shndërroheni në një blog personal ose në një faqe në internet biznesi me disa klikime të miut.

Njoftoj

Notify është faqja më e mirë për uljen e aplikacioneve në internet. Dizajni i tij elegant dhe modern do të sigurojë që mesazhi juaj të përcillet ashtu si e keni imagjinuar.