ウィジェット : WordPress

ダイナミックサイドバー(ウィジェットが配置されるサイドバー)を表示する。ダイナミックサイドバーは下記の記載方法が推奨されている。

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    <li>{static sidebar item 1}</li>
    <li>{static sidebar item 2}</li>
<?php endif; ?>
</ul>

» 関数リファレンス/dynamic sidebar - WordPress Codex 日本語版

ウィジェットエリアが複数の場合

ウィジェットの利用

register_sidebar(); // ウィジェットエリア1   サイドバー 1を表示する。
register-sidebar(); // ウィジェットエリア2   サイドバー 2を表示する。

ダッシュボード [外観] > [ウィジェット]にサイドバー 1・サイドバー 2が表示される。
利用できるウィジェットからサイドバー 1・サイドバー 2へウィジェットを追加する。

ウィジェットの表示

index.phpに下記のコードを挿入する。

<?php dynamic_sidebar(1); //サイドバー1を表示 ?> 
<?php dynamic_sidebar(2); //サイドバー2を表示  ?>

カスタムウィジェット

<

p>ウィジェットには雛型が用意されている。

class My_Widget extends WP_Widget {
     function My_Widget() {
          // widget actual processes
          parent::WP_Widget(false, $name = 'MyWidget');    
     }

     function form($instance) {
          // outputs the options form on admin
     }

     function update($new_instance, $old_instance) {
          // processes widget options to be saved
     }

     function widget($args, $instance) {
          // outputs the content of the widget
     }

}
//ウィジェットの登録[1]
add_action('widgets_init', create_function('', 'return register_widget("My_Widget");'));    

widget($args, $instance)関数

widget関数の引数$args, $instanceはWordPressから渡される。
$argsはウィジェット情報、$instancdはフォーム情報が設定されている。

上記雛型を例にとると$argsには下記のような情報が設定されている。

 'widget_id'     => ○○○-N[2],     
 'widget_name'   => ×××[3]        

» WordPress ウィジェット API - WordPress Codex 日本語版

1. register_widget('My_Widget');でもよい。
2. ウィジェットの雛型を例にすると○○○はmy_widgetになる。Nは整数でWPが自動的に設定する。
3. ウィジェットの雛型を例にすると×××はMyWidegtになる。

簡単なウィジェット

著作者のリンクを表示するウィジェット

<?php
/**
My_Widget
*/
class My_Widget extends WP_Widget {
    /** constructor */
    function My_Widget() {
        parent::WP_Widget(false, $name = 'Author');
    }
    /** @see WP_Widget::widget */
    function widget($args, $instance) {
        extract( $args );
        echo $before_widget;
        echo $before_title . 'Author' . $after_title;
        if (!$instance['anchor']) {
                $anchor = 'FindxFine';
                $url = 'https://www.findxfine.com';
        }
        else {
            $anchor = $instance['anchor'];
            $url = $instance['url'];
        }
        if ($url) {
            $html = '<a href="' . $url . '">' . $anchor . '</a>';
        } else {
            $html = $anchor;
        }
        ?>
        <ul><li><?php echo $html ?></li></ul>
        <?php 
        echo $after_widget; 
    }
    /** @see WP_Widget::update */
    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['anchor'] = strip_tags($new_instance['anchor']);
        $instance['url'] = urlencode($new_instance['url']);
        return $instance;
    }
    /** @see WP_Widget::form */
    function form($instance) {
        $anchor = esc_attr($instance['anchor']);
        $url = esc_attr($instance['url']);
        ?>
        <p><label for="<?php echo $this->get_field_id('anchor'); ?>"><?php _e('Anchor'); ?><input class="widefat" id="<?php echo $this->get_field_id('anchor'); ?>" name="<?php echo $this->get_field_name('anchor'); ?>" type="text" value="<?php echo $anchor; ?>" /></label></p>
        <p><label for="<?php echo $this->get_field_id('url'); ?>"><?php _e('URL'); ?><input class="widefat" id="<?php echo $this->get_field_id('url'); ?>" name="<?php echo $this->get_field_name('url'); ?>" type="text" value="<?php echo(urldecode($url)); ?>" /></label></p>
        <?php
    }
} // class My_Widget

register_widget('My_Widget');
// register My_Widget widget
//add_action('widgets_init', create_function('', 'return register_widget("My_Widget");'));
?>

$instanceはフォーム情報が入っている。画像の例では$instance['anchor']はExsample, $instance['url']はhttp://www.exsample.comが設定される。