カスタムWordPressウィジェットを作成する方法

WordPressで独自のカスタムウィジェットを作成しますか?ウィジェットを使用すると、コンテンツ以外の要素をサイドバーまたはWebサイトのウィジェット対応領域に追加できます.


ウィジェットを使用して、バナー、広告、ニュースレターのサインアップフォーム、その他の要素をWebサイトに追加できます.

この記事では、カスタムWordPressウィジェットを作成する方法をステップごとに説明します.

カスタムWordPressウィジェットの作成

注意: このチュートリアルは、WordPressの開発とコーディングを学んでいるDIY WordPressユーザー向けです。.

WordPressウィジェットとは?

WordPressウィジェットには、Webサイトのサイドバーまたはウィジェット対応領域に追加できるコードが含まれています.

単純なドラッグアンドドロップインターフェイスを使用してさまざまな要素を追加するために使用できるモジュールと考えてください。.

デフォルトでは、WordPressには、WordPressのテーマで使用できるウィジェットの標準セットが付属しています。 WordPressでウィジェットを追加して使用する方法に関する初心者向けガイドをご覧ください.

WordPressにウィジェットを追加する

WordPressでは、開発者が独自のカスタムウィジェットを作成することもできます.

多くのプレミアムWordPressテーマとプラグインには、サイドバーに追加できる独自のカスタムウィジェットが付属しています.

たとえば、コードを記述せずに、連絡先フォーム、カスタムログインフォーム、またはフォトギャラリーをサイドバーに追加できます。.

それでは、WordPressで独自のカスタムウィジェットを簡単に作成する方法を見てみましょう.

ビデオチュートリアル

WPBeginnerを購読

書面による指示を希望する場合は、読み続けてください.

WordPressでカスタムウィジェットを作成する

WordPressのコーディングを学ぶ場合は、ローカルの開発環境が必要です。コンピューター(MacまたはWindows)にWordPressをインストールできます。.

WordPressにカスタムウィジェットコードを追加する方法はいくつかあります.

理想的には、サイト固有のプラグインを作成し、そこにウィジェットコードを貼り付けることができます.

テーマのfunctions.phpファイルにコードを貼り付けることもできます。ただし、その特定のテーマがアクティブな場合にのみ使用できます.

使用できるもう1つのツールは、WordPress Webサイトにカスタムコードを簡単に追加できるコードスニペットプラグインです。.

このチュートリアルでは、訪問者に挨拶するだけのシンプルなウィジェットを作成します。ここでの目標は、WordPressウィジェットクラスに慣れることです。.

始めましょう.

基本的なWordPressウィジェットの作成

WordPressには、WordPressウィジェットクラスが組み込まれています。新しいWordPressウィジェットはそれぞれWordPressウィジェットクラスを拡張します.

WordPress開発者向けハンドブックには、WPウィジェットクラスで使用できる18のメソッドが記載されています。.

ただし、このチュートリアルでは、次の方法に焦点を当てます.

  • __construct():これは、ウィジェットID、タイトル、および説明を作成する部分です.
  • ウィジェット:これは、ウィジェットによって生成された出力を定義する場所です.
  • form:コードのこの部分は、バックエンドのウィジェットオプションを使用してフォームを作成する場所です.
  • 更新:これはウィジェットオプションをデータベースに保存する部分です.

WP_Widgetクラス内でこれらの4つのメソッドを使用した次のコードを見てみましょう.

//ウィジェットを作成する
クラスwpb_widgetはWP_Widget {

//構成部分
関数__construct(){

}

//ウィジェットのフロントエンドを作成する
public function widget($ args、$ instance){

}

//ウィジェットバックエンドを作成しています
public function form($ instance){

}

//ウィジェットを更新して古いインスタンスを新しいものに置き換えます
public function update($ new_instance、$ old_instance){

}

//クラスwpb_widgetはここで終わります
}

コードの最後の部分は、実際にウィジェットを登録し、WordPress内にウィジェットをロードする場所です.

function wpb_load_widget(){
register_widget( ‘wpb_widget’);
}
add_action( ‘widgets_init’、 ‘wpb_load_widget’);

これらすべてを組み合わせて、基本的なWordPressウィジェットを作成しましょう.

次のコードをコピーして、カスタムプラグインまたはテーマのfunctions.phpファイルに貼り付けることができます.

//ウィジェットを作成する
クラスwpb_widgetはWP_Widget {

関数__construct(){
親:: __ construct(

//ウィジェットのベースID
「wpb_widget」,

//ウィジェット名がUIに表示されます
__( ‘WPBeginner Widget’、 ‘wpb_widget_domain’),

//ウィジェットの説明
array( ‘説明’ => __( ‘WPBeginnerチュートリアルに基づくサンプルウィジェット’、 ‘wpb_widget_domain’)、)
);
}

//ウィジェットのフロントエンドを作成する

public function widget($ args、$ instance){
$ title = apply_filters( ‘widget_title’、$ instance [‘title’]);

//ウィジェットの引数の前後はテーマによって定義されます
echo $ args [‘before_widget’];
if(!empty($ title))
echo $ args [‘before_title’]。 $ title。 $ args [‘after_title’];

//ここでコードを実行し、出力を表示します
echo __( ‘Hello、World!’、 ‘wpb_widget_domain’);
echo $ args [‘after_widget’];
}

//ウィジェットバックエンド
public function form($ instance){
if(isset($ instance [‘title’])){
$ title = $ instance [‘title’];
}
そうしないと {
$ title = __( ‘新しいタイトル’、 ‘wpb_widget_domain’);
}
//ウィジェット管理フォーム
?>

<?php _e( ‘タイトル:’); ?>

<?php
}

//ウィジェットを更新して古いインスタンスを新しいものに置き換えます
public function update($ new_instance、$ old_instance){
$ instance = array();
$ instance [‘title’] =(!empty($ new_instance [‘title’]))? strip_tags($ new_instance [‘title’]): ”;
$ instanceを返します。
}

//クラスwpb_widgetはここで終わります
}

//ウィジェットを登録してロードします
function wpb_load_widget(){
register_widget( ‘wpb_widget’);
}
add_action( ‘widgets_init’、 ‘wpb_load_widget’);

先に進む必要があるコードを追加した後 外観»ウィジェット ページ。利用可能なウィジェットのリストに新しいWPBeginnerウィジェットが表示されます。このウィジェットをサイドバーにドラッグアンドドロップする必要があります.

デモウィジェット

このウィジェットには入力するフォームフィールドが1つだけあります。テキストを追加して[保存]ボタンをクリックすると、変更を保存できます.

これで、Webサイトにアクセスして、実際の動作を確認できます.

カスタムウィジェットのプレビュー

では、もう一度コードを見てみましょう.

最初に「wpb_widget」を登録し、カスタムウィジェットをロードしました。その後、ウィジェットの機能とウィジェットのバックエンドを表示する方法を定義しました.

最後に、ウィジェットに加えられた変更を処理する方法を定義しました.

ここで、いくつか質問したいことがあります。たとえば、目的は何ですかwpb_text_domain?

WordPressはgettextを使用して翻訳とローカリゼーションを処理します。このwpb_text_domainおよび__eは、gettextに文字列を翻訳可能にするように指示します。翻訳対応のWordPressテーマを見つける方法をご覧ください.

テーマのカスタムウィジェットを作成している場合は、wpb_text_domainをテーマのテキストドメインに置き換えることができます。.

この記事が、カスタムWordPressウィジェットを簡単に作成する方法の学習に役立つことを願っています。あなたのサイトで最も有用なWordPressウィジェットのリストを見たいかもしれません.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me