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.
Vezměte prosím na vědomí, že tento manuál neobsahuje popis přidání hotového motivu - jedná se o manuál pro 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 v sekci „ Vzhled“ a přidejte tam jeden z dostupných vzhledů. 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 design nebo si jej stáhnete z katalogu bezplatné šablony 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 se musíte vypořádat s kaskádovými tabulkami css styly, tak si zapamatujte i jejich 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 motivy, soubor s další funkce(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ů:
- Style.css je zodpovědný za soubor stylu vnější design místo.
- Funkce.php funkční soubor A, které přidává na stránky různé funkce.
- 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 první Funkce WordPress, což je třeba vzít v úvahu při přenosu rozložení psd do enginu WordPress. Musíte zadat následující parametry:
- Název šablony.
- Adresa URL, která vede k tématu.
- Popis udávající hlavní vlastnosti šablony. Krátce.
- Jméno autora. V tomto případě zadejte své jméno.
- Odkaz na autora, tedy na vás. Můžete uvést odkaz na svůj profil na sociálních sítích.
- Název nadřazeného motivu je volitelný.
- Verze tématu. Pokud pouze vytvořen, pak v. 1,0.
- Ú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:
- styl.css
- 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 šablona- toto je hierarchie š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 kontrolují soulad webu jisté podmínky a pokud nejsou respektovány, změní svůj 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 ve formátu psd, a chcete to udělat pod enginem WordPress bez použití kódu, pak můžete použít pomoc jedné z oblíbených služeb.
Uvědomte si, že toto placená služba, protože šablona bude vaše jen polovina. 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ý obrázek váš design. Abyste to vykompenzovali, musíte textový editor přidat html označení. 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ázky 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ů.
Jedině tak se postupně učí základy různé jazyky programování, můžete se naučit, jak vytvořit web sami. 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.
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ý připravená šablona Nabízí se 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é rozložení 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. Níže uvedený obrázek ukazuje standardní sada soubory š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í domovská stránka místo. 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í.
Pokud čtete tento článek, je pravděpodobné, že máte velmi krásný design webových stránek, pravděpodobně vytvořený Adobe Photoshop a uložit jako formát PSD, JPG, PDF, AI nebo PNG. Nyní chcete tento soubor obrázku převést na téma WordPress, abyste jej mohli použít na svůj nově vytvořený web nebo blog. Možná si to budete přát Převodník PSD na WordPress -Ale co kdybyste tuto transformaci zvládli sami a ještě k tomu je zdarma!
Mnoho lidí, kteří jsou dobří v grafickém designu, přichází k tomuto bodu převodu PSD na témata WordPress. A cítí se zaseknutí! Ale není to jejich chyba. Vytvoření webových stránek vyžaduje nejen schopnost vytvářet skvěle vypadající návrhy, ale vyžaduje také určité programátorské dovednosti. Musíte být odborníkem alespoň na HTML, CSS, JavaScript, jQuery a PHP programování obrátit svůj PSD soubor na webovou stránku. Problém je v tom, že většina lidí je buď dobrý designér, nebo dobrý programátor!
Nicméně, nebojte se. Převést PSD na téma WordPress není tak těžké. Jediné, co potřebujete vědět, jsou správné kroky. V tomto článku vám řeknu to samé! Začněme se učit.
Co je soubor PSD?
Ti, co nevědí PSD je zkratka pro Photoshop Document. Toto je formát souboru, ve kterém Adobe Photoshop ukládá spustitelné soubory. Soubory PSD můžete otevřít ve Photoshopu a provést další změny v designu, jak si přejete. Soubory PSD se proto někdy nazývají otevřít soubory (s odkazem na skutečnost, že tyto soubory lze upravovat).
Pokud si chcete vytvořit design webových stránek svých snů, pravděpodobně si pro jeho zhmotnění zvolíte Photoshop. Photoshop je bezpochyby nejlepší a nejoblíbenější nástroj pro grafický design.
Co je WordPress?
WordPress je v podstatě bezplatná platforma pro blogování. Je otevřeno zdrojový kód program usnadnil i neprogramátorům vytváření vlastních webových stránek nebo blogů. WordPress je robustní a škálovatelný a je napsán v PHP.
Design webových stránek založený na WordPressu se nazývá téma(a někdy, vzorek).
Převést PSD na téma WordPress
Krok 1: Vyjměte soubor PSD
Jakmile je váš soubor PSD připraven, první věc, kterou musíte udělat, je rozdělit jej na kousky. za co? No protože jeden obrázek bude velký a bude se déle načítat. Kromě toho budete muset přiřadit různé chování k různým segmentům obrazu. Takže to musíte ustřihnout.
To ale neznamená, že můžete obrázek jen tak náhodně vystřihnout. Musíte dělat věci logickým způsobem. Například záhlaví se může stát jedním kusem, zápatí by mělo být samostatné... pak můžete oříznout pozadí, tlačítko a nabídku atd.
Adobe Photoshop umožňuje používat vrstvy. Má vestavěný objekt pro rozřezání PSD a uložení výsledných segmentů jako samostatné obrazové soubory. Tyto obrázky můžete uložit ve formátu JPG nebo PNG. Pokud potřebujete průhlednost pro práci v kterémkoli z těchto segmentů, musíte ji uložit formát PNG protože JPG nepodporuje průhlednost.
Při řezání obrázku musíte být přesní. Chyba i jednoho jediného pixelu může způsobit, že dvě části nejsou vhodné pro repliku.
Při krájení PSD za účelem přeměny na téma WordPress tomu musíte v současnosti rozumět css čas je poměrně výkonný a dokáže vytvořit řadu prvků pomocí pouhých několika řádků kódu. Můžete například vytvořit jednobarevné pozadí, přechodové pozadí, tlačítka odlišné typy, čáry, šipky a speciální znaky, jen s pomocí CSS. Tímto způsobem nemusíte tyto věci ukládat jako obrázky. Čím méně obrázků, tím rychleji se váš web načte.
Následující video na YouTube přesně ukazuje, jak rozdělit soubor PSD a uložit jej jako různé obrázky:
Dobře, nyní, když máte různé vizuální prvky návrhu vašeho webu, je čas přejít k dalšímu kroku.
Krok 2: Vytvořte soubory HTML a CSS
Nyní začíná hlavní kódovací část procesu převodu PSD na webovou stránku. V podstatě potřebujete vytvořit webovou stránku a sestavit všechny rozřezané obrázky tak, aby vypadaly přesně jako vaše PSD.
Nejprve musíte vytvořit soubor HTML. Můžete tomu říkat, jak chcete, ale podle konvence to říkejme index.htm. V tomto souboru budete muset napsat kód HTML nebo XHTML, abyste zobrazili různé části obrázku z vašeho PSD. Chcete-li vytvořit rozvržení základů, můžete použít prvky DIV. Prvky DIV jsou velmi univerzální. Prvky DIV můžete umístit vedle sebe, překrývající se, na sebe. Střed prvku DIV můžete zarovnat doleva a doprava a můžete je umístit velmi konkrétně na konkrétní souřadnice na webové stránce.
V těchto prvcích DIV můžete volat uložené obrázky a zobrazovat je jako takové nebo jako pozadí v DIV.
Po dokončení tohoto základního rozvržení vaší webové stránky byste měli styl to aby to bylo stejné jako vaše PSD. Pro stylování musíte použít pravidla kaskádových stylů (CSS). Pomocí těchto pravidel můžete používat různé styly písma, velikosti, barvy, stíny textu, odstíny šedi na obrázku, okraje atd.
Chcete-li napsat pravidla stylu CSS, musíte vytvořit jiný soubor s názvem styly.css a pak zavolejte tento soubor css index.htm. Styly přítomné v styly.css se bude vztahovat na různé prvky ve vašich HTML souborech.
Dobře Počkej! Pokud nevíte nic o kódování HTML nebo CSS, nebojte se! Jedná se o velmi jednoduché skriptovací jazyky a můžete se je snadno naučit online. Níže jsou uvedeny některé z online zdrojů, kde se můžete naučit CSS a HTML:
Návody pro HTML
- Výuka HTML W3Schools
- TutorialsPoint HTML tutorial
- HTML.net
- HTML pes
CSS tutoriály
- CSS tutoriál
- Výukový program CSS W3Schools
- Tuts Plus
- Základy CSS
Krok 3: Rozbití souboru HTML v souborech motivů WordPress
Na tento moment v procesu převodu PSD na téma WordPress byste měli jeden soubor HTML (index.html) a jeden css soubor (styles.css). Ve třetím kroku budete muset HTML soubor rozdělit podle Téma struktury WordPress. Zmatený? WordPress má předdefinovanou sadu souborů, které jsou pojmenovány společně, aby vytvořily webovou stránku. Například při zobrazování příspěvku vyžaduje WordPress mimo jiné obsah záhlaví souboru, souboru zip, souboru postranního panelu a zápatí. Ale máte celý kód v jediném souboru - index.htm. Takže budete muset znovu distribuovat kód index.htm do různých souborů wp. Je to v podstatě cut-paste práce! Zde je seznam některých důležitých souborů témat pro WordPress:
- archiv.php
- kategorie.php
- komentáře.php
- patička.php
- hlavička.php
- index.php
- stránka.php
- hledat.php
- sidebar.php
- single.php
- styl.css
- 404.php
Chcete-li vytvořit základní téma WordPress, chtěli byste vytvořit alespoň header.php, footer.php, sidebar.php single.php a index.php
Jednoduše vytvořte tyto soubory PHP v libovolném textovém editoru poznámkového bloku a zkopírujte příslušný kód index.htm k těmto souborům. Kód, vytvořte část nadpisu půjde dovnitř header.php, kód poznámky pod čarou přejde na patička.php... tak dále a tak dále.
Pokud nejste příliš obeznámeni s PHP, může být pro vás obtížné tyto soubory správně vytvořit. Některé jsou opravdu dobré a zdarma online lekce pro učení PHP. W3Schools a PHP.net jsou snadno srozumitelné Nápověda PHP. Můžete si projít tyto tutoriály, abyste získali pocit z PHP.
Následující youtube video vám pomůže pochopit, jak nastavit "nahé téma WordPress" (v podstatě to znamená -Prázdné téma WodPress.
Krok 4: Přidání funkcí a značek WordPress
Nyní je čas převést jednoduché soubory PHP na soubory motivů WordPress. Chcete-li to provést, budete muset do souborů přidat značky WordPress. Ale můžete se zeptat co přesně jsou značky WordPress?
Jak jsem již řekl, WordPress je vynikající a spolehlivá platforma. To vám dává velké množství vestavěné funkce, které můžete snadno volat a dělat věci.
Podívejme se na příklad, abychom to lépe pochopili. Na domovské stránce (index.php), můžete zobrazit seznam Poslední příspěvky. Tento seznam by se měl automaticky změnit, jak a kdy vytvoříte nový příspěvek. Můžete si napsat vlastní PHP funkce extrahovat data příspěvku z databáze a zobrazit je na hlavní stránce. Ale tvůrci WordPressu vám usnadnili život! Nebudete muset psát vlastní podrobné funkce. Stačí použít wp_get_recent_posts($arg, $output) z WordPress a podívejte se na zobrazený seznam posledních příspěvků!
WordPress má komplexní online dokumentaci, která vám poskytuje informace o všech funkcích a dalších položkách dostupných ve WordPressu. Dokumentace také obsahuje mnoho příkladů a je proto velmi snadno pochopitelná. K této dokumentaci se dostanete pomocí následujících odkazů:
- Značky šablon WordPress
- Odkaz na funkce WordPress
Jakmile budou tyto soubory motivů připraveny, měli byste je umístit do složky, která by měla být stejná jako vaše nové téma. Tato složka může mít také další složky pro ukládání souborů CSS, souborů JavaScript a souborů obrázků.
Můžete také zahrnout do souboru obrázku s názvem snímek obrazovky.jpg nebo snímek obrazovky.png. Tento soubor se zobrazí jako miniatura vašeho motivu. Je snadné se naučit, jak pořídit snímek obrazovky.
Seznam souborů v typickém motivu WordPress může vypadat takto:
Do složky musíte nahrát složku motivu /wp-content/themes Instalace WordPressu. Pokud například pojmenujete motiv Minerva - Pak by soubory motivu měly být in / wp-content / témata / Minerva
Po nahrání složky motivu přejděte na svůj řídicí panel WordPress a poté přejděte na Vzhled > Motivy. Zde budete rádi, když uvidíte svůj vlastní návrh nového motivu mezi motivy dostupnými pro aktivaci. Stačí vybrat motiv a aktivovat jej.
Podívejte se na následující video, abyste viděli další postup:
Krok 5: Přidejte další funkce, jako je vyhledávání a vlastní funkce
Vaše téma WordPress je již připraveno a spuštěno. Cesta od PSD k tématu WordPress byla dokončena. Ale stále můžete přidat další funkčnost k vašemu tématu.
Můžete například tvořit hledat.php soubor s kódem, který zobrazuje výsledky vyhledávání z vašeho webu.
Kromě toho si můžete vytvořit vlastní PHP funkce a použít je v různých dalších soubory PHP. Musíte vytvořit soubor funkce.php aby byly vlastní funkce na jednom místě.
Chcete-li se vypořádat s chybami 404 (stránka nenalezena), můžete vytvořit soubor 404.php. WordPress zobrazí obsah tohoto souboru vždy, když se někdo pokusí získat přístup k neexistující adrese URL vašeho webu.
Můžete také nějaké přidat Funkce JavaScriptu. JavaScript je nejrozšířenějším skriptovacím jazykem na straně klienta. Do souborů můžete zapisovat funkce JavaScriptu .js a zavolejte tyto funkce ve svých souborech PHP. Například ověření formuláře je něco, co se obvykle provádí pomocí JavaScriptu. Pokud se uživatel snaží najít něco na svém webu bez psaní klíčová slova ve vyhledávacím poli je to JavaScript, který uživateli říká, že by měl zadat kritéria vyhledávání.
Po těchto krocích si můžete snadno sami vytvořit vlastní téma WordPress. Tyto kroky převedou soubor PSD na funkční téma WordPress. Někteří lidé však hledají bezplatné převodníky PSD na WordPress. Existuje mnoho společností, které tvrdí, že vezmou soubor PSD a přemění jej na přesné téma. Pokud se nechcete zatěžovat učením se programování, můžete své PSD dát těmto společnostem. Ale samozřejmě si to účtují!
Zdarma převodníky PSD na WordPress
Narazil jsem software Elemente od DivineProjects. Tento program si můžete stáhnout zdarma a převede vaše PSD na plně funkční téma WordPress připravené k použití. Tento software funguje jako plugin Photoshopu.
Doufám, že vám byl tento článek užitečný. Máte-li jakékoli dotazy k tomuto tématu, neváhejte se zeptat. Pokusím se vám pomoci. Děkujeme, že používáte TechWelkin.
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 je zdarma. Dříve to vypadalo jako neohrabaný pokus o automatizaci práce nejlepší kvalita, ale nyní se tyto služby vyvinuly tak, aby nabízely 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 veškerá práce bude provedena na nejvyšší úrovni. nízké ceny a dovnitř co nejdříve. 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 k implementaci hotový kód z vašeho návrhu. Nahráváte PSD rozložení, - zbytek je na HTMLcut.
10. RapidXHTML
Pokud chcete svůj design proměnit v připravený blog nebo stránky na CMS, RapidxHTML je to pravé pro vás. Služba podporuje populární platformy jako wordpress, Blogger, Drupal, Joomla a Magento.