株式会社ララパルーザ
〒840-0863 佐賀市嘉瀬町十五1297-1

WordPress ウィジェット

【WordPress】自作(カスタム)ウィジェットを追加する5ステップ

WordPressのウィジェットは、サイドバーやフッターなど、好きな箇所に好きな項目を配置できて便利ですよね。

しかし、元々用意されているウィジェットだけでは、自分が表示させたい内容を表示できないことがあると思います。

そんな時は、自作のウィジェット(カスタムウィジェット)を作成しましょう。

自作ウィジェット作成に必要な5つのステップを、
指定カテゴリの最新記事を表示する場合を例に、解説しました。

 

自作ウィジェットを作成する5ステップ

STEP1.自作ウィジェットを作成するための枠組みを作る。

まずは大枠を作成しましょう。
以下のコードをfunction.phpに貼り付けてください。

【注意!】function.php にコードを誤った形で保存してしまうと、サイトが表示されなくな流場合があります。
修正するためにはFTPからサーバーにログインし、function.phpをダウンロードして修正を施し、アップロードし直す必要があります。
この辺りの知識がない方は、サイトを復旧できなくなる可能性があるので注意してください。

OriginalWidget」はウィジェット名になります。
どんなウィジェットを作成するかに応じて、名前を変更することをオススメします。
(必ず英数字で入力してください。)

 

STEP2.自作ウィジェットを登録する処理を書く。

次に登録処理を書きます。
以下のコードを「自作ウィジェットを登録する処理」の箇所に貼り付けてください。

OriginalWidget」はウィジェット名になります。
STEP1で指定したウィジェット名と同じものにしてください。

オリジナルウィジェット」はウィジェット編集画面での名称になります。
こちらもどんなウィジェットか分かるように名称を変更しましょう。

指定カテゴリの最新記事を表示」はウィジェット編集画面での説明文になります。
必要に応じて変更してください。

 

STEP3.管理画面のウィジェット編集部分を変更する処理を書く。

WordPress管理画面のウィジェット編集部分を、
どのような項目にするかを設定する処理を書きます。

以下のコードを「管理画面のウィジェット編集部分を変更する処理」の箇所に貼り付けてください。

 

STEP4.管理画面で編集した内容を保存する処理を書く。

先ほどのステップで設定した編集部分を、
保存するための処理を記入します。

以下のコードを「管理画面で編集した内容を保存する処理」の箇所に貼り付けてください。

 

STEP5.ウィジェットを表示したときの処理を書く。

最後に、設定した内容でウィジェットを表示するための処理を書きます。

以下のコードを「ウィジェットを表示したときの処理」の箇所に貼り付けてください。

 

まとめ

全てをまとめると以下のようなコードになります。

上記コードをfunction.phpに追記すると、
以下のようなウィジェットが追加されます。

お好きなオリジナルウィジェットを代わりに作成します。

今回の記事では、自作(カスタム)ウィジェットを追加するためのステップを具体的にご紹介しました。

コードをコピペするだけでも動かせるようにはなると思うので、
あとはお好みで設定項目を増やしたり、変更してもらえればと思います。

自分でコードを追加・編集するのは不安だという方には、
自作(カスタム)ウィジェットの追加を弊社で代行させていただきます。

1つ ¥3,000(税別) で承りますので、
ご希望の際はお気軽にお問い合わせくださいませ。

お申し込みはこちらから

お申し込みいただきましたら、
24時間以内に弊社からご契約の手順などをご連絡させていただきます。

そして、ご契約後24時間以内に施工を完了させていただきます。

  • この記事を書いた人

yamamoto

-WordPress, ウィジェット

Copyright© Web(ウェブ)の便利屋Lallapallooza(ララパルーザ) , 2020 All Rights Reserved.