Vytvoření šablony pro wordpress z psd. Vytvoření jednoduchého motivu pro WordPress. Mazání HTML souborů

Uvidíme, jak vznikne hotová WordPress šablona připravená k instalaci na hosting. K tomu se na základě souboru index.htm vytvářejí soubory php, z nichž každý je zodpovědný za odpovídající část šablony WordPress. Zejména se jedná o soubory, které ovládají záhlaví webu, vzhled hlavní stránky, postranního panelu, archivů, vyhledávací stránky, jednotlivého příspěvku, jedné stránky a komentářů. Chci hned říci, že v této fázi by bylo hezké mít nějaké základní znalosti, zejména pochopit, co jsou značky šablon.

Než se pustíte do studia této lekce, chci vás upozornit na jeden ... hmm ... trik autora lekce. Když jsem začal překládat tento cyklus lekcí, byl jsem si jistý, že na konci budeme mít hotovou šablonu vyrobenou vlastními silami. Ale věci jsou trochu složitější. V minulé lekci autor dal WordPress kódy nikoli ve formě textu, jako v předchozích lekcích, ale ve formě obrázků s vysvětlením. A celá hotová šablona je nabízena ke stažení jako hotový archiv za symbolický poplatek. Mohl bych si koupit tento archiv a umístit ho sem, ale nejsem si jistý, zda je to legální. Obecně je situace taková. Takže tato lekce bude s největší pravděpodobností muset být splněna pouze pro vzdělávací a vzdělávací účely.

Navržený vzhled stránek
Takže v prvních dvou lekcích nejprve my a poté s pomocí nástrojů HTML a CSS. Kliknutím na obrázek níže zjistíte, jak vypadá rozvržení webu.

Všechny soubory šablon WordPress
Nyní zbývá vytvořit WordPress šablonu na základě rozložení webu. Obrázek níže ukazuje standardní sadu souborů šablon WordPress. V předchozím tutoriálu jsme vytvořili složku snímky a soubor styl.css. Máme také soubor index.htm, ze kterého budou převzaty fragmenty kódu a zkopírovány do příslušných souborů php. A pak později dovnitř php soubory jsou vkládány příkazy WordPressu a takto vytvořeny php soubory šablon wordpress.

Úprava souboru style.css
Nejprve vložte na začátek souboru styl.css informace o šabloně. Jedná se o standardní kód, který se upravuje podle vašich údajů (název šablony, url, popis, informace o autorovi).

Hlavička.php
Tento soubor je zodpovědný za zobrazení záhlaví webu. Podstatou je, že část kódu je převzata ze souboru index.htm(nad a včetně

) se vloží do souboru hlavička.php a poté jsou integrovány do příkazového kódu WordPress. Na obrázku jsou označeny červeně. Klikněte na obrázek pro zobrazení ve velké velikosti.

Index.php
Tento soubor je zodpovědný za zobrazení toho, co uživatel vidí na hlavní stránce webu. Soubor se generuje stejným způsobem. index.php. Kopírování části kódu z index.htm a naplněné příkazy WordPress. Klikněte na obrázek pro zobrazení ve velké velikosti.

sidebar.php
Tento soubor je zodpovědný za zobrazení prvků v postranním panelu. Také jsme vystřihli kód z index.htm(Celý div id="strana") a vložte jej do souboru sidebar.php. Dále, jako předtím, vložte příkazy WordPress. Klikněte na obrázek pro zobrazení ve velké velikosti.

Archiv.php
Zodpovědný za vydávání archivních záznamů o webu. Abychom vytvořili tento soubor, kompletně zkopírujeme obsah souboru index.php a vložte do archiv.php a poté mezi řádky vložte část kódu (7 řádků). A

Search.php
Tento soubor je zodpovědný za výsledky vyhledávání. Abychom vytvořili tento soubor, kompletně zkopírujeme obsah souboru index.php a vložte do hledat.php a poté mezi řádky vložte část kódu (1 řádek). A . Podívejte se, jak se to dělá na obrázku níže. Klikněte na obrázek pro zobrazení ve velké velikosti.

Single.php
Výstupem tohoto souboru je jeden příspěvek. Klikněte na obrázek pro zobrazení ve velké velikosti.

V této fázi lze motiv nainstalovat a otestovat. Pro testování navigace, tlačítek a odkazů můžete vytvořit více příspěvků.

Šablona živé ukázky
Pokud kliknete na obrázek, můžete vidět hotovou WordPress šablonu online.

PS. Hlídat. A víte, abyste mohli začít vytvářet návrhy, musíte ovládat nástroje a funkce Photoshopu. V tomto případě vám pomohou kurzy Photoshopu, které vám poskytnou potřebnou základní úroveň znalostí.

Chcete-li vytvořit svůj web WordPress, budete určitě muset přidat téma. Říká se jim také šablony. To je základ každého webového zdroje.

Tento článek pokryje kroky pro vytvoření šablony a popíše rozvržení souborů psd.

Dozvíte se také o základních technických požadavcích na WordPress témata, jaká by měla být šablona, ​​aby fungovala na jádru WordPressu. Díky tomu si budete moci vytvořit web s vlastním tématem, který bude přesně odpovídat vašim požadavkům.

Upozorňujeme, že tento návod neobsahuje popis přidání hotového motivu – jedná se o návod na vygenerování vlastní šablony. Pokud jste si stáhli motiv a nevíte, jak jej nainstalovat, přejděte do administračního panelu WordPress do sekce „Vzhled“ a přidejte tam jeden z dostupných designů. A nyní podrobněji rozebereme, co je to téma, proč je potřeba a jak si ho vytvořit sami.

Jaký je účel ručního vytváření motivu?

Motiv (šablona) je kolekce funkčních a stylových souborů, které společně definují návrh zdroje. Téma určuje, jak bude web vypadat, proto je velmi důležité správně přistupovat k procesu vytváření šablony. Mnozí si nyní kladou otázku: „Proč si vytvářet vlastní téma, když si můžete stáhnout hotové téma na internetu a zdarma?“. To je logická otázka a existuje na ni velmi obsáhlá odpověď: „Vyrobit dokonalou šablonu, která plně splní vaše požadavky.“

Když si koupíte téma nebo si jej stáhnete z bezplatného adresáře šablon WordPress, obvykle obětujete kvalitu. Takové šablony zpravidla nemají vše vhodné pro vás. Ale rezignujete, myslím, že jedna nebo dvě nuance nejsou celý obrázek a že později téma upravíte. Ale ve skutečnosti se ukazuje, že web zůstává s nedokončeným tématem, které se vám nelíbí. Proto je lepší si hned udělat vlastní. A i když se rozvržení může na první pohled zdát složité, ale poté, když se to naučíte, můžete dokonce vytvářet vlastní šablony.

Po vytvoření šablony si navíc budete připadat jako WordPress „lékař“ – budete vědět, co má web uvnitř. Uvědomte si, které prvky jsou za co zodpovědné. Pak se stránky a budete mluvit o vás. Seznamte se s WordPress tagy, strukturou a cykly. Nebo se tomu možná chcete věnovat profesionálně a začít se výrobou šablon živit.

Zde jsou hlavní důvody, proč byste si měli vytvořit vlastní šablonu webu:

• dozvědět se vše o HTML, CSS a něco o PHP;
• můžete tvořit, protože webdesign je také umění;
• bude možné vydělávat peníze prodejem témat;
• objevit novou dovednost;
• vytvořte design, který bude 100% vhodný pro váš budoucí web.

Jaké standardy téma splňuje?

Při psaní šablony je velmi důležité dodržovat oficiální pravidla. Porušení kódu, vložení štítku na špatné místo a jeho přeskočení – to může poškodit design a zcela zkazit jeho vzhled. Měli byste být dobře obeznámeni s pravidly pro psaní PHP kódu, stejně jako HTML, pokud tyto jazyky ještě neznáte. Kromě toho budete mít co do činění s CSS Cascading Style Sheets, takže pamatujte i na základy – na internetu je o tom spousta informací. No a poslední nejméně důležitý požadavek - vytvořte web jako designér, a ne jako školák, abyste získali seriózní projekt. Jinak nemá smysl tento případ brát.

Všechna témata WordPress jsou umístěna ve složce wp-content/themes/. Uvnitř této složky jsou další složky se samostatnými tématy, soubor s doplňkovými funkcemi (functions.php), soubory stylů a obrázky. Chcete-li najít data k určitému tématu, musíte přejít do příslušného adresáře. Tím se téma „Western“ umístí do složky wp-content/themes/western/.

Než začnete, měli byste se alespoň párkrát podívat na strukturu předpřipravených témat. Výchozí web WordPress je dodáván se dvěma výchozími šablonami, které si můžete prohlédnout. Toto je výchozí a klasická šablona. Otevřete jejich soubory v požadovaném adresáři na serveru a porovnejte jejich rozdíly.

Všimnete si, že šablona se obvykle skládá ze tří formátů souborů:

1. Style.css je soubor stylu zodpovědný za externí design webu.
2. Functions.php je funkční soubor, který přidává na stránky různé funkce.
3. Další soubory php, které jsou zodpovědné za funkce výstupu šablony na webu, integrace tématu s WordPress. Právě tyto soubory umožňují přeložit rozložení psd do plnohodnotné šablony.

Pojďme analyzovat každý z těchto souborů podrobněji, abychom pochopili, jak vypadá rozložení motivu WordPress.

Pravidla pro vytváření souboru style.css

Za prvé, musí odpovídat všem funkcím značek CSS. Tento soubor určuje, jak bude váš web vypadat. Nebude to ale fungovat, pokud k ní nepřidáte popis vytvořené šablony. Toto je první funkce WordPress, kterou je třeba vzít v úvahu při přenosu rozložení psd do enginu WordPress. Musíte zadat následující parametry:

1. Název šablony.
2. Adresa URL, která vede k tématu.
3. Popis udávající hlavní vlastnosti šablony. Krátce.
4. Jméno autora. V tomto případě zadejte své jméno.
5. Odkaz na autora, tedy na vás. Můžete uvést odkaz na svůj profil na sociálních sítích.
6. Název nadřazeného motivu je volitelný.
7. Verze tématu. Pokud pouze vytvořen, pak v. 1,0.
8. Úplný popis šablony. Můžete psát obsáhle.

Chcete-li vytvořit nejjednodušší téma WordPress, stačí přidat upravenou verzi s jediným souborem style.css. V tomto souboru vedle řádku „šablona“ zadejte název nadřazeného motivu. Například Classic, pokud upravujete standardní šablonu. Nyní bude vytvořený motiv plně odpovídat šabloně Classic. Proto budete muset nahrát soubory do adresáře wp-content/themes/classic.

Můžete tak vytvořit své první, nejjednodušší téma, které bude „potomkem“ hotové šablony. Nepůjde ale o plnohodnotný design stránek, ale pouze o pokus o jeho vymýšlení, takže byste měli pokračovat ve výzkumu.

Vlastnosti doplňkového souboru funkcí functions.php

Šablony ne vždy používají soubor functions.php, ale ve většině případů je potřeba. Musí být umístěn v adresáři s příslušným tématem. Upozorňujeme, že pokud je tento soubor přítomen ve složce šablony, bude vzat v úvahu při inicializaci motivu. Funguje to jako plugin. A bude plnit takové funkce, jaké mu dáte.

Hlavním účelem souboru functions.php je definovat dostupné funkce přizpůsobení v oblasti administrátora pro dané téma. To znamená, že všechny funkce, které zadáte do functions.php, se zobrazí v admin panelu, případně na stránce pro uživatele. Obvykle se jedná o změnu barevného schématu webu WordPress, změnu písma a mnoho dalšího. Tento soubor má ale mnoho využití. To je však úplně jiný příběh...

Vlastnosti souborů šablon php

Za jednotlivé části webu budou zodpovědné soubory ve formátu PHP. Definují jak jednotlivé stránky, tak nadpisy, kategorie a další sekce, které se uživateli zobrazí. Protože jste nyní tvůrcem motivu, pouze vy určíte, které a kolik souborů šablon si vyberete. Po jejich výběru se ve vašem administračním panelu objeví nové funkce. Čím méně souborů vyberete, tím rychleji bude web fungovat, ale bude mít méně funkcí. Dobře si rozmyslete, které soubory potřebujete a bez kterých se obejdete.

Pokud chcete na web přidat minimální motiv nebo si vyzkoušet vlastní rozvržení psd, pak potřebujete pouze dva soubory v adresáři šablon:

1. styl.css
2. Index.php

Zkušeným webmasterům se daří změnit soubor index.php tak, že pouze stačí provést nastavení zápatí, postranního panelu, vyhledávání, archivu, kategorií, stránek atd. Raději si ale zkuste udělat WordPress šablonu, ve které bude každý soubor provede příslušnou funkci.

I když náhodou nezadáte soubor šablony, WordPress na web automaticky přidá vlastní výchozí nastavení. Pokud například nepřidáte soubor odpovědný za komentáře, pak engine najde v adresářích vlastní verze této funkce – například wp-comments.php. Do struktury vašeho webu pak narazí „cizí“ komentáře, které nebudou splňovat požadavky šablony. Abyste tomu zabránili, musíte přidat všechny hlavní soubory pro zobrazení různých součástí stránky:

• header.php - zodpovědný za hlavičku webu;
• sidebar.php - postranní panely;
• footer.php - patička zdroje (jeho spodní část);
• comments.php a comments-popup.php jsou komentáře.

Po vygenerování každého z těchto souborů, aby je web začal zobrazovat, je potřeba pro ně zadat data do hlavního souboru index.php šablony. Chcete-li to provést, zadejte v index.php značky, které vedou k pojmenovaným souborům. Například:

• pro přidání souboru záhlaví webu (header.php) napište značku

  get_header() značka šablony;

• pro zápatí je to podobné, ale místo záhlaví zadejte zápatí atd.

Příklad zahrnutí jednoho ze souborů šablony do index.php by vypadal takto: . Budete muset vyhledat každý ze zadaných souborů šablon klíče pro samostatné informace. Najděte manuály pro každý ze souborů a také ukázky, abyste porozuměli všem funkcím předepsaným v šablonách.

Volba funkčnosti šablony

Postupem času budete stát před dilematem – jaký typ šablony zvolit. Motor poskytuje výběr. Buď si můžete vybrat šablonu s připojenou hierarchií šablon, nebo rozvržení s podmíněnými tagy.

První možnost již byla zvážena. Všechny soubory php šablon jsou hierarchií šablon. To znamená, že podle pravidel této hierarchie postupně generujete samostatné soubory rozvržení. Z řady funkčních php komponent si tedy vytvoříte plnohodnotnou šablonu. Hierarchie v tomto případě funguje na principu načítání na vyžádání. Například, pokud máte soubor kategorií (category.php) a uživatel si jej vyžádal, pak se tato konkrétní komponenta webu načte do prohlížeče. Pokud ne, načte se soubor šablony klíče index.php.

Můžete tak měnit vzhled jednotlivých částí webu pomocí principu šablony hierarchie. Každá stránka má své specifické ID. Přidejte soubor category-6.php do adresáře tématu a když požádáte o kategorii s ID 6, otevře se tento design. Pokud tam není, tak nastavení zůstane standardní – rozbalí se index.php.

Někdy princip šablony hierarchie nestačí k tomu, aby poskytoval co nejpohodlnější zobrazení šablony. V tomto případě se programátoři uchýlí k použití druhého principu – zavádějí podmíněné značky. Tyto značky zkontrolují, zda stránka splňuje určité podmínky, a pokud je nesplní, změní její vzhled. To znamená, že tyto značky fungují na principu if/else (if/then). Nemusíte tedy přidávat moře ​​php souborů s číslem každé kategorie, ale můžete napsat podmínky pro každé ID jednou.

Jaké je rozložení rozložení psd ve WordPress

Někteří lidé rádi nejprve vytvoří rozvržení budoucího návrhu pomocí různých programů a teprve poté jej přenesou do konkrétního motoru. To je opravdu výhodné, protože některé aplikace vám umožňují vytvořit vynikající design bez jakýchkoli dovedností. Pokud již máte soubor psd a chcete jej vytvořit pod enginem WordPress bez použití kódu, můžete využít pomoc jedné z oblíbených služeb.

Upozorňujeme, že se jedná o placenou službu, protože šablona bude pouze vaší polovinou. Takovou službu si objednejte až v krajním případě, pokud se vám rozvržení zdá dobré, ale na vymýšlení už nemáte sílu. Existuje mnoho programátorů, kteří jsou připraveni přenést psd do WordPress doslova přes noc za nízkou cenu.

PSD je soubor z aplikace Photoshop. Je to jako grafické znázornění vašeho návrhu. Chcete-li to vytvořit, musíte přidat html značku v textovém editoru. Postupně budete měnit každý z bodů tohoto označení, čímž dosáhnete konečného výsledku, který je zobrazen na rozvržení. Okamžitě uveďte vystředění šablony a také rozměry jejích různých částí.

Dalším krokem je přidání obrázků na pozadí. Můžete si je také vyrobit sami pomocí stejné aplikace Photoshop. Nejjednodušší možností je vytvořit obrázky na pozadí s přechodem. Dále začněte vytvářet logo. Postupně řešte všechny vzniklé požadavky - upravte záhlaví, zápatí, postranní panel a všechny jeho části, dle provedeného layoutu. Nezapomeňte do jeho adresáře přidat důležité soubory šablon, aby se web načetl podle vašich požadavků.

Pouze tímto způsobem, postupným učením se základům různých programovacích jazyků, se budete moci samostatně naučit, jak vytvořit web. Nikdo neříká, že dnes nebo zítra uspějete. Možná vám bude trvat měsíce, než pochopíte všechny funkce procesu rozvržení. Ale nebojte se – někomu to trvá roky. Nyní znáte přibližný postup vytvoření šablony od nuly a také přenesení rozložení psd do hotového tématu pro internetový zdroj na enginu WordPress.

Tento článek vás provede tím, jak vytvořit nejjednodušší téma pro WordPress. Ačkoli Codex poskytuje rozsáhlou dokumentaci na toto téma, zdá se mi to pro začátečníka trochu skličující. Proto v tomto „návodu“ vysvětlím, jak fungují WordPress témata a ukážu, jak jim přizpůsobit raw HTML šablonu. To nevyžaduje znalost PHP, ale je dobré, pokud vlastníte Photoshop a CSS k vytvoření návrhu.

1. Frontend blog

Než začneme, podívejme se na výchozí téma WordPress a uvidíme, z čeho se skládá. Poznamenejte si prvky (záhlaví, název příspěvku, vyhledávací formulář, navigace, zápatí atd.).

Standardní titulní strana ( index.php)

Standardní jednolůžkový ( single.php)

2. Rozvržení Photoshopu

Na základě vzhledu a chování výchozího motivu navrhněte rozvržení Photoshopu pro svůj blog. Jako příklad používám GlossyBlue, jedno z mých bezplatných témat. Stáhněte si demo.zip a podívejte se na hotový soubor Photoshopu.

3. HTML a CSS

Jakmile je návrh PSD připraven, vytvořte pro každou stránku šablonu HTML+CSS. Podle kroků v tomto tutoriálu můžete použít moje soubory GlossyBlue HTML z demo.zip. Po rozbalení archivu uvidíte index.html, single.html A stránka.html. Dále je použiji k přeměně v šablonu.

Proč na prvním místě vytvářet statické HTML? Je to hlavně proto, že to značně zjednoduší proces vývoje. Obvykle pro každou šablonu vytvořím soubor HTML, zkontroluji jejich platnost (značky HTML a CSS) ve všech prohlížečích. Poté zbývá pouze vyjmout a vložit kód WordPress. Už se tedy nemusíte bát chyb v HTML nebo CSS.

4. Jak funguje téma WordPress

Pokud přejdete do výchozí složky motivu ( wp-content/themes/default), uvidíte mnoho souborů php (nazývaných soubory šablon) a jeden soubor styl.css. K vygenerování stránky používá WordPress obvykle několik souborů šablon ( index.php , header.php, sidebar.php, A zápatí.php).

Přečtěte si více v Kodexu: „Architektura webu“ a „Hierarchie šablon“.

5. Duplikovat soubory šablon

Zkopírujte složku HTML z GlossyBlue do složky wp-content/themes. Poté přejděte do výchozího adresáře motivu a zkopírujte jej komentáře.php A searchform.php do složky lesklá modrá.

6 Style.css

Přejděte do výchozí složky motivu a otevřete soubor styl.css. Zkopírujte text zakomentovaný na začátku souboru a vložte jej styl.css GlossyBlue motivy. Pokud chcete, můžete změnit název a informace o autorovi.

7. Oddělování souborů

Nyní musíme zjistit, kde rozdělit soubory HTML na části: header.php , sidebar.php a footer.php. Níže uvedený snímek obrazovky ukazuje zjednodušenou verzi mého indexového souboru a také princip jeho rozdělení.

8.Záhlaví.php

OTEVŘENO index.html. Musíte oříznout sekci shora tam, kde končí, vložit ji do nového souboru php a uložit jako hlavička.php.
Přejděte do výchozí složky motivu a otevřete novou hlavička.php. Zkopírujte a nahraďte značky tam, kde to vyžaduje kód php: title, link, stylesheets, h1 a div class=description.

Navigační nabídka (wp_list_pages) Vyměňte štítky li PROTI ul id=nav na ;

9. Postranní panel.php

Návrat do index.html, vystřihněte kód z místa, kde začíná id formuláře=vyhledávací formulář a před uzavřením značky div id=boční panel, vložte jej do nového souboru php a uložte jako sidebar.php.

• Nahradit id formuláře=vyhledávací formulář se zapnutým veškerým obsahem.
• Vyměňte značky li kategorie na
• Vyměňte značky li archivy na

10. Zápatí.php

Návrat do index.html. Extrahujte odtud kód div id=patička včetně značky div id=footer a až do konce /html pak vložte nový patička.php.

Nedávné záznamy Zde jsem použil query_post k zobrazení 5 nejnovějších blogových příspěvků.

"Poslední komentáře""Nedávné komentáře" generované pluginem (zahrnuté ve složce motivu)

11.Index.php

Nyní ve vašem index.html by měl pouze zůstat div id=obsah. Uložte soubor jako index.php. Zadejte řádky: get_header, get_sidebar, A get_footer v pořadí, v jakém se objeví v šabloně.

12. Analýza cyklu

Smyčka zobrazuje příspěvky blogu postupně v závislosti na vašem nastavení. Snímek obrazovky níže ilustruje jeho práci. Zpočátku smyčka zkontroluje přítomnost záznamů, a pokud žádné nenajde, zobrazí zprávu "Nenalezeno".

13. Cyklus kopírování

Přejděte do výchozího adresáře motivu, otevřete jej index.php. Kopírovat cyklus ze standardu index.php ve vašem - mezi div id=obsah../div. Poté nahraďte statický text značkami šablony WordPress: datum příspěvku, název, kategorie, komentáře, další a předchozí odkaz.

14. Náhled tématu

Gratulujeme! Vytvořili jste veřejnou část (hlavní část šablony). Nyní přejděte na panel správce, přejděte na kartu design, měli byste vidět téma GlossyBlue. Aktivujte jej a přejděte do veřejné části, abyste viděli výsledek v akci.

15.Single.php

Je čas vytvořit šablonu single.php. Pokud chcete, můžete kroky zopakovat a přenést kód z výchozího motivu. Ale zdá se mi jednodušší použít nově vytvořené index.php, uloží se jako single.php. OTEVŘENO single.php z výchozího motivu a zkopírujte značky šablony na správná místa. Další připojení šablona_komentářů. Následující snímek obrazovky ukazuje změny, které jsem provedl:

16. Stránka.php

Nyní nové single.php uložit se jménem stránka.php. Odstraňte datum vstupu, formulář komentáře, další/předchozí odkazy. To je ve skutečnosti vše – vaše šablona stránka.php připraven .

17. Odstranění souborů HTML

Odstraňte všechny soubory HTML ze složky lesklá modrá(už je nebudeme potřebovat). To technicky stačí k vytvoření základního tématu WordPress. Možná jste si všimli, že ve výchozím motivu je více souborů PHP. No, ve skutečnosti je tolik nepotřebujete, pokud chcete jednoduché téma. Například pokud hledat.php nebo 404.php nebude ve složce motivu, kterou WordPress automaticky používá index.php pro zobrazení stránky. Další podrobnosti najdete v Hierarchii šablon.

18. Šablona stránky WordPress

Jako poslední příklad vám ukážu, jak použít šablonu stránky k vytvoření stránky Archiv, která bude obsahovat seznam všech příspěvků na vašem blogu (vhodné pro mapu webu). kopírovat archivy.php z výchozí složky motivu. Odstraňte nepotřebný kód a získejte něco takového:

Dobrý den, dnes jsem se rozhodl publikovat článek o vytvoření layoutu webu, který si následně rozložíme a natáhneme wordpress engine. Pokud si tedy nechcete nechat ujít vydání těchto článků, pak se nezapomeňte přihlásit k odběru aktualizací blogu a po vydání článku se o tom okamžitě dozvíte. Vytvoření rozvržení stránek psd a vytvoření šablony wordpress je ve skutečnosti velmi jednoduchý proces a jsem si jistý, že můžete postupovat podle mých pokynů a získat zcela jedinečnou šablonu.

K vytvoření šablony nepotřebujeme příliš mnoho znalostí, znalostí HTML A css, stačí si přečíst články v tématech na tomto blogu. Zvláštní pozornost by měla být věnována použití značek DIV a SPAN značek.

Nyní pojďme zjistit, co potřebujeme k vytvoření rozvržení PSD a dále sestavit tuto šablonu pro web. Ve skutečnosti k tomu nepotřebujete mnoho, program photoshop, který lze stáhnout z internetu, doufám, že to pro vás nebude problém a stáhněte si k tomu zdrojové materiály.

Brzy také zveřejním články, ve kterých budu mluvit o tom, jak vytvořit textury a pozadí pro web, takže se přihlaste k odběru aktualizací blogu.

Vytvořte dokument.

Nyní začněme vytvářet rozložení a vytvořit nový dokument. Vyberte soubor - vytvořte. Vyberte rozměry dokumentu 960 na 1600 pixelů.

Nakreslete dvě vodítka, levou a pravou. Chcete-li to provést, jednoduše klikněte na pravítka a nakreslete čáry.

Nyní musíme změnit velikost plátna. K tomu volíme Velikost obrázku plátno a zvolte velikost plátna 1200 x 1600 pixelů. Poté tuto oblast vyplňte bílou barvou pomocí nástroje Výplň.

Skupiny pro šablonu.

Nyní vytvoříme skupiny pro web. Vytvořme standardní skupiny jako na všech šablonách a to jsou: záhlaví, menu, obsah, boční sloupec a zápatí webu. Je to velmi snadné, v nabídce vrstev klikněte na obrázek složky, pro přejmenování vytvořené skupiny stačí dvakrát kliknout na název a zadat požadovaný název.

Záhlaví webu.

Nyní začněme vytvořením záhlaví webu. První věc, kterou musíte udělat, je otevřít texturu s názvem "Textura 1". A teď musíme oříznout černé pozadí, je to velmi snadné, vyberte nástroj "Kouzelná hůlka" a klikněte na černé pozadí, nyní na světlou oblast, klikněte pravým tlačítkem a vyberte "Invertovat výběr".

Dalším krokem je doladění našich hranic, výběr pravého tlačítka myši a výběr Refine Edge. A nastavte všechna nastavení, jak je znázorněno na obrázku.

Nyní vyberte " vrstvy - nové - zkopírujte do nové vrstvy". Nyní vezmeme vrstvu myší a přetáhneme ji na náš výkres.

Dalším krokem je převrácení výkresu. Chcete-li to provést, vyberte Upravit-Transformovat-Otočit o 90 stupňů proti směru hodinových ručiček. Poté stisknutím levého tlačítka myši budete muset vrstvu přesunout, jak je znázorněno na obrázku níže.

Nyní musíme zvýšit sytost našeho obrázku, a proto přejdeme na kartu Obrázky - Úpravy - Odstín/sytost. Nyní musíme snížit jas obrázku na -100. A tohle bychom měli dostat:

Nyní napíšeme logo našeho webu. K tomu musíme nainstalovat nové písmo. Myslím, že zdrojový soubor jste si již stáhli a v archivu je i soubor s písmem. Nejprve je potřeba rozbalit font. Nyní musíme jít do složky (nejčastěji je to jednotka C: / windows - Fonts).
A zkopírujte tam všechny soubory písem. Nyní restartujte program a toto písmo vám bude k dispozici.
Nyní vyberte nástroj Text a vyberte naše písmo, barva je bílá a poblíž levého vodítka vytvoříme logo. Tady je to, co jsem dostal.

Nyní vytvoříme menu na pravé straně. Bude se skládat ze tří hlavních bodů a těmi jsou Domov, Kontakty a O autorovi. Znovu vyberte nástroj Text a klikněte s nimi na správné místo. Barva je bílá a písmo je Wide Latin a velikost je 18px.

Vytvoříme novou vrstvu. Nyní vezměte nástroj pro rovné laso a vyberte tlačítko kolem jednoho ze štítků.

A vyplňte vybranou oblast barvou 2A2A2A. Nyní změníme pořadí vrstev, přesuneme vrstvu s nápisem nad vrstvu s výplní.

Hlavní obsah webu.

A nyní máme po kliknutí tlačítko menu. Nyní musíme přejít do složky Obsah a vytvořit v ní novou vrstvu.

Otevíráme obrázek 3 a umístěte jej pod všechny vrstvy. Pomocí transformace zvětšujeme velikost obrázku, dokud nevyplní celý prostor.

Nyní upravte jas a kontrast textury. Chcete-li to provést, stiskněte tlačítka Ctrl+Shift+U. Zvolte Obrázek - Úprava - Křivky.

Nastavení nastavíme jako na obrázku.

Vytvořte novou vrstvu a nyní s vámi vybereme oblast obsahu. Oblast obsahu bude bílá a 660 x 1200 pixelů. K tomu vybereme nástroj „obdélníková plocha a styl – dané proporce“, kde musíme zadat rozměry pole. A poté musíme pole vyplnit nástrojem „Vyplnit“.

Nyní musíme nastavit zdvih pro naše pole. Vyberte vrstvu, na které se nachází náš obrázek a klikněte na tlačítko "Přidat styl vrstvy", z rozbalovací nabídky vyberte Tah.

A nastavte následující nastavení - tloušťka 1 pixel a barva c8c7c7.

Nyní otevřeno obrázek 4, pomocí škálování zmenšíme velikost, měla by být někde o deset pixelů více od bílého pole vpravo a vlevo. Nad a pod musíte odsadit 50–60 pixelů.

Nyní stiskněte kombinace tlačítek Ctrl+Shift+U pro desaturaci textury a upravte jas pomocí křivek. Nastavení jako na obrázku.

Vyberte vrstvu pomocí našeho bílého plátna, klikněte pravým tlačítkem a vyberte " Vyberte pixely».

Nyní vyberte šedou vrstvu a klikněte výběr - úprava - komprimovat a nastavte kompresi o tři pixely. Poté musíme náš výběr obrátit, to jsme již udělali a je to snadné, vyberte Výběr-inverze, zmáčknout tlačítko Del. Zde je to, co bychom měli získat:

Nyní vytvořte masku pro stejnou šedou vrstvu.

Vyberte černobílý přechod a kliknutím levým tlačítkem myši nakreslete od středu do spodní části stránky a tím vyhladíme přechod.

Nyní vytvoříme tlačítka pro navigaci na stránce. K tomu nám stačí nakreslit černý obdélník, velikost si můžete vybrat podle svého uvážení. V každém tlačítku je také potřeba zaregistrovat název stránek. Pro popisky používáme font Times New Roman a velikost 18 pixelů.

Nyní otevřeme obrázek s ikonami a přidáme je na opačnou stranu hlavního menu. Nyní musíme obsah na obou stranách odsadit o dvacet pixelů. Nyní musíme k našemu prvnímu článku přidat nadpis, barva textu je černá. Pro datum a počet komentářů jsem použil barvu cb8154.

Nyní, abyste oddělili záhlaví od hlavního obsahu webu, musíte nakreslit čáru. Chcete-li nakreslit rovnou čáru, musíte vybrat nástroj tužka a podržet stisknutou klávesu Shift a nakreslit čáru kliknutím na začátek a nakreslením na úplný konec čáry.

Nyní musíme vytvořit místo pro náhled. Chcete-li to provést, vytvořte obdélník s rozměry, které potřebujeme, rozhodl jsem se, že to udělám 165 x 165 pixelů a vyplním ho černou barvou. Použijte na něj nastavení: tah a stín.

Mrtvice.

Stín.

Nyní přidáme vlastní text. Zde je to, co bychom měli získat:

Nyní, po skončení článků, je potřeba oddělit 30 pixelů a šedou (SSSSSS). Poté nakreslete čtyři čtverce 32 x 32 pixelů a vyplňte je červenou barvou 8E0A13.

Kreslení vyhledávacího formuláře.

K tomu stačí nakreslit obdélníkovou oblast bílé barvy a na ni aplikovat vnitřní stín.

Nyní nakreslíme červené tlačítko stejné velikosti 32 x 32 a červené barvy a zadáme slovo „ Vyhledávání».

Postranní panel.

Na novou vrstvu nakreslete obdélník o šířce 270 pixelů a vyplňte jej 1F1F1F. Přidáme také nadpis o stejné šířce 270 pixelů a výšce 25 pixelů, vyplněný černou barvou.

Nyní musíme napsat kategorie pro blog. Text ve fontu Times New Roman a velikosti 16 pixelů. Ke každé položce nabídky musíte přidat obrázek. Vybrat " Libovolná postava» a zvolte tvar rastrového bodu « Ornament 4“ a vyplňte ji barvou 818181.

Zápatí webu.

S patičkou se nebudeme moc trápit, stačí vyplnit celé pole černou barvou a přidat menu, v písmu Times New Roman a velikosti 18 pixelů a barvě E6E6E6.

Pokud si chcete stáhnout šablonu, která se ukázala, klikněte na tlačítko a bude vám k dispozici odkaz ke stažení. Tento článek je u konce a myslím, že nyní víte, že prvním krokem k vytvoření šablony wordpress je vytvoření PSD s rozložením webových stránek.

Jen před několika lety se objevila nová řada služeb, které nabízejí automatický převod designu vašeho webu ze souboru Photoshopu. .PSD do kódu HTML + CSS zdarma. Dříve to byl jako neohrabaný pokus o automatizaci práce s ne nejlepší kvalitou, ale nyní se tyto služby vyvinuly a nabízejí plnou integraci se systémy pro správu obsahu (jako je WordPress).

V tomto článku vám představím docela dobré služby, které vám pomohou ušetřit čas i peníze.

1 DevPress

Autorem této služby je Tung Do, vynikající WordPress designér a vývojář, který mi udělal radost svým novým produktem. Služba, kterou nabízí, je schopna: Návrh motivu, kódování XHTML/CSS, vývoj motivů XHTML-to-WordPress a správa stránek.

2. WP od PSD

Tým profesionálních kodérů vám pomůže migrovat váš návrh na standardní téma WordPress pro různé prohlížeče. Slibujeme, že všechny práce budou provedeny za nejnižší ceny a v co nejkratším čase. Musíme klukům věřit :)

3. Kódování lidí

Služba nabízí práci se statickým XHTML, HTML5 a nabízí i hotovou sadu šablon pro internetový obchod. Codingpeople je považován za německou autoritu na kvalitu kódu.

4. WP Canvas

Tato služba zajišťuje, že snadno změní váš návrh na vysoce kvalitní rozvržení pro různé prohlížeče, které je kompatibilní se standardy W3C Platné téma WordPress.

5. PSD na WP

Pokud jste vytvořili vynikající design webových stránek a potřebujete rychlý a kvalitní layout, služba PSDtoWordPress vám s tím pomůže. Proměňte svůj design v hotové téma WordPress pomocí PSDtowordpress.

6.PixelWP

PixelWP.com poskytuje svým zákazníkům vynikající převodník šablon PSD do wordpressu, na který se můžete spolehnout. Můžete si být jisti, že váš návrh bude realizován kvalitně a včas.

7. PSD na libovolný

Služba dokáže vygenerovat hotové téma WordPress z přiloženého rozvržení návrhu. Pokud nemáte žádné programátorské dovednosti a práci se soubory témat, tato služba se vám bude určitě hodit!

8. PSD 2 HTML

Služba byla poprvé spuštěna v roce 2005. P2H.com / PSD2HTML.com byl první svého druhu a přilákal více než 50 000 zákazníků.

9. HTML Cut

HTMLcut je služba krok za krokem pro implementaci hotového kódu z vašeho návrhu. Nahrajete rozvržení PSD, HTMLcut se postará o zbytek.

10. RapidXHTML

Pokud chcete svůj design proměnit v hotový blog nebo web CMS, RapidxHTML je to pravé pro vás. Služba podporuje populární platformy jako wordpress, Blogger, Drupal, Joomla a Magento.