Zobrazení widgetu na stránce

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
  2. Tvorba a registrace WordPress widgetu
  3. Tvorba samotného widgetu
  4. Tvorba formuláře pro váš WordPress widget
  5. Zobrazení widgetu na stránce

Kódování výstupu widgetu

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

  1. Přidání výstupní funkce do widgetu. Tato funkce bude identifikovat nadřazené stránky (rodiče).
  2. Ú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:

    • Registrace widgetu.

 

  • 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

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

3 názory na “Zobrazení widgetu na stránce”

  1. Vojtěch Remiš

    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 🙂

    1. Zdeněk Vojáček

      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.

Diskuze

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

Nákupní košík

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte e-mail, ať o nic nepřijdete!

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Vylaďte WordPress stránky s naším tahákem

V e-booku najdete informace a rady pro WordPress od A do Z. Zadejte e-mail a my vám WordPress tahák pošleme.

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Přejít nahoru