ワードプレステーマ「THE SONIC」でモバイルフッターメニューを設定する方法

ついに発売となったWordPressテーマ「THE SONIC」。
本サイトでも使っていますが、とても素晴らしいテーマです。
ぜひレビュー記事も読んでみてください。

https://nobilog.tokyo/wp-content/uploads/2019/12/nobiicon1.png

のび

こんにちは。ノビです！

THE SONICの発売前βテストに参加しました！

ワードプレステーマ「THE SONIC」では、簡単にモバイルフッターメニューを作成することができます。

近年、ますますモバイルユーザーが増えてきています。

効果的なモバイルフッターメニューを設置して、サイト内の回遊率や拡散効果を狙いましょう！

本記事では、ワードプレステーマ「THE SONIC」でのモバイルフッターメニューの作成方法をご紹介します。

クリックできる目次

モバイルフッターメニューとは？

WordPress（ワードプレス）テーマ「THE SONIC」でのモバイルフッターメニューの作成方法（１） — モバイルフッターメニューの例

モバイルフッターメニューとは？

モバイルフッターメニューとは、スマホユーザーに対して、最下部に表示する専用のメニューのことです。

モバイルフッターメニューには、例えば、上図のように、ホームに戻るボタン、シェアボタン、フォローボタンなど、様々な機能を持ったボタンを配置することができます。

point

モバイルフッターメニューは、スマホユーザーに対して、最下部に表示するメニュー。様々な機能を配置できる。

モバイルフッターメニューの効果とは？

近年、スマホでウェブを閲覧する人がますます増加しています。

モバイルフッターメニューは、スマホで閲覧するユーザーに対して、

ホームに戻る
シェアする
SNSをフォローする

などの機能を分かりやすく提供します。

モバイルフッターメニューによって、PCに比べて画面の小さいスマホユーザーであっても、円滑にブログ・サイト内を回遊できるようになります。

モバイルフッターメニューのおすすめリンク先は？

モバイルフッターメニューのリンク先は、「このようにしなければならない」といった決まりはありません。

好きなURLへのリンクを貼ることができます。

ちなみに、本サイトでは、以下のようなモバイルフッターメニューにしています。

WordPress（ワードプレス）テーマ「THE SONIC」でのモバイルフッターメニューの作成方法（２）

僕のおすすめは、サイト内を円滑に回遊できるようにするボタン（「ホーム」や「トップ」など）と拡散効果を狙うボタン（「シェア」や「フォロー」など）を配置することです。

もしよかったら参考にしてください！

ワードプレステーマ「THE SONIC」でモバイルフッターメニューを設定する方法をご紹介します。

モバイルフッター用のメニューを作成する

まずはじめに、モバイルフッターメニューのベースとなるメニューを作成します。

STEP
ダッシュボードメニューの外観のメニューを選択し、上部に表示される新しいメニュを作成しましょうを選択します。

メニュー名を入力し（例えば「モバイルフッターメニュー」などと入力しましょう）、メニューを保存を選択します。
STEP
モバイルフッターメニューのチェックボックスを選択します。
STEP
モバイルフッターメニューとして表示したい内容を入力していきます。
モバイルフッターメニューには、投稿ページ、固定ページ、カテゴリーなど、様々なものを配置することができますが、カスタムリンクを設置する方法をおすすめします。
STEP
カスタムリンクとは、任意のURLをモバイルフッターメニューに配置することが出来るものです。
リンク文字列は、モバイルフッターメニューに表示する文言を設定する項目となります。

THE SONICのショートコードを使えば便利なモバイルフッターメニューが作れる！

WordPressテーマ「THE SONIC」では、「ホームに戻る」、「シェアする」など、頻繁に使うメニューの役割を持たせるショートコードが設定されています。
例えば、「ホームに戻る」のショートコードを、先ほどのカスタムリンクのURLに入力すれば、「ホームに戻る」の効果を持ったモバイルフッターメニューが出来上がるのです。

WordPressテーマ「THE SONIC」のショートコードは以下の通りです。

URLに入力するショートコード	役割
/	ホームに戻る
#	ページのトップに戻る
#tsnc_menu	ハンバーガーメニューを表示する
#tsnc_share	シェアボタンを表示する
#tsnc_follow	フォローボタンを表示する

上記のショートコードをカスタムリンクのURLに入力し、リンク文字列にはモバイルフッターメニュー上で表示させたい文言を入力しましょう。

FontAwesomeを使ってオシャレなモバイルフッターメニューにしよう！

カスタムリンクのリンク文字列に入力する内容は、ただの文字でも良いのですが、それだと味気ないモバイルフッターメニューになってしまいます。

そこで、「FontAwesome」を使えば、下図のように「マーク」を入れることができますよ。

WordPress（ワードプレス）テーマ「THE SONIC」でのモバイルフッターメニューの作成方法（７）

FontAwesomeとは？

FontAwesomeとは、ブログやウェブサイト上で使える絵柄のフォントを提供してくれるサービスのことです。

一部の絵柄フォントは有料ですが、無料でも多数の絵柄フォントを使うことができ、オシャレなサイト作りには必須のサービスと言えるでしょう。

ワードプレステーマ「THE SONIC」でFont Awesomeを使う方法をご紹介します。

STEP
ダッシュボードメニューの外観のカスタマイズを選択します。
STEP
表示されるメニューの一番下の追加CSSを選択します
STEP
以下のコードを追加CSSとして入力します。

Font Awesomeを使うための追加CSS

.header-info a:before {
content: “\f138”;
font-family: “font awesome 5 free”;
font-weight: 600;
margin-right: .3em;
}

これでWordPressテーマ「THE SONIC」でFont Awesomeを使うための準備ができました。
STEP
FontAwesomeのサイトから、使いたい絵柄フォントのショートコードを入手します。

例えば、「ホームに戻る」機能を持たせる部分には、家のマークとなる以下のショートコードを使うのが良いでしょう。

Font Awesomeのショートコード入手方法

Font Awesomeのサイト上で、使いたい絵柄フォントを探します。

使う絵柄フォントが決まったら、上部（赤部分）のショートコードをコピーします。