ウィジェットを使用すると、WordPressサイトのサイドバーまたはウィジェット対応エリアにコンテンツ以外の要素を追加できます。バナー、広告、ニュースレター登録フォーム、その他の要素をウェブサイトに追加するために使用できます。
ソーシャルメディアフィード、最新の投稿、HTMLタグなどのユニークな機能をパーソナライズされたタッチで埋め込むカスタムウィジェットを作成することもできます。
WPBeginnerでは、カスタムウィジェットを使用して、ウェブサイトのサイドバーにさまざまな種類のコンテンツを表示しています。この記事では、カスタムWordPressウィジェットを作成する方法をステップバイステップでご紹介します。
注意: このチュートリアルは、WordPress開発とコーディングを学習しているDIY WordPressユーザー向けです。
WordPressウィジェットとは何ですか？
WordPressウィジェットには、ウェブサイトのサイドバーやウィジェット対応エリアに追加できるコードの断片が含まれています。
それらを、サイトにさまざまな要素や機能を追加するために使用できるモジュールと考えてください。
デフォルトでは、WordPressには標準のウィジェットセットが付属しており、どのWordPressテーマでも使用できます。詳細については、WordPressでウィジェットを追加して使用する方法に関する初心者向けガイドを参照してください。
WordPressでは、開発者が独自のカスタムウィジェットを作成することもできます。
多くのプレミアムWordPressテーマとプラグインには、サイドバーに追加できる独自のカスタムウィジェットが付属しています。
例えば、コードを書かずにサイドバーにお問い合わせフォーム、カスタムログインフォーム、フォトギャラリー、メールリストサインアップフォームなどを追加できます。
とはいえ、WordPressで独自のカスタムウィジェットを簡単に作成する方法を見てみましょう。
WordPressでカスタムウィジェットを作成する前に
WordPress コーディングを学習している場合は、ローカル開発環境が必要です。これにより、サイトが公開されていることを気にせずに、自由に学習し、テストを行うことができます。
WordPressをインストールできます。ローカル環境にMacでMAMPを使用するか、WindowsでWAMPを使用してインストールできます。
すでにライブサイトがある場合は、ローカルホストに移動できます。詳細については、ライブWordPressサイトをローカルサーバーに移動する方法に関するガイドを参照してください。
その後、カスタムウィジェットコードをWordPressに追加するにはいくつかの方法があります。
理想的には、サイト固有のプラグインを作成して、そこにウィジェットコードを貼り付けることができます。これにより、WordPressテーマに依存しないコードをWordPressに追加できます。
テーマのfunctions.php ファイルにコードを貼り付けることもできます。ただし、そのテーマがアクティブな場合にのみ利用可能になります。
カスタムコードをウェブサイトに簡単に追加できる WPCode プラグインも利用できます。
このチュートリアルでは、訪問者を歓迎するだけの簡単なウィジェットを作成します。ここでの目標は、WordPressウィジェットクラスに慣れることです。
準備はいいですか？始めましょう。
基本的なWordPressウィジェットの作成
WordPressには、組み込みのWordPressウィジェットクラスが付属しています。新しいWordPressウィジェットはすべてWordPressウィジェットクラスを拡張します。
WordPress開発者のハンドブックには、WP Widget クラスで使用できる19の方法が記載されています。
ただし、このチュートリアルの目的上、次の方法に焦点を当てます。
- __construct() : ここでウィジェットID、タイトル、説明を作成します。
- widget : これは、ウィジェットによって生成される出力を定義する場所です。
- form : このコードの部分は、バックエンド用のウィジェットオプションを持つフォームを作成する場所です。
- 更新：これは、ウィジェットオプションをデータベースに保存する部分です。
カスタムウィジェットを作成するには、次のコードスニペットを functions.php ファイルまたは WPCode（推奨）にコピー＆ペーストしてください。
<?php
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__( 'WPBeginner Widget', 'textdomain' ),
// Widget description
[
'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
]
);
}
// Creating widget front-end
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
// This is where you run the code and display the output
echo __( 'Hello, World!', 'textdomain' );
echo $args['after_widget'];
}
// Widget Settings Form
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = __( 'New title', 'textdomain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">
<?php _e( 'Title:', 'textdomain' ); ?>
</label>
<input
class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>"
name="<?php echo $this->get_field_name( 'title' ); ?>"
type="text"
value="<?php echo esc_attr( $title ); ?>"
/>
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
// Class wpb_widget ends here
}
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
WordPressサイトにカスタムコードを追加する最も簡単な方法は、WPCodeを使用することです。これは、サイトを壊すリスクなしにコードスニペットを管理および挿入するのに役立つ最高のコードスニペットプラグインです。
まず、サイトにWPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化したら、WordPress管理パネルからコードスニペット » + スニペットを追加に移動してください。ここで、「カスタムコードを追加（新規スニペット）」オプションを選択します。
その後、コードプレビューエリアにカスタムウィジェットコードを貼り付けることができます。
また、「コードタイプ」ドロップダウンメニューをクリックし、「PHPスニペット」オプションを選択する必要があります。
次に、下にスクロールして、コードの挿入方法を選択できます。
WPCodeでは、コードを実行する場所を選択できます。このチュートリアルでは、デフォルトオプションを使用して、どこでも実行できます。
それが完了したら、一番上に戻ってスニペットを保存できます。
スニペットをアクティブにするには、トグルを「アクティブ」にクリックするだけです。
詳細については、WordPressサイトにカスタムコードを追加する方法に関するガイドをご覧ください。
WordPressにコードを追加した後、WordPress管理パネルのAppearance » Widgetsページに移動する必要があります。
次に、「プラス」追加ブロックアイコンをクリックし、「WPBeginner Widget」を検索して、新しいウィジェットを選択します。
このウィジェットには、入力するフォームフィールドが1つしかありません。
テキストを追加し、「更新」ボタンをクリックすると変更が保存されます。
これで、WordPressウェブサイトにアクセスして、カスタムウィジェットが実際に動作していることを確認できます。
デモサイトでの表示例を以下に示します。
WordPressクラシックエディターにカスタムウィジェットを追加する
サイトに新しいウィジェットを追加するためにクラシックウィジェットエディターを使用している場合、プロセスは同様になります。
利用可能なウィジェットのリストに「WPBeginner Widget」という新しいウィジェットが表示されます。このウィジェットをサイドバーにドラッグアンドドロップする必要があります。
次に、タイトルを入力し、「保存」をクリックしてウィジェット設定を保存します。
新しいカスタムウィジェットがウェブサイトに表示されるようになります。
さて、コードをもう一度見てみましょう。
まず、「wpb_widget」を登録し、カスタムウィジェットをロードしました。その後、ウィジェットのバックエンドでウィジェットが何をするか、どのように表示するかを定義しました。
最後に、ウィジェットに加えられた変更の処理方法を定義しました。
さて、いくつか質問したいことがあるかもしれません。たとえば、textdomainの目的は何ですか？
WordPressは翻訳とローカライゼーションを処理するために「gettext」を使用しています。このtextdomainと_eは、「gettext」に文字列を翻訳可能にするように指示します。詳細については、翻訳準備完了のWordPressテーマを見つける方法に関するガイドをご覧ください。
テーマのカスタムウィジェットを作成している場合は、textdomainをテーマのテキストドメインに置き換えることができます。
または、WordPress翻訳プラグインを使用してWordPressを簡単に翻訳し、多言語WordPressサイトを作成することもできます。
ボーナス：WordPressウィジェットにカスタムスタイルを追加する
WordPressウィジェットを作成したら、カスタムスタイルを追加することもできます。これにより、ウェブサイトの外観が向上し、一貫性が維持され、重要な情報に注目を集めることができます。
これを行うには、外観 » ウィジェット ページにアクセスし、カスタマイズしたいウィジェットを追加します。右側のブロックパネルに、色とタイポグラフィを変更するためのオプションが表示されます。
ただし、ウィジェットにそのオプションが表示されない場合は、「詳細設定」タブを展開してCSSクラスを追加することでカスタマイズできます。
これで、その特定のCSSクラスを対象とするカスタムCSSをWordPressテーマに追加できます。
そのためには、外観 » カスタマイズ ページに移動し、追加CSSタブに切り替えます。ここに、CSSルールを追加するボックスとともに、ウェブサイトのプレビューが表示されます。
カスタムCSSを使用してウィジェットの外観をカスタマイズできるようになりました。詳細については、WordPressウィジェットにカスタムスタイルを追加する方法に関するチュートリアルをご覧ください。
この記事で、カスタムWordPressウィジェットを簡単に作成する方法を学べたことを願っています。また、WordPressでウィジェットブロックを無効にする方法に関するガイドや、WordPressで非アクティブなウィジェットを削除する方法に関するチュートリアルもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Dan
「wpb_text_domain」という文字列はサンプルコードに見つかりません。サンプルコードが更新され、記事の文言が更新されなかったと推測しますか？
また、確認ですが、「wpb_text_domain」はサンプルコードの「web_widget_domain」で合っていますか？
事前にフィードバックをいただけると幸いです。
WPBeginnerサポート
この点をご指摘いただきありがとうございます。この記事を更新し、より明確に説明します。
管理者
marwan
こんにちは、
コードをfunctions.phpではなく、個別のclass.phpとして配置してもよろしいでしょうか？
Karel Hanton
素晴らしいチュートリアルをありがとうございます。テストプラグインにコードを追加したところ、説明通り完璧に動作しました。Appearance » Widgets のリストでウィジェットが表示され、サイドバーに追加できます。
しかし、ページエディターのリストに新しいウィジェットが表示されません。何か見落としていることはありますか？別の登録や設定が必要ですか？
重ねてお礼申し上げます。
Aldo
これは現在WordPressで「レガシーウィジェット」として表示されています。ウィジェットを作成する新しい方法はありますか？
JP
これは素晴らしいです。単純なコピー＆ペーストの例はまさに私が探していたものでした。ありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
バヌ
CRUDプラグインを作成しましたが、それを1つのページで使用する必要があります。そのプラグインをページで使用する方法を教えていただけますか？
WPBeginnerサポート
プラグインをどのように設定したかによります。フロントエンド表示にショートコードを使用するか、管理画面側に表示したい場合はオプションAPIを検討することができます。
管理者
Kishan
カスタムウィジェットを1つ以上作成するにはどうすればよいですか？
また、ウィジェットでラジオボタン、チェックボックス、ドロップダウン、テキストなどの他のフィールドを設定するにはどうすればよいですか？
WPBeginnerサポート
wpb_widget を新しいウィジェットの名前として使用したいものに置き換える必要があります。その後、コードは具体的に追加したいものによって異なります。WordPressのCodexを確認すると、利用可能なさまざまなコードを確認できます。
管理者
Carmen
こんにちは！
現在、プラグインを開発しており、ユーザーが自分のサイトに特定の機能を追加できるようにウィジェットを作成する必要があります。
ウィジェットのコードをファイルにコピーし、そのファイルをプラグインのディレクトリに保存しました。プラグインのメインファイルでadd_actionとdo_actionを使用してロードしましたが、それでも機能しません。手伝っていただけますか？
ありがとうございます！
WPBeginnerサポート
残念ながら、それはプラグインの設定方法に大きく依存します。ウィジェットを追加して表示するには、このコードの両方のセクションがロードされていることを確認したい場合があります。
管理者
Maximilian K.
ちょっとした質問ですが、他のウィジェットも配置できるウィジェットを作成したい場合はどうすればよいですか？例えば、空のブートストラップカラム6-3-3のようなもので、各カラムに画像、テキスト、最新投稿などのウィジェットを配置できますか？
このウィジェットに他のウィジェットを配置できる場所を示すコマンド/キーワードはありますか？
自分で作成したテーマとWPの仕組みについて、少し混乱しているからです…初心者なので^^
ページタイトルなどの一般的な情報、フッターにウィジェットエリアを作成してメニューや関連リンクなどを配置できるようにしました。うまくいきました。
しかし、今、私がデザインしたコンテンツをWordPressで以前のように実現する方法がわかりません。いくつかのキーワードがそれらについてもっと読むのに役立つかもしれません。
WPBeginnerサポート
それはこの記事で説明している以上のカスタマイズが必要になります。コードに使用できるサイドバーを作成する方法を調べる必要があるかもしれません：https://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
管理者
Lars
素晴らしいチュートリアルです！完璧に機能しました。
WPBeginnerサポート
Glad our tutorial could help
管理者
Watson Anikwai
WordPressデータベースからカスタム投稿タイプフィールドを取得し、ウィジェットを使用してフロントエンドに表示するにはどうすればよいですか？
ヴィッキー
カスタムウィジェットを2つ追加できません。2つ目のウィジェットが表示されません…。
どうすればいいですか？？？助けてください。
Ahad Bhatti
本当に分かりやすく、役立ちました。ありがとうございます。
Belitza Gomez
こんにちは、「カスタムメニュー」というウィジェットが利用可能なウィジェットに見つかりません。表示されず、このウィジェットを使ってフッターにページを追加できませんでした。
ご協力いただきありがとうございます!!!!
Samdoxer
こんにちは、テキストの代わりにロゴを表示するにはどうすればよいですか？ロゴのURLをテキストに置き換えるだけで十分でしょうか。
よろしくお願いいたします。
WPBeginnerサポート
テーマ設定を確認するか、管理画面の「外観」»「カスタマイザー」ページにアクセスしてください。そこにロゴ画像をアップロードするオプションがあります。
管理者
Gary Foster
ウィジェットとアプリ、どちらが先に生まれたのでしょうか？
ウィジェットは登録が必要ですか？もしそうなら、どのように登録すればよいですか？
ウィジェットやアプリのアイデアを最も効果的に保護するにはどうすればよいですか？
皆さん、ありがとうございます
shelley
これらの手順は、カスタムウィジェットの作成に非常に役立ちました。しかし、フォントサイズを60pxに変更する方法がわかりません。DiviテーマオプションにCSSを追加して、テキストを中央揃えにし、境界線を追加することはできましたが、フォントのスタイリングを変更するにはどうすればよいですか？「font-size:60px」を追加しても機能しません。タグラインのように、ページ全体に大きなフォントを表示したいのです。ありがとうございます。
Ahmad Farhan
Very helpfull. tankyou
Eyad
チュートリアルを本当にありがとうございます
Luigi Briganti
こんにちは！助けていただけると嬉しいです。
ショップのタイムテーブルを表示するカスタム投稿タイプを作成しました。もちろん、必要なだけ多くのタイムテーブルを作成できますが、私の必要性は、ウェブサイトのサイドバーに特定のタイムテーブルを表示することです。
この目的のために、タイムテーブル投稿をループして1つだけ（昇順で並べたので最初の投稿）表示するウィジェットを作成しました。これは一時的な解決策で、ウィジェットが機能するかどうかを確認するためだけですが、実際には機能します。
バックエンドで「タイムテーブル」投稿タイプに属するすべての投稿のドロップダウンリストを表示し、必要に応じてフロントエンドに表示したい投稿を選択できるようにしたいのです。どうすればこれを実現できますか？
もし助けていただけるなら/助けたいなら、感謝します。
Anees Ijaz
時間を節約してくれてありがとう...
Kevin
この投稿は大好きです。何度も助けられました！ありがとうございます！