Dnes si na příkladu ukážeme jak vytvořit vlastní šablonu do redakčního systému Wordpress. Uděláme si jednoduchou strukturu stránek s hlavičkou, postraním panelem a patičkou. Tak jak je vyobrazeno na obrázku níže.
Nejdříve si připravíme složky a soubory tak, aby jsme do nich poté mohli už jen zapisovat kód. Jako první musíme otevří složku wp-content/themes, v které si vytvoříme vlastní složku s názvem naší šablony nazveme ji třeba rs_sablona. Otevřeme si naši vytvořenou složku a vložíme do ní soubory které si vytvoříme například pomocí programu PsPad, seznam souborů je následující.
- header.php - tento soubor bude mít nastarosti jak html hlavičku tak hlavičku v obsahové části
- index.php - tento soubor je hlavní soubor šablony, do něho se nahrávají ostatní soubory a má na starosti obsahovou část
- sidebar.php - postranní panel stránky
- footer.php - patička stránky
- style.css - soubor s kaskádovými styly, zde určíme jak bude stránka vypadat
Pokud máme vytvořeny všechny soubory můžeme začít s vkládáním kódu do jenotlivých souborů, začneme hlavičkou
Hlavička - header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="/<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>
<body>
<div id="obal">
<div id="hlavicka">
<h1><?php bloginfo('name'); ?></h1>
</div>
<div id="vyhledavani">
<?php get_search_form(); ?>
</div>
Nejdříve jsme tedy vložili deklaraci dokumentu, v jakém jazyku bude, a kódování. Ke všemu slouží funkce, které nám to zjistí automaticky, rozhodně nevyplňujeme ručně. Dále jsme vložili tag title na titulek stránky. Do něho jsme vložili funkci bloginfo s parametrem name, ta nám vrací jméno našeho blogu. Jako další je vložena deklarace kaskádového stylu, opět nepoužíváme absolutní cestu k souboru ale opět využijeme funkci bloginfo. Poté uzavíráme hlavičku a zapisujeme tělo stránky. Všechny prvky si nastylujeme později. Do hlavičky jsme vložili nadpis s názvem našeho blogu, pod něj vložíme další prvek s vyhledávacím formulářem.
Tělo stránky - index.php
<?php get_header(); ?>
<div id="obsah">
<h1>Obsah</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<?php the_content(__('(celý článek...)')); ?>
<hr>
<?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>
</div>
<div id="pravy">
<?php get_sidebar(); ?>
</div>
<div></div>
<?php get_footer(); ?>
Jak vidíme tělo stránky je poměrně jednoduché, nejdříve vložíme naší vytvořenou hlavičku pomocí get_header(). Poté pomocí cyklu vypisujeme všechny články, zobrazujeme jejich název, datum vytvoření a samotný text, pokud není žádný článek, vypíšeme hlášku. Poté vložíme sidebar (postranní panel) a footer (patičku).
Postranní panel - sidebar.php
Postranní panel jsme udělali také jednoduchý vypsali jsme do něj seznam kategorií a archiv. U seznamu kategorií jsme zvolili parametry tak aby se řadili podle jména a aby se ukazoval počet článků v jednotlivých kategoriích. Jednotlivé parametry, můžete prostudovat na oficiálních stránkách wordpressu, na konci článku bude odkaz.
<div id="panel">
<h2><?php _e('Kategorie'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2><?php _e('Archiv'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly&limit=15'); ?>
</ul>
</div>Patička - footer.php
<div id="paticka">
<p>Stránky vytvořil <a href="#">redakční-systémy.com</a>, 2009</p>
</div>
</div>
</body>
</html>
Jak vidíme zde jen vložíme text jaký chceme, a uzavřeme celou html stránku
Kaskádové styly - style.css
Aby celá stránka nějak vypadala musíme si stránku ješte nastylovat. Ukážeme si kus kódu, rozhodně to neberte jako dokončenou věc, je pouze ukázkový a slouží pro ilustraci:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #ffffff;
color: #000000;
text-align: left;
}
h1, h2, h3 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight: bold;
}
h1 {
font-size: 2em;
text-align: left;
}
a:link,a:visited{
text-decoration:underline;
color:#a70000;
}
a:hover{
text-decoration:underline;
}
#obal {
background-color: white;
border: 1px solid #959596;
width:800px;
margin:0 auto 0 auto;
padding:0;
}
#hlavicka {
width:100%;
height:100px;
background:#a70000;
margin:0;
padding:0;
}
#hlavicka h1{
font-size:3em;
margin:0;
padding-left:40px;
padding-top:20px;
color:#ffffff;
}
#vyhledavani{
margin:0;
padding:0;
width:100%;
background:#cccccc;
text-align:right;
margin-bottom:10px;
}
#vyhledavani #searchform{
margin:0;
padding:3px 10px 3px 0;
text-align:right;
}
#obsah{
float:left;
width:580px;
padding:10px;
}
#pravy{
float:right;
width:190px;
border-left:1px solid #cccccc;
}
#panel{
padding:10px;
}
#paticka{
width:98%;
margin:0 auto 0 auto;
border-top:1px solid #cccccc;
}
#paticka p{
width:95%;
text-align:right;
}
.delimiter{
clear:both;
}
Tím by mělo být hotovo stránka by nyní měla vypadat nějak takto:
Pokud chcete celou šalbonu najdete ke stažení zde: http://www.redakcni-systemy.com/media/rs_sablona.zip
Jestli to myslíte se šablonami vážně určitě se Vám bude hodit stránka dokumentace k wordpressu, kde najdete další užitečné funkce
7.10
2.5
3.3.1
1.4.6.2
1.3.9
Děkuji, velmi mi tento návod pomohl ;)
Problém je v souboru header.php.
Puv. text:
link rel="stylesheet" href="/<?php bloginfo('stylesheet_url'); ?" type="text/css" media="screen" /
je tam lomitko navic (autor si asi neuvedomil ze je to HTML a PHP na uvozovku). Takze spravne:
link rel="stylesheet" href="/ (a zde odstranit lomitko)
Jinak je clanek jednoduchy a dobry. Je potreba nejen kopirovat, ale taky si precist co vlastne kopirujete.
Puv. text:
je tam lomitko navic (autor si asi neuvedomil ze je to HTML a PHP na uvozovku). Takze spravne:
Jinak je clanek jednoduchy a dobry. Je potreba nejen kopirovat, ale taky si precist co vlastne kopirujete.
Ohledne panelu, ano je to opacne, snad to ale kazdemu dojde :)