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

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

 

Wordpress – tvorba vlastní šablony

Google       Google       4. 11. 2011       60 537×

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 NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý