tento článek přispěl PSDtoWP.net

možná by bylo nejlepší začít zde Proč. Asi čtvrtina všech webových stránek běží na WordPress, online blogovací platformě. Díky tomu je zdaleka jedním z nejpopulárnějších systémů pro správu obsahu s otevřeným zdrojovým kódem na planetě.

drtivá většina webových designérů stále používá Photoshop k navrhování webových stránek, i když existují alternativy. To znamená, že mnoho návrhářů webových stránek musí najít způsoby, jak převést soubory PSD na citlivé téma WordPress!

nyní se to může zdát docela jednoduché. Převod souboru PSD na web WordPress však není úplně snadný. To vyžaduje mnohem víc než jen Photoshop dovednosti! Chcete-li změnit soubor PSD na citlivé téma, které lze použít na WordPress, budete potřebovat znalosti o jazycích pro vývoj webových aplikací, jako jsou HTML, CSS a JavaScript, stejně jako programovací jazyk PHP pro backend.

nyní, proč je z cesty, je čas přistoupit k tomu, jak! Ačkoli to rozhodně není snadné, stále to může být dosaženo v pěti poměrně jednoduchých krocích!

první krok: Vytvořte webový design

pokud jste již svůj web navrhli, přeskočte na druhý krok.

vytváření webových stránek je mnohem více než pouhé vytvoření loga a vložení nabídky, postranního panelu, zápatí a obsahu dohromady. Kousky v této skládačce musí být vytvořeny na prvním místě a proces tohoto stvoření je něco, co ne každý může tak snadno udělat.

webový design, který vytvoříte, musí být dokonalou rovnováhou mezi formou a funkcí, web design, který zajišťuje skvělý uživatelský zážitek.

výzkum

Chcete-li vytvořit webový design, který úspěšně splňuje kritéria vzhledu a funkčnosti, budete muset udělat nějaký seriózní výzkum. Nejprve, kdo je vaše cílové publikum a co vaše cílové publikum chce? To jsou samozřejmě klíčové aspekty vašeho výzkumu.

Učte se od ostatních

dalším aspektem webdesignu, který potřebujete k výzkumu, jsou techniky, které použili vaši konkurenti. Tito konkurenti jsou s největší pravděpodobností lépe zavedeni než vy, takže byste se určitě mohli hodně naučit z designu, který používají! Jakmile provedete svůj výzkum a máte dobrou představu o tom, jak by měl váš web vypadat, měli byste začít přemýšlet o funkčnosti. Jaké funkce chcete, aby váš webový design měl?

Wireframe

jakmile máte vše vyřešeno, dejte to na papír. Nakreslete & načrtněte, jak si představujete, aby vaše stránky vypadaly, abyste měli vizuální pomůcku při pohybu vpřed!

Design

Jakmile dokončíte vytváření fyzických skic / drátových modelů, jste připraveni naskočit do kapitánského křesla a spustit Photoshop. První věc, kterou musíte udělat, než začnete vážně, je ujistit se, že používáte mřížku založenou na sloupcích, jako je XXgrid. Díky tomu bude váš design vypadat opravdu uklizený a vyrovnaný! To není jen pro estetiku. Použití mřížky založené na sloupcích k vytvoření zarovnaného designu usnadní vám nebo vašemu frontendovému vývojáři, který bude vyvíjet HTML a CSS, aby vytvořil optimalizované a citlivé rozvržení pro tablety a chytré telefony!

než přejdete k dalšímu kroku, nezapomeňte, že musíte udržovat soubory návrhu PSD uspořádané ve vrstvách, tj. každá sekce by měla mít vlastní složku s odpovídajícími tituly!

Druhý Krok: Plátek PSD

jakmile vytvoříte webový design, se kterým jste zcela spokojeni, je čas na krizi. V podstatě to, co musíte udělat, je proces PSD na WordPress.

webové stránky v těchto dnech jsou všechny postaveny pomocí HTML5 a CSS3. Jsou mnohem lepší než XHTML a CSS2, protože místo všech tlačítek, ohraničení, přechodů, zaoblených hran a všech ostatních funkcí vytvářených pomocí obrázků jsou vytvořeny jako funkční části kódování CSS3. Proto, krájení souboru PSD bude v podstatě nyní zahrnovat pouze krájení obrázků na pozadí z PSD!

Chcete-li to provést, musíte soubor otevřít ve Photoshopu nebo Illustratoru, v závislosti na softwaru, který jste použili k vytvoření návrhu. Pokud by návrhář udělal svou práci správně, vytvořil by dobře strukturovaný návrhový soubor se složkami a vrstvami, což by vám usnadnilo nalezení toho, co potřebujete. Prostudujte si web design a hledejte obrázky, o kterých si myslíte, že by bylo třeba krájet. Jedná se v podstatě o všechny obrázky, které nelze vytvořit pomocí CSS3, obvykle logo a obrázky na pozadí. Přečtěte si, jak krájet obrázky zde.

jakmile tyto obrázky na pozadí nahradíte pomocí CSS, uvidíte obrovský pokles doby načítání. To by přilákalo mnoho uživatelů na váš web, protože průměrný uživatel internetu nemůže vydržet dlouhé doby načítání!

třetí krok: Vytvořte HTML, CSS3 a JavaScript (jQuery)

jakmile jste nakrájeli obrázky ze souboru PSD, je čas vytvořit HTML5 a CSS3. První věc, kterou musíte udělat, je vytvořit novou složku, ve které vytvoříte index.html a styl.element. Vytvořte také podsložku s názvem obrázky nebo img (podle toho, co dáváte přednost) a umístěte obrázky, které jste extrahovali, do této složky. Vytvořte další složku s názvem JavaScript nebo js. To je na později, takže můžete uložit všechny soubory JavaScript a jQuery na dobře označeném místě. Po dokončení vytváření všech složek, souborů a podsložek je čas začít budovat HTML5 a CSS3.

HTML5

HTML5 je relativně nový jazyk, který má jak XHTML, tak HTML funkce. Tento jazyk se v podstatě používá k vytvoření základní struktury dokumentu, stejně jako jmenovat všechny prvky stránky. HTML5 má samostatné prvky pro různé části vašeho webu, jako je <záhlaví>, < nav>, <stranou>, stejně jako <zápatí> prvky (a mnohem více), které vám umožní vytvořit čistý, dobře strukturovaný dokument, který je univerzálně čitelný. Zde jsou některé vynikající zdroje, které můžete použít k učení nebo osvěžení paměti o HTML5.

HTML zdroje

W3Schools je číslo top webové stránky pro učení základy HTML5. Každý prvek a atribut tohoto jazyka je vysvětlen a vyučován pomocí ukázek, což usnadňuje učení.

Mozilla Developer ‚ s Section – lidé za populárním prohlížečem Mozilla Firefox mají na svých webových stránkách sekci vývojáře. V této části se můžete dozvědět hodně o HTML5 prostřednictvím tutoriálů, které tam mají, ať už jste začátečník nebo pokročilý kodér.

Web Design Tuts – tato webová stránka má mnoho různých tutoriálů HTML5, z nichž některé jsou zdarma a některé jsou placeny.

W3-tato webová stránka je zodpovědná za vývoj všech otevřených webových standardů, které byly vytvořeny za účelem zajištění dlouhověkosti webu. Zde najdete podrobné informace o HTML5, stejně jako všechny jeho nejnovější vývoj.

W3 Validator-Jakmile dokončíte HTML5, vložte jej přes tento validátor. To vám řekne, zda vaše HTML5 splňuje W3 otevřené webové standardy!

CSS3

CSS odkazuje na kaskádové styly a CSS3 je nejnovější verze tohoto front-endového jazyka. CSS3 se používá k pořizování holých kostí prvků vytvořených pomocí HTML5 a jejich tvaru, polohy a stylu. To vám umožní vytvořit konzistentní webový design, ve kterém všechny prvky potvrzují celkový design webu. Jakmile použijete CSS3, zjistíte, že váš HTML5 bude mnohem čistší a lépe strukturovaný, což mu umožní načíst mnohem rychleji a umožnit rychlejší indexování pomocí vyhledávačů. Níže jsou uvedeny některé zdroje, které vám pomohou naučit se nebo obnovit paměť o CSS3:

CSS zdroje

W3 CSS-W3 je na nejznámějších a nejznámějších zdrojů pro CSS3 tutoriály a příklady různých CSS3 selektory, vlastnosti a hodnoty. Nejlepší na tom je, že každý tutoriál má stránku „zkuste to sami“, která vám umožní aplikovat to, co jste se naučili.

Naučte se CSS3-Mozilla není jen tvůrcem prohlížeče Firefox. Je to také vynikající místo, abyste se seznámili s CSS3, stejně jako aktualizovat své znalosti týkající se jazyka.

CSS Web Design Tuts – tato webová stránka obsahuje celou hojnost výukových programů, které můžete projít. Některé z těchto tutoriálů je třeba zaplatit, ale jiné jsou stále zcela zdarma a mohou vás naučit hodně o SELEKTORECH CSS3, vlastnostech a hodnotách.

W3 CSS – tato webová stránka je skvělým místem, kde můžete zůstat informováni o nejnovějších zprávách CSS3, protože to je právě komunita, která vyvíjí webové standardy CSS3. Je to také skvělé místo pro zjištění technických informací o jazyce.

CSS Validator-Toto je validátor, pomocí kterého byste měli spustit všechny své CSS3 před zveřejněním webových stránek. To je, aby se ujistil, že váš CSS3 splňuje webové standardy stanovené W3!

responzivní Design

internet má za sebou dlouhou cestu od svého vzniku. To je částečně způsobeno příchodem chytrých telefonů a tabletů a šířením těchto typů technologií do našeho každodenního života. V důsledku obrovské popularity těchto zařízení se významná část celkových uživatelů internetu dívá na webové stránky na výrazně menších obrazovkách než průměrný notebook. Kromě toho interagují s těmito webovými stránkami ne pomocí kurzorů, pomocí prstů. Moderní web proto musí být schopen přizpůsobit se různým typům zařízení, která jsou venku. Zde přichází citlivý design. Pomocí responzivního designu jsou designéři schopni vytvořit web, který může upravit celé rozvržení podle typu zařízení, na kterém je zobrazen.

je dobré se předem rozhodnout, zda chcete, aby váš nový web měl citlivý design nebo ne, než začnete stavět HTML5 a CSS3. Je to proto, že když kódujete responzivní část návrhu vašeho webu, budete muset pracovat s dotazy médií CSS3. Pomocí těchto mediálních dotazů můžete definovat různé textury a styly pro různá rozlišení obrazovky.

nezapomeňte nikdy používat pevné šířky, místo toho použijte procenta. Toto je označováno jako fluid nebo liquid layout design, který vám umožní optimalizovat vaše webové stránky nejen pro rozlišení definovaná v rámci vašich mediálních dotazů, ale také pro všechna rozlišení mezi nimi. To je obrovská výhoda pro vaše webové stránky, protože chytré telefony, tablety a počítače, které dnes vycházejí, mají tolik různých velikostí, a proto rozlišení,a musíte je vyhovět všem.

responzivní zdroje

zde jsou některé skvělé zdroje, které můžete použít k obnovení paměti nebo se dozvědět o responzivním designu a veškerém souvisejícím kódování:

Google responzivní – to je skvělý zdroj pro ty z vás, kteří jsou novým responzivním designem pomocí CSS3 mediálních dotazů.

principy responzivního webdesignu-Přečtěte si tento článek, abyste pochopili rozdíl mezi responzivním webdesignem a adaptivním webdesignem. Má několik skvělých příkladů, které vám pomohou pochopit věci podrobně!

Fluid Grids – můžete použít tento vynikající článek Ethan Marcotte se dozvědět o fluid grids a jak je používat. Zkuste použít příklady uvedené v článku sami!

responzivní front-end framework

pokud se nechcete naučit lana, pokud jde o dotazy médií CSS3, nebo na to prostě nemáte dostatek času, zkuste místo toho použít responzivní front-end framework. Pokud se rozhodnete použít rámec mřížky, mějte na paměti, že je třeba použít stejný rámec pro CSS i HTML, protože budete pracovat s předdefinovanými třídami a ID pro připojení rámce vytvořeného pomocí HTML5 k CSS3. Použití responzivního front-end rámce vám jistě umožní rozvíjet vaše webové stránky mnohem rychleji, ale na druhou stranu to také zpomalí dobu načítání vašeho webu kvůli velkému množství kódu, který nebudete používat.

některé z nejpopulárnějších front-end rámců jsou:

Bootstrap-tento responzivní rámec je poměrně snadno implementovatelný a dalším bonusem je, že používá CDN ke snížení dopadu rychlosti načítání vašich webových stránek.

méně-jedná se spíše o adaptivní mřížkový rámec CSS než o citlivý, který vám umožní vytvořit adaptivní rozvržení.

Foundation-jedná se o front-end grid framework s velikostí souboru, která je naprosto malá, aby se minimalizoval dopad, který bude mít na rychlost načítání vašeho webu.

JavaScript (vs CSS3)

JavaScript je v současné době jedním z nejpopulárnějších programovacích jazyků na světě. Důvodem je skutečnost, že je podporována širokou škálou prohlížečů a také skutečnost, že obsahuje knihovny, jako je jQuery, a backendové systémy, jako je Node.js, stejně jako rámce jako AngularJS. Není divu, že tolik vývojářů přísahá tímto programovacím jazykem! V poslední době se však JavaScript začal zastarávat, protože mnoho jeho funkcí začalo být převzato animacemi CSS3, které vám umožňují animovat přechody mezi styly.

zdroje JavaScriptu

W3-to je skvělé místo, kde začít, pokud jste v JavaScriptu noví, díky vynikajícímu tutoriálu, který je k dispozici na tomto webu.

jQuery-jakmile budete mít nějaké zkušenosti s JavaScriptem, můžete začít používat knihovny, jako je tato, abyste mohli programovat mnohem snadněji. jQuery je nejoblíbenější Knihovna JavaScriptu o míli.

NodeJS – pokud dáváte přednost backendovým systémům, ale zároveň milujete JavaScript, podívejte se na tento web.

AngularJS-kombinovat impozantní síly HTML a Java pomocí tohoto rámce a získat nějaké dynamické pohledy.

nezapomeňte se podívat na následující zdroje, než začnete používat JavaScript k animaci prvků na vašem webu, zatímco pravděpodobně můžete také použít CSS3:

animace CSS3-opět se obracíme na w3schools pro naše tutoriály CSS3. Prohlédněte si ukázky dostupné na tomto webu, abyste pochopili všechny různé animace CSS3.

Mozilla Animations-další Vaše znalosti CSS3 animací s devíti ukázkami a příklady, které Mozilla poskytla.

Krok čtyři: Vytvořte soubory motivů WordPress

Nyní, když jste úspěšně převedli své návrhy PSD na HTML5, CSS3 a JavaScript, je čas na hlavní konverzi: přeměňte HTML na plně reagující téma WordPress. Nezapomeňte sledovat hierarchii šablon WordPress, abyste se ujistili, že vaše témata budou skutečně fungovat. Obecné pořadí je začít s hlavičkou.php, následuje index.php, zápatí.php a styl.element. Tyto čtyři šablony budete používat na všech stránkách svého webu.

jakmile plně pochopíte, jak funguje hierarchie šablon, musíte začít rozdělovat soubory HTML na kousky. Můžete začít vytvořením složky ve složce témata, kterou najdete v instalaci WordPress, jejíž adresa je /wp-content / themes/. Vytvořte hlavičku souboru.php v této složce. Tento soubor je to, co budete používat deklarovat typ dokumentu, stejně jako všechny položky, které patří do záhlaví stránky, jako jsou metas, název, styly, javascripts a tak dále. Až budete hotovi s tím, vytvořit zápatí.php a vložte všechny zápatí prvky do dokumentu HTML. Pokud návrh vašeho webu obsahuje postranní panel, vytvořte soubor s názvem sidebar.php stejně a zahrnují všechny příslušné kódování v rámci tohoto souboru.

Jakmile dokončíte vytvoření všech prvků vašeho webu v těchto souborech, musíte začít vytvářet svou domovskou stránku. Existuje několik způsobů, jak to udělat. Můžete například jednoduše vytvořit index.php, frontpage.php nebo page-home.php, některý z těchto souborů bude vhodný pro to, co se snažíte udělat, takže konečná volba je zcela na vás. Nyní, když jste hotovi, vytvořte jednu ze tří šablon pro svou domovskou stránku, zahrnout všechny .php soubory, které jste právě vytvořili. Nyní, když máte horní, dolní a boční připravené, vložte HTML5 své domovské stránky mezi a úspěšně vytvoříte domovskou stránku svého webu. Jednoduše postupujte podle stejného postupu pro všechny stránky vašeho webu a můžete přejít k dalšímu a poslednímu kroku.

krok pět: použijte vestavěné značky a funkce WordPress

jakmile úspěšně vytvoříte téma pro svůj WordPress, musíte se nyní ujistit, že můžete upravovat své webové stránky z administračního panelu, než abyste museli měnit soubor motivu pokaždé, když chcete něco změnit. Pravděpodobně nejoblíbenější funkce WordPress, díky nimž bude veškerý váš obsah upravitelný prostřednictvím administrátorského panelu, je přidání funkce add_meta_box. Jednoduše nastavte meta boxy pro obsah na každé stránce a je dobré jít!

vytvoření základních funkcí vašeho webu je pomocí WordPress velmi snadné. Například zobrazení informací, jako jsou odkazy na vašich webových stránkách, lze snadno provést pomocí funkcí WordPress. Jednoduše zkontrolujte referenční stránku funkce pro WordPress a podívejte se na všechny dostupné funkce.

podobně WordPress také nabízí značky šablon. Jedná se v podstatě o samotné funkce, s jediným rozdílem v tom, že byly vytvořeny speciálně pro konkrétní témata, díky nimž jsou efektivnější.

WordPress menu

když se přihlásíte do administračního panelu svého webu, pravděpodobně byste chtěli změnit položky nabídky v nabídkách a vzhledu, abyste je nemuseli upravovat pomocí administrátorského panelu. To je poměrně snadné díky tomu, že používáte WordPress, vše, co musíte udělat, je nahradit seznam nabídek souboru šablony jedním řádkem PHP, po kterém můžete jednoduše začít přidávat položky nabídky.

mohou nastat situace, kdy má vnitřní stránka jinou záhlaví nebo zápatí. Chcete-li přidat tuto funkci na svůj web, stačí přidat podmíněné značky. Ty umožňují použít jiný kód pro vybrané stránky nebo příspěvky.

jakmile bude váš web WordPress spuštěn na vašem vývojovém serveru, vše, co musíte udělat, je získat jej na vašem živém serveru. Zde je článek, kde je podrobně vysvětleno, jak krok za krokem přesunete web WordPress. Jednoduše postupujte podle všech šesti uvedených kroků a vaše webové stránky budou spuštěny na živém serveru v žádném okamžiku.