Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ
  • në shtëpi
  • Hekuri
  • Paraqitja e shabllonit të Wordpress nga paraqitja HTML. Si të bëni një shabllon unik të WordPress-it, bëjeni vetë në një orë

Paraqitja e shabllonit të Wordpress nga paraqitja HTML. Si të bëni një shabllon unik të WordPress-it, bëjeni vetë në një orë

Ky tutorial do t'ju tregojë se si të krijoni një shabllon të ri faqesh për shabllonet e WordPress Cherry. Korniza.

    Hyni në panelin tuaj të administratorit të WordPress.

    Hapni menunë Faqe -> Shto të re dhe krijoni një faqe të re me një shabllon të ri faqeje.

    Futni një titull për faqen dhe ruani ndryshimet tuaja. Në kolonën e djathtë në panel, mund të zgjidhni një nga shabllonet e faqeve të përdorura në temën tuaj. Duhet të shtoni një shabllon të ri faqeje në këtë listë. Të gjitha këto shabllone janë të vendosura në një dosje në serverin tuaj. Por ju duhet të shtoni një shabllon të ri faqe në dosje wp-content / tema / tema #####.

    Krijoni një skedar të ri .php në çdo redaktues si Dreamweaver ose Notepad ++ dhe emërtojeni si e re.php ... Shtoni kodin e mëposhtëm në këtë skedar:

    Ruani skedarin dhe ngarkojeni në një dosje wp-content / tema / tema ##### në serverin tuaj.

    Tani kthehuni te faqja që keni krijuar në panelin tuaj të administrimit të WordPress. Në panel Atributet e faqes ju mund të zgjidhni një shabllon të ri faqeje të quajtur "Custom".

    Hapni sërish skedarin new.php dhe filloni të shtoni përmbajtjen tuaj. Skedari mund të përmbajë çdo gjë që dëshironi, duke përfshirë përmbajtje të pandryshueshme ose elemente të paraqitjes së faqes që do të japin përmbajtjen e tij.

    Ju mund të përdorni elementë kodi të shablloneve të tjerë të faqeve nga dosja wp-content / tema / CherryFramework për të krijuar një faqe specifike.

    Le të shtojmë fillimisht një kokë dhe një fund në shabllonin e ri të faqes:

    Nëse i ruani ndryshimet tuaja, mund t'i shihni ato në faqen:

    Tani ju duhet të zgjidhni llojin e përmbajtjes që dëshironi të përdorni në këtë faqe. Le të themi se nuk keni një shabllon të veçantë faqesh për postimet e personalizuara "Ekipi ynë". Dhe ju pëlqen dizajni i shabllonit të faqes Testimonials dhe dëshironi ta përdorni atë dizajn për postimet "Ekipi ynë". Për këtë në meny Dizajni -> Redaktori (Pamja -> Redaktori) mund ta gjeni lehtësisht skedarin që përmban kodin e shabllonit të Testimonials. Emri i tij faqe-testi.php.

    Hapeni këtë skedar për redaktim. Kopjoni vetëm kodin e përmbajtjes, pasi tashmë keni shtuar kokën dhe fundin (më poshtë është një shembull i këtij kodi, kodi juaj mund të duket ndryshe):

    "data-motopress-wrapper-file =" page-testi.php "data-motopress-wrapper-type =" përmbajtje ">
    "data-motopress-type =" static "data-motopress-static-file =" static / static-title.php ">
    "id =" content "data-motopress-type =" loop "data-motopress-loop-file =" loop / loop-testi.php ">
    sidebar "id =" sidebar "data-motopress-type =" static-sidebar "data-motopress-sidebar-file =" sidebar.php ">

    Ngjitni kodin e kopjuar në skedarin new.php. Zëvendësoni Emri i shabllonit: Me porosi Emri i shabllonit: Ekipi

    Dhe zëvendësoni faqe-testi.php e re.php në këtë kod.

    Ky kod përmban gjithashtu një lidhje me skedarin loop / loop-testi.php... Ky është një skedar tjetër që duhet të kopjoni dhe modifikoni. Kopjo skedarin loop-testi.php nga dosja wp-content / tema / CherryFramework / loop dhe ngjiteni në dosje wp-content / tema / tema ##### / lak(nëse nuk ka dosje në dosjen tuaj të temës lak, ju duhet ta krijoni atë). Riemërtojeni këtë skedar për shembull në loop-i ri.php dhe hapeni për redaktim. Zëvendësoni fjalën "Testi" në fjalë "Ekipi" në të gjitha rreshtat e skedarit dhe ruani ndryshimet. (Mund të përdorni shkurtoren e tastierës Control (Command) + F për të zëvendësuar fjalët.)

    Kur skedari loop-i ri.php krijuar dhe redaktuar, rihap skedarin e re.php dhe zëvendësoni loop / loop-testi.phploop / loop-new.php në kodin e tij. Si rezultat, kodi juaj do të duket si ky:

    "data-motopress-wrapper-file =" new.php "data-motopress-wrapper-type =" përmbajtje ">
    "data-motopress-type =" static "data-motopress-static-file =" static / static-title.php ">
    "id =" content "data-motopress-type =" loop "data-motopress-loop-file =" lak / loop-new.php ">
    sidebar "id =" sidebar "data-motopress-type =" static-sidebar "data-motopress-sidebar-file =" sidebar.php ">

    Ruani ndryshimet dhe provoni faqen tuaj të re. Tani duhet të përmbajë postime të personalizuara "Ekipi ynë" me një dizajn të faqes së Dëshmive.

Në këtë artikull, unë do t'ju tregoj se si të bëni një shabllon WordPress pa njohuri programimi. Do t'ju duhen disa minuta për të krijuar temën tuaj. Ne do të punojmë me ndihmën e një shërbimi falas dhe të thjeshtë.

Si të bëni vetë një shabllon WordPress

Përpara se të bëni një shabllon për WordPress duke përdorur këtë mjet, duhet të njiheni me atë për çfarë është përgjegjës secili opsion. Këtu janë funksionet e tyre:

  • Emri i faqes. Në këtë seksion, mund të zgjidhni ngjyrën e titullit të faqes së internetit, të vendosni vetë titullin dhe gjithashtu të specifikoni URL-në e logos. Logoja mund të lihet bosh.
  • Madhësia e trupit. Zgjidhni madhësinë e faqes në gjerësi. Për shfaqjen e saktë, është më mirë të lini parazgjedhjen - 100%.
  • Vendndodhja e shiritit anësor. Ky opsion ju lejon të zgjidhni madhësinë dhe pozicionin e shiritit anësor. Ekzistojnë tre opsione përmasash për shiritat anësor majtas dhe djathtas, si dhe aftësia për të krijuar një temë pa shirita anësor.
  • Kolona e tretë. Ky opsion lidh një altoparlant të tretë. Ka opsione të ndryshme.
  • Paraqitja e menysë. Këtu ju zgjidhni paraqitjen e menusë tuaj - ka 4 opsione të ndryshme.
  • Skema e përgjithshme. Skema e personalizueshme e ngjyrave - sfonde të elementeve të ndryshëm, kufijve.
  • Skema e tekstit. Skema e paraqitjes së tekstit: ngjyrat, stilet dhe shkronjat e personalizueshme të të gjitha pjesëve të faqes - titujt, menutë, teksti i trupit dhe të tjera.
  • Tag Cloud. Mund ta aktivizoni dhe çaktivizoni renë e etiketës në shiritin anësor.
  • Arkivat & Kërkimi. Shfaqja e konfigurueshme e arkivave dhe kërkimi - shfaq versionet e plota të testit ose vetëm njoftimet.
  • Zgjedhja e një të drejte autori.

Pra, tani ju e dini se si të bëni një shabllon WordPress. Mbetet për ta marrë atë. Për ta bërë këtë, klikoni butonin "Ruaj" në fund dhe më pas, ku ishte pamja paraprake, klikoni në lidhjen "Files packed: download theme file ZIP" për të shkarkuar arkivin e temës në kompjuterin tuaj. Pas kësaj, ju mund ta instaloni atë në faqen tuaj të internetit.

Pershendetje miq.

Sot do të prekim një temë shumë interesante për shumë. Ju mund të keni vënë re se kohët e fundit kam përditësuar dizajnin e blogut tim, nuk di për ju, por më pëlqen shumë. E krijova këtë shabllon fjalë për fjalë në disa dhjetëra minuta dhe nuk kisha nevojë për ndonjë njohuri të HTML, CSS dhe PHP ose informacion mbi temën e krijimit të shablloneve.

Pra, si të bëni vetë një shabllon për wordpress, pa asnjë njohuri?

Para se të filloj, nuk mund të mos përmend mënyrat e ndryshme për të krijuar shabllone për ta bërë fotografinë sa më të plotë.

Metoda numër 1- ju mësoni HTML, mësoni strukturën e shablloneve. Sigurisht, kjo qasje ka avantazhet e saj, nëse keni kohë dhe dëshirë për të filluar me të. Njohja e HTML nuk ka lënduar ende askënd.

Metoda numër 2- porositni një shabllon nga një profesionist i pavarur. Nëse keni para falas, atëherë sigurohuni që të zgjidhni këtë metodë të veçantë. Kostoja e krijimit të një shablloni cilësor është nga 15,000 në 70,000 rubla.

Metoda numër 3- përdorni softuer special për të krijuar shabllone. Do të sqaroj menjëherë se ky nuk është krijimi i të njëjtit lloj shabllonesh, është mjaft e mundur të krijohet një shabllon unik, i bukur në program. Një shembull është ky blog. E gjitha varet nga imagjinata juaj.

Siç e keni kuptuar tashmë fjalimin, ky artikull do të fokusohet në metodën numër 3.

Ne takohemi, programi për krijimin e shablloneve - (versioni nuk ka rëndësi, unë përdor të dytin, për mendimin tim, i katërti tashmë është lëshuar). Programi paguhet, por ne jemi popull rus (e kuptoni se çfarë dua të them). E di që ka shumë mësime për këtë program në rrjet, por tashmë jam lodhur duke iu përgjigjur të njëjtës pyetje nga abonentët e mi.

Shkarkoni programin, ekzekutoni atë.

1. Zgjidhni “WordPress” në dritaren kryesore të programit.


2. Një shabllon bosh shfaqet në dritaren e shikimit, natyrisht, e gjithë kurba, por në procesin e punës nuk do të ketë asnjë gjurmë të saj.

3. Shkoni te skeda "Ngjyrat dhe shkronjat", zgjidhni një skemë ngjyrash (më vonë do ta korrigjojmë pak), më pëlqen gama e ngjyrave gri të lehta. Klikoni në butonin "Font Sets", zgjidhni fontet (Unë përdor verdana kudo).



4. Shkoni te skeda "Layout", këtu na kërkohet të zgjedhim numrin dhe renditjen e kolonave, si dhe vendndodhjen e kokës (me një kokë të thjeshtë). Unë zgjedh gjithmonë "Dy kolona -> Ana e mesme e djathtë".


5. Në skedën tjetër, na kërkohet të zgjedhim sfondin e shabllonit të ardhshëm. Duke përdorur këtë skedë, mund të krijoni tuajin ose të zgjidhni një sfond ekzistues.


6. Skeda tjetër na fton të personalizojmë fletën e shabllonit.



Vendosni gjerësinë e fletës (mundësisht të paktën 1000 px), hijen dhe kufirin e saj.

7. Në skedën tjetër, na kërkohet të personalizojmë kokën (header ose header). Personalizoni fundin tuaj duke përdorur cilësimet.


1. Rregullimi i gjerësisë dhe lartësisë së kokës.

2. Duke përdorur këtë meny, mund të ngarkoni një titull të përgatitur më parë në program, si dhe të shtoni efekte në të.

3. Duke përdorur këtë meny, mund të shtoni një fotografi të palës së tretë në kokë.

4. Emri i faqes suaj dhe slogani i tij.

5. Vendndodhja e emrit dhe sloganit.

8. Në skedën tjetër, na kërkohet të personalizojmë menunë (zakonisht ndodhet nën kokë). Zgjidhni një stil menuje dhe plotësoni.

9. Në skedën tjetër - "Artikuj", ne jemi të ftuar të personalizojmë pamjen e zonës së vendndodhjes së përmbajtjes (tekst, video, foto, tabela). Personalizojeni duke përdorur cilësimet e dhëna.





1. Imazhi i artikullit (ky parametër nuk ndikon asgjë, mund të lihet ashtu siç është).

2. Duke përdorur këtë meny mund të vendosni stilin e zonës së përmbajtjes (me ose pa goditje).

3. Personalizo shfaqjen e tekstit brenda artikullit.

4. Redaktimi i parametrave të ndryshëm të zonës së përmbajtjes.

5. Personalizo kokën.

6. Personalizo futerin.

10. Me ndihmën e skedës tjetër - "Blloqet", mund të personalizoni pamjen e blloqeve anësore (shiritave anësore).

CILËSIMET DHE SHBALLIN E EKSPORTIT

1. Klikoni në butonin "File" (që ndodhet në këndin e sipërm të majtë të dritares së programit).


2. Zgjidhni "Export-> Export Settings". Shkoni te skeda Properties dhe plotësoni informacionin e kërkuar. Shkoni te skeda "Futnota" dhe zgjidhni të gjitha kutitë.

3. Përsëritni hapin numër një. Zgjidhni "Eksport-> Tema e WordPress".

4. Eksportoni shabllonin si dosje ZIP.



Gjithçka. Tani ju e dini se si të bëni një shabllon WordPress DIY. Fat i mirë me krijimin tuaj.

Mos harroni të komentoni artikullin. Autori i komentit më të mirë, për mendimin tim, (në fund të javës) do të marrë librin tim me pagesë "Si të shesësh produktet e filialeve në internet dhe të fitosh 200% fitim" plotësisht falas.

MËSIM VIDEO “Si të bëjmë një shabllon për WordPress pa njohuri për HTML?

Vetëm mbani në mend se WordPress gjeneron disa klasa që duhet të jenë të pranishme në fletën e stilit. Për shembull klasa aligncenter, alignright dhe alignright shërbejnë për të rreshtuar imazhet dhe për të bllokuar elementët, dhe ato duhet të përfshihen në fletën tuaj të stilit (mund të kopjohen nga fleta e stilit e temës së paracaktuar):


.linjë qendër,
div.aligncenter (
shfaqja: bllok;
margjina-majtas: auto;
margin-djathtas: auto;
}
.alignleft (
noton: majtas;
}
.drejtoj (
noton: djathtas;
}

Klasat e mëposhtme përdoren për të rreshtuar imazhet që kanë titra (mund të kopjohen nga tema e paracaktuar, më vonë, nëse është e nevojshme, të korrigjohen):


.wp-caption (
kufiri: 1px solid #ddd;
text-align: qendër;
ngjyra e sfondit: # f3f3f3;
padding-top: 4px;
diferenca: 10 px;
/ * Parametrat opsionalë që do të bëjnë qoshe të rrumbullakosura në shfletuesit e mbështetur * /
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
kufiri-radius: 3px;
}
.wp-caption img (
diferenca: 0;
mbushje: 0;
kufiri: 0 asnjë;
}
.wp-caption p.wp-caption-text (
madhësia e shkronjave: 11 px;
lartësia e vijës: 17 px;
mbushje: 0 4px 5px;
diferenca: 0;
}

Përveç kësaj, ka disa klasa të tjera të WordPress që nuk kanë nevojë të përshkruhen në fletën e stilit. WordPress gjeneron faqe duke i përdorur ato, ju gjithashtu mund t'i stiloni ato:


.kategoritë (...)
.cat-item / * Kjo klasë u caktohet të gjitha kategorive * /)
.current-cat (/ * stili i kategorisë aktuale * /)
.current-cat-parent (/ * stili për prindin (t) e kategorisë aktuale * /)
.fëmijët (/ * klasa e fëmijëve * /)
.pagenav (/ * navigimi i faqes * /)
.page_item (/ * çdo artikull në listë * /)
.current_page_item (/ * kjo klasë është caktuar në listën e faqeve në faqen aktuale aktive * /)
.current_page_parent (/ * klasa për faqen mëmë në lidhje me atë aktuale * /)
.current_page_ancestor (/ * çdo faqe e nivelit të lartë në lidhje me këtë * /)
.widget (/ * të gjitha miniaplikacionet janë mbështjellë në këtë klasë * /)

Në procesin e paraqitjes, përdorni blloqe dhe stile për to, siç përcaktohen në pamjet e ekranit në fillim të artikullit. Kjo nuk është e nevojshme, por shumë e dëshirueshme.

Për shembull, në të ardhmen do të lidhim formularin e kërkimit me sitin përmes një speciale. tag wordpress , si rezultat i të cilit wordpress do të shfaqë formën e mëposhtme:

Prandaj, ne e marrim parasysh këtë kur shtrojmë temën.

Dhe gjëja e fundit për t'i shtuar style.css është informacioni për veten dhe temën që keni krijuar. Informacioni vendoset në fillim të skedarit në komente:

/*
Emri i temës: Dilni me një emër unik teme
URI i temës: http: // link-to-theme-homepage
Përshkrimi: Përshkrimi i temës
Autori: Filluesi i Temave
URI e autorit: http: // link-to-author-page
Shablloni: paraardhësi-temë-emër
Etiketat: etiketat e temave - vetëm nga lista e sugjeruar nga wordpress.org
Versioni: version
Epo, këtu është teksti i licencës
*/

Gjithashtu mos harroni të bëni screenshot.png dhe vendoseni në dosjen e shabllonit (në rrënjë). Informacioni i vendosur në këtë mënyrë në fletën e stilit do të shfaqet në panelin e administratorit në seksion Menaxhimi i "temave"... Ne testojmë shabllonin e ndërtuar në shfletues, nëse të gjitha rregullat, mund të shkoni më tej.

Unë nuk do të jap kodin e faqeve të shabllonit të tipit, sepse është mjaft i madh, thjesht shkarkoni, atëherë ne do të punojmë me të.

Si funksionon një temë wp:

Nëse hapni dosjen e paracaktuar të temës (wp-content / temat / default), do të shihni shumë skedarë PHP (skedarë temash) dhe një skedar style.css. Kur shikojmë blogun, WP përfshin skedarët e temës (index.php<

Kjo përfundon përgatitjen paraprake dhe ne mund të kalojmë në krijimin e një teme nga materiali burimor ekzistues.

Hapi 1:
Së pari, në drejtorinë e temave të WordPress (wp-content / tema), krijoni një dosje me emrin e temës sonë. Lëre të jetë ruseller_mësimet... Pastaj nga dosja e paracaktuar e temës (wp-content / temat / parazgjedhja) kopjoni skedarët komente.php, search.php dhe 404.php në dosjen tonë të temave. Këto skedarë janë përgjegjës për komentet dhe kërkimet në blog. Pastaj në ruseller_mësimet kopjoni fletën e stilit stil.css shabllonin tonë, screenshot.png (300x225) dhe dosje imazhe.

Tani skedarët e shabllonit tonë duhet të "prehen", d.m.th. tërhiqni fundin, shiritin anësor dhe kokën e skedarëve të veçantë. Diagrami tregon një pamje të thjeshtuar të skedarit indeks.php me shenja sipas të cilave do ta presim:

Hapi 2 - Header.php
Ne hapim index.html dhe hiqni gjithçka që është para komentit, krijoni një skedar të ri header.php dhe ngjisni kodin e prerë në të, ruajeni në drejtorinë e temës sonë ruseller_mësimet:






index.html






Tani shkoni te dosja me temën e paracaktuar, hapeni header.php dhe kopjoni etiketat nga atje , <link>, <h1>, dhe <div class=description> </b> dhe zëvendësojini ato me linjat përkatëse në tonë <b>header.php</b>.</p> <p>Pastaj të gjitha etiketat <li>e vendosur <b>id = "nav"</b>(lista e faqeve në krye të blogut) zëvendësime për funksionin wordpress</p> <p><b> <?php wp_list_pages("sort_column=menu_order&depth=1&title_li=");?> </b></p> <p>Si rezultat, marrim:</p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title><?php wp_title("«", true, "right"); ?> <?php bloginfo("name"); ?>
"type =" tekst / css "media =" ekran "/>
" />





Hapi 3 - Shiriti anësor.php
Duke u kthyer te skedari index.htm. Para së gjithash, ne fshijmë të gjithë formularin e kërkimit, pastaj heqim gjithçka prej tij