Jak vytvořit vlastní šablonu pro WordPress – 5 díl

V dalším díle seriálu o tvorbě šablony se zaměříme na vytvoření vlastních šablon stránek. Připravíme si stránku se stoprocentní šířkou a stránku se sidebarem vlevo. Zároveň už dáme šabloně trochu vzhledu.

Při instalaci nových šablon je často těžké představit si, jak bude šablona vypadat s obsahem, naimportujeme si na web testovací data, která si stáhnete zde. Tím odpadne zdlouhavé vytváření článků, kategorií a stránek, jen pro testování. Nástroj pro import najdete v Nástrojích -> Import. Důležité je zaškrtnout – Stáhnut a importovat soubory, díky tomu se vám všechny soubory uloží do složky uploads.

Změny v souborech:

Protože od posledního dílu návodu již uplynulo trochu času, musíme aktualizovat soubory Bootstrapu a zároveň i některé názvy tříd. Ve verzi 2.2.2, která je v šabloně, se používaly pro označení jednotlivých sloupců třídy s názvy span4 a podobně. Bootstrap jako takový, dělí obsah na 12 sloupců a čtyřka v názvu třídy, označuje 4xsloupec. Aby jsme dostali 100% šíře obsahu, museli jsme mít dva divy span8 a span4.

Protože se však vše vyvíjí, v novějších verzích budeme používat třídy jako col-xs-12 col-sm-6 col-md-8, což je vlastně to samé, ale rovnou tím určíte, šířky pro desktop, tablet a mobil. Zleva doprava to je 12 sloupců – mobil, 6 sloupců – tablet, 8 sloupců desktop. Tedy 100% šíře, 50% šíře a 75% šíře. Tím nahradíme všechny span8 v kódu šablony. Span4 nahradíme col-xs-12 col-sm-6 col-md-4.

Čtěte  Jak vytvořit vlastní šablonu pro Wordpress - 1 díl

Po úpravě šablony a importu obsahu se nám zobrazí hlavní strana takto:

Blank

 

Vidíme název webu, menu, výpis článků a vpravo sidebar. Aby byly další příklady lépe viditelné, uděláme několik drobných úprav. Především v nastavení Vzhled->menu, vytvoříme menu, které umístíme do primary area. Dále dáme  stránce šedivé pozadí a obsahu bílé. Také lehce upravíme zobrazování menu.

V souboru header.php pridáme ke container třídu content-wrap a do style.css vložíme tyto řádky:

body{
  background-color:#dedede;
}
 
.content-wrap{
  background-color:#ffffff;
}
 
img{
  max-width:100%;
}
 
/*----------------------------------------------------------------------*/
/* Main navigation menu */
/*----------------------------------------------------------------------*/
.header-menu {float:left;
  width:100%;
  margin-top:18px;
  background-color:#dedede;
}
.header-menu ul {float:left;
  margin:;
  padding:;
  list-style:none;
 
}
 
.header-menu ul li {float:left;
  margin:;
  padding: ;
  position:relative;
}
.header-menu ul li a{
  border-right:solid 1px #d3d3d3;                    
}
.header-menu ul li a, 
.header-menu ul li.pagenav {  
padding: 0px 20px 0px 20px;
  color: #333333;
  float: left;
  font-size: 14px; 
  line-height:58px;
  font-weight:normal;
  text-transform:uppercase;
}
.header-menu ul li:last-child a{border-right:none;}
.header-menu ul li.current-menu-item a,
.header-menu ul li a:hover, 
.header-menu ul li a.active, 
.header-menu ul li.pagenav:hover {
  background-color:#ffffff;
  text-decoration:none;
}
 
.header-menu ul li ul{
  display:none;
}
Čtěte  Jak vytvořit vlastní šablonu pro WordPress – 7 díl
.content-wrap{ background-color:#ffffff; } img{ max-width:100%; } /*----------------------------------------------------------------------*//* Main navigation menu *//*----------------------------------------------------------------------*/.header-menu {float:left; width:100%; margin-top:18px; background-color:#dedede; } .header-menu ul {float:left; margin:0; padding:0; list-style:none; } .header-menu ul li {float:left; margin:0; padding: 0; position:relative; } .header-menu ul li a{ border-right:solid 1px #d3d3d3; } .header-menu ul li a, .header-menu ul li.pagenav { padding: 0px 20px 0px 20px; color: #333333; float: left; font-size: 14px; line-height:58px; font-weight:normal; text-transform:uppercase; } .header-menu ul li:last-child a{border-right:none;} .header-menu ul li.current-menu-item a, .header-menu ul li a:hover, .header-menu ul li a.active, .header-menu ul li.pagenav:hover { background-color:#ffffff; text-decoration:none; } .header-menu ul li ul{ display:none; }

Takže jsme přidali barvu pozadí, obsahu a lehce upravili menu. Výsledek vypadá takto:
Blank (2)

Šablony stránek

Pro vytvoření šablon stránek a ukázce toho, jak fungují, budeme potřebovat dvě nové stránky. Nazveme je Full width a Left sidebar. Pravý dělat nemusíme, ten máme od začátku a obě stránky přidáme do menu.

Nyní otevřeme soubor page.php a uložíme jej jako template-fullwidth.php. Na pojmenování nezáleží, ale pro lepší přehlednost, budeme šablony stránek označovat jako template. Z uloženého souboru smažeme:

<div class="col-xs-12 col-sm-6 col-md-4">
    <php?php get_sidebar(); ?>
  </div>

a col-xs-12 col-sm-6 col-md-8 změníme na col-xs-12 col-sm-12 col-md-12.
Na začátek souboru přidáme:

a uložíme.

Nyní otevřeme znovu soubor page.php a kód:

<div class="col-xs-12 col-sm-6 col-md-4">
    <?php get_sidebar(); ?>
  </div>

přesuneme před:

<div class="col-xs-12 col-sm-6 col-md-8">

Na začátek souboru přidáme:

/*
Template name: Left sidebar
 */

a uložíme jako template-leftsidebar.php.

Závěrem

V dnešním článku jsme si updatovali Bootstrap, který využíváme především proto, aby jsme se nemuseli strat o zobrazování na jiných zařízeních. Dále jsme upravili soubory, tak aby využívali nové třídy Bootstrapu. Lehce jsme upravili styly šablony, aby bylo lépe vidět, co děláme a proč. Nakonec jsme vytvořili dvě šablony stránek, pro stránku bez sidebaru a se sidebarem vlevo.

Na co se můžete těšit příště?

Upravíme výpis článků, kam přidáme informace o autorovi, datu publikace a počtu komentářů. Podíváme se podrobněji právě na komentáře a jejich zobrazování na detailu článku.

Seriál: Jak vytvořit vlastní šablonu pro WordPress

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

3 Comments

  1. Jan Švábík

    Díky moc! Dnes jsem začal od prvního dílu až do pátého a dokázal jsem styl už napsat :) Doufám, že bude brzy pokračování, někdo bude totiž třeba pomoci s psaním stylu :) … Je to opravdu užitečný návod, nepolevujte v psaní ;)

    Ještě jednou děkuju!

    Reply
  2. Luděk

    JJ souhlasím. Super článek a jedinný co se zatím drží v pokračování a mooc doufám, že budete pokračovat s dalšími díly ;o)

    Reply
  3. tomas

    Mohl bych poprosit o obsah toho style.css co je uvedeny zde v clanku? Zobrazuje se mi jen par radek a nemohu ho tak vyzkouset. Predem diky.

    Reply

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *