トップへ戻る
BLOGS

WordPress ウィジェットを自作する(エリアの設置から内容まで)

WordPress ウィジェットを自作する(エリアの設置から内容まで)

今回は初めて受けたWordPressの案件で預かったテーマが有料テーマでもある「LightningPro」であったため管理画面とリンクしているサイト(殆どのサイトがそうだと思うが)であったため、

管理画面から触れる機能が多くクライアント様もサイト内容の殆どを管理画面から設定しており、自分が作るデザインによってその機能を失うこととなってはせっかくの有料テーマの機能が損なわれてしまう為、

これをなんとか回避する方法として追加したコンテンツをウィジェットとして管理してもらうことで必死に調べ上げた内容です。

まずはウィジェットエリアの追加を

// ヘッダーウィジェットを登録
function headerIcon() {
  register_sidebar(array(
    'id' => 'sns_widget',
    'name' => 'ヘッダーメニュー下部',
    'before_widget' => '<div class="pc_only">',
    'after_widget' => '</div>'
  ));
}
add_action( 'widgets_init', 'headerIcon' );

こちらをfunctions.phpへ記述します。

add_action( 'widgets_init', 'headerIcon' );

こちらのアクションフックで登録します。

内容として必須のものは、

‘id’ => ‘このウィジェットと紐づくIDになる’,
‘name’ => ‘管理画面から操作する名前となります。’,

その下のBeforeAfterでHTMLのタグを出力することが出来ますが、コチラは空でも問題ないようです。

ウィジェットエリアの場所を作ります

<?php if(is_active_sidebar('sns_widget')): ?>
 <?php dynamic_sidebar('sns_widget'); ?>
<?php endif; ?>

このコードをウィジェットとして表示したいところに配置します。

これで管理画面からウィジェットエリアの有効化が出来るため有効化します。

さてここからはよりリッチなウィジェットエリアにするために

WordPressのウィジェットのコンストラクタを使用したエリア及び管理画面を作っていきます。

継承とコンストラクタを定義

class SNS extends WP_Widget {
function __construct() {
  parent::__construct(
    'sns_widget',
    'SNSボタン',
    array( 'description' => 'SNSボタンを追加' )
  );
 }

上記が最低限の決り文句となっています。

親コンストラクタの内容は

parent::__construct( $id_base, $name, $widget_options, $control_options )

となっているためこの場合は‘sns_widget’,がウィジェットのベースのIDとして、

‘SNSボタン’,は管理画面上での名前です。

array( ‘description’ => ‘SNSボタンを追加’ )は管理画面の説明に使用されます。

form関数を定義して管理画面を作る

ここからはHTMLのインプットタグなどを使用して管理画面のUIを作っていきます。

function form($instance) {
  if(empty($instance['title'])) {
    $instance['title'] = '';
  }
?>
<p>
  <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label>
  <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
  name="<?php echo $this->get_field_name('title'); ?>"
  value="<?php echo esc_attr( $instance['title'] ); ?>">
</p>
<?php
}

$instanceはform関数の引数で入力された値(現在のオプション値)が渡されるということで、コチラはサニタイズ(無害化)する必要があります。

基本的にはHTMLなのでlabelのforとinputのIdは同じになるように、

$this->get_field_id(‘title’);として渡してあげます。

そしてname属性の方は$this->get_field_name(‘title’);となります。

ちなみにクラスとしてclass=”widefat”を指定していますがこれはWordPress標準でエリアいっぱいに入力エリアが広がる指定になります。

また引数$instanceはデフォルトの値を取ることが可能で下記のように指定します。

$defaults = array(
     'title' => '',
     'text'  => ''
    );
    // デフォルトのオプション値と現在のオプション値を結合
 $instance   = wp_parse_args( (array) $instance, $defaults );

値として渡すためのvalue属性には$instance[‘設定する項目’]として渡します。

タグの中身として_e(‘タイトル:’);コチラを渡していますがこの関数は翻訳の処理を訳すための関数です。勿論直接日本語で書いても問題ありません。

次は新たに更新された場合の処理を書いていきます。

update関数を定義する

update関数は、ウィジェットの設定を変更するような入力があった際に、その値を無害化して保存する処理として追加します。

function update($new_instance, $old_instance) {
  $instance = $old_instance;
  $instance['title'] = strip_tags($new_instance['title']);
    return $instance;
}

まず一時的に以前のオプションを別変数に退避させます。

$instance = $old_instance;

そして無害化するためのPHP関数strip_tags()でPHPタグとHTMLタグを取り除きます。無害化できればここの関数は何でもいいです。

そして最後にreturnで更新変数を返します。

保存は自動でやってくれるようです。

次はいよいよウィジェットの見た目に拘るHTMLを書いていきます。

ウィジェットのHTMLを作成

function widget($args, $instance) {
  extract($args);
  echo $before_widget;
    if(!empty($instance['title'])) {
      $title = apply_filters('widget_title', $instance['title'] );
    }
    if (!empty($title)) {
      echo $before_title . $title . $after_title;
    } else {
      echo '';
    }
?>

※お好みのHTML

<?php echo $after_widget;
}
}
register_widget('SNS');

はいまずはwidget($args, $instance)の引数の説明ですが、

 $args       register_sidebar()で設定したウィジェットの開始/終了タグ、タイトルの開始/終了タグなどが渡される。

$instance   管理画面から入力した値が渡される。

はい、ということで$argsに対してextract($args);関数を使用し中身の連想配列のキーを変数に変化させて取り出しやすくします。

ウィジェットという一つの塊は、まずbefore_widgetでHTMLを覆うところから始まり。
次にタイトルの前にbefore_title、ウィジェットのタイトルが来

after_widgetでタイトルを閉じ他あとにウィジェットの本体(メイン)が来て、after_widgetで閉じます。

これらを変数として出力できます。

$instanceからは

$title = apply_filters(‘widget_title’, $instance[‘title’] );

フィルターフックを通して変数化して値があれば出力するようにします。

またほかに$instance[‘他の引数’]などを渡して入力した数値や、URLなどを扱う場合も全て同じ様に入力してもらってサニタイズして、何らかの形で出力する事が可能です。

上で説明した内容は全ての基本となるので要応用ですね。

勉強したことを生かして色々作ってみよう。

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA