Ver1.3.1をリリースしました(11/22)

モバイル用フッター固定メニューの設定方法

SANGOは「ver1.3」のアップデート以降、スマホ/タブレット用のフッター固定メニューが利用できるようになりました(パソコンでは表示されません)。このページでは、その設定方法を解説します。

フッター固定メニューの設定手順

手順1:メニューを作成する

まずはメニューの作成を行いましょう。

外観⇒メニュー

メニューページの上側にある「新規メニューを作成」をクリックします。

新規メニューを作成

手順2:メニュー名を決める

メニュー名を入力します。分かりやすく「モバイルフッター固定メニュー」などとすると良いでしょう。

手順3:カスタムリンクでメニューを追加していく

次に「ホーム」、「ホームシェア」などのメニュー項目を追加していきます。「カスタムリンク」から追加していくようにしましょう。

カスタムリンクを作成

リンク先のURL

まず、リンク先のURLは以下のように入力します。もちろん、使いたい項目だけ追加すればOKです。

リンク先のURL
  • ホーム⇒トップページのURL
  • シェア#sng_shareと入力
  • フォロー#sng_followと入力
  • メニュー#sng_menuと入力
  • トップ(へ戻る)#と入力
  • その他のページ⇒そのページのURL

※ 「https://」や「http://」の部分は削除してください。
「シェアボタン」「フォローボタン」「トップへ戻るボタン」などは、このURLを入力し間違えると、うまく機能しないので、ご注意ください。なお、シェアボタン用のメニューを追加しても、アーカイブページ(カテゴリー/タグ/日付別)には表示されないのでご注意ください。シェアメニューは投稿ページとトップページでのみ表示されます。

リンク文字列

次にリンク文字列(アイコン+テキスト)です。アイコンはFontAwesomeを利用しています。好きなアイコンを選んで使いましょう。具体的には、以下のように入力します。

リンク文字列の入力例
<i class="fa fa-home"></i>ホーム

水色の部分がアイコンのコードで、「ホーム」という文字はアイコンのすぐ下に表示されます。改行は自動で入るので、コードとテキストを詰めて並べればOKです。

アイコンコードの探し方

FontAwesomeアイコン一覧

上のボタンのリンク先からアイコンの一覧を見ることができます。使いたいアイコンをクリックすると、詳細ページが開きます。アイコンのコードが記載されているので、こちらをそのままコピペすればOKです。

ちなみにコードに含まれるaria-hidden="true"はあっても無くても構いません。

メニューのリンク文字列は別設定が必要

左から現れるナビドロワー(ハンバーガーメニューで設定したもの)を項目に含めたい場合には、リンク文字列を以下のように囲む必要があります。

メニューのリンク文字列
<label for="drawer__input"><i class="fa fa-list-ul" ></i>メニュー</label>

↑このようにlabelタグで囲むことで、タップしたときにメニューが横から表示されるようになります。よく分からなければ、上の記入例をそのままコピペして頂ければと思います。

手順4:表示させたい項目を全て追加する

↑このように使いたいメニュー項目を全て追加しましょう。参考までに入力例をまとめておきます。

メニューリンク先URLリンク文字列
ホームトップページのURL<i class="fa fa-home"></i>ホーム
シェア#sng_share<i class="fa fa-share-alt"></i>シェア
フォロー#sng_follow<i class="fa fa-thumb-tack"></i>フォロー
メニュー#sng_menu<label for="drawer__input"><i class="fa fa-list-ul" aria-hidden="true"></i>メニュー</label>
トップへ戻る#<i class="fa fa-level-up"></i>トップ

手順5:メニューの位置を選んで保存

下にスクロールし「モバイル用フッター固定メニュー」にチェックを入れて、保存します。保存を忘れないように!

手順6:カスタマイザーで設定をする

次にカスタマイザーで設定を行います。

外観⇒カスタマイズ⇒フッター固定メニュー(モバイルのみ)

「シェア」「フォロー」を使う場合はチェック

「シェア」や「フォロー」のメニューを使う場合には、こちらにチェックを入れましょう。チェックを入れないと、メニューをタップしても反応しません。

MEMO
「あらかじめボタンを仕込んでおき(隠しておき)、タップにより表示させる」というような仕組みになっています。こちらにチェックを入れないと、仕込みがされないというわけです。

手順7:フッター固定メニューの色の設定をする

最後に色の設定を行いましょう。ここは説明不要かもしれませんね。

「アクティブカラー」というのは「リンク先のページにいるとき」のアイコン/文字色です。例えば、トップページにいるときには「ホーム」のメニューがアクティブカラーになります。

手順7:フォローボタンを使う場合の設定

フォローボタン

フォローボタンをメニューに含めない場合には、こちらの手順は不要です。

フォローボタンは、「Twitter」「Facebook」「Feedly」のうち、カスタマイザーの「フォローボックス(記事下)」で入力されているものが表示されます。フォローボックスは表示させたくないという場合には[フォローボックスを表示する]にチェックは入れずに、Twitterのアカウント名やFacebookページのURLだけを入力してください。

手順8:スマホで表示を確認して完了!

カスタマイザーで設定ができたら保存をします。これで設定は完了。うまく表示されるか、スマホ/タブレットなどでチェックしてみましょう。

フッター固定メニュー


うまく表示されないときのチェックリスト

そもそもメニューが表示されない

  • テーマのverは1.3以上ですか?
  • アップデート後にキャッシュを削除しましたか?
  • スマホ/タブレットで見ていますか?(PCでは表示されません)
  • メニューは作成済みですか?
  • メニューの位置で「モバイル用フッター固定メニュー」にチェックが入っていますか?
  • 子テーマにsng-function.phpが入っていませんか?(Ver1.3のアップデートで固定メニューのために変更を行っています)

シェアボタンが表示されない/効かない

  • アーカイブ(カテゴリー/タグ/日付別ページなど)の場合には表示されません
  • メニューのリンク先URLが「#sng_share」になっていますか?
  • カスタマイザーのフッター固定メニューの設定で「シェアボタンを使用する」にチェックが入っていますか?
  • jQueryのエラーが出ていませんか?(確認方法

jQueryのエラーが出ている場合は「jQueryをフッターで読み込む」もしくは「jQueryの読み込み方を変える」ようなプラグイン(主に高速化関係のものだと思います)を入れていないかチェックしてみてください。プラグインの設定を変えるだけでも正しく動くようになるかもしれません。
例:「LiteSpeed Cache」を使用している場合には「JS Deferredをロード」をオフに

フォローボタンが表示されない/効かない

  • メニューのリンク先URLが「#sng_follow」になっていますか?
  • カスタマイザーのフッター固定メニュー設定で「フォローボタンを使用する」にチェックが入っていますか?
  • カスタマイザーのフォローボックス設定で「Twitterアカウント名」や「FacebookページのURL」が入力されていますか?

メニューが効かない

  • リンク文字列がlabelタグで囲まれていますか?(前述の解説を参照ください)

8 Comments

last

ハンバーガーメニューのスクロール時に後ろのBODYタグの中身がスクロールされる場合があるのですが、メニュー部分のみスクロールさせることはできますか?

返信する
サルワカくん

JavaScriptを使う必要があります。
はじめに、お手数ですが、下記記事の手順でJavaScriptsファイルを準備します。
https://saruwakakun.com/sango/use-js

次にscripts.jsの中に下記のCSSを追加します。

//スマホメニューの背景をスクロールさせない
$(function() {
$(‘#drawer__input’).click(function() {
if ( $(‘#drawer__input’).prop(‘checked’) == false ) {
$(‘body’).css(‘overflow’,’auto’);
} else {
$(‘body’).css(‘overflow’,’hidden’);
}
});
});

これでメニュー部分のみスクロールされるようになります。

返信する
はな

先ほど、Ver 1.3.1にアップデートしました。すると、モバイルフッター固定メニューの、#sng_menuだけが、押しても開かなくなってしまい、使えなくなってしまいました。アップデート前は使えていたのですが…。

返信する
サルワカくん

デモページ(ver1.3.1)では問題なく動いているので、テーマ以外で何かしらの問題があるのかもしれません。
原因究明をしたいので、ページURLを教えて頂けますか?

返信する
はな

返信いただきありがとうございます。URLは下記の通りです。(コメント非公開でお願いします><)
–URL非表示–
初心者につき、いろいろお手数おかけし申し訳ありません。。。

返信する
サルワカくん

どうやらハンバーガーメニュー用のウィジェットが出力されていないようです。
外観⇒ウィジェットで「スマホ用ナビドロワー(ハンバーガーメニュー)」にウィジェットは追加されていますか?

返信する
はな

教えていただいたとおりにやってみたら、、できました!
テーマ変更をしたら、ウィジェットが外れてしまったようです。
ありがとうございました。

サルワカくん

あー、そういうことですね。なんにせよ上手くいったようでよかったです!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です