SNSアイコンをヘッダーやフッターに表示させる方法

「SNSアイコンやお好きな記事のページ」をヘッダーやフッターメニューに表示させリンクさせる方法を紹介致します。

※ワードプレスでのブログの設定方法になります。

上記がモバイル表示での完成のイメージです。テーマにより完成デザインは異なります。

パソコンでも下記の感じに設置できるようになります。

今回も例のごとく、説明がわかりやすいように解説用に作ったデモサイトを使って説明します。

また、解説の分かり易さを追求すべく、テーマはシンプルな無料テーマを使っていきます。
※普段は、ジェイコブ佐藤blogは有料テーマSANGOを使っています。

PCのヘッダーにSNSアイコンなどを表示させる方法

まずはパソコンでの表示設定からやっていきます。WordPressのダッシュボードのTOP画面を開き、左側のたくさんある項目の中の

外観➡メニューを選択

新しいメニューを作成をクリック

メニュー名は、後で、携帯用メニューも作るので、それらと自分で区別できる名前なら何でもOKです。

メニュー作成をクリック

カスタムリンク➡追加

これから左側のメニューの項目を右側に追加します。SNSなどのアイコンはカスタムリンクを使います。

例えば私のサイトのように、投稿を選ぶことで、読んで欲しい記事をヘッダーに表示させることも出来ます。

カスタムリンクをクリック

URLとリンク文字列を入力する。

URLは上記の説明だけで問題ないと思います。リンク文字列はよくわからないかと思いますが、コピペで簡単にできますので安心して下さい。

コピペするアイコンの素材はこちらから入手可能です。

私のテーマは優秀だから、きっと最新版に対応している！と自信のある方は５を選んでみて下さい。(笑)

それ以外の方は4.7から選んでみたらいいです。

私の普段利用している有料テーマSANGOはFontAwesome５に対応していました。

今説明に使っているコクーンはFontAwesome4.7のみ対応でしたので、4.7を使って説明していきます。おそらくまだまだFontAwesome5に対応しているテーマ少ないかと思います。

FontAwesome4.7をクリックしますと以下の画面が表示されます。少し下にスクロールさせまして

Searchする画面があります

今回はTwitterのアイコンをゲットしたいので

Twitterと入力

すると２種類見つかりました

好みのアイコンを選択

Twitterアイコンのリンク文字列が

表示されますので

コピーします

リンク文字列に貼り付けます

<i class="fa fa-twitter-square" aria-hidden="true">Twitter</i>⇦のようにTwitter(アイコンの隣に表示させたい名前)を追加します。

URLは自分のTwitterアカウントの
ホーム画面のURLを入力

右側の項目に上記のように追加されえばOKです

同じ要領で、YouTubeだったりホーム画面やお問い合わせなど、お好きな物を追加して下さい。全て追加が終わりましたら

メニュー設定のヘッダーメニューをチェックしてメニュー保存をクリック！

これで完了です。ご自身のサイトをパソコン表示で確認下さい。しっかりツイッターなどのアイコンが表示されていると思います。

フッターにお問い合わせなどを追加する方法

では次にフッターに表示させます。フッターにはお問い合わせとプライバシーポリシーを表示させてみます。フッターの設定は今からやる作業で、携帯・PCどちらにも反映されます。

※お問い合わせをお持ちでない方はこちらを参考に作り下さい。
Contact Form 7｜簡単に「お問い合わせ」が設置できるプラグイン

それでは設定していきます。

先程と同じくダッシュボードTOP画面左の項目の外観➡メニューを選択

新しいメニューを作成しましょうをクリック

メニュー名はフッターメニュー

最後にメニューを作成をクリック

今回は固定記事に作っておいた「お問い合わせ」と「プライバシーポリシー」をフッターに載せます。

左側の固定ページを選択、その中のお問い合わせ、プライバシーポリシーにチェックを入れメニューに追加をクリック。

右側に上の画像のように追加されたのを確認したら、メニュー設定のフッターメニューにチェックを入れて、メニューを保存をクリック！

以上です！

パソコン・モバイル画面のフッターの両方に表示されているので、それぞれ確認してみて下さい。

携帯のヘッダーにSNSアイコンなどを設置する

これまでの作業をやったことにより、説明不要かもしれませんね。基本的にやることは同じです。

これまでと同じくダッシュボードTOP画面左の項目の外観➡メニューを選択。

新しいメニューを作成しましょうを選択➡メニュー名は携帯用ヘッダーメニュー➡メニューを作成をクリック。

これまでと同じように、携帯のヘッダーに表示させたい物を左の項目から追加します。

• お問い合わせは固定ページから選択してメニューに追加。
• SNSアイコンはカスタムリンクで、URLとリンク文字列を入力してメニューに追加。

右側に追加されたのを確認して、メニュー設定はヘッダーモバイルメニューにチェックしてメニューを保存をクリック。

これで携帯のヘッダーに、好きなページやSNSアイコンなどの設置が完了です。

確認してみて下さい。

SNSアイコンをヘッダーやフッターに表示させる方法｜まとめ

今回の行った設定の他にも、できることがあります。私のサイトの携帯表示を見て貰ったら分かりますが、モバイルヘッダーメニューをスライド表示させることもできます。

テーマによって対応してたり、しなかったり違いますので、色々いじって試してみて下さい。やり方は今回の内容をマスターすれば、全ての設定に対応できます。

参考までに、ヘッダーにSNSアイコンではなく、自分が見て欲しい記事を載せている方もよく見かけます。

例えば旅行の記事を書いていたら、北海道編、沖縄編などとヘッダーに載せるとアクセスされやすいかもしれません。

みなさんもぜひ色々試行錯誤してみて下さい。