WordPress – tvorba šablony od A do Z – 5.díl – Sidebar


Po delší odmlce přináším další díl z mého seriálu. Omlouvám se, že jsem nenapsal pokračování dříve, ale přes svátky jsem byl mimo pracovní pozice a po příjezdu jsem dostal hned nějakou nemoc a nebyl jsem použitelný už vůbec. Proto přináším nový díl v kterém si ukážeme zavedení sidebaru a naše šablona začne používat widgety, které nám systém WordPress nabízí. Dost povídání a omlouvání, jdeme na to…

Registrace sidebaru

Pro to, aby nám WordPress vůbec začal nabízet umístění widgetů do nějakého „prostoru“, musíme si tento prostor napřed zaregistrovat a následně ho nechat vepsat někde v DOM elementu stránek, jako kterýkoliv jiný prvek. Je třeba pouze myslet na jeho dynamiku a to, že do něj uživatel může „naházet“ neomezený počet widgetů.

Potřebné funkce

Náš soubor functions.php rozšíříme o následující funkci register_sidebar() s polem parametrů.


function widgets_init() {
	register_sidebar( array(
	'name' => __( 'Levý sloupec', 'Moje sablona' ),
	'id' => 'left-sidebar',
	'description' => __( 'Levý sloupec', 'Moje sablona' ),
	'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
	'after_widget' => '</li>',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );
}

add_action( 'widgets_init', 'widgets_init' );

Funkce neudělá nic jiného, než že založí nový sidebar (prostor pro widgety) s názvem „Levý sloupec“. To nám pro tuto chvíli bude stačit a nemusíme se v tom nějak zvlášť pitvat. Když se nyní podíváme do vzhledu šablony do sekce widgety, uvidíme v pravé části náš sidebar, kam se dají přenášet a aplikovat widgety ze základní sady WordPressu. Stačí nám je pouze nastylovat pomocí CSS.

V mé praxi se také vyplatilo některé widgety vypnout. Hlavně u těch šablon, které jsem vytvářel přesně na míru zákazníkovi. Ať chceme nebo nechceme, zákazník je uživatel a není potřeba mu motat hlavu něčím, co mu v rámci šablony třeba nefunguje nebo nechceme, aby to z nějakého důvodu používal. Pro tuto část má WordPress připravenou funkci unregister_widget().


function vypnuti_zakladni_widgetu() {
     unregister_widget('WP_Widget_Calendar');
     unregister_widget('WP_Widget_Meta');
     unregister_widget('WP_Widget_Search');
     unregister_widget('WP_Widget_Recent_Comments');
     unregister_widget('WP_Widget_RSS');
     unregister_widget('WP_Widget_Tag_Cloud');
 }

 add_action('widgets_init', 'vypnuti_zakladni_widgetu', 11);

V následujícím kódu vidíte, že jsem vypnul widgety: Kalendář, Widget s meta daty, Vyhledávání, Komentáře, RSS a Tag Cloud. Ostatní názvy widgetů naleznete u funkce v codexu.

Zobrazení sidebaru v šabloně

Proto, abychom mohli začít obsah sidebaru zobrazovat na naší webové stránce, založíme si nový soubor, který nazveme jako sidebar.php. A vložíme si do něj následující kód:


<ul id="sidebar-first">
<?php if ( ! dynamic_sidebar( 'left-sidebar' ) ) : endif; ?>
</ul>

Tento „kousek“ kódu nám zajistí, že se nám všechny widgety umístěné do „left-sidebar“ zobrazí jeden za druhým, jako li prvky. Pro umístění sidbaru v šabloně pak stačí použít funkci get_sidebar(), která automaticky v rootu šablony vyhledá sidebar.php a vloží ho na příslušné místo. Můžete vypadat třeba následovně:


<?php get_header(); ?>
<div id="content">
        <h1>Články z rubriky - <?php single_cat_title(); ?> </h1>
        <p><?php echo category_description(); ?></p>
        <?php if (have_posts()) : ?>
	   <?php while (have_posts()) : the_post(); ?>
		<?php get_template_part('loop', 'single'); ?>
	   <?php endwhile; ?>
        <?php endif; ?>

</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

V tuto chvíli na našem category.php přibude ještě postranní panel, který bude zobrazovat widgety. Stačí pouze sada CSS stylů, které vše srovnají a hezky vyprezentují.

Závěrem

K dnešnímu dni jsme naučili šablonu už i widgetům. Ukázal jsem vám cestu, jak udělat jeden prostor pro widgety, ale šablona jich může mít nekonečně mnoho. Můžete si udělat například nový sidebar v patičce, kam si uživatel může přidat sadu „boxů“ (widgetů) s odkazy na své partnery, další své projekty, atd. Není tedy potřeba, aby vás majitel webových stránek neustále kontaktoval se základní změnou. A pokud ano, vy jako správci nemusíte neustále dělat zásahy do kódu.

V dalším díle se podíváme na vyhledávání, které nám WP nabízí…

Tomáš Kocifaj, KTStudio.cz

, , , ,

  1. #1 Jolana 19.9.2013 - 10:07

    Chtěla jsem tento návod použít při registraci druhého sidebaru. Wigdety se do něj normálně přenášet dají ale zaboha se mi nezobrazí v šabloně.

  2. #2 Tomáš Kocifaj 19.9.2013 - 12:03

    Zdravím tě, koukni se, zda správně používáš výpis onoho sidebaru. Používá se pro to funkce dynamic_sidebar(‚id-sidebaru‘). Pokud založíš nový sidebar s názvem ‚muj-sidebar‘, tak ho musíš v šabloně volat pomocí: dynamic_sidebar(‚muj-sidebar‘);

  3. #3 Johny 30.10.2013 - 21:47

    … A vložíme si do něj následující kód:
    … ale ten kod tu nejak neni ;)

  4. #4 Tomáš Kocifaj 31.10.2013 - 06:51

    Díky za upozornění, se mi nějak část kódu vytratila z příspěvku. Opraveno a opět doplněné.

  5. #5 Anarchy 25.3.2014 - 02:24

    Tak jsem se snažil u našich stránek udělat ještě pravý sloupec (levý už tam máme) ale na webu se nezobrazuje. Jediné co se povedlo je, že je to v administraci :-(

    • #6 Tomáš Kocifaj 25.3.2014 - 06:22

      Zdravím, pokud používáš dva sloupce, je třeba dát pozor na to, jak se snažíš ho do šablony vkládat. Neměl by si používat get_sidebar(); Pokud je v administraci sidebar založen, bude pravděpodobně chyba někde v názvu, nebo parametru nějaké funkce.

  6. #7 Anarchy 25.3.2014 - 08:49

    Jeden soubor sidebar.php, který je vytvořen na levé straně už tam byl, takže jsem se snažil vytvořil druhý s umístěním na pravé straně pod názvem sidebarp.php. Bohužel u této části návodu „Pro umístění sidbaru v šabloně pak stačí použít funkci get_sidebar(), která automaticky v rootu šablony vyhledá sidebar.php a vloží ho na příslušné místo.“ jsem se zasekl a nevím kam to přesně vložit. Jinak se omlouvám ale jsem ve WordPressu začátečník, takže to se mnou bude trochu težší :-)

    • #8 Tomáš Kocifaj 25.3.2014 - 09:22

      WordPress jako takový má defaultně pouze jeden takzvaný „sidebar“ a to je přesně tak, jak popisuji v návodu. Pokud chceš mít sidebarů více, je třeba na to jít jinak. Po registraci sidebaru musíš následně volat funkci dynamic_sidebar(„registrovany_nazev_sidebar“). To doporučím umístit třeba do souboru sidebar-2.php. V šabloně pak zavoláš get_template_part(„sidebar“, „2“); na místě, kde chceš data ze sidebaru zobrazit. S tím, že soubor sidebar-2.php musí být umístěn v rootu šablony.

  7. #9 Anarchy 25.3.2014 - 10:08

    No tak to si mi zamotal hlavu ještě víc :-D
    Nový sidebar jsem si vytvořil tak, že jsem si přes FTP stáhl stávající sidebar.php, přejmenoval ho na sidebarp.php a nahrál do šložky k tomu stávajícímu…to je ta registrace? A to volání té funkce vložím přímo do nového sidebarup? Případně předělám na doporučený sidebar-2.php. V šabloně (pro mě to je asi soubor style.css ???) pak tedy vložím někam?? ten příkaz get_template_part(„sidebar“, „2″) ??? A jak určím na kterém místě se bude přesně zobrazovat? …..psal jsem, že jsem úplný začátečník :-)

  8. #10 Vita 25.3.2014 - 12:49

    Jen takový dotázek: všiml jsem si, že při registraci menu se ve functions.php příkaz add_action() nachází před funkcí a při registraci sidebaru naopak za funkcí. Je v tom nějaký rozdíl, nebo je to jedno kam ten příkaz umístím?
    Díky

    • #11 Tomáš Kocifaj 25.3.2014 - 13:10

      Zdravím tě Víťo, je úplně jedno, kde add_action zapíšeš. Ve výsledku to vypadá tak, že při inicializaci WordPress jádra projde všechny soubory, posbírá všechny tyto akce, najde k nim dodané funkce (opět kdekoliv) a následně tyto funkce volá při provádění akcí samotných. Je to jen o konvenci. Od jisté doby já osobně píšu action před funkci, abych hned viděl, kde se funkce volá a že je tam kvůli nějaké akci nebo filtru.

      • #12 Vita 25.3.2014 - 14:22

        OK, a ten třetí parametr (v tomto případě „11“ – priorita) v add_action je asi nepovinný parametr, že?

        • #13 Tomáš Kocifaj 25.3.2014 - 14:31

          Zdravím, povinné parametry jsou jen dva. Akce a volaná funkce. Ostatní je na tobě, zda využiješ či ne.

  9. #14 Martin 16.12.2015 - 20:16

    ahoj Tomáši, id left-sidebar je povinný název? Zkoušel jsem ho změnit, jak v registraci, tak při volání ve vlastním sidebaru.php, ale potom se widget do šablony nevepsal.

    • #15 Tomáš Kocifaj 17.12.2015 - 07:34

      Ahoj Martine, id sidebaru je jednoznačný identifikátor, který v rámci WordPressu uručuje, jak se daný sidebar „jmenuje“ pro systémové použití.

      V principu je to něco ve smyslu:
      1) Registruješ sidebar s nějakým „klíčem“ – left-sidebar

      2) Na určitém místě, vypíšeš obsah tohoto sidebaru – dynamic_sidebar(„left-sidebar“);

      3) V administraci v části widgety se ti následně objeví nový sidebar, kam můžeš umístit widgety.

      A potom je už WordPress vykresluje.

  10. #16 ien 14.1.2016 - 17:54

    ahoj, zaujal mě tento článek a chtěl bych do své šablony, která má jen jeden sloupec volžit nad příspěvky nové místo pro widgety přesně nad nadpis „OBTÍŽE, NA KTERÉ VÁM POMŮŽE KONOPÍ“.

    web: http://wp.bionebio.eu/
    šablona: Sunrise

    jel jsem podle návodu, ale nic se neprojevilo, asi to dělám blbě. :-(

    • #17 Tomáš Kocifaj 15.1.2016 - 07:22

      Ahoj, děkujeme za zájem o článek. Příčin, proč ti sidebar nevypisuje potřebný obsah může být několik.

      1) Může být špatně registrovaný – je viditelný v administraci v sekci widgets jako další sidebar? Pokud ne, je to chyba registrace
      2) Pokud je registrovaný a jsou v něm widgety, máš dobře spojený název (ID) widgetu s funkcí, která ho vypisuje na příslušné pozici?
      3) Je v šabloně správně umístěn v té části, kde se má vypisovat?

      Těmito body bych asi začal. To bývá nejčastější příčina.

  11. #18 ien 15.1.2016 - 16:52

    jj, vložil jsem první kod do souboru functions.php až dolu.
    jestli to není ta chyba, protože nic se v sekci widgets nezměnilo

    Ještě jsem to nikdy nedělal :-(

    • #19 Tomáš Kocifaj 18.1.2016 - 07:43

      Zdravím, pořadí kódu v souboru functions.php nemá vliv na jeho funkčnost. Není tedy důležité, jestli je kód na začátku nebo na konci souboru. Rád bych nějak poradil, ale právě jsem to zkoušel a vložený kód do jiného WP projektu mi funguje. Tedy v kódu samotném chyba není.

Komentáře jsou uzavřeny.