---
site_name: WPlama
site_description: "Správa, opravy a vývoj WordPress webů a e-shopů"
site_url: https://www.wplama.cz
contact_email: info@wplama.cz

title: Zobrazení widgetu na stránce
url: https://www.wplama.cz/zobrazeni-widgetu-na-strance/
date: 2015-01-03
modified: 2015-01-09
author: Tomáš Cirkl
type: post
categories: [Snippety]
tags: [widget, WordPress]
---

Snippety

# Zobrazení widgetu na stránce

[TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 3. 1. 2015 Aktualizováno **9. 1. 2015** 5 min čtení

Pozor:

Článek je z roku 2015. Některé postupy se mohly změnit.

![widget 5](https://www.wplama.cz/wp-content/uploads/2015/01/widget_5.jpg "widget 5")

Obsah článku (3 kapitoly)

1. [Kódování výstupu widgetu](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#kodovani-vystupu-widgetu)
2. [Funkce pro úpravu nastavení widgetu](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#funkce-pro-upravu-nastaveni-widgetu)
3. [Shrnutí](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#shrnuti)

Tento článek je součástí série návodů zabývající se kompletní tvorbou WordPress widgetu.

1. [Co byste měli vědět než se pustíte do tvorby prvního widgetu](https://www.wplama.cz/wordpress-widget/ "Co byste měli vědět než se pustíte do tvorby prvního widgetu")
2. [Tvorba a registrace WordPress widgetu](https://www.wplama.cz/tvorba-a-registrace-widgetu/ "Tvorba a registrace WordPress widgetu")
3. [Tvorba samotného widgetu](https://www.wplama.cz/tvorba-samotneho-widgetu/ "Tvorba samotného widgetu")
4. [Tvorba formuláře pro váš WordPress widget](https://www.wplama.cz/tvorba-formulare-widget/ "Tvorba formuláře pro váš WordPress widget")
5. [Zobrazení widgetu na stránce](https://www.wplama.cz/zobrazeni-widgetu-na-strance/ "Zobrazení widgetu na stránce")

## Kódování výstupu widgetu

Tento krok se skládá ze dvou částí:

Přidání výstupní funkce do widgetu. Tato funkce bude identifikovat nadřazené stránky (rodiče).

---

Úprava funkce widgetu uvnitř třídy *WP_Widget*.

---

### Přidání funkce pro identifikace rodiče

Do souboru pluginu, nad vaší třídu *WP_Widget* přidejte tuto funkci:

```

```

`<?php`

`function` `tutsplus_check_for_page_tree() {`

`// zkontroluje, zda se nacházíte na stránce`

`if``( is_page() ) {`

`global` `$post``;`

`// kontroluje, zda má stránka rodiče`

`if` `(` `$post``->post_parent ){`

`// načte seznam rodičů`

`$parents` `=` `array_reverse``( get_post_ancestors(` `$post``->ID ) );`

`// najde nejvýše postaveného rodiče`

`return` `$parents``[0];`

`}`

`// navrátí ID - toto bude nejvýše postavený rodič nebo ID současné stránky`

`return` `$post``->ID;`

`}`

`}`

`?>`

## Funkce pro úpravu nastavení widgetu

Dalším krokem je úprava zatím prázdné funkce widgetu. Začneme definováním proměnných, které jsou založené na vstupním formuláři.

```

```

`function widget( $args, $instance ) {`

`extract( $args );`

`echo $before_widget;`

`echo $before_title . 'In this section:' . $after_title;`

`}`

Dále přidejte dotaz a jeho výstup do funkce widget:

```

```

`function` `widget(` `$args``,` `$instance` `) {`

`// kick things off`

`extract(` `$args` `);`

`echo` `$before_widget``;`

`echo` `$before_title` `.` `'In this section:'` `.` `$after_title``;`

`// run a query if on a page`

`if` `( is_page() ) {`

`// run the tutsplus_check_for_page_tree function to fetch top level page`

`$ancestor` `= tutsplus_check_for_page_tree();`

`// set the arguments for children of the ancestor page`

`$args` `=` `array``(`

`'child_of'` `=>` `$ancestor``,`

`'depth'` `=>` `$instance``[` `'depth'` `],`

`'title_li'` `=>` `''``,`

`);`

`// set a value for get_pages to check if it's empty`

`$list_pages` `= get_pages(` `$args` `);`

`// check if $list_pages has values`

`if``(` `$list_pages` `) {`

`// open a list with the ancestor page at the top`

`?>`

`<ul` `class``=``"page-tree"``>`

`<?php` `// list ancestor page ?>`

`<li` `class``=``"ancestor"``>`

`<a href=``"<?php echo get_permalink( $ancestor ); ?>"``><?php` `echo` `get_the_title(` `$ancestor` `); ?></a>`

`</li>`

`<?php`

`// use wp_list_pages to list subpages of ancestor or current page`

`wp_list_pages(` `$args` `);;`

`// close the page-tree list`

`?>`

`</ul>`

`<?php`

`}`

`}`

`}`

Toto zkontroluje jestli jste na stránce a poté definuje argumenty pro funkci *list_pages()*. K tomu se použije předchozí funkce a hodnoty *$depth*, která je nastavená ve formuláři widgetu. Nyní vše uložte a aktualizujte plugin na stránce.

## Shrnutí

Tvorba widgetu zahrnuje tyto kroky:

- Tvorba třídy, která obsahuje funkce widgetu.

- Napsání funkce *construct*, která sestavuje widget.

- Napsání funkce *form*, která obsahuje formulář widgetu.

- Napsání funkce *update*, která ukládá nastavení formuláře.

- Napsání funkce *widget*, která obsahuje výstup.

Jakmile máte všechno hotové, máte funkční widget, který můžete upravit tak, aby dělal co chcete.

### Celý kód pluginu

```
<?php
/*Plugin Name: Widget Seznam podstránek
Description: Tento widget kontroluje, zda má současná stránka nadřazené nebo podřazené stránky. Pokud tomu tak je, pak zobrazí seznam stránek, v kterém se nachází.
Version: 0.1
Author: Tomáš Cirkl
Author URI: https://wplama.cz
License: GPLv2
*/
?>

<?php
function tutsplus_check_for_page_tree() {

//zkontroluje, zda se nacházíte na stránce
if( is_page() ) {

global $post;

// zkontroluje, zda má stránka rodiče
if ( $post->post_parent ){

// načte seznam rodičů
$parents = array_reverse( get_post_ancestors( $post->ID ) );

// najde nejvýše postaveného rodiče
return $parents[0];

}

// navrátí ID - toto bude nejvýše postavený rodič nebo ID současné stránky
return $post->ID;

}

}
?>
<?php
class Tutsplus_List_Pages_Widget extends WP_Widget {

function __construct() {

parent::__construct(

// base ID of the widget
'tutsplus_list_pages_widget',

// name of the widget
__('Seznam příbuzných stránek', 'tutsplus' ),

// widget options
array (
'description' => __( 'Identifikuje strukturu současné stránky a zobrazí seznam příbuzných stránek. Funguje pouze u stránek.', 'tutsplus' )
)

);

}

function form( $instance ) {

$defaults = array(
'depth' => '-1'
);
$depth = $instance[ 'depth' ];

// markup for form ?>
<p>
<label for="<?php echo $this->get_field_id( 'depth' ); ?>">Hlooubka seznamu:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'depth' ); ?>" name="<?php echo $this->get_field_name( 'depth' ); ?>" value="<?php echo esc_attr( $depth ); ?>">
</p>

<?php
}

function update( $new_instance, $old_instance ) {

$instance = $old_instance;
$instance[ 'depth' ] = strip_tags( $new_instance[ 'depth' ] );
return $instance;

}

function widget( $args, $instance ) {

// start
extract( $args );
echo $before_widget;
echo $before_title . 'In this section:' . $after_title;

// pokud jste na stránce spustí dotaz
if ( is_page() ) {

// spustí funkci tutsplus_check_for_page_tree
$ancestor = tutsplus_check_for_page_tree();

// nastaví argumenty pro rodiče a stejně postavené stránky
$args = array(
'child_of' => $ancestor,
'depth' => $instance[ 'depth' ],
'title_li' => '',
);

// nastaví hodnotu pro get_pages
$list_pages = get_pages( $args );

// zkontroluje zda $list_pages má nějakou hodnotu
if( $list_pages ) {

// otevře seznam nadřazených rodičů
?>
<ul class="page-tree">
<?php // list ancestor page ?>
<li class="ancestor">
<a href="<?php echo get_permalink( $ancestor ); ?>"><?php echo get_the_title( $ancestor ); ?></a>
</li>

<?php
// použije wp_list_pages pro sestavení podřazených stránek a současné stránky
wp_list_pages( $args );;

// uzavře seznam
?>
</ul>

<?php
}
}

}

}
?>

<?php
function tutsplus_register_list_pages_widget() {

register_widget( 'Tutsplus_List_Pages_Widget' );

}
add_action( 'widgets_init', 'tutsplus_register_list_pages_widget' );
?>

```

Zdroj: [Displaying Your WordPress Widget on the Site](http://code.tutsplus.com/tutorials/displaying-your-wordpress-widget-on-the-site--cms-22407 "Displaying Your WordPress Widget on the Site")

- [#widget](https://www.wplama.cz/stitek/widget/)
- [#WordPress](https://www.wplama.cz/stitek/wordpress/)

Sdílet

-
- [](mailto:?subject=Zobrazení widgetu na stránce&body=Zobrazení widgetu na stránce https://www.wplama.cz/zobrazeni-widgetu-na-strance/)
- [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fzobrazeni-widgetu-na-strance%2F)
- [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fzobrazeni-widgetu-na-strance%2F)

TC

Autor

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na Word Camp Praha a WordPress konferencích.

1 030 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/)

## Komentáře (3)

[Přidat komentář →](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#respond)

VR

Vojtěch Remiš [11. 11. 2015](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#comment-25997)

Ahoj, řeším teď takový problém: Mám proměnnou ve „function form($instance) {}“ a chtěl bych s ní pracovat ve „function widget($args, $instance) {}“. Zkoušel jsem to pomocí globálních proměnných, ale nefungovalo mi to. Jsem v PHP začátečník, tak jsem to asi špatně napsal. Nemůžete mi prosím někdo pomoci? Předem děkuji 🙂

[Odpovědět](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#comment-25997)

ZV

Zdeněk Vojáček WPlama [12. 11. 2015](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#comment-26007)

Ahoj. Poradit určitě můžeme. Potřeboval bych ale ten tvůj kód vidět. Pokud není moc dlouhý tak ho sem hoď a něco vymyslíme.

[Odpovědět](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#comment-26007)

---

---

S

S3lfty [9. 12. 2016](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#comment-47758)

Chybi tam $after_widget, pokud se nemylim.

[Odpovědět](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#comment-47758)

---

### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/zobrazeni-widgetu-na-strance/#respond)

[← Předchozí článek Tvorba formuláře pro váš WordPress widget](https://www.wplama.cz/tvorba-formulare-widget/) [Další článek → Přeložení prefixu v odkazu](https://www.wplama.cz/prelozeni-prefixu-v-odkazu/)

Související

## Mohlo by vás zajímat

[Všechny články z rubriky Snippety →](https://www.wplama.cz/wordpress/kodovani/)

![wordpress programovani](https://www.wplama.cz/wp-content/uploads/2025/10/wordpress-programovani.jpg "wordpress programovani")

Snippety

### [Jak ve WordPressu (včetně Gutenberg) automaticky nahradit „a, i, k, o, s, u, v, z“ pevnou mezerou](https://www.wplama.cz/jak-ve-wordpressu-vcetne-gutenberg-automaticky-nahradit-a-i-k-o-s-u-v-z-pevnou-mezerou/)

8. 10. 2025 3 min čtení

---

![wordpress editor](https://www.wplama.cz/wp-content/uploads/2024/02/wordpress-editor.png "wordpress editor")

Snippety

### [Editor souborů ve WordPress](https://www.wplama.cz/editor-souboru-ve-wordpress/)

25. 3. 2024 2 min čtení

---

![cookies](https://www.wplama.cz/wp-content/uploads/2023/06/cookies.jpg "cookies")

WordPress návody

### [Jak u pluginu Complianz upravit lištu a zvýšit počet lidí, který s použitím cookies souhlasí](https://www.wplama.cz/jak-u-pluginu-complianz-upravit-listu-a-zvysit-pocet-lidi-ktery-s-pouzitim-cookies-souhlasi/)

3. 7. 2023 1 min čtení

---