Jak vytvořit vlastní wordpress šablonu

Odkazy

Spřátelené weby

JoomlaDev.eu - Vše o vývoji CMS Joomla

Redakční systém WordPress - Nejlepší redakční systém zdarma - WordPress

Anketa

O jakém RS by jste chtěli více článků

	Joomla
	Drupal
	Wordpress
	Prestashop
	Zencart

Navigace: Úvodní strana

Wordpress

Články

Jak vytvořit vlastní wordpress šablonu

Neděle, 30 Srpen 2009 11:59

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.

wp-rozvrzeni

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>
 
 
<p><?php the_content(__('(celý článek...)')); ?></p>
 
 
<hr>
 
 <?php endwhile; else: ?>
 
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 
 <?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&amp;optioncount=1&amp;hierarchical=0'); ?>
 </ul>
 
 <h2><?php _e('Archiv'); ?></h2>
 <ul>
 <?php wp_get_archives('type=monthly&amp;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;
}