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

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

Wordpress – tvorba vlastní šablony

Google       Google       4. 11. 2011       66 892×

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 NVIDIA shrnuje přehled novinek na E3 2018

NVIDIA shrnuje přehled novinek na E3 2018

Společnost NVIDIA si u příležitosti E3 2018 připravila řadu novinek, které uvádí v kompletním přehledu, Například nové hry s podporou NVIDIA Highlights, která je součástí aplikace GeForce Experience, i nadále nabírá na obrátkách. Kromě výše zmíněné Shadow of the Tomb Raider získaly podporu také hry Dirty Bomb a Switchblade.

Reklama
Reklama
Obrázek ke článku SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

Firmy chrání svá citlivá data často nedostatečně. Podle průzkumu společnosti SODAT se v minulém roce setkalo až 80 % z nich s bezpečnostním incidentem ztráty nebo úniku dat. Jedna z pilotních firem, která testovala novou verzi řešení SODAT Protection & Analytics 2.0pro bezpečností analýzu a monitoring dat díky novince zjistila, kdo z disku smazal důležité výkresy a mohla na incident včas reagovat.

Obrázek ke článku Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Letní měsíce jsou pro většinu zaměstnanců spojené s každoroční dovolenou. Z údajů Českého statistického úřadu vyplývá, že v roce 2017 podnikli Češi přes 13 milionů delších cest (tzn. s více než čtyřmi noclehy). Přitom právě na období července, srpna a září připadá více než 7,5 milionů z nich. Nicméně tradiční představu o dovolené jako o čase, kdy má práci na starost někdo jiný, Češi boří. 

Obrázek ke článku 10 SEO mýtů, které už nemusíte v roce 2018 řešit

10 SEO mýtů, které už nemusíte v roce 2018 řešit

„Kolik má být na stránce klíčových slov?“, „Nemáš vyplněný meta tag keywords, to nebude fungovat.“, „Katalogy jsou mrtvý“. Také jste už slyšeli některé z těchto otázek? Pojďme si na ně konečně jednou provždy odpovědět.

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