Ak chcete vytvoriť svoj web WordPress, určite budete musieť pridať tému. Nazývajú sa tiež šablóny. Toto je základ každého webového zdroja.

Tento článok sa bude zaoberať krokmi na vytvorenie šablóny a popíše rozloženie súborov psd.

Dozviete sa tiež o základných technických požiadavkách na WordPress témy, aká by mala byť šablóna, aby fungovala na jadre WordPress. Vďaka tomu si budete môcť vytvoriť webovú stránku s vlastnou témou, ktorá bude presne spĺňať vaše požiadavky.

Vezmite prosím na vedomie, že túto príručku neobsahuje popis pridania hotového motívu – ide o návod na vygenerovanie vlastnej šablóny. Ak ste si stiahli tému a neviete, ako ju nainštalovať, prejdite na panel správcu WordPress v časti „ Vzhľad“ a pridajte tam jeden z dostupných vzhľadov. A teraz budeme podrobnejšie analyzovať, čo je téma, prečo je potrebná a ako ju vytvoriť sami.

Aký je účel manuálneho vytvorenia témy?

Téma (šablóna) je kolekcia funkčných a štýlových súborov, ktoré spolu definujú dizajn zdroja. Téma určuje, ako bude stránka vyzerať, preto je veľmi dôležité správne pristupovať k procesu vytvárania šablóny. Mnohí si teraz kladú otázku: „Prečo si vytvárať vlastnú tému, ak si môžete stiahnuť hotovú tému na internete a zadarmo?“. Toto je logická otázka a existuje na ňu veľmi komplexná odpoveď: „Vyrobiť dokonalú šablónu, ktorá plne vyhovuje vašim požiadavkám.“

Keď si kúpite dizajn alebo si ho stiahnete z katalógu bezplatné šablóny WordPress, zvyčajne obetujete kvalitu. Takéto šablóny spravidla nemajú všetko vhodné pre vás. Ale rezignujete, myslím, že jedna alebo dve nuansy nie sú úplným obrazom a že neskôr tému upravíte. V skutočnosti sa však ukazuje, že stránka zostáva s nedokončenou témou, ktorá sa vám nepáči. Preto je lepšie urobiť si hneď svoj vlastný. A hoci sa rozloženie môže na prvý pohľad zdať komplikované, ale potom, keď sa to naučíte, môžete dokonca vytvárať vlastné šablóny.

Navyše, po vytvorení šablóny sa budete cítiť ako WordPress “medicínsky” – budete vedieť, čo má stránka vo vnútri. Pochopte, ktoré prvky sú za čo zodpovedné. Potom stránky a budete hovoriť o vás. Oboznámte sa so značkami, štruktúrou a cyklami WordPress. Alebo to možno chcete robiť profesionálne a začať sa živiť výrobou šablón.

Tu sú hlavné dôvody, prečo by ste si mali vytvoriť vlastnú šablónu webu:

  • dozvedieť sa všetko o HTML, CSS a niečo o PHP;
  • môžete tvoriť, pretože webdizajn je tiež umenie;
  • bude možné zarobiť peniaze predajom tém;
  • objaviť novú zručnosť;
  • vytvorte dizajn, ktorý bude 100% vhodný pre vašu budúcu stránku.

Aké štandardy téma spĺňa?

Pri písaní šablóny je veľmi dôležité dodržiavať oficiálne pravidlá. Porušenie kódu, vloženie štítku na nesprávne miesto a jeho preskočenie - to môže poškodiť dizajn a úplne pokaziť jeho vzhľad. Mali by ste byť dobre oboznámení s pravidlami pre písanie PHP kódu, ako aj HTML, ak tieto jazyky ešte nepoznáte. Okrem toho sa musíte vysporiadať s kaskádovými tabuľkami css štýly, tak si zapamätajte aj ich základy – na internete je o tom veľa informácií. No a posledná najmenej dôležitá požiadavka - vytvorte stránku ako dizajnér, a nie ako školák, aby ste dostali seriózny projekt. V opačnom prípade nemá zmysel brať tento prípad.

Všetky témy WordPress sú umiestnené v priečinku wp-content/themes/. Vo vnútri tohto priečinka sú ďalšie priečinky so samostatnými témami, súbor s pridané vlastnosti(functions.php), súbory štýlov a obrázky. Ak chcete nájsť údaje o konkrétnej téme, musíte prejsť do príslušného adresára. Tým sa téma „Western“ umiestni do priečinka wp-content/themes/western/.

Než začnete, mali by ste sa aspoň niekoľkokrát pozrieť na štruktúru vopred pripravených tém. Predvolená stránka WordPress sa dodáva s dvoma predvolenými šablónami, ktoré si môžete prezrieť. Toto je predvolená a klasická šablóna. Otvorte ich súbory v požadovanom adresári na serveri a porovnajte ich rozdiely.

Všimnite si, že šablóna zvyčajne pozostáva z troch formátov súborov:

  1. Style.css je zodpovedný za súbor štýlov vonkajší dizajn stránky.
  2. Functions.php funkčný súbor A, ktorý pridáva stránkam rôzne funkcie.
  3. Ďalšie súbory php, ktoré sú zodpovedné za funkcie výstupu šablóny na webe, integrácia témy s WordPress. Práve tieto súbory umožňujú preložiť rozloženie psd do plnohodnotnej šablóny.

Poďme podrobnejšie analyzovať každý z týchto súborov, aby sme pochopili, ako prebieha rozloženie témy WordPress.

Pravidlá pre vytváranie súboru style.css

Po prvé, musí spĺňať všetky funkcie značiek CSS. Tento súbor určuje, ako bude vaša stránka vyzerať. Nebude to ale fungovať, ak k nej nepridáte popis vytvorenej šablóny. Toto prvé Funkcia WordPress, čo je potrebné vziať do úvahy pri prenose rozloženia psd do enginu WordPress. Musíte zadať nasledujúce parametre:

  1. Názov šablóny.
  2. Adresa URL, ktorá vedie k téme.
  3. Popis označujúci hlavné vlastnosti šablóny. Stručne.
  4. Meno autora. V tomto prípade zadajte svoje meno.
  5. Odkaz na autora, teda na vás. Môžete poskytnúť odkaz na svoj profil na sociálnej sieti.
  6. Názov nadradenej témy je voliteľný.
  7. Verzia témy. Ak sa len vytvorí, potom v. 1,0.
  8. Úplný popis šablóny. Môžete písať rozsiahle.

Ak chcete vytvoriť najjednoduchšiu tému WordPress, stačí pridať upravenú verziu s jedným súborom style.css. V tomto súbore vedľa riadku „šablóna“ zadajte názov nadradenej témy. Napríklad Classic, ak upravujete štandardnú šablónu. Teraz bude vytvorený motív plne vyhovovať klasickej šablóne. Preto budete musieť nahrať súbory do adresára wp-content/themes/classic.

Môžete si tak vytvoriť svoju prvú, najjednoduchšiu tému, ktorá bude „potomkom“ hotovej šablóny. Nepôjde však o plnohodnotný dizajn stránky, ale iba o pokus o jeho vymyslenie, takže by ste mali pokračovať vo výskume.

Vlastnosti doplnkového súboru funkcií.php

Šablóny nie vždy používajú súbor functions.php, ale vo väčšine prípadov je potrebný. Musí byť umiestnený v adresári s príslušnou témou. Upozorňujeme, že ak sa tento súbor nachádza v priečinku šablóny, bude sa brať do úvahy pri inicializácii témy. Funguje ako plugin. A bude vykonávať také funkcie, aké mu dáte.

Hlavným účelom súboru functions.php je definovať dostupné funkcie prispôsobenia v oblasti správcu pre danú tému. To znamená, že všetky funkcie, ktoré zadáte do functions.php sa zobrazia v admin paneli, alebo na stránke pre užívateľa. Zvyčajne ide o zmenu farebnej schémy pre web WordPress, zmenu písma a oveľa viac. Ale tento súbor má mnoho využití. To je však úplne iný príbeh...

Vlastnosti súborov šablón php

Za jednotlivé časti stránky budú zodpovedné súbory formátu PHP. Definujú tak základné stránky, ako aj nadpisy, kategórie a ďalšie sekcie, ktoré sa zobrazia používateľovi. Keďže ste teraz tvorcom témy, iba vy určíte, ktoré a koľko súborov šablón si vyberiete. Po ich výbere sa na vašom admin paneli objavia nové funkcie. Čím menej súborov vyberiete, tým rýchlejšie bude stránka fungovať, no tým menej funkcií bude mať. Dobre si premyslite, ktoré súbory potrebujete a bez ktorých sa zaobídete.

Ak chcete na stránku pridať minimálnu tému alebo vyskúšať svoje vlastné rozloženie psd, potom potrebujete iba dva súbory v adresári šablón:

  1. style.css
  2. Index.php

Skúseným webmasterom sa darí zmeniť súbor index.php tak, že stačí nastaviť pätu, bočný panel, vyhľadávanie, archív, kategórie, stránky atď. Radšej si však skúste spraviť WordPress šablónu, v ktorej bude každý súbor vykoná príslušnú funkciu.

Aj keď náhodou nezadáte súbor šablóny, WordPress na stránku automaticky pridá svoje vlastné predvolené nastavenia. Ak napríklad nepridáte súbor zodpovedný za komentáre, potom engine nájde v adresároch svoje vlastné verzie tejto funkcie – napríklad wp-comments.php. Potom do štruktúry vašej stránky narazia „cudzie“ komentáre, ktoré nebudú spĺňať požiadavky šablóny. Aby ste tomu zabránili, musíte pridať všetky hlavné súbory na zobrazenie rôznych komponentov stránky:

  • header.php - zodpovedný za hlavičku stránky;
  • sidebar.php - bočné panely;
  • footer.php - päta zdroja (jeho spodná časť);
  • comments.php a comments-popup.php sú komentáre.

Po vygenerovaní každého z týchto súborov, aby ich stránka začala zobrazovať, je potrebné zadať pre ne údaje do hlavného súboru index.php šablóny. Ak to chcete urobiť, zadajte v index.php značky, ktoré vedú k pomenovaným súborom. Napríklad:

  • ak chcete pridať súbor hlavičky stránky (header.php), napíšte značku

    get_header() značka šablóny;

  • pre pätu je to podobné, ale namiesto hlavičky uveďte pätu atď.

Príklad zahrnutia jedného zo súborov šablón do index.php by vyzeral takto: . Pre samostatné informácie budete musieť vyhľadať každý zo zadaných súborov šablón kľúča. Nájdite manuály pre každý zo súborov, ako aj vzorky, aby ste pochopili všetky funkcie predpísané v šablónach.

Výber funkčnosti šablóny

Po čase budete stáť pred dilemou – aký typ šablóny zvoliť. Motor poskytuje možnosť výberu. Môžete si vybrať šablónu s pripojenou Hierarchiou šablón alebo rozloženie s podmienenými značkami.

Prvá možnosť už bola zvážená. Všetky súbory php šablóna- toto je Hierarchia šablón. To znamená, že podľa pravidiel tejto hierarchie postupne generujete samostatné súbory rozloženia. Z množstva funkčných php komponentov si teda vytvoríte plnohodnotnú šablónu. Hierarchia v tomto prípade funguje na princípe načítania na požiadanie. Napríklad, ak máte súbor kategórie (category.php) a používateľ si ho vyžiadal, potom sa tento konkrétny komponent stránky načíta do prehliadača. Ak nie, načíta sa súbor šablóny kľúča index.php.

Môžete tak meniť vzhľad jednotlivých častí stránky pomocou princípu Hierarchy šablón. Každá stránka má svoje špecifické ID. Pridajte súbor category-6.php do adresára témy a keď požiadate o kategóriu s ID 6, otvorí sa tento dizajn. Ak tam nie je, tak nastavenia zostanú štandardné – rozbalí sa index.php.

Niekedy princíp hierarchie šablón nestačí na poskytnutie najpohodlnejšieho zobrazenia šablóny. V tomto prípade sa programátori uchyľujú k použitiu druhého princípu – zavádzajú podmienené značky. Tieto značky kontrolujú súlad webu určité podmienky a ak sa nerešpektujú, zmenia svoj vzhľad. To znamená, že tieto značky fungujú na princípe if/else (ak/potom). Nemusíte teda pridávať more ​​php súborov s číslom každej kategórie, ale môžete napísať podmienky pre každé ID raz.

Aké je rozloženie rozloženia psd vo WordPress

Niektorí ľudia radi najskôr vytvoria rozloženie budúceho dizajnu pomocou rôznych programov a až potom ho prenesú do konkrétneho motora. To je naozaj výhodné, pretože niektoré aplikácie vám umožňujú vygenerovať vynikajúci dizajn bez akýchkoľvek zručností. Ak už máte súbor vo formáte psd, a chcete to urobiť pod motorom WordPress bez použitia kódu, potom môžete použiť pomoc jednej z populárnych služieb.

Uvedomte si, že toto platená služba, pretože šablóna bude vaša len polovica. Takúto službu si objednajte až v krajnom prípade, ak sa vám rozloženie zdá dobré, no už nemáte silu vymýšľať. Existuje veľa programátorov, ktorí sú pripravení preniesť psd do WordPress doslova cez noc za nízku cenu.

PSD je súbor z aplikácie Photoshop. Je to ako grafický obrázok váš dizajn. Aby ste to vykompenzovali, musíte textový editor pridať značku html. Postupne budete meniť každý z bodov tohto označenia, čím dosiahnete konečný výsledok, ktorý je zobrazený na rozložení. Okamžite uveďte centrovanie vašej šablóny, ako aj rozmery jej rôznych častí.

Ďalším krokom je pridanie obrázky na pozadí. Môžete si ich vyrobiť aj sami pomocou rovnakej aplikácie Photoshop. Najjednoduchšou možnosťou je vytvoriť obrázky na pozadí s prechodom. Potom začnite vytvárať logo. Postupne riešte všetky vzniknuté požiadavky - upravte hlavičku stránky, pätu, bočný panel a všetky jeho časti, podľa vyhotoveného rozloženia. Do jeho adresára nezabudnite pridať dôležité súbory šablón, aby sa stránka načítala podľa vašich požiadaviek.

Iba týmto spôsobom sa postupne naučíte základy rôzne jazyky programovanie, môžete sa naučiť, ako vytvoriť webovú stránku sami. Nikto nehovorí, že uspejete dnes alebo zajtra. Možno vám bude trvať mesiace, kým pochopíte všetky funkcie procesu rozloženia. Ale nebojte sa – niekomu to trvá roky. Teraz poznáte približný postup na vytvorenie šablóny od začiatku, ako aj na prenos rozloženia psd do pripravenej témy pre internetový zdroj na engine WordPress.

Uvidíme, ako vznikne hotová WordPress šablóna pripravená na inštaláciu na hosting. Na tento účel sa na základe súboru index.htm vytvárajú súbory php, z ktorých každý zodpovedá za zodpovedajúcu časť šablóny WordPress. Ide najmä o súbory, ktoré ovládajú hlavičku webu, vzhľad hlavnej stránky, bočného panela, archívy, stránku vyhľadávania, jeden príspevok, jednu stránku a komentáre. Chcem hneď povedať, že v tejto fáze by bolo pekné mať nejaké základné znalosti, najmä pochopiť, čo sú značky šablón.

Skôr ako začnete študovať túto lekciu, chcem vás upozorniť na jeden ... hmm ... trik autora lekcie. Keď som začal prekladať tento cyklus lekcií, bol som si istý, že na konci budeme mať hotovú predlohu, ktorú si sám vyrobíme. Ale veci sú trochu komplikovanejšie. V poslednej lekcii autor dal WordPress kódy nie vo forme textu, ako v predchádzajúcich lekciách, ale vo forme obrázkov s vysvetlivkami. A celý hotová šablóna Ponúka sa na stiahnutie ako hotový archív za symbolický poplatok. Mohol by som si kúpiť tento archív a umiestniť ho sem, ale nie som si istý, či je to legálne. Vo všeobecnosti je situácia taká. Takže táto lekcia bude s najväčšou pravdepodobnosťou musieť byť splnená výlučne na vzdelávacie a vzdelávacie účely.

Navrhnuté rozloženie stránky
Takže v prvých dvoch lekciách najprv my a potom s pomocou nástrojov HTML a CSS. Kliknutím na obrázok nižšie uvidíte, ako vyzerá rozloženie stránky.

Všetky súbory šablón WordPress
Teraz zostáva vytvoriť WordPress šablónu na základe rozloženia stránky. Obrázok nižšie ukazuje štandardná sada súbory šablón wordpress. V predchádzajúcom návode sme vytvorili priečinok snímky a súbor style.css. Máme aj súbor index.htm, z ktorého budú prevzaté fragmenty kódu a skopírované do príslušných súborov php. A potom neskôr v php súbory sa vkladajú príkazmi WordPress a tak sa formujú php súbory šablón wordpress.

Úprava súboru style.css
Najprv vložte na začiatok súboru style.css informácie o šablóne. Ide o štandardný kód, ktorý sa upravuje podľa vašich údajov (názov šablóny, url, popis, informácie o autorovi).

Hlavička.php
Tento súbor je zodpovedný za zobrazenie hlavičky lokality. Podstatou je, že kúsok kódu je prevzatý zo súboru index.htm(vyššie a vrátane

) sa vloží do súboru hlavička.php a potom sú integrované do príkazového kódu WordPress. Na obrázku sú označené červenou farbou. Kliknutím na obrázok zobrazíte vo veľkej veľkosti.

Index.php
Tento súbor je zodpovedný za zobrazenie toho, čo používateľ vidí domovskej stránke stránky. Súbor sa generuje rovnakým spôsobom. index.php. Kopírovanie časti kódu z index.htm a naplnené príkazmi WordPress. Kliknutím na obrázok zobrazíte vo veľkej veľkosti.

sidebar.php
Tento súbor je zodpovedný za zobrazenie prvkov na bočnom paneli. Vystrihli sme aj kód z index.htm(celé div id="strana") a vložte ho do súboru sidebar.php. Ďalej, ako predtým, vložte príkazy WordPress. Kliknutím na obrázok zobrazíte vo veľkej veľkosti.

Archív.php
Zodpovedá za vydávanie archívnych záznamov o lokalite. Na vytvorenie tohto súboru úplne skopírujeme obsah súboru index.php a vložte do archív.php a potom medzi riadky vložte kúsok kódu (7 riadkov). a

Search.php
Tento súbor je zodpovedný za výsledky vyhľadávania. Na vytvorenie tohto súboru úplne skopírujeme obsah súboru index.php a vložte do search.php a potom medzi riadky vložte kúsok kódu (1 riadok). a . Pozrite sa, ako sa to robí na obrázku nižšie. Kliknite na obrázok pre zobrazenie vo veľkej veľkosti.

Single.php
Výstupom tohto súboru je jeden príspevok. Kliknite na obrázok pre zobrazenie vo veľkej veľkosti.

V tejto fáze je možné tému nainštalovať a otestovať. Na otestovanie navigácie, tlačidiel a odkazov môžete vytvoriť viacero príspevkov.

Živá ukážková šablóna
Ak kliknete na obrázok, môžete vidieť hotovú WordPress šablónu online.

PS. Stráž. A viete, aby ste mohli začať vytvárať návrhy, musíte ovládať nástroje a funkcie Photoshopu. V tomto prípade vám pomôžu kurzy Photoshopu, ktoré vám poskytnú potrebnú základnú úroveň vedomostí.

Ak čítate tento článok, je pravdepodobné, že máte veľmi krásny dizajn webovej stránky, pravdepodobne vyrobený v Adobe Photoshop a uložiť ako formát PSD, JPG, PDF, AI alebo PNG. Teraz chcete previesť tento súbor obrázka na tému WordPress, aby ste ho mohli použiť na svoj novovytvorený web alebo blog. Možno by ste si aj priali Konvertor PSD na WordPress -Ale čo keby si túto premenu dokázal urobiť sám a ešte k tomu je zadarmo!

Mnoho ľudí, ktorí sú dobrí v grafickom dizajne, prichádza k tomuto bodu konverzie PSD na témy WordPress. A cítia sa uviaznutí! Ale to nie je ich chyba. Vytvorenie webovej stránky si vyžaduje nielen schopnosť vytvárať skvele vyzerajúce návrhy, ale vyžaduje si aj určité programátorské zručnosti. Musíte byť odborníkom aspoň na HTML, CSS, JavaScript, jQuery a PHP programovanie otočiť svoj súbor PSD na webovú stránku. Problém je v tom, že väčšina ľudí je buď dobrý dizajnér, alebo dobrý programátor!

Nemajte však obavy. Previesť PSD na tému WordPress nie je až také ťažké. Všetko, čo potrebujete vedieť, sú správne kroky. V tomto článku vám poviem to isté! Začnime sa učiť.

Čo je súbor PSD?

Tí, ktorí nevedia PSD je skratka pre Photoshop Document. Toto je formát súboru, v ktorom Adobe Photoshop ukladá spustiteľné súbory. Môžete otvoriť súbory PSD vo Photoshope a vykonať ďalšie zmeny v dizajne, ako chcete. Súbory PSD sa preto niekedy nazývajú otvorené súbory (s odkazom na skutočnosť, že tieto súbory je možné upravovať).

Ak si chcete vytvoriť webovú stránku svojich snov, pravdepodobne si na jej zhmotnenie vyberiete Photoshop. Photoshop je bezpochyby najlepším a najobľúbenejším nástrojom pre grafický dizajn.

Čo je WordPress?

WordPress je v podstate bezplatná platforma na blogovanie. Je to otvorené zdrojový kód program uľahčil vytváranie vlastných webových stránok alebo blogov aj neprogramátorom. WordPress je robustný a škálovateľný a je napísaný v PHP.

Dizajn webových stránok založený na WordPresse je tzv tému(a niekedy, vzorka).

Previesť PSD na tému WordPress

Krok 1: Vystrihnite súbor PSD

Keď je váš súbor PSD pripravený, prvá vec, ktorú musíte urobiť, je rozdeliť ho na kúsky. Za čo? No preto, lebo jeden obrázok bude mať veľkú veľkosť a načítanie bude trvať dlhšie. Okrem toho budete musieť priradiť rôzne správanie k rôznym segmentom obrázka. Takže to musíte orezať.

To však neznamená, že môžete obrázok len náhodne orezať. Musíte robiť veci logicky. Napríklad hlavička sa môže stať jedným kusom, päta by mala byť samostatná... potom môžete orezať pozadie, tlačidlo a menu atď.

Adobe Photoshop vám umožňuje používať vrstvy. Má vstavaný objekt na rozrezanie PSD a uloženie výsledných segmentov ako samostatné obrazové súbory. Tieto obrázky môžete uložiť vo formáte JPG alebo PNG. Ak potrebujete transparentnosť na prácu v ktoromkoľvek z týchto segmentov, musíte ju uložiť formát PNG pretože JPG nepodporuje transparentnosť.

Pri rezaní obrazu musíte byť presní. Chyba čo i len jedného pixelu môže spôsobiť, že dve časti sú nevhodné pre repliku.

Pri krájaní PSD na účely premeny na tému WordPress tomu musíte v súčasnosti rozumieť css čas pomerne výkonný a dokáže vytvoriť celý rad prvkov pomocou niekoľkých riadkov kódu. Môžete napríklad vytvoriť jednofarebné pozadie, prechodové pozadie, tlačidlá odlišné typy, čiary, šípky a špeciálne znaky, len s pomocou CSS. Týmto spôsobom nemusíte tieto veci ukladať ako obrázky. Menej obrázkov, tým rýchlejšie sa bude váš web načítavať.

Nasledujúce video YouTube presne ukazuje, ako rozdeliť súbor PSD a uložiť ho ako rôzne obrázky:

Dobre, teraz, keď máte rôzne vizuálne prvky dizajnu vašej lokality, je čas prejsť na ďalší krok.

Krok 2: Vytvorte súbory HTML a CSS

Teraz začína hlavná kódovacia časť procesu konverzie PSD na webovú stránku. V podstate musíte vytvoriť webovú stránku a zostaviť všetky rozdelené obrázky tak, aby vyzerali presne ako vaše PSD.

Najprv musíte vytvoriť súbor HTML. Môžete to nazvať ako chcete, ale nazvime to konvenciou index.htm. V tomto súbore budete musieť napísať kód HTML alebo XHTML na zobrazenie rôznych častí obrázka z vášho PSD. Na vytvorenie rozloženia základov môžete použiť prvky DIV. Prvky DIV sú veľmi všestranné. Prvky DIV môžete umiestniť vedľa seba, prekrývajúce sa, na seba. Stred prvku DIV môžete zarovnať doľava a doprava a môžete ich umiestniť veľmi konkrétne na konkrétne súradnice na webovej stránke.

V týchto prvkoch DIV môžete vyvolať uložené obrázky a zobraziť ich ako také alebo ako pozadie v DIV.

Po dokončení tohto základného rozloženia vašej webovej stránky by ste mali štýl to aby to bolo rovnaké ako vaše PSD. Na úpravu štýlu musíte použiť pravidlá kaskádových štýlov (CSS). S týmito pravidlami môžete použiť rôzne štýly písma, veľkosti, farby, tiene textu, odfarbenie obrázkov, okraje atď.

Ak chcete napísať pravidlá štýlu CSS, musíte vytvoriť ďalší súbor s názvom styles.css a potom zavolajte tento súbor css index.htm.Štýly prítomné v styles.css sa bude vzťahovať na rôzne prvky vo vašich HTML súboroch.

Dobre, počkaj! Ak neviete nič o kódovaní HTML alebo CSS, nezúfajte! Sú to veľmi jednoduché skriptovacie jazyky a môžete sa ich ľahko naučiť online. Nižšie sú uvedené niektoré z online zdrojov, kde sa môžete naučiť CSS a HTML:

Návody pre HTML

  1. W3Schools HTML tutoriál
  2. TutorialsPoint HTML Tutorial
  3. HTML.net
  4. HTML pes

Návody CSS

  1. CSS návod
  2. W3Schools CSS tutoriál
  3. Tuts Plus
  4. Základy CSS

Krok 3: Rozbitie súboru HTML v súboroch tém WordPress

Na tento moment v procese konverzie PSD na tému WordPress by ste mali jeden súbor HTML (index.html) a jeden css súbor (styles.css). V treťom kroku budete musieť rozdeliť HTML súbor podľa Téma štruktúry WordPress. Zmätený? WordPress má preddefinovanú sadu súborov, ktoré sú pomenované spoločne na vytvorenie webovej stránky. Napríklad pri zobrazovaní príspevku vyžaduje WordPress okrem iného obsah hlavičky súboru, súboru zip, súboru bočného panela a päty. Ale máte celý kód v jednom súbore - index.htm. Takže budete musieť znova distribuovať kód index.htm do rôznych súborov wp. Ide v podstate o prácu typu cut-paste! Tu je zoznam niektorých dôležitých súborov tém pre WordPress:

  • archív.php
  • category.php
  • komentáre.php
  • footer.php
  • hlavička.php
  • index.php
  • page.php
  • search.php
  • sidebar.php
  • single.php
  • style.css
  • 404.php

Ak chcete vytvoriť základnú tému WordPress, chceli by ste vytvoriť aspoň header.php, footer.php, sidebar.php single.php a index.php

Jednoducho vytvorte tieto PHP súbory v ľubovoľnom textovom editore poznámkového bloku a skopírujte príslušný kód z index.htm k týmto súborom. Kód, vytvorte časť nadpisu vstúpi header.php, kód poznámky pod čiarou prejde na footer.php... tak ďalej a tak ďalej.

Ak nie ste veľmi oboznámení s PHP, môže byť pre vás ťažké správne vytvoriť tieto súbory. Niektoré sú naozaj dobré a zadarmo online lekcie pre učenie PHP. W3Schools a PHP.net poskytujú ľahko pochopiteľné Pomocník PHP. Môžete si prejsť tieto návody, aby ste získali pocit z PHP.

Sledovanie youtube video vám pomôže pochopiť, ako nastaviť "nahú tému WordPress" (v podstate to znamená -prázdnu tému WodPress.

Krok 4: Pridanie funkcií a značiek WordPress

Teraz je čas previesť jednoduché súbory PHP na súbory tém WordPress. Ak to chcete urobiť, budete musieť do súborov pridať značky WordPress. Ale môžete sa opýtať čo presne sú značky WordPress?

Ako som už povedal, WordPress je vynikajúca a spoľahlivá platforma. To vám dáva veľké množstvo vstavané funkcie, ktoré môžete jednoducho volať a robiť veci.

Pozrime sa na príklad, aby sme to lepšie pochopili. Na domovskej stránke (index.php), môžete zobraziť zoznam Posledné príspevky. Tento zoznam by sa mal automaticky zmeniť, ako a kedy vytvoríte nový príspevok. Môžete napísať svoje vlastné PHP funkcie extrahovať údaje o príspevku z databázy a zobraziť ich na hlavnej stránke. Tvorcovia WordPressu vám však uľahčili život! Nebudete musieť písať svoje vlastné podrobné funkcie. Stačí použiť wp_get_recent_posts($arg, $output) z WordPress a pozrite si zobrazený zoznam posledných príspevkov!

WordPress má komplexnú online dokumentáciu, ktorá vám poskytuje informácie o všetkých funkciách a ďalších položkách dostupných vo WordPress. Dokumentácia obsahuje aj veľa príkladov, a preto je veľmi jednoduchá na pochopenie. Ak chcete získať prístup k tejto dokumentácii, postupujte podľa nasledujúcich odkazov:

  • Značky šablón WordPress
  • Odkaz na funkcie WordPress

Keď sú tieto súbory tém pripravené, mali by ste ich umiestniť do priečinka, ktorý by mal byť rovnaký ako názov vášho Nová téma. Tento priečinok môže mať aj ďalšie priečinky na ukladanie súborov CSS, súborov JavaScript a obrázkových súborov.

Môžete tiež zahrnúť do súboru obrázka s názvom snímka obrazovky.jpg alebo snímka obrazovky.png. Tento súbor sa zobrazí ako miniatúra vášho motívu. Je ľahké sa naučiť, ako urobiť snímku obrazovky.

Zoznam súborov v typickej téme WordPress môže vyzerať takto:

Do priečinka musíte nahrať priečinok témy /wp-content/themes inštalácie WordPress. Napríklad, ak pomenujete tému Minerva - Potom by mali byť súbory tém in / wp-content / témy / Minerva

Po nahraní priečinka s témou prejdite na hlavný panel WordPress a potom prejdite na Vzhľad > Témy. Tu budete radi, keď uvidíte svoj vlastný návrh novej témy medzi témami dostupnými na aktiváciu. Stačí si vybrať tému a aktivovať ju.

Pozrite si nasledujúce video a uvidíte ďalší postup:

Krok 5: Pridajte ďalšie funkcie, ako je vyhľadávanie a vlastné funkcie

Vaša téma WordPress je už spustená. Cesta od PSD k téme WordPress bola dokončená. Stále však môžete pridať ďalšie funkčnosť k vašej téme.

Môžete napríklad vytvoriť search.php súbor s kódom, ktorý zobrazuje výsledky vyhľadávania z vášho webu.

Okrem toho si môžete vytvárať vlastné funkcie PHP a používať ich v rôznych iných PHP súbory. Musíte vytvoriť súbor funkcie.php aby boli vlastné funkcie na jednom mieste.

Ak chcete vyriešiť chyby 404 (stránka sa nenašla), môžete vytvoriť súbor 404.php. WordPress zobrazí obsah tohto súboru vždy, keď sa niekto pokúsi získať prístup k neexistujúcej adrese URL vášho webu.

Môžete tiež pridať nejaké JavaScript funkcie. JavaScript je najpoužívanejší skriptovací jazyk na strane klienta. Do súborov môžete zapisovať funkcie JavaScriptu .js a zavolajte tieto funkcie vo svojich súboroch PHP. Napríklad overenie formulára je niečo, čo sa zvyčajne vykonáva pomocou JavaScriptu. Ak sa používateľ snaží nájsť niečo na svojom webe bez zadávania Kľúčové slová vo vyhľadávacom poli je to JavaScript, ktorý používateľovi povie, že má zadať kritériá vyhľadávania.

Po týchto krokoch si môžete ľahko vytvoriť vlastnú tému WordPress. Tieto kroky skonvertujú súbor PSD na funkčnú tému WordPress. Niektorí ľudia však hľadajú bezplatné prevodníky PSD na WordPress. Existuje veľa spoločností, ktoré tvrdia, že zoberú súbor PSD a premenia ho na presnú tému. Ak sa nechcete zaťažovať učením sa programovania, môžete jednoducho dať svoje PSD týmto spoločnostiam. Ale samozrejme si to účtujú!

Bezplatné prevodníky PSD na WordPress

Narazil som softvér Elemente od DivineProjects. Tento program si môžete stiahnuť zadarmo a premení váš PSD na plnohodnotnú tému WordPress, ktorá je pripravená na použitie. Tento softvér funguje ako doplnok Photoshopu.

Dúfam, že vám tento článok pomohol. Ak máte nejaké otázky k tejto téme, neváhajte sa opýtať. Budem sa snažiť čo najlepšie vám pomôcť. Ďakujeme, že používate TechWelkin.

Len pred niekoľkými rokmi sa objavil nový rad služieb, ktoré ponúkajú automatickú konverziu dizajnu vašej webovej stránky zo súboru Photoshopu. .PSD do kódu HTML + CSS je zadarmo. Kedysi to vyzeralo ako nemotorný pokus o automatizáciu práce najlepšia kvalita, ale teraz sa tieto služby vyvinuli tak, aby ponúkali plnú integráciu so systémami na správu obsahu (napríklad WordPress).

V tomto článku vám predstavím niekoľko celkom dobrých služieb, ktoré vám pomôžu ušetriť čas a peniaze.

1 DevPress

Autorom tejto služby je Tung Do, výborný WordPress dizajnér a vývojár, ktorý ma potešil svojim novým produktom. Služba, ktorú ponúka, je schopná: Návrh témy, kódovanie XHTML/CSS, vývoj tém XHTML-to-WordPress a správa stránok.

2. WP od PSD


Tím profesionálnych programátorov vám pomôže migrovať váš dizajn na štandardnú tému WordPress pre rôzne prehliadače. Sľubujeme, že všetka práca bude vykonaná na najvyššej úrovni. nízke ceny a v čo najskôr. Chalanom musíme veriť :)

3. Kódovanie ľudí


Služba ponúka prácu so statickým XHTML, HTML5 a ponúka aj hotovú sadu šablón pre internetový obchod. Codingpeople je považovaný za nemecký orgán pre kvalitu kódu.

4. WP Canvas


Táto služba zaisťuje, že ľahko premení váš dizajn na vysokokvalitné rozloženie pre rôzne prehliadače, ktoré je kompatibilné so štandardmi W3C Platná téma WordPress.

5. PSD na WP


Ak máte vytvorený výborný dizajn webstránky a potrebujete rýchly a kvalitný layout, služba PSDtoWordPress vám s tým pomôže. Premeňte svoj dizajn na hotovú tému WordPress pomocou PSDtowordpress.

6.PixelWP


PixelWP.com poskytuje svojim zákazníkom vynikajúci prevodník šablón PSD na wordpress, na ktorý sa môžete spoľahnúť. Môžete si byť istí, že váš návrh bude realizovaný kvalitne a včas.

7. PSD na ľubovoľné


Služba dokáže vygenerovať hotovú tému WordPress z priloženého rozloženia návrhu. Ak nemáte žiadne programátorské zručnosti a prácu so súbormi tém, táto služba vám určite príde vhod!

8. PSD 2 HTML


Služba bola prvýkrát spustená v roku 2005. P2H.com / PSD2HTML.com bol prvý svojho druhu a prilákal viac ako 50 000 zákazníkov.

9.Vystrihnutie HTML


HTMLcut je služba krok za krokom na implementáciu hotový kód z vášho návrhu. Nahrávate Rozloženie PSD, - zvyšok je na HTMLcut.

10. RapidXHTML


Ak chcete premeniť svoj dizajn na pripravený blog alebo stránky na CMS, RapidxHTML je to pravé pre vás. Služba podporuje také populárne platformy ako wordpress, Blogger, Drupal, Joomla a Magento.