WPワークス

ダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。

ウィジェットアイテムの作成・追加方法

ウィジェット
ウィジェット

ウィジェットアイテムは、マウスでカチカチと操作するだけで簡単に配置できるアイテムですので、テーマやプラグインに実装することで、任意のウィジェットエリアに自由に配置することが出来ます。テンプレートファイルに直接HTMLを書くよりは柔軟に表示を切り替えられ、非常に便利ですよね。

自分好みのウィジェットアイテムを作成できたら良いなと思ったことがあるなら、ちょっと下に紹介していますので一度挑戦してみてください。

必要最低限の入力で作成できるコードも紹介しています。

必要なもの

一般的なウィジェットアイテムに必要な作業は「WP_Widget」クラスを継承するクラスの作成です。

PHP言語の「クラスの継承」がある程度分かれば良いのですが、簡単に説明すると、ワードプレスに用意されたウィジェットを作成するクラス「WP_Widget」のメソッド(クラス内に書いた関数のこと)を上書きすることで、ウィジェットを作成します。言ってみれば、クラス「WP_Widget」はウィジェット作成キットです。

あとは、作成したクラスを

という形でフックさせておくだけで、ウィジェットアイテムとして登録されます。

入力する場所は「functions.php」内です。

ウィジェットアイテムの作成・追加方法

ウィジェットの作成には、クラス「WP_Widget」に用意された4つのメソッドを主に使用します。

コンストラクタ
親クラス「WP_Widget」のコンストラクタを呼び出します。
公開ページで出力するメソッド
設置したウィジェットエリアで呼び出されます。
設定を保存するメソッド
設定フォームに用意された保存ボタンによる処理の詳細を設定できます。
設定フォームを出力するメソッド
ウィジェットに必要な設定フォームとして出力します。

上のメソッドを使って、テキストを出力するウィジェットを作成してみます。

上の例は、設定項目はタイトルだけで、どこにも使いようのないウィジェットですが、基本的な形はこれです。

設定フォーム内ではいくつも設定は追加できますので、出力したいものを設定できるように必要なinputタグを出力しておきましょう。inputタグのname属性の値は「$this->get_field_name( ‘設定項目名’ )」とすることで、「$instance」に設定したデータを持たせることが出来ます。

設定を保存するメソッド「update」内は、古いデータ(上の例では「$old_instance」)も取得できますので、単純に全てのデータを新しく更新する以外に、柔軟に設定を保存することが出来ます。

さいごに

一応オリジナルのテキストウィジェットの作成方法をコードと一緒に紹介しているページもありますので、興味がある場合は参考にしてみてください。

関連記事: 条件分岐できる便利なカスタムテキストウィジェットの作り方

このテーマに実装されているウィジェットアイテムの1つです。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

メニュ
ホーム
トップへ