9)WordPressのウィジェットを使いこなして 自由にサイトのレイアウトを変更しよう
WordPressサイトには、ウィジェットという機能があります。
ウィジェットを使うと、Webサイトの決まった部分に、好きなパーツを設置できる機能です。
今回は、この「ウィジェット」という機能の使い方を解説していきます。
ウィジェットが使えると何ができるのか?
例えば、サイドバーという場所があります。
![サイドバー](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/037b1a80e81e3ab37562c393a8f78d80.jpg)
この部分に、
- 検索ボックス
- 最新の投稿一覧
- カテゴリー
- アーカイブ
などなど、好きな部品を設置することで、HTMLやCSSみたいなプログラミングをいじることなく、Webサイトのレイアウトを比較的自由にいじることができます。
↓↓↓ こんな感じに設置できます ↓↓↓
![サイドバー (1)](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/99ede5f7d0422fd1c34699e6e710189b.jpg)
他にも、WordPressテーマにもよりますが、サイドバー以外にもいろんな場所に、ウィジェット機能を使って好きなパーツを設置することができます。
それでは、実際にウィジェットの使い方を覚えていきましょう。
ウィジェットの使い方を覚えよう
それでは、実際にウィジェットをいじってみましょう。
↓ 「外観」⇒「ウィジェット」をクリック。
![ウィジェット設定1](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/0b7f9fba333879e34f24dd8e0a96c624.png)
↓ すると、以下のような画面がでます。まずは以下の部分をクリックしてみましょう。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/5aefe56475821eb6ce861e5ab215e87e.png)
↓ すると、以下のように色んな名前がズラーッと並びます。これが、Webサイトの中でいじれる場所一覧です。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/0c777df884539c16a1364a88eca8c3d3.png)
この色んな場所に、色んなパーツ(部品)を入れていくことで、Webサイトのレイアウトを自由にいじれるようになります。
※ただし、お使いのWordPressテーマによっていじれる場所一覧の数や名称は異なります。
↓ では例えば、サイドバーをいじってみましょう。「1.サイドバー」の部分をクリックしましょう。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/8a4649c3940c9c4881074962f63ce036.png)
↓ すると以下のように、サイドバーの中身が開きます。この中に色んな部品(パーツ)が入っています。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/29211f24ef5ce48c69d19ee2cbd5497b.png)
↓ この中に入っているものが、実際のWebサイトにこのように反映されます。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/5070ca7a941004c32b3585523ea600e8.png)
このサイドバーの中身に、何かを追加するには、左上の「+」かサイドバーの中身の一番下の「+」をクリックしましょう。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/97165360b76814cf65409d0cc16ce139.png)
↓ すると、追加できる部品のブロック一覧が色々出てきます。追加したいブロックを選びます。(※ここでは例えば「段落」ブロックを選びます)
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/cd93a90e9c5fbe30a750a90e7b9866e0.png)
↓ そうすると、サイドバーの中身にブロックが入ります。(例えば、「段落」ブロックなら、好きな文字を入れることができます)
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/0575bbfaa7549ff8303ccc886713cb76.png)
↓ また、例えば「画像」ブロックを選ぶとサイドバーの中に画像を追加することができます。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/c240d1cefc110eb31ff41cfd8ffc1ff8.png)
↓ このように好きな画像を入れます。これでOKであれば『更新』ボタンをクリックしましょう。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/fa6b4838d674c8599be4a7769b8cedf7.png)
↓ そうすると、実際の公開画面にも追加した部品がちゃんとサイドバーに表示されました!
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/113adc4145bafff6a797166cb020712e.png)
これが、ウィジェットに好きな部品(ブロック)を追加する方法の基本です。
追加したブロックの順番を変えるには?
次に、追加した部品 (ブロック)を上に移動させたり、下に移動させたりする方法をお伝えしていきます。
まずは、「外観」⇒「ウィジェット」で、順番を入れ替えたい場所を開きます。(例:サイドバーなど)
↓ 次に、動かしたい部品(ブロック)をクリックします。(今回は段落ブロックを選んでいます)
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/227c451f4cdb78331b5f2261e2e7cb16.png)
次に、以下のように上・下の矢印メニューが出るので動かしたい方をクリックしましょう。今回は上に動かしてみましょう。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/949aefd2baad4103bf9764055d50ecfe.png)
↓ すると、以下のように部品が上に移動します。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/c63ee8d4adfffb002ffc0057fdb5bf9d.png)
↓ 動かしたい部分まで動かしたら、「更新」ボタンをクリックしましょう。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/8cf99b5a585376b8fb8f02913f26ab16.png)
↓ そうすると、ちゃんと公開画面でも順番が変わりました。
![ウィジェット設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/009863ce74a838acd2cc82ead3999364.png)
以上が、ウィジェットでWebサイトのレイアウトを変更する方法です。
ここまでできれば、ある程度WordPressサイトの基本操作はバッチリです。
次からは、WordPressテーマ「deer」の機能を紹介していきます。必要に応じて使ってみてください。
結果を出すために、派手さはいらない
「集客」に使うことだけを徹底的に考えて作ったWordPressテーマ
![deerのロゴ(白)文字入り](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/6fc9dfa4a44ab47d794f3145134a7d91-2.png)
決して多機能ではありませんが、使う機能を必要最低限に限定してシンプルにしているからこそ使いやすい、初心者さんに優しいテーマです。