Výukový program WordPress: Jak vytvořit téma WordPress z HTML (část 1)

  1. 1. Aktuálně čte: Výukový program WordPress: Jak vytvořit téma WordPress z HTML (část 1)
  2. 2. Výukový program WordPress: Jak vytvořit téma WordPress z HTML (část 2)
  3. 3. Úvod do anatomie tématu WordPress

Pokud jste začali s webem HTML (+ CSS), nemusíte to při přechodu na WordPress vyhodit. Můžete převést HTML na WordPress a spustit (nyní výkonnější) web na dynamické platformě WordPress.


Nebo možná to tak není. Možná jen přemýšlíte, jak převést návrh HTML klienta na plnohodnotné téma WordPress. Nebo byste se chtěli naučit základní programování WordPress (+ PHP) ze známější stránky HTML.

Ať už jste zde dnes bez ohledu na důvod, tento tutoriál WordPress vás seznámí se základy vytváření tématu WordPress z HTML. Podle tohoto průvodce můžete vytvořit své téma od nuly, nebo se vydat do Githubu a stáhnout si úvodní téma WPExplorer, které poskytuje „prázdné plátno“ pro vytvoření vašeho motivu se všemi potřebnými soubory šablony a kódem, abyste mohli začít. Takže pokud jste jedním z těch lidí, kteří se raději učí čtením kódu, stáhněte si úvodní téma, přeskočte průvodce a podívejte se, jak věci fungují … Jinak si vytvořte editor kódu (používám a doporučuji poznámkový blok++, nebo SublimeText) a prohlížeč připraven, postupujte podle tohoto jednoduchého průvodce až do konce.

Pojmenování tématu WordPress

Nejdříve je třeba dát vašemu motivu jedinečné jméno, což není nutné, pokud stavíte téma pouze pro svůj web. Bez ohledu na to, musíme téma pojmenovat, aby bylo při instalaci snadno identifikovatelné.

Obecné předpoklady v tomto bodě:

  • Máte připravenou šablonu stylů index.html a CSS.
  • Máte funkční instalaci WordPress s alespoň jedním motivem, např. Dvacet čtrnáct
  • Vytvořili jste již složku s motivem, do které ukládáte nové téma WordPress ��

Vraťme se k pojmenování tématu WordPress. Otevřete editor kódu a zkopírujte obsah šablony stylů do nového souboru a uložte jej jako style.css ve složce motivu. Přidejte následující informace do úplně horní části nově vytvořený style.css:

/ *
Název motivu: Název motivu
URI motivu: URL vašeho motivu
Popis: Stručný popis tématu
Verze: 1.0 nebo jakákoli jiná verze, kterou chcete
Autor: Vaše jméno nebo uživatelské jméno WordPress.org
Autor URI: Vaše webová adresa
Tagy: Značky k vyhledání motivu v úložišti motivů WordPress
* /

Nevynechávejte značky komentářů (/ * … * /). Uložte změny. Tato informace sdělí WordPress název vašeho motivu, autora a podobné věci. Důležitou součástí je název motivu, který vám umožní vybrat a aktivovat motiv pomocí ovládacího panelu WP.

Rozdělení vaší šablony HTML na soubory PHP

Tento tutoriál dále předpokládá, že máte šablonu HTML uspořádanou zleva doprava: záhlaví, obsah, postranní panel, zápatí. Pokud máte jiný design, možná budete muset trochu hrát s kódem. Je to zábavné a super snadné.

Další krok zahrnuje vytvoření čtyř souborů PHP. Pomocí editoru kódu vytvořte index.php, header.php, sidebar.php a footer.php a uložte je do složky motivu. Všechny soubory jsou v tuto chvíli prázdné, proto neočekávejte, že budou dělat cokoli. Pro ilustraci používám následující soubory stylů index.html a CSS:

INDEX.HTML




Jak převést šablonu HTML na téma WordPress - WPExplorer



Toto je sekce záhlaví. Sem vložte své logo a další podrobnosti.

Toto je hlavní oblast obsahu.

A to je zápatí.

CSS STYLESHEET

#wrap {margin: 0 auto; šířka: 95%; horní okraj: -10px; výška: 100%;}
.záhlaví {width: 99,8%; hranice: 1px plná # 999; výška: 135p;}
.obsah {šířka: 70%; ohraničení: 1px plná # 999; horní okraj: 5px;}
.sidebar {float: right; okraj: -54px; šířka: 29%; ohraničení: 1px plná # 999;}
.zápatí {šířka: 99,8%; ohraničení: 1px plná # 999; horní okraj: 10px;}

Pokud nemáte s čím pracovat, můžete oba kódy chytit. Stačí je zkopírovat a vložit do editoru kódu, uložit je, vytvořit čtyři soubory PHP, které jsme právě zmínili, a připravit se na další část. Otevřete nově vytvořené (a prázdné) header.php. Přihlaste se do své stávající instalace WordPress, přejděte na Vzhled – >> Editor a otevřít header.php. Zkopírujte celý kód mezi tagy a vložte je do souboru header.php. Následuje kód, který jsem získal ze souboru header.php v motivu dvacet čtrnáct:




<?php wp_title( '|', true, 'right' ); ?>




Pak otevřete index.html soubor a zkopírujte kód záhlaví (tj. kód v

v sekci header.php těsně pod značky, jak je uvedeno níže:




<?php wp_title( '|', true, 'right' ); ?>







Toto je sekce záhlaví. Sem vložte své logo a další podrobnosti.

Poté přidejte…

… Kdekoli mezi tagy v souboru header.php k propojení šablony stylů. Nezapomeňte také dát a otevírání značek v hlavičce header.php, jak je uvedeno výše. Uložte všechny změny.

Zkopírujte druhou část (tj.

z index.html na nově vytvořený index.php , a přidat…

… Úplně nahoře a…


… Do úplného dna. Tyto tři řádky načtou záhlaví header.php, sidebar.php a footer.php (v uvedeném pořadí) a zobrazí je v indexu.php, který dá váš kód zpět dohromady. Uložte všechny změny. V tomto okamžiku by měl váš soubor index.php vypadat takto:



Poté zkopírujte obsah z částí postranního panelu a zápatí ve vašem indexu.html do souboru sidebar.php a footer.php..

Přidávání příspěvků

Vaše šablona HTML se chystá proměnit v téma WordPress. Stačí přidat vaše příspěvky. Pokud máte na svém blogu příspěvky, jak byste je zobrazovali v tématu „HTML-to-WordPress“ na míru? Používáte speciální typ funkce PHP známý jako Smyčka. Smyčka je jen specializovaný kód, který zobrazuje vaše příspěvky a komentáře, ať jste je kdekoli.

Nyní, chcete-li zobrazit své příspěvky v sekce obsahu šablony index.php, zkopírujte a vložte následující kód mezi

a

značky, jak je uvedeno níže:

>

To se postará o vaše příspěvky. Snadné jako ABC. V tomto okamžiku (a pomocí vzorových souborů uvedených v tomto tutoriálu) by měl váš header.php vypadat takto:




<?php wp_title( '|', true, 'right' ); ?>




Váš sidebar.php by měl vypadat takto:

Váš footer.php by měl vypadat takto:

A to je zápatí

Všimli jste si uzavření a značky v zápatí? Nezapomeňte je také zahrnout.

Váš style.css by měl vypadat asi takto:

/ *
Název motivu: Vytváření motivu WordPress z HTML
URI motivu: http://wpexplorer.com
Popis: Toto téma ukazuje, jak vytvářet motivy WordPress z HTML
Verze: 1.0
Autor: Freddy pro @WPExplorer
URI autora: http://WPExplorer.com/create-wordpress-theme-html-1/
Štítky: wpexplorer, vlastní téma, HTML do WordPress, vytvoření motivu WordPress
* /
tělo {
rodina fontů: arial, helvetica, verdana;
velikost písma: 0,8em;
šířka: 100%;
výška: 100%;
}

.záhlaví {
barva pozadí: # 1be;
levý okraj: 14%;
nahoru: 0;
šířka okraje: 0,1 m;
barva okraje: # 999;
styl okraje: pevný;
šířka: 72%;
výška: 250px;
}

.obsah {
barva pozadí: # 999;
levý okraj: 14%;
okraj: 5px;
plavat vlevo;
šířka: 46%;
šířka okraje: 0,1 m;
barva okraje: # 999;
styl okraje: pevný;
}

.postranní panel {
barva pozadí: # 1d5;
pravý okraj: 14%;
okraj: 5px;
float: right;
šířka okraje: 0,1 m;
barva okraje: # 999;
styl okraje: pevný;
nahoru: 180px;
šířka: 23%;
}

.zápatí {
barva pozadí: červená;
levý okraj: 14%;
plavat vlevo;
okraj: 5px;
šířka: 72%;
výška: 50px;
šířka okraje: 0,1 m;
barva okraje: # 999;
styl okraje: pevný;
}

A váš index.php by měl vypadat podobně jako:





Opět – to je založeno na zleva doprava webové stránky s hlavičkou, obsah, postranní panel, rozložení zápatí. Sledujete? Všech pět souborů by mělo být uloženo ve složce motivu. Pojmenujte složku, kterou chcete, a zkomprimujte ji do archivu ZIP pomocí WinRar nebo ekvivalentního programu. Nahrajte svůj nový motiv do instalace WordPress, aktivujte jej a podívejte se na převedený motiv v akci!

To bylo snadné, že? Svůj motiv můžete stylizovat, jak chcete, ale většina funkcí, které milujeme ve WordPress, je stále neaktivní, protože … tento tutoriál se zabývá základy převodu šablon HTML do WordPress a měl by být pro vás jako začátečník velkým přínosem. V dalším tutoriálu si vezmeme věci o stupeň výš a pohrajeme si s dalšími aspekty programování WordPress (jako je Soubory šablon a Značky šablon), které vám umožní otočit šablony HTML podle toho, co se vám líbí. Zůstaňte naladěni!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map