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
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
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       74 410×

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 Do poskytovatele managed hostingových služeb vshosting~ vstupují zahraniční investoři

Do poskytovatele managed hostingových služeb vshosting~ vstupují zahraniční investoři

Po více než roce jednání do vshosting~ vstoupili 3 investiční skupiny z Německa: Pecunalta, BrainWeb Investment a Quines Capital. Jde o investiční skupiny, které mají účast na projektech jako PlusServer (největší managed provider v Německu a jeden z největších v Evropě), PLESK, cPanel, CloudLinux, GoDaddy (největší světový hostingový poskytovatel z USA), či Acronis, pomohou vshosting~ v jeho plánované mezinárodní expanzi na další zahraniční trhy. Ve vshosting~ nyní drží 75% podíl, zbylých 25 % zůstává zakladatelům vshosting~, kterými jsou Damir Špoljarič (CEO) a Jan Martinů (CTO).

Reklama
Reklama
Obrázek ke článku Posuňte své znalosti IT na výrazně vyšší úroveň

Posuňte své znalosti IT na výrazně vyšší úroveň

Zájem o IT odborníky je v současnosti v tuzemsku i v zahraničí enormní a vedení firem si moc dobře uvědomuje, jak těžké je získat ty správné. I přesto, že je odborníků na trhu dlouhodobý nedostatek, stále platí, že část z nich je - a bude - placena výrazně lépe než ti ostatní. Proč tedy nebýt mezi nimi?

Obrázek ke článku Webnode: Popularita blogů v Česku strmě stoupá

Webnode: Popularita blogů v Česku strmě stoupá

Statistiky společnosti Webnode, tvůrce nástroje pro tvorbu webových stránek, potvrzují, že Češi blogy milují. V České republice jich za prvních šest měsíců letošního roku přibylo jen na platformě Webnode přes 12 500, ve světě celkově pak na této platformě přes 210 000. Meziroční nárůst ve srovnání se stejným obdobím loňského roku je 18 %. 

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