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

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

V první části tohoto tutoriálu jsme se zabývali základy převodu HTML šablony na téma WordPress. Pokud jste nejmenší zvědaví, dozvěděli jsme se několik věcí o rozdělení šablon HTML do souborů PHP, jejich opětovném sestavení, úpravě a pojmenování témat WordPress. Opravdu jsme se toho hodně naučili a budete se chtít seznámit s koncepty, které jsme popsali v našem prvním tutoriálu, abyste si mohli užít tuto druhou porci. V dnešním příspěvku budeme brát věci o stupeň výš. Pokryjeme několik dalších oblastí, takže si můžete vytvořit plně funkční téma WordPress. Takže, bez dalšího povyku, jdeme.


Konfigurace obrázků a souborů JavaScript

Pokud jste měli obrázky v původní šabloně HTML (index.html), pravděpodobně jste si všimli, že se přestali zobrazovat po nařezání šablony do souborů PHP. Nebojte se, je to přesně tak, jak je PHP. Například, pokud jste měli logo v sekci záhlaví takhle…

your_logo_alt_text

… budete si muset trochu pohrát s kódem. Kód, který za chvíli odhalím, pomůže prohlížečům najít vaše logo (nebo jakýkoli jiný obrázek) ve vašem snímky složka, která je (nebo by měla být) podsložkou hlavního adresáře motivu. Chcete-li v části záhlaví zobrazit své logo, otevřete soubor header.php a nahraďte výše uvedený kód následujícím textem:

your_logo_alt_text

Funkce get_template_directory_uri () vrací adresu URL vašeho adresáře motivu. Pokud tedy přidáte své logo do složky obrázků, kód ho uchopí.

Všimněte si nějakého rozdílu? Tento kód samozřejmě zafixuje pouze vaše logo. Chcete-li opravit další obrázky, budete muset přepsat jejich kódy podobným způsobem. Snadné peasy věci.

Pojďme na JavaScript. Pokud váš web HTML používal JavaScript, vytvořte složku s názvem js a vložte tam své skripty. Můžete je volat v souboru header.php pomocí následujícího kódu:

Výše uvedený kód používá example.js jako ilustrace. Nezapomeňte tuto část nahradit názvem souboru JavaScript.

Samozřejmě, pokud vytváříte téma pro někoho jiného, ​​měli byste opravdu nahrát své soubory js pomocí wp_enqueue_scripts. Další informace a tipy najdete v příspěvcích AJ o přidávání JavaScriptu do témat WordPress.

Soubory šablon

V první části tohoto tutoriálu jsme zmínili čtyři základní soubory šablony index.php, header.php, sidebar.php a footer.php. Soubory šablon určují, jak bude váš web zobrazován na webu. Šablony získávají informace z vaší databáze MySQL WordPress a převádějí je do kódu HTML, který se zobrazuje ve webových prohlížečích. Jinými slovy, soubory šablon jsou stavebními bloky témat WordPress. Abychom lépe porozuměli šablonám, pojďme se ponořit do pojmu známého jako hierarchie šablon.

Použijeme analogii. Pokud návštěvník klikne na odkaz na kategorii (tj. Odkaz na kategorii), například http://www.yoursite.com/blog/category/your-category/, WordPress použije hierarchii šablon k vygenerování správného souboru (a obsahu) jako vysvětleno níže:

  • Nejprve WordPress vyhledá soubor šablony, který odpovídá ID kategorie
  • Pokud je ID kategorie například 2, vyhledá WordPress soubor šablony s názvem category-2.php
  • Pokud není k dispozici kategorie 2.php, WordPress vyhledá obecný soubor šablony kategorie, například category.php
  • Pokud tento soubor šablony také není k dispozici, WordPress vyhledá obecnou šablonu archivu, například archive.php
  • Pokud obecná archivní šablona neexistuje, WordPress se vrátí zpět na hlavní soubor šablony, index.php

Takto fungují šablony WordPress a pomocí těchto souborů můžete přizpůsobit své téma WordPress vašim potřebám. Mezi další soubory šablony patří:

home.php nebo index.phpPoužívá se k vykreslení indexu příspěvků na blogu
front-page.phpPoužívá se k vykreslení statických stránek nebo nejnovějších příspěvků, jak je nastaveno na předních stránkách
single.phpPoužívá se k vykreslení jedné stránky s příspěvkem
single- {post-type} .phpPoužívá se k vykreslení vlastních typů příspěvků, např. pokud by post-type byl produkt, WordPress by použil single-product.php
page.phpPoužívá se k vykreslení statických stránek
category.php nebo archive.phpPoužívá se k vykreslení indexu archivu kategorií
author.phpPoužívá se k vykreslení autora
date.phpPoužívá se k vykreslení data
search.phpPoužívá se k vykreslení výsledků vyhledávání
404.phpSlouží k vykreslení chybové stránky serveru 404

Toto je jen krátký seznam, existuje mnoho dalších Šablony WordPress. Téma šablon je velké a nejlepší způsob, jak se naučit, jak hrát se soubory šablon, je přečtením obsáhlých Vývoj motivů knihovna na WordPress. Případně si můžete přečíst kratší Sekce šablon na WordPress Codex.

Značky šablon

Vzhledem k tomu, že jsme právě představili soubory šablon, je spravedlivé zmínit jednu nebo dvě věci o značkách šablon a roli, kterou hrají v tematice WordPress. Podle WordPress.org se „… v šabloně vašeho blogu používají značky šablon k dynamickému zobrazování informací nebo k jinému přizpůsobení vašeho blogu, protože poskytují nástroje, aby byl stejně individuální a zajímavý jako vy.“

V našem předchozím kurzu jste se setkali s několika značkami šablon, například get_header, get_sidebar, get_footer a bloginfo. V následující části přidáme do našeho nově vytvořeného tématu WordPress několik značek šablon. Předpokládám, že jste do svého souboru header.php již zahrnuli prohlášení DOCTYPE. Pokud tak neučiníte, zde je kód:

Deklarace DOCTYPE dává vašemu HTML kódu smysl. Když to z cesty uděláme, upravme úvodní značku HTML. Přidáme atribut lang pomocí language_attributes tag jako tak:

Výše uvedený kód vygeneruje následující:

Díky deklaraci DOCTYPE a značce language_attribute je struktura motivu legitimní a prohlížeče váš kód pochopí. Pokud vytváříte téma pro blog, je důležité umístit odkazy na vaši pingback URL a RSS kanál do vaší hlavy. Do souboru header.php přidejte následující kód:

Všimli jste si, jak jsme zaměstnávali značka bloginfo Chcete-li zahrnout zdroj RSS („rss2_url“) a pingback („pingback_url“)? Před uložením souboru header.php přidejte také následující kód:

Výše uvedená značka wp_head bude stahovat šablony stylů a soubory JavaScriptu vyžadované vašimi zásuvnými moduly. Pokud tento malý kousek kódu vynecháte, vaše pluginy nemusí fungovat podle potřeby. Tímto způsobem nám přidejte názvy stránek k našemu tématu WordPress pomocí – opět – značky bloginfo. Do souboru header.php přidejte následující kód:

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

První značka wp_title přidá název vaší stránky nebo příspěvku a druhý tag bloginfo („name“)) přidá název vašeho blogu. Nyní, když vaše téma WordPress obsahuje názvy stránek, co takhle vytvoříme screenshot pro naše téma, přebalíme ho a odpočieme si?

Vytvoření snímku obrazovky pro vaše téma

Když jste nahráli testovací téma poprvé, musíte si všimnout, že v panelu Téma WordPress postrádal snímek obrazovky. Vypadalo to fádně, zejména pokud jste měli jiná témata s barevnými snímky obrazovky. Ale nebojte se, vytvořit screenshot pro vaše téma je velmi snadné. Jednoduše vytvořte obrázek pomocí svého oblíbeného editoru obrázků (např. Adobe Photoshop) nebo si uchopte motiv obrazovky. Ujistěte se, že je váš obrázek široký 600px a vysoký 450px. Uložte obrázek jako screenshot.png ve složce motivu. Uložte všechny změny a komprimujte složku motivu do archivu ZIP. Nahrajte téma a aktivujte jej, aby se zobrazily vaše nové změny ��

Závěr

Chci věřit, že vám tento druhý tutoriál nabídl hlubší vhled do vytváření tématu WordPress ze statického HTML. V blízké budoucnosti vás seznámím s dalšími aspekty WordPressu, ale mezitím jsem pro vás připravil následující zdroje:

Šťastné vytváření!

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