WordPressは、ウィジェットなどの多くの優れた機能を備えた素晴らしいコンテンツ管理システムです。このチュートリアルでは、小さなプラグイン内で独自のウィジェットを作成する方法について説明します。この投稿では、ウィジェット自体を作成する前に理解しておく必要のある追加のポイントを取り上げます。さあ行こう!


ステップ1:ウィジェットプラグインを作成する

私は最近「Freelancer Widgets Bundle」というプラグインを作成しましたが、そのようなプラグインの作成方法を聞かれた方がいましたので、この投稿を作成することにしました。最初のステップはプラグインの作成です。ご覧のとおり、これは最も難しい部分ではありません。プラグインは、アクティブ化するとWordPressに追加される追加のコードです。 WordPressはフォルダーを介してループを作成し、使用可能なすべてのプラグインを取得してバックオフィスにリストします。プラグインを作成するには、Coda(Mac)やDreamweaver(PC&Mac)などのエディターが必要です。 WordPressのローカルインストールでプラグインを作成することをお勧めします。ライブサーバーでプラグインを作成すると、エラーが発生した場合に問題が発生する可能性があります。だから、あなたのホスティングに配置する前にプラグインをテストするのを待ってください.

フォルダーwp-content / pluginsを開きます。プラグインを追加する場所です。新しいディレクトリを作成し、「widget-plugin」と呼びます(実際には、この名前は何でもかまいません)。プラグインにファイルが1つしかない場合でも、プラグインごとにフォルダを使用することをお勧めします。ディレクトリに「widget-plugin.php」という名前の新しいファイルを作成し(この名前も変更できます)、それを開きます。コードの最初の行を追加しようとしています。 WordPressでのプラグインの定義は、ユーザーが読み取れるいくつかのルールに従います ここでコーデックス. WordPressがプラグインを定義する方法は次のとおりです。

したがって、このコードを変更して、ニーズに合わせる必要があります。

ファイルを保存します。コードをwidget-plugin.phpファイルに追加するだけで、プラグインが作成されました!今のところ、プラグインは何もしませんが、WordPressが認識します。それが事実であることを確認するには、管理に行き、「プラグイン」メニューの下に行きます。プラグインがプラグインリストに表示されている場合は問題ありません。そうでない場合は、私の指示に従っていることを確認して、もう一度お試しください。これでプラグインをアクティブ化できます.

ステップ2:ウィジェットを作成する

次に、ウィジェット自体を作成します。このウィジェットは、コアWordPressクラスを拡張するPHPクラスになります WP_Widget. 基本的に、ウィジェットは次のように定義されます。

//ウィジェットクラス
クラスMy_Custom_WidgetはWP_Widget {

//メインコンストラクタ
パブリック関数__construct(){
/ * ... * /
}

//ウィジェットフォーム(バックエンド用)
public function form($ instance){
/ * ... * /
}

//ウィジェット設定を更新します
public function update($ new_instance、$ old_instance){
/ * ... * /
}

//ウィジェットを表示します
public function widget($ args、$ instance){
/ * ... * /
}

}

//ウィジェットを登録します
function my_register_custom_widget(){
register_widget( 'My_Custom_Widget');
}
add_action( 'widgets_init'、 'my_register_custom_widget');

このコードは、システムがウィジェットを使用するために必要なすべての情報をWordPressに提供します。

  1. コンストラクタ, ウィジェットを開始する
  2. の form()関数 管理でウィジェットフォームを作成する
  3. update()関数, 編集中にウィジェットデータを保存する
  4. そしてその widget()関数 フロントエンドにウィジェットのコンテンツを表示する

1 –コンストラクタ

コンストラクターは、ウィジェット名と主要な引数を定義するコードの一部です。以下は、その例です。.

//メインコンストラクタ
パブリック関数__construct(){
親:: __ construct(
「my_custom_widget」,
__( 'My Custom Widget'、 'text_domain'),
アレイ(
'customize_selective_refresh' => true,
)
);
}

ウィジェット名の前後に__()を使用しないでください。この関数はWordPressが翻訳に使用します。常に使用することをお勧めします これらの機能, テーマを完全に翻訳可能にするため。また、「customize_selective_refresh」パラメータを使用すると、ウィジェットを 外観>カスタマイズ ウィジェットを編集するときは、ページ全体を更新するのではなく、変更時にウィジェットのみが更新されます。.

2 – form()関数

この関数は、WordPress管理領域([外観]> [ウィジェット]または[外観]> [カスタマイズ]> [ウィジェット]のいずれか)でウィジェットフォーム設定を作成する関数です。これは、ウェブサイトに表示するデータを入力する場所です。そこで、ウィジェットフォーム設定にテキストフィールド、テキスト領域、選択ボックス、チェックボックスを追加する方法を説明します.

//ウィジェットフォーム(バックエンド用)
public function form($ instance){

//ウィジェットのデフォルトを設定します
$ defaults = array(
'タイトル' => '',
'テキスト' => '',
'textarea' => '',
'チェックボックス' => '',
'選択' => '',
);

//現在の設定をデフォルトで解析します
extract(wp_parse_args((array)$ instance、$ defaults)); ?>


/>

このコードは、ウィジェットに5つのフィールド(タイトル、テキスト、テキストエリア、選択、チェックボックス)を追加するだけです。したがって、最初にウィジェットのデフォルトを定義し、次に次の関数がデフォルトでウィジェットに定義/保存された現在の設定を解析します(したがって、ウィジェットを最初に追加したときのように、存在しない設定はデフォルトに戻りますサイドバー)。そして最後は各フィールドのhtmlです。フォームフィールドを追加するときのesc_attr()の使用に注意してください。これは、セキュリティ上の理由から行われます。サイトでユーザー定義変数をエコーするときは常に、最初にサニタイズされていることを確認する必要があります.

3 – update()関数

update()関数は本当にシンプルです。 WordPressコア開発者が本当に強力なウィジェットAPIを追加したので、各フィールドを更新するためにこのコードを追加するだけです:

//ウィジェット設定を更新します
public function update($ new_instance、$ old_instance){
$ instance = $ old_instance;
$ instance ['title'] = isset($ new_instance ['title'])? wp_strip_all_tags($ new_instance ['title']): '';
$ instance ['text'] = isset($ new_instance ['text'])? wp_strip_all_tags($ new_instance ['text']): '';
$ instance ['textarea'] = isset($ new_instance ['textarea'])? wp_kses_post($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset($ new_instance ['checkbox'])? 1:false;
$ instance ['select'] = isset($ new_instance ['select'])? wp_strip_all_tags($ new_instance ['select']): '';
$ instanceを返します。
}

ご覧のとおり、各設定を確認し、空でない場合はデータベースに保存するだけです。 wp_strip_all_tags()関数とwp_kses_post()関数の使用に注意してください。これらは、データベースに追加される前にデータを無害化するために使用されます。ユーザーが送信したコンテンツをデータベースに挿入するときは常に、悪意のあるコードが含まれていないことを確認する必要があります。最初の関数wp_strip_all_tagsは基本テキスト以外のすべてを削除するため、終了値が文字列であるフィールドに使用でき、2番目の関数wp_kses_post()は投稿コンテンツに使用されるのと同じ関数であり、リンクのような基本的なhtml以外のすべてのタグを削除します、スパン、div、画像など.

4 – widget()関数

widget()関数は、Webサイトのコンテンツを出力する関数です。それはあなたの訪問者が見るものです。この関数をカスタマイズして、CSSクラス、およびテーマの表示に完全に一致する特定のタグを含めることができます。これがコードです(このコードはニーズに合わせて簡単に変更できることに注意してください)。

//ウィジェットを表示します
public function widget($ args、$ instance){

extract($ args);

//ウィジェットのオプションを確認します
$ title = isset($ instance ['title'])? apply_filters( 'widget_title'、$ instance ['title']): '';
$ text = isset($ instance ['text'])? $ instance ['text']: '';
$ textarea = isset($ instance ['textarea'])?$ instance ['textarea']: '';
$ select = isset($ instance ['select'])? $ instance ['select']: '';
$ checkbox =! empty($ instance ['checkbox'])? $ instance ['checkbox']:false;

// WordPressコアbefore_widgetフック(常にinclude)
echo $ before_widget;

//ウィジェットを表示します
エコー '
'; //定義されている場合はウィジェットのタイトルを表示します if($ title){ $ before_titleをエコーし​​ます。 $ title。 $ after_title; } //テキストフィールドを表示します if($ text){ エコー '

'。 $ text。 」

'; } // textareaフィールドを表示します if($ textarea){ エコー '

'。 $ textarea。 」

'; } //選択フィールドを表示します if($ select){ エコー '

'。 $ select。 」

'; } //チェックボックスがtrueの場合に何かを表示します if($ checkbox){ エコー '

すごい

'; } エコー '
'; // WordPressコアのafter_widgetフック(常にinclude) echo $ after_widget; }

このコードは複雑ではありません。覚えておく必要があるのは、変数が設定されているかどうかを確認することだけです。設定していない場合、印刷したい場合は、エラーメッセージが表示されます。.

完全なウィジェットプラグインコード

これで、正しくフォローしていれば、プラグインは完全に機能するはずであり、ニーズに合わせてカスタマイズできます。ガイドに従っていない場合、またはコードを再確認したい場合は、Githubページにアクセスして完全なコードを表示できます.

Githubで完全なコードを表示

結論

プラグイン内にウィジェットを作成することは非常に興味深いことがわかりました。ここで、さまざまなフィールドタイプのウィジェットを含む単純なプラグインを作成する方法を理解し、高度な手法を使用してウィジェットをカスタマイズする方法をさらに学習する必要があります。おめでとうございます、あなたは素晴らしい仕事をしました!

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