HippoBlog
Web開発に関する備忘録や
日々の雑記ブログ
  • #WordPress
  • 2019年10月22日
ENTRY TITLE

[wordpress] ウィジェットをつくる

TEXT BY @hippohack@hippohack
TEXT BY @hippohack@hippohack
  • このエントリーをはてなブックマークに追加

function.phpに必要なコードを追記することで独自のウィジェットを作成することができる。
プラグインとおなじようにプラグインファイルとして登録することも可能。

  • 注意
    • ウィジェットはサイドバーにしか出力されない。
    • 任意の場所に出力できればいいのに。。。
    • あまり使い所がわからない。。。

ここでは、プラグイン形式で作成する。
細かい実装までは書いてないのでここからそれぞれカスタムする感じで。

ファイルヘッダー

  • /plugins/hoge-widget/hoge-widget.php を作成。

[/plugins/hoge-widget/hoge-widget.php]

<?php
/*
Plugin Name: My Widget
Plugin URI: http://wordpress.org/extend/plugins/#
Description: This is an example plugin 
Author: Your Name
Version: 1.0
Author URI: http://example.com/
*/

WP_Widgetを継承したクラスを作成する

  • WP_Widget を継承したクラスを作成する。
  • 継承したクラス名は WP_Widget_Hoge とするのがセオリーぽい。
  • コンストラクタでオプション設定する
    • 引数
      • IDのベース
      • ウィジェット名
      • オプション配列
        • クラス名
        • ウィジェットの概要

[/plugins/hoge-widget/hoge-widget.php]

class WP_Widget_HpWidget extends WP_Widget {

  function  __construct() {
    $widget_ops = array(
      'classname' => 'hp_widget',
      'description' => 'Test widget.',
    );
    parent::__construct('fuga', 'hoge', $widget_ops);
  }
  // ︙
}

設定する必要のあるメソッド(オーバーライドしないといけないメソッド)

  • form()
  • update()
  • widget()

[example]

function form($instance) {
  var_dump($instance);
  // something
}

function update($new_instance, $old_instance) {
  $instance = $old_instance;
  // something
  return $instance;
}

function widget($args, $instance) {
  if (!is_user_logged_in()) return;

  extract($args);
  $title = apply_filters('widget_title', empty($instance['title']) ? 'hoge' : $instance['title']);
  echo $before_widget;

  if ($title) {
    echo $before_title . $title . $after_title;
  }

  echo $after_widget;
}

ウィジェットの登録

クラス外で実行。

add_action('widgets_init', function(){
  register_widget("WP_Widget_HpWidget");
});

テーマをウィジェットに対応させる

  • sidebar.php を作成。

[function.php]

if (function_exists('register_sidebar')) {
    register_sidebar();
}

[sidebar.php]

<ul>
  <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()): ?>
    hoge
  <?php endif; ?>
</ul>

参考


最後までお読みいただき、ありがとうございました。

もし、この記事が役に立ちましたら、ぜひ「いいね!」 をよろしくお願いいたします。

ご意見などありましたら@hippohackへお願いいたします。

  • このエントリーをはてなブックマークに追加