こんにちは。SaitoKouです。
WordPressには「ウィジェット」という設定項目が用意されています。これはWordPressでホームページを設定するうえでは非常に便利で、コーディングをよく知らなくても複雑なレイアウトを設定可能です。今回はその使い方をメモしていきます!
1.ウィジェットってウェブサイトのどこに使われてるの?
例としてこんな感じです。
下の画像はホームページのフッター部分です。
![](https://saitokou.com/wp-content/uploads/2022/01/image-27-1024x678.png)
このフッター部分は、WordPressの設定画面だとこんな作りになっています。
![](https://saitokou.com/wp-content/uploads/2022/01/image-25-1024x245.png)
ウィジェットという要素のカタマリを3つ作り、横並びにしています。ウィジェットを作ってしまえば、カタマリごと場所を移動させたり、複数の場所に同じ内容を表示させたりすることができます。
また、ウィジェットはテーマごとに以下の点が異なります!
➀ 作れるウィジェットの数
② ウィジェットを配置できる箇所
③ ウィジェット内に配置できる要素
これらは、テーマインストール後にウィジェット設定画面を触って確認してみましょう。
2.ウィジェットを作成する。
ウィジェットは、最新のWordPressをインストールしている場合、ブロックエディタでの編集が可能です(2022/01/15現在)。早速ウィジェット編集画面を開きましょう!
管理画面サイドバー「外観」>「ウィジェット」で、編集画面が開きました。(テーマはTwenty Twenty-Oneです。)
![](https://saitokou.com/wp-content/uploads/2022/01/image-22-1024x416.png)
「フッター」と書いてあるウィジェットを開きます。
すると以下の画面になります。
![](https://saitokou.com/wp-content/uploads/2022/01/image-28.png)
一番下の+ボタンを押して要素を追加しましょう!今回は適当な見出しを入れます。
![](https://saitokou.com/wp-content/uploads/2022/01/image-26.png)
下のように追加できたら、「更新」ボタンを押しましょう!
![](https://saitokou.com/wp-content/uploads/2022/01/image-23-850x1024.png)
更新ボタンを押した後、ホームページを確認するとこんな感じです。
![](https://saitokou.com/wp-content/uploads/2022/01/image-24-1024x623.png)
新しく追加した内容は2段目の左列に追加されました。
どうやらこのテーマのウィジェットの配置規則はこんな感じですね。
・順番的に初めのブロックから、左列→中央列→右列→左列(次の行)と並べていく。
この辺りはテーマによって違うので、規則性や仕様を確認し、ウィジェットを編集していくのがいいと思います。
まとめ
ウィジェットの編集方法をメモしていきました!テーマによってはかなり機能が豊富で、ウィジェットの設定方法が複雑なものもありますが、より複雑なレイアウトも設定できます!気に入ったテーマで試しに動かしてみましょう!
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。