Dynamické stránkové šablóny vo WordPresse, Prvá časť

() translation by (you can also view the original English article)

Stránkové šablóny vo WordPresse sú skvelým spôsobom, ako pozmeniť to, ako sa zobrazujú webové stránky. Môžete ich využívať pre pridanie nesmierného rozsahu funkcionality na vašu stránku.

Avšak majú jedno obmedzenie, sú to "statické" šablóny. Nemôžete ich prispôsobiť alebo zmeniť ich správanie. Môžete sa iba rozhodnúť, či bude šablóna zapnutá alebo nie. Prevolene stránková šablóna vykonáva iba pevnú funkciu, buď zobrazuje mapu stránok alebo odstraňuje bočnú lištu pre zobrazenie stránky na celú šírku.

V tejto sérií návodov sa pozrieme, ako sa dajú rozšíriť stránkové šablóny, aby boli pružnejšie, čo značne zdokonaľuje ich funkcionalitu. Než sa pustíme do pružnejšieho prístupu, kde vytvoríme stránkovú šablónu na všeobecný účel, najprv vytvoríme klasickú stránkovú šablónu pomocou potomkovej šablóny.

Nakoniec sa pozrieme na skutočné príklady plnefunkčných dynamických stránkových šablón. Taktiež sa pozrieme na pokročilé témy, ako je priradenie stránkových šablón do vlastných typov príspevkov.

Chcete pracovať na tom spoločne?

Na to, aby sme pracovali na tomto návode spoločne potrebujeme WordPress stránku s administrátorským prístupom. Najjednoduchšou cestou k tomu je si vytvoriť lokálne vývojárske prostrednie. Prispôsobený textový editor je užitočný, ale nie je nevyhnutný.

Ak náhodou vyvíjate vo WordPresse cez diaľkový server, tak buď môžete použiť editor, ktorý je v administrácii WordPressu, alebo môžete upravovať súbory lokálne a potom ich odovzdať naspäť na server. Pre jednoduchosť návodu predpokladáme, že počas návodu využívate lokálne prostredie.

Pre implementáciu stránkových šablón budeme používať potomkovú tému rodičovskej témy Twenty Seventeen, ktorá je v čase písania prednastavenou WordPress témou. Ak chcete pracovať na tomto návode spoločne, pred pokračovaním sa uistite, či máte túto tému nainštalovanú.

Ak chcete, taktiež môžete využívať potomkovú tému inej témy, ale budete musieť upraviť nejaký kód, aby fungoval bez problémov. Táto základná metóda by mala fungovať v akejkoľvek potomkovej téme.

Stránkové šablóny WordPressu

Predtým, než sa naučíme, ako urobiť stránkové šablóny pružnejšími, pozrime sa na niektoré základné detaily.

WordPress využíva šablónovú hierarchiu, aby sa rozhodol, ktorú šablónu vykreslí na prítomnej stránke. Často využívanou šablónou pre stránky je page.php, ale môže byť iná, keď zobrazujete stránku s konkrétnym identifikátorom. Avšak keď si vyberiete stránkovú šablónu pre kontrétnu stránku, tá bude stále používaná, čo zjednodušuje prispôsobenie akejkoľvek stránky pomocou stránkovej šablóny.

Toto je zoznam typických príkladov, kde sa zvyčajne využívajú stránkové šablóny vo WordPresse:

Kontaktný formulár
Portfólia
Často kladené otázky
Vlastná stránka pre 404
Vlastná stránka na prihlasovanie
Mapa stránok
Stránka na celú šírku
Stránka na zobrazenie blogových príspevkov
Stránka s miniaplikáciami
a oveľa viac...

Mohol by som pokračovať, ale už viete, na čo myslím. Stránkové aplikácie sú skvelé! Môžete ich využiť na takmer čokoľvek.

Ak ste využívali WordPress na akúkoľvek dobu, je pravdepodobné, že ste sa už stretli s jedným alebo viacerými príkladmi, ktoré sú vymenované vyššie. Množstvo tém zahŕňajú stránkové šablóny, ktoré doplňujú funkcionalitu témy a môžete jednoducho pridať vlastné pomocou potomkovej témy. Za chvíľu sa pozrieme, ako na to.

Stránkové šablóny sú užitočné, pretože vám dávajú úplnú kontrolu nad celou stránkou. Keď chete, môžete vynechať hlavičku, pätičku alebo bočné lišty. Toto je jeden z mnohých dôvodov, prečo sú celošírkové šablóny bežné. Bočné lišty sa dajú jednoducho manipulovať pomocou stránkovej šablóny.

Keď chcete vidieť dostupné stránkové šablóny, choďte do editora stránky a rozbaľte menu Šablóna v sekcii Atribúty stránky. Vyberte akúkoľvek šablónu pre túto stránku a keď bude stránka zaktualizovaná, šablóna bude viditeľná pri ďalšom načítaní strańky.

Pridávanie stránkových šablón pomocou potomkovej témy

Ako bolo spomínané vyššie, aby sme implementovali všetky stránkové témy, ktoré budeme vytvárať počas príručky, budeme využívať vlastnú potomkovú tému vo WordPresse. Začneme so základnou potomkovou témou a stránkovou šablónou a počas toho, ako budeme na tom pracovať, tak zvýšime aj zložitosť šablón.

Tento celý proces bude vysvetlený krok za krokom, takže keď nie ste oboznámený s potomkovými témami alebo stránkovými šablónami, nemusíte sa obávať. Na konci tohto návoda už o nich budete vedieť.

Základnou myšlienkou potomkovej témy je, že si môžete prispôsobiť vzhľad vašej témy (tiež nazvaná aj ako rodičovská téma) tak, že vaše prispôsobenia nebudú po aktualizáciách stratené.

Ak je kód pridaný priamo do rodičovskej témy, tak sa počas aktualizácie všetky prispôsobenia stratia. Toto je veľmi dôležitý bod, pretože akákoľvek veľmi podporovaná téma bude pravidelne aktualizovaná. Pre viac informácií o potomkových témach vám odporúčame sa pozrieť do oficiálnej dokumentácie.

Zaujímavosťou je, že je technicky možné použiť rozšírenie do WordPressu pre pridanie stránkových šablón, ale jednoduchšie je použiť potomkovú tému. Nechceme vám zbytočne kompilovať veci so zbytočným kódom, takže počas implementácie ostaneme pri potomkových témach.

Začnime!

Dosť bolo teórie – začnime s počiatočnou stránkovou šablónou! Tá bude umiestnená vo vlastnej potomkovej téme, ktorá bude pôsobiť ako oblasť pre stránkové šablóny, takže začnime s tvorbou potomkovej témy.

Otvorte priečinok s vašou témou a vytvorte nový priečinok pre vašu potomkovú tému. Podľa osvedčených postupov WordPressu by ste mali nazvať priečinok potomkovej témy rovnako ako je nazvaný priečinok rodičovskej témy, ale s príponou "-child". Pretože priečinok rodičovskej témy sa nazýva twentyseventeen, nazvite priečinok potomkovej témy twentyseventeen-child. Vo vnútri tohto nového priečinka vytvorte nový súbor s názvom style.css a na začiatok pridajte tento blok komentára.

/*
 Theme Name:   Twenty Seventeen Child
 Description:  Twenty Seventeen Child Theme
 Author:       David Gwyer
 Template:     twentyseventeen
 Version:      0.1
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-seventeen-child
*/

Teraz sa musíme zmieniť o štýloch z rodičovskej témy Twenty Seventeen. Ak ste niekedy predtým pracovali s potomkovými témami, mohli ste si zvyknúť na používanie príkazu @import pod blokom komentára. Tento postup už nie je považovaný za osvedčený, hlavne kvôli problémom s rýchlosťou. Namiesto toho si stiahneme štýly z rodičovskej témy, čo zrýchli načítanie.

Vo vnútri koreňa priečinka potomkovej témy vytvorte súbor functions.php a pridajte tento kód. Túto triedu budeme používať ako kód pre počiatočné nastavenie témy.

<?php

/**
 * Twenty Seventeen child theme class.
 *
 * DPT = D[ynamic] P[age] T[emplates].
 */
class DPT_Twenty_Seventeen_Child {

    /**
     * Register hooks.
     */
    public function init() {
        // ...
    }
}

$ts_child_theme = new DPT_Twenty_Seventeen_Child();
$ts_child_theme->init();

Poznámka: Zatváraci príkaz v PHP nie je potrebný, ale keď chcete, môžete ho napísať.

Teraz pridajte funkciu pre hook a callback funkciu, aby sme importovali štýly rodičovskej témy. Urobíme to pridaním dvoch nových metód do triedy.

<?php

/**
 * Register hooks.
 */
public function init() {
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );
}

/* Enqueue parent theme styles. */
public function enqueue_parent_theme_styles() {
  wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );
}

Uložte zmeny a aktivujte potomkovú tému. Teraz máte plne funkčnú, hoci jednoduchú, potomkovú tému Twenty Seventeen. Aby sme sa uistili, že všetko funguje, pridajte tento riadok kódu do súboru style.css.

1	* { color: red !important; }

Ak všetko funguje tak, ako má, tak farba textu by sa mala zmeniť na krásnu červenú farbu!

Predtým, než budeme pokračovať, nemali by sme zabudnúť na odstránenie tohto testu. Pretože vieme, že je potomková téma aktívna, môžeme začať s implementáciou našej prvej stránkovej šablóny.

Pridávame našu prvú stránkovú šablónu

Jedna vec stoji za zmienku, a to je tá, kde by sme ukladali šablóny v našej potomkovej téme. Stránkové šablóny môžu byť uložené priamo v koreni potomkovej témy alebo v priečinku vo vyššej úrovni. Je jedno, kde to uložíte, oboje umiestnenia sú v poriadku.

Avšak keď budete mať viacero stránkových šablón, môžete sa rozhodnúť ich uložíť do nejakého priečinka z dôvodu organizácie. Názov priečinka nie je dôležitý, ale musí byť umiestnený priamo v koreni priečinka potomkovej témy, inak WordPress nebude schopný vyhľadávať vaše stránkové šablóny. Pre tento návod budeme využívať priečinok s názvom page-templates.

Teraz pridáme novú stránkovú šablónu do potomkovej šablóny. Štandardne by sme vytvorili kópiu súboru page.php z rodičovskej témy a dali do potomkovej témy. Ten súbor môžete nazvať ako len chcete, ale odporúčame vám nazvať ho tak, aby sme vedeli, že sa jedná o stránkovú šablónu. Ja ho nazvem test-page-template.php.

Po tom, ako sme skopírovali a premenovali súbor page.php do priečinka page-templates, štruktúra vašej potomkovej témy by mala vyzerať takto:

Otvorte súbor test-page-template.php a nahraďte blok komentára na začiatku súbora týmto kódom:

<?php

/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

Tento krok je veľmi dôležitý, pretože tento blok komentára napomáha WordPressu rozpoznať súbor ako stránkovú šablónu a pridá ju do zoznamu s dostupnými stránkovými šablónami.

Celý kód stránkovej šablónky by mal vyzerať takto:

<?php
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

get_header(); ?>

<div class="wrap">
    <div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/page/content', 'page' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

Teraz otestujme túto stránkovú šablónu. Prihláste sa do administrácie a upravte akúkoľvek existujúcu stránku, alebo vytvorte novú. V editore rozbaľte rozbaľovacie menu s nápisom Šablóna pod sekciou Atribúty stránky a priraďte našu stránkovú šablónu k súčasnej stránke.

Pretože sme proste skopírovali súbor page.php z rodičovskej témy, naša vlastná stránková šablóna nerobí nič iné, len vykresluje aktuálnu stránku, čo nie je až tak užitočné. Nebudeme potrebovať žiaden vykreslený obsah stránky, takže tento kód z cyklu while vymažte a pridajte tam vlastnú správu. Zmeňte obsah cyklu while na nasledujúci kód:

1	<?php
2	while ( have_posts() ) : the_post();
3	echo "<p>This is our custom page template!</p>";
4	endwhile; // End of the loop.

Súbor uložte a pozrite si túto stránku.

Viewing the page template on the front-end

Poznámka: Keď nevidíte žiadnu vlastnú správu, uistite sa, že ste si vybrali vlastnú stránkovú šablónu a uložili ste nastavenia v editore stránky.

Teraz by sme mali nahradiť našu stránkovú šablónu niečím užitočnejším. Nahraďte správu, ktorú sme napísali vyššie nasledujúcim kódom, aby sme vykreslili mapu stránky všetkých publikovaných stránok:

<?php
while ( have_posts() ) : the_post();
	echo "<h2>Sitemap</h2>";
	echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";
endwhile; // End of the loop.

Výstup tohto kódu by mal vyzerať takto:

Teraz už vieme, aké môžu byť tieto stránkové šablóny užitočné. Ale dá sa vytvoriť aj niečo lepšie!

Záver

Zatiaľ sme len vytvorili potomkovú tému a použili ju k pridaniu štandardnej stránkovej šablóny. V ďalšom návode si ukážeme, ako ich rozšíriť krok po kroku, dokazujúc, že stránkové šablóny môžu byť ešte pružnejšie.

Konkrétne vytvoríme dynamickú stránkovú šablónu na všeobecný účel pridaním vlastných nastavení do editora. Logika nastavenia nám dovoľuje prispôsobiť to, ako vykreslíme stránkovú šablónu.

WordPress má neuveriteľne aktívnu ekonomiku. Existujú témy, rozšírenia, knižnice a množstvo iných produktov, ktoré vám pomôžu vytvoriť vašu stránku alebo projekt. Charackter otvoreného zdroja platformy taktiež robí skvelou možnosťou, ako si zlepšiť vaše zručnosti v programovaní. Bez ohľadu na to, taktiež sa môžete pozrieť, čo máme dostupné v obchode Envato.

Toto je môj prvý návod, takže keď chcete, môžete mi napísať nejakú spätnú väzbu do komentárov. Budem sa snažiť odpovedať na všetky vaše otázky.