Ver1.3.2をリリースしました(1/27)

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

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

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

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

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

外観⇒メニュー

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

新規メニューを作成

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

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

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

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

カスタムリンクを作成

リンク先のURL

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

リンク先のURL
  • ホーム⇒トップページのURL
  • シェア#sng_shareと入力
  • フォロー#sng_followと入力
  • メニュー#sng_menuと入力
  • トップ(へ戻る)#と入力
  • 電話ボタンtel:123456789と入力(数字を電話番号に)
  • その他のページ⇒そのページの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>トップ
電話ボタンtel:123456789<i class="fa fa-phone"></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タグで囲まれていますか?(前述の解説を参照ください)

40 Comments

last

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

返信する
サルワカくん

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

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


//スマホメニューの背景をスクロールさせない
$(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非表示–
初心者につき、いろいろお手数おかけし申し訳ありません。。。

返信する
サルワカくん

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

返信する
はな

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

サルワカくん

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

キリン

お世話になります。先日他テーマからSANGOに移行しました。上記コメントでも述べているハンバーガーメニューへのウィジェットの追加について、よく仕組みがわからなく、スマホでもメニューが効かない状態です。何をどうしたら良いのか・・・?など初心者にもわかりやすくご教示願えますか?

返信する
サルワカくん

ウィジェットの追加方法はこちらで解説しています。
外観⇒ウィジェットを開き「ナビドロワー(ハンバーガーメニュー)」の欄に、ハンバーガーメニューを開いた時に表示させたいウィジェットをドラッグすればOKです。
ご確認よろしくお願い致します。

返信する
キリン

ありがとうございました。難しく考えすぎていました。
単純に表示させたい項目のウィジェットをドラッグで良かったんですね!
至って簡単でした。。。

返信する
まるこ

お世話になっております。
モバイルフッター用の固定メニューを作成したところ、記号と文字がぴったり上下に重なるのではなく、少しずつずれて表示されてしまいました。こちらを解消する方法はありますでしょうか?

返信する
サルワカくん

なるほど。FontAwesome系のプラグインは何かいれていますか?
確認のため、可能であればサイトのURLを教えて頂けると助かります。

返信する
まるこ

ご返信ありがとうございます。
FontAwesome系のプラグインは入れてないです。

URLは〜です。(非公開でお願いいたします。)
お手数おかけして申し訳ありません。
お手すきのときにご確認いただけましたら幸いです。

返信する
サルワカくん

WP Visual Icon Fontsというプラグインが原因のようです。
以下のCSSを追加することで、対応できます(プラグインを停止する必要はありません)。

.fixed-menu ul li .fa {
  width: auto;
}
返信する
まるこ

お手数おかけして申し訳ありません!
どうもありがとうございます!!

hiroyuki

初めまして先日sangoのテーマを取り入れた、ワードプレス初心者です。
記事一覧のサムネイル画像=アイキャッチと言う認識でよかったですか?

以下のコードがスタイルシートにあるので自動的にサムネのサイズに合わせて表示されるものだと思っていたのですが、なぜか画像が切られていたり、空白が出来るような表示になっていますがサムネのカスタマイズはどこかで出来ますでしょうか?
色々と初心者的な質問で申し訳ありません…(_ _)

* 画像/埋め込みコンテンツ
*/
img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: middle;
}

返信する
サルワカくん

記事一覧のサムネイル画像のサイズがバラバラだと見た目が汚くなるため、自動で「幅520px × 高さ300px」にトリミングされる仕様になっております。
FacebookやTwitterなどでシェアされたときにもだいたいこのサイズで(トリミングされて)表示されるため、この縦横比に合うようなサムネイル画像を作成するのが良いと思います。

なお、「幅520px × 高さ300px」以下のサイズのサムネイル画像を記事に登録すると、トリミングが行われないため、空白ができてしまう場合があります。
画質を保つためにも、これ以上のサイズのサムネイル画像を登録して頂くようお願いします。

ちなみに、記事上部に表示されるサムネイル画像はトリミング無しで、そのままのサイズで表示されます。

返信する
hiroyuki

そういう事だったのですね・・・早い返信とても感謝しています。どうもありがとうございました!

返信する
ヨリメグ

ステキなテーマ、ありがとうございます。

モバイル用フッター固定メニューですが、スマホなどでWPにログインしている状態だと表示されるのですが、ログインしていないと表示されません。ハンバーガーメニューも設定済みですが、こちらも同様です。設定方法を何度も確認しましたが、原因がわからず困っています。

返信する
サルワカくん

プラグインは一度全て停止してみましたか?
おそらくですが、キャッシュプラグインが原因になっていると思います。
そのプラグインがPC用のページデータを保存(キャッシュ)して、
スマホからアクセスされたときもPC用ページデータを送ってしまっているのでは?
参考: http://shiru-web.com/2017/04/13/01-19/#i-9

返信する
ヨリメグ

まさにその通りでした!
プラグインを一度停止したらきちんと表示されました。
素早いお返事ありがとうございました!

返信する
アリス

いつもお世話になっております。
上記コメントにあるlast様の
”ハンバーガーメニューのスクロール時に後ろのBODYタグの中身がスクロールされる場合があるのですが、メニュー部分のみスクロールさせることはできますか?”
に対しての回答を実行させていただいたのですが、開いたメニューが下まで行ききった後もスクロールすると、奥のコンテンツ(記事部分)がスクロールされてしまいます(上方向スクロールも同様の現象が起きます)。これは、あくまでメニューにまだ先がある場合にのみ、奥のコンテンツがスクロールしなくなるというCSSなのでしょうか? 
長文失礼いたしました。

返信する
アリス

申し訳ありません。なんとか解決できました。「filezila」ではないソフトを使っていたため、ソフト内でjsファイルの作成ができず、他のjsファイルをコピー→サクラエディタで開き、CSSを入力→完成したjsファイルをアプロード という流れで行ったのですが、ワードプレスのテーマ編集からscripts.jsをみたところ、空白になっておりました。大変失礼しました。

返信する
サルワカくん

ご返信ができておらず失礼しました。
解決したとのこと、安心しました。

返信する
グース

ver1.3.3を使っているのですが、
#sng_shareを入力してもシェアボタンが表示されずグレーの表示が出るだけという状況です。
プラグインを全て停止して試したのですが、結果は変わりませんでした。
どこかほかに確認するかしょなどありましたらご教示いただけないでしょうか?

返信する
サルワカくん

記事にも書かれていますが、「シェアボタン機能を使用する」にはチェックを入れていますか?

返信する
グース

はい、もちろんチェックを入れております。
シェアボタン機能のみで表示されず、シェアとフォロー両方にチェックを入れても変わらずでした。

返信する
サルワカくん

そうなのですね。
原因が思い当たらないので、一度サイトのURLを教えて頂けないでしょうか。

返信する
グース

今回ブログを移転してテーマをLightningから変更したので、そのあたりで何か問題が起きているのかもしれません。
お手数おかけしてすみません。

グース

何度もすみません。
おそらく原因が判明しました。
テーマに問題があったのではなく、スマホ側の広告ブロックアプリがシェアボタンまでブロックしていたようです。
ご迷惑おかけして申し訳ありません。

カエル

SANGOを作ってくださって、ありがとうございます!!
サルワカさんのおかげで、楽しいブログ生活を送れています!(^^)

●リンク文字列の所で、アイコンが変更できず困っています。

【FontAwesomeアイコン一覧】から使いたいアイコンを選ぶ
   ↓
アイコンのコードをコピペ

してるんですが、アイコンが変更されません。。。
(入力例以外のアイコンコードにすると、アイコンが表示されずテキストのみの表示となります)

・テーマのバージョンは最新版です
・キャッシュも削除して確認しました
・ネットでも検索しましたが答えが分からず…

どのようにしたらよろしいでしょうか?
教えていただけますと幸いです(^^)

返信する
サルワカくん

そう言って頂けるととても嬉しいです。
ありがとうございます!
アイコン一覧なのですが、FontAwesomeに更新があったためURLが変わりました。こちらからアイコンをお探しして、コードをコピペして頂けますでしょうか。
(さきほど記事中のリンクURLに修正を加えました。ご迷惑をおかけして申し訳ありません)

返信する
カエル

そうだったんですね、早速やってみたら無事に変更できました!(^^)

いえいえ、全然迷惑じゃないですよ!
SANGOが素晴らしすぎて、自分のブログがもっと好きになりました!
サルワカさんのおかげです(^^)

解決策をありがとうございました!
それでは失礼いたします。

SANGOとは末永いお付き合いになりそうです\(^^)/

返信する
だいすけ

素晴らしいテーマをありがとうございます。マテリアルデザインを勉強するキッカケにもなり、すごく良い買い物でした。

今回はこちらのモバイル用フッター固定メニューに「メニュー」を導入し、出てくるナビゲーションドロワー内に「目次(TOC+)」を表示させました。

できれば目次をタップした時にナビゲーションドロワーが閉じるように設定したいのですが、何か良い方法はありますでしょうか?

例)各見出しの li a に をつけるなど⇦この方法だと記事内の目次をタップするたびにドロワーが出てしまう気もしますが……。

返信する
サルワカくん

JSファイルを用意して(手順)、下記のコードを追記したらイメージ通りになるのではないかと思います。

$(function() {
  $('#drawer__content .toc_widget a').click(function() {
    $('#drawer__input').prop('checked',false);
  });
});

よろしくお願いします。

返信する
だいすけ

早速のご返信ありがとうございます。
すごい。無事に実装することができました!
ありがとうございました!

返信する
だいすけ

サルワカさん、こんにちは。
フッター固定メニューの「フォロー」の中身を変えるにはどのファイルを修正したらいいのでしょうか?
また、Feedlyをpush7に変更にしたいと考えています。もし今後アップデートでpush7のフォローに対応するご予定などはありますか?

返信する
サルワカくん

①footer.phpを親テーマから子テーマに複製します。
②子テーマのfooter.php 43行目のfooter_nav_menu();my_footer_nav_menu();に書き変えます(新しい関数を読み込み)。
③子テーマのfunctions.phpに下記のコードを追記します(footerで読み込む新しい関数を作成)。

/*モバイルフッター固定メニュー書き換え*/
function my_footer_nav_menu(){
if(wp_is_mobile() && has_nav_menu('mobile-fixed')) {//モバイルのみ
  echo '<nav class="fixed-menu">';
  wp_nav_menu(array(
   'container' => false,
   'theme_location' => 'mobile-fixed',
     'depth' => 1
     ));
  echo '</nav>';

  //フォローボタン機能
  if(get_option('footer_fixed_follow')){
    $tw =  (get_option('like_box_twitter')) ? 'https://twitter.com/'.esc_attr(get_option('like_box_twitter')) : null;
    $fb = (get_option('like_box_fb')) ? esc_url(get_option('like_box_fb')) : null;
    $fdly = (get_option('like_box_feedly')) ? esc_url(get_option('like_box_feedly')) : null;
?>
  <div class="fixed-menu__follow dfont">
    <span>Follow</span>
      <?php if($tw) : ?>
        <a href="<?php echo $tw; ? rel="nofollow">" class="follow-tw" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i> Twitter</a>
      <?php endif;
            if($fb) : ?>
        <a href="<?php echo $fb; ? rel="nofollow">" class="follow-fb" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i> Facebook</a>
      <?php endif;
            if($fdly) : ?>
        <a href="★" class="follow-fdly" target="_blank" rel="nofollow"><i class="fa fa-bolt"></i> Push7</a>
      <?php endif; ?>
  </div>
<?php } //END フォローボタン

  //シェアボタン機能
  if(get_option('footer_fixed_share')) { ?>
    <div class="fixed-menu__share sns-dif normal-sns">
      <?php insert_social_buttons(); ?>
    </div>
<?php } //END シェアボタン ?>
  <script>
    $(document).ready(function() {
      $(".archive a[href = '#sng_share']").closest('li').css('display','none');
      $(".fixed-menu a[href = '#']").click(function(event) {
          event.preventDefault();
          $('html, body').animate({scrollTop: 0}, 300);
      })
      $("a[href = '#sng_share']").click(function(event) {
          event.preventDefault();
          $(".fixed-menu__share , a[href = '#sng_share']").toggleClass("active");
          $(".fixed-menu__follow, a[href = '#sng_follow']").removeClass("active");
      })
      $("a[href = '#sng_follow']").click(function(event) {
          event.preventDefault();
          $(".fixed-menu__follow, a[href = '#sng_follow']").toggleClass("active");
          $(".fixed-menu__share, a[href = '#sng_share']").removeClass("active");
      })
    });
  </script>
<?php
  }
}

④上のコードのうち、★の部分にPush7のフォローURLを入力します。
⑤子テーマのstyle.cssに下記のCSSを追加します。

.fixed-menu__follow .follow-fdly {
    background: #ffc55b;
}

⑥ブラウザのキャッシュを削除します。
ご確認くださいませ。

返信する
だいすけ

カスタマイズすることができました。
ご対応、ありがとうございました!!

コメントを残す

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