Wordpress – tvorba vlastní šablony
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Wordpress – tvorba vlastní šablonyWordpress – tvorba vlastní šablony

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Wordpress – tvorba vlastní šablony

Google       Google       4. 11. 2011       76 204×

Po delší době jsem si pro vás připravil sérii tří článků o Wordpressu a programování vlastních šablon. V prvním díle nás čeká příprava pro tvorbu šablon, naprogramujeme si hlavičku, patičku a povolíme nějaké funkce. V dalších dílech si upravíme stránku s příspěvky, vytvoříme vlastní homepage a tak celkově si doprojdeme tvorbu šablon pro tento super RS.

Reklama
Reklama

Co k tomu budeme potřebovat

Takovou hlavní a zásadní věcí je nainstalovaný Wordpress. Jak na to si můžete přečíst v předchozích článcích o Wordpressu, které pro nás sepsal Plasmo. Další věcí je znalost HTML a CSS. Musíte si totiž umět nakódovat nějaký „frontend“ webu, jinak nemá cenu se učit dělat šablony. Znalost PHP není zas až tak nutná, stačí abyste se orientovali v nějakém jazyce, který má alespoň vzdáleně podobnou syntaxi. Z toho pak krásně pochopíte, jak co programovat, a PHP vám vleze do hlavy pomalu samo. To jest vlastní zkušenost. Nakonec budeme předpokládat, že máte připravenou nějakou HTML šablonu.

Když už máme nainstalováno a spuštěno, tak jdeme na to

Nejprve si vytvoříme novou složku naší šablony. Pojmenujeme ji nějakým poetickým názvem, který bude vyjadřovat přesně to, jak naše šablona vypadá. Například „sablona“. Otevřte si tedy kořenový adresář nainstalovaného Wordpressu a přejděte do složky root/wp-content/themes/. Zde vytvořte onu složku.

V dalším kroku si do naší nové složky vytvoříme pár PHP souborů s názvy:

  • index.php
  • page.php
  • header.php
  • footer.php
  • function.php
  • single.php

a to by mohlo stačit.

Nakonec si do této složky zkopírujeme soubory připravené šablony.

Teď je asi dobré se zmínit o architektuře Wordpress šablon. Naštěstí je to tak snadné, že vám k dokonalému pochopení stačí poměrně jednoduché schéma.

Všimněte si, že pokud není žádná jiná stránka, tak musí existovat index.php. Což znamená, že v šabloně musí být pokaždé soubor index.php, i kdybyste ho nepoužili.

http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

Nyní si vytvoříme náhledový obrázek naší šablony. Stačí udělat screenshot stránky a uložit jej do složky šablony pod názvem screenshot.png. Pro jistotu bych dodržel rozměry náhledu 300 px na 225 px.

Nakonec se vrhneme do souboru style.css, který by se měl jmenovat style.css, a na začátek souboru vložíme jakousi hlavičku, kde definujeme popis, název, tagy, autora, licenci atp. V podstatě je to pouze komentář, který Wordpress zpracuje a zobrazí jej jako popisek šablony v administraci.

/*
Theme Name: Naše krásná šablona
Theme URI: http://programujte.com/
Description: Nějaký hustokrutěpřísný popis šablony, aby prostě bylo jasné, o čem naše šablona pojednává.
Author: Ladislav Janeček (tanned88)
Version: 1.0
License: Název licence
License URI: odkaz na licenci
Tags: hezká, modrooká, přítulná, sexy, ukecaná, uplakaná, blonďatá, kozatá, šablona
*/

Jde se programovat

Teď, když máme vše připraveno, můžeme jít programovat. Tedy, programovat je možná silné slovo. Já osobně bych to nazval používání předepsaných funkcí.

Začneme tedy hlavičkou. Otevřte si soubor header.php a vložte tam kompletní hlavičku z vaší připravené HTML šablony. Teoreticky bych řekl, že stačí vložit kód od tagu <html> včetně doctype po tag <body>. Může se ale stát, že budete chtít, aby na každé stránce bylo stejné menu, jako to je v mém příkladě. V tom případě bychom do tohoto souboru vložili všechen kód, který je hlavou webu naší šablony. Včetně menu, vyhledávání atp.

Po menších úpravých vypadá hlavička nějak takto:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" xmlns:fb="http://www.facebook.com/2008/fbml"> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <meta http-equiv="content-language" content="cs" />
  <title><?php
  	global $page, $paged;
  	wp_title( '|', true, 'right' );
  	bloginfo( 'name' );
  ?></title>	
  <link type="text/css" rel="Stylesheet" href="<?php bloginfo('template_url'); ?>/style.css?v=4" />
  <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/main.css" type="text/css">
  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.min.js"></script>
  <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" /> 
<meta name="copyright" content="2010, hry.Vyťukej.cz"/> 
</head>
<body>
  <div id="background_games_xy">
  <div id="the_content">
    <div id="head">
    <div id="logo">
      <a href="<?php echo home_url( '/' ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="hry.vyťukej.cz" /></a>
    </div>
    <div id="head_right">
    </div>
    </div>
    <div id="head_menu_midle">
      <?php wp_nav_menu( array( 'menu' => 'menu-header') ); ?>
    </div>

Jako první se podíváme na nastavení title. Nejprve jsme si definovali globální proměnné a potom jsme použili funkce wp_title( '|', true, 'right' ); a bloginfo( 'name' );. Tím jsme zajistili, aby se v titulku stránky vždy zobrazoval název dané stránky nebo příspěvku a za ním, za separovacím znakem, název stránky.

Dále pak linkování CSS. Zde je důležité, aby každý soubor, obrázek atp. měl absolutní adresu. Tu dopíše do stránky funkce <?php bloginfo('template_url'); ?>/. Nezapomeňte dopsat lomítko před název souboru.

Jako další zde máme odkaz na domácí stránku webu. URL vypíšeme pomocí funkce home_url( '/' );, která však vrací jenom hodnotu, takže pro vypsání musíme použít funkci echo.

A nakonec zde máme funkci wp_nav_menu( array( 'menu' => 'menu-header'));. Tu si budeme muset trošku rozebrat. Tato funkce v podstatě vypisuje menu v podobě <ul><li><a href="#odkaz">odkaz</a></li></ul>. Argumenty, které obsahuje, znázorňují název menu, který potom použijeme v nastavení menu v administraci Wordpressu. Sama o sobě by však tato funkce nefungovala, musíte ji povolit v souboru functions.php, který bude dalším souborem, jenž budeme editovat.

Nyní si tedy otevřeme soubor functions.php. Zde nám v podstatě stačí zaregistrovat již výše zmiňovaný nav_menu pomocí funkce <?php register_nav_menus(); ?>. V tomto souboru si můžete vytvářet vlastní PHP funkce, které pak budete používat na stránkách.

Na konec tohoto dílu se podíváme na footer.php. Zde vložíme patičku našeho webu. Jediná funkce, kterou by tato stránka měla obsahovat, je <?php wp_foot(); ?>.

Nakonec tedy patička vypadá nějak takto:


<div id="foot">
      <div id="logo_foot"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/foot_logo.jpg" alt="vytukej.cz" /></a></div>
      <div id="right_content_foot"></ div>
    </div>
  </div>
  </div>  <?php
	wp_footer();
?>
  </body>
</html>

K dnešnímu dílu by to bylo asi vše, příště se podíváme na page.php, single.php a index.php, kde budeme vypisovat obsah stránek a příspěvků.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
20 hlasů
Google
(fotka) Ladislav JanečekAutor se zajímá o ASP.NET, ADO.NET, AJAX a C#. Nově přirostl autorovi k srdci Wordpress, PHP, AJAX? jQuery, webdesign a tvorba stránek celkově.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Studie Dell ukázala, jak využití monitorů při práci na notebooku zvyšuje produktivitu práce

Studie Dell ukázala, jak využití monitorů při práci na notebooku zvyšuje produktivitu práce

V době, kdy je práce na dálku více než aktuální téma, představila společnost Dell výsledky studie odhalující závislost mezi produktivitou a využíváním periferií, jako jsou myš, klávesnice a monitor. V rámci studie přineslo jejich využívání, bez ohledu na konkrétní parametry periferií, v průměru o 35,3 % vyšší produktivitu práce. Ukázalo se také, že produktivita roste spolu vbelikostí pracovní plochy

Reklama
Reklama
Obrázek ke článku Pandemie koronaviru, co dobrého nám přinesla?

Pandemie koronaviru, co dobrého nám přinesla?

Pandemie koronaviru, která se stala jakýmsi symbolem první poloviny roku 2020, určitě nebyla ničím veselým a je možné, že nás do budoucna ještě trochu potrápí i její následky. Na druhou stranu ale v některých oblastech zanechala pozitivní změny a návyky, na které jsme dříve nebyli zvyklí. Pojďme se společně podívat na krizi z trochu jiného úhlu a zhodnotit její přínosy.

Obrázek ke článku Open source neznamená „zdarma“

Open source neznamená „zdarma“

Mnoho společností po celém světě, univerzity, vládní organizace a jim podobné dnes používají open source technologie k vytvoření vlastních webových stránek. Tyto technologie se používají čím dál tím více. Jednoduše proto, že je řada poskytovatelů nabízí zcela zdarma. Je to ale opravdu to správné řešení pro všechny? 

Obrázek ke článku Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Streamovací služby a jejich obsah se v uplynulých měsících těšily velkému zájmu uživatelů, kteří se při pobytu v karanténě chtěli zabavit sledováním filmů a seriálů. Toho bleskově zneužili hackeři, kteří pod názvy oblíbených streamovacích platforem a jejich obsahu maskovali škodlivé soubory. Nejčastěji používali jako návnadu Netflix a seriál The Mandalorian. 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý