環境
wordpress: 4.9.1
ワードプレスで独自ウィジェットを実装する方法を説明します。
(当説明では文字を表示するだけの簡単な処理の実装を方法を説明します。)
1ディレクトリ、1ファイルで実現可能です。
構成
プラグインの構成は下記になります。(wordpress ルート)
┗ wp-content
┗ plugins
┗ original_plugin_add_wedget
┗ original_plugin_add_wedget.php
※青字が作成するディレクトリ・ファイル
pluginsディレクトリ配下にユニークなディレクトリを作成して、任意の名前のPHPファイルを配置します。 (当手順ではoriginal_plugin_add_wedget.phpとしています。)
プラグインの作成
original_plugin_add_wedget.phpの内容は以下のようになります。必要な処理としては以下の3つの処理があります。
(1) ウィジェットの初期設定
一覧にウィジェットが表示された際のタイトルや説明文の設定です。
(2) ウィジェットの表示処理
ページにウィジェットを表示させる際の表示処理です。
$argsのbefore_widgetを出力しているのはレイアウトを崩さないようにする為です。
単純に出力するだけであればこれらの記述は不要です。
(3) 作成したクラスをアクションに追加
作成したクラスをアクションに追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php /* Plugin Name: Hollo world Widget */ ?> <?PHP //========================================================== // ウィジェット(クラス) //========================================================== class HolloWorld_Widget extends WP_Widget{ //------------------------------------------------------ // (1) ウィジェットの初期設定 //------------------------------------------------------ function __construct() { parent::__construct( false, '名前:こんにちは世界!', // ウィジェット名 array( 'description' => '説明:こんにちは世界!', ) // 説明文 ); } //------------------------------------------------------ // (2) ウィジェットの表示処理 //------------------------------------------------------ public function widget( $args, $instance ) { echo $args['before_widget']; // 表示するウィジェットエリアの前表示 echo $args['before_title']; // 表示するウィジェットタイトルの前表示 echo "タイトル"; echo $args['after_title']; // 表示するウィジェットタイトルの前表示 echo "<div>こんにちは世界!</div>"; echo $args['after_widget']; // 表示するウィジェットエリアの後表示 } } //---------------------------------------------------------- // (3) 作成したクラスをアクションに追加 //---------------------------------------------------------- add_action( 'widgets_init', function () { register_widget( 'HolloWorld_Widget' ); }); ?> |
プラグインの有効化
管理画面の「プラグイン」のリストに作成したプラグインが表示されるので、 有効化をクリックすると有効にできます。ウィジェットの配置
プラグインを有効化すると管理機能の「外観」の「ヴィジェット」に設定したタイトル(名前「こんにちは世界!」)で ウィジェットの一覧に表示されるようになります。表示されたウィジェットをウィジェットエリアに配置すると対象のページに「こんにちは世界!」が表示される様になります。