こんにちは。SaitouKouです。
今回はフッターにソーシャルメニューを追加していきたいと思います。
完成するとこんな感じになります。
![](https://saitokou.com/wp-content/uploads/2021/10/image-18.png)
1.新たにメニューを作成
外観 > メニュー からメニュー作成画面を開きます。
![](https://saitokou.com/wp-content/uploads/2021/10/image-19.png)
メニュー画面を開いたら、「新しいメニューを作成しましょう」をクリック。
![](https://saitokou.com/wp-content/uploads/2021/10/image-20.png)
すると下のような画面になるので、メニューの名前を入力し、右下の「メニュー作成」をクリックし、新しいメニューを保存します。ぼくはここで「Social」というメニューにします。
![](https://saitokou.com/wp-content/uploads/2021/10/image-21.png)
2.メニュー項目を作成。
手順は以下の通りです。
- 左側サイドバーに入力する。
URL:facebookなどへのリンク
リンク文字列:※なんでもOK 理由は後述 - 「メニューに追加」ボタンをクリック。
- 右の「メニュー構造」欄に追加される。順番をドラッグ&ドロップで変更。
- 「メニュー設定」欄の「サブメニュー」にチェック。
- 右下の「メニューを保存」をクリック。
![](https://saitokou.com/wp-content/uploads/2021/10/image-22.png)
これで設定完了です。
3.ページ確認
上記までの設定を行うと、下図のように表示されます。
![](https://saitokou.com/wp-content/uploads/2021/10/image-23.png)
各ソーシャルメディアのアイコンが表示されていますが、本テーマではURLを判別して、勝手にアイコンに変更してくれるようです。なので、リンク文字列は何を入力してもアイコンになります。アイコンを表示したい場合はちょっとだけラク(笑)
ちなみにTwentyTwentyでも設定してみましたが自動で変更はされませんでした。
![](https://saitokou.com/wp-content/uploads/2021/10/image-24.png)
まとめ
今はSNSと連携してホームページを作ることが多いと思いますので、Twenty Twenty-Oneに限らずソーシャルメニューは作っておいて損はないと思います!
デモサイト↓↓
Twenty Twenty-One デモサイト
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。