Ver1.6 Released !

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

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:カスタマイザーで設定をする

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

外観⇒カスタマイズ⇒SANGOオリジナル機能の管理⇒モバイルフッター固定メニュー

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

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

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タグで囲まれていますか?(前述の解説を参照ください)

112 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;
}

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

返信する
だいすけ

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

でるた

お世話になっております。
モバイル用フッター固定メニューを設定したのですが、スマホでチェックすると、動作が不安定なのです。クリックしても反応したり、しなかったり。
ページのフッターまでスクロールすれば、さすがに反応しやすくなるようですが。
どうすればいいでしょうか?

返信する
サルワカくん

iOSをお使いでしょうか。
iOSの場合、ブラウザ(Safari)で下にスクロールしたときに、(Safariの)フッターメニューバーが隠れる仕様になっています。
フッターメニューバーが隠れている場合、画面下部あたりをタップするとSafariのフッターメニューが表示されてしまいます。
(1回目のタップではSANGOのフッターメニューが反応する前に、Safariのフッターメニューの表示が優先されてしまうというわけです。)

iOSの仕様であるため、あまり手のうちようがないのですが、ひとつだけ対策があります。
それはSafariのフッターメニューバーを常に表示させておくという技です(参考)。

@media only screen and (max-width: 480px) {
  #container {
    height: 100vh;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

上記のCSSを追加してみると良いかもしれません。

返信する
CM

メニュー作成の注意書きに
※ 「https://」や「http://」の部分は削除してください。
とありますが、指示通りにしてメニューを保存すると、自動でhttp://など挿入されてしまいます。
これは問題ありませんか?

返信する
サルワカくん

カスタムリンクで挿入すればhttpsなどは消去後は自動で入らないと思うのですが…。再度ご確認頂けますか?

返信する
CM

カスタムリンクで挿入した後、URLの入力項目でhttp://を削除して、「メニューを保存」ボタンを押しているのですが、毎回http://が自動で挿入されてしまいます。

返信する
サルワカくん


このように入力した状態で保存した場合に「https://#sng_share」となるということですか?
私の方で様々な環境で試してみましたが、そのような現象は起こりませんでした。
WordPressのバージョンが最新になっているかご確認頂き、それでも直らない場合にはプラグインを一旦全て停止して同現象が起きるかご確認ください。

返信する
CM

#sng_shareのように先頭が#で始まるリンクにはhttp://は自動挿入されません。通常のサイトのアドレス、例えばyahoo.co.jpを入れると先頭にhttp://が自動で挿入されます。

サルワカくん

あ、そういうことですね。
yahoo.co.jpのようなリンクを貼る場合には、httpsやhttpを消す必要はありません。
分かりづらくてすみません。

CM

了解しました。
サポートありがとうございます。

tokyohyggehouse

お世話になります。sangoとても使いやすく重宝しております。
さて、フッター固定メニューは無事起動したのですが、アイコンが一部表示されない
という状態になっております。
各投稿の下部に出てくるシェアのアイコンも表示されない状況です。
プラグインを全て停止してみましたが、状況変わらず。。
FontAwesome5を使ってからの不具合のようなのですが、何か原因などおわかりになりますでしょうか。
現在はフッター固定メニューは一旦停止しております。各投稿の下部のシェアの表示で状況をご確認いただけると幸いです。

よろしくお願い致します。

返信する
サルワカくん

お世話になります。
SANGOでは、FontAwesomeのVer.4を利用しています。FontAwesomeではVer.4とVer.5でアイコン名が異なるため、Ver.5のデータを読み込んでいると、アイコンが表示されないことがあります。Ver.5の読み込みタグは外して頂き、Ver.4のアイコン一覧から使用するアイコンを選択して頂くようお願いします。

返信する
tokyohyggehouse

早速のご返信ありがとうございます。ve5を外し、ver4のアイコン一覧から選択しましたが、改善されませんでした。はてなとlineのみ表示されてその他は表示されずという状況です。何か他に御心あたりあれば教えてください。よろしくお願い致します。

返信する
サルワカくん

サイトを拝見したところ、やはりFontAwesome4ではなく5が読み込まれているようです。
(ブラウザでサイトのソースコードを表示して、fontawesomeと検索して頂くと分かるかと思います)
functions.phpなどで読み込みコードを変えるカスタマイズはされておりませんか?
あるいは、キャッシュ系プラグインを使用されている場合、以前のデータが表示されてしまっている可能性もあります。

返信する
ハラッコ

お世話になっております。
ブログ作成ではSANGOを愛用しておりますが、
アフィリ用のLPではカラフルというのを薦められ買ってみましたがどうも性に合いません。
LP制作でもSANGOを使用したいのですが、ただ一点、
スクロールに追従する、それぞれの固定ページで独立したボタンが欲しいのです。
コーディングは出来ないので手も足も出ません。
何か良い方法はないでしょうか?
これが出来れば、LP制作でも最強のテーマとなると思います。
テストページはこんな感じです。
https://tokimeki-shop.info/shop/button

返信する
サルワカくん

わりと簡単にできます。子テーマのstyle.cssなどに以下のCSSを追記。

.footer-fixed-btn {
  position:fixed; 
  bottom: 15px;
  left: 0;
  width: 100%;
  z-index: 999;
  text-align: center;
}
.footer-fixed-btn a {
  display: inline-block;
  width: 90%;
  max-width: 450px;/*最大幅*/
  padding: .5em 1em;
  background: #ec5f5f;
  color: #FFF;
  font-weight: bold;
  font-size: 1.25em;/*文字サイズ*/
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.totop {/*上に戻るボタンはかぶるので消しておく*/
  display: none!important;
}

ボタンを表示したいページの投稿編集画面を開き、「テキスト」エディタのどこかに

<div class="footer-fixed-btn"><a href="リンク先URL">ボタンテキスト</a></div>

を追加。分かりやすいようにテキストエディタの一番下に貼り付けるのが良いかと思います。
リンク先URL、ボタンテキストはページごとに変えてくださいませ。

返信する
あっきー

お世話になります。
こちらのモバイル用フッター固定メニュー表示幅が広くなってしまいcopyrightの部分が半分隠れたり、シェアの表示も幅が広くなった分、隠れてしまうという現象がおきています。解決方法を教えてください。

返信する
サルワカくん

なるほど・・・!ちょっと原因がわからないので、サイトのURLを教えて頂けないでしょうか。

返信する
サルワカくん

なるほど。どうやらメニューテキストまわりに余計な改行タグ(br)が入り込んでしまっているようです。
(たぶんWordPressのシステムが何らかの理由でメニューテキストを整形しています)
対処法ですが、以下のCSSを追加すれば良いかと思います。

.fixed-menu ul li a br {
    display: none;
}
返信する
サルワカくん

けっこう複雑なカスタマイズが必要になりそうなので、
時間が出来たときにカスタマイズガイドに書こうかと思います。
申し訳ないです。

返信する
ロキ

お返事遅くなり申し訳ありません。
よろしくお願い致します!
それともう一つ質問なのですが、記事の下に表示される
次の記事と前の記事を非表示にすることは可能でしょうか?

返信する
ひまわり

サルワカさま

こんにちは。素晴らしいテーマの作成、そしてまた素敵なアップデートをどうもありがとうございます。ブログの更新がさらに楽しくなりました。

今回は上記の質問にあります、
>フッター固定メニューの「フォロー」の中身を変えるにはどのファイルを修正したらいいのでしょうか?
の質問と少々似ているのですが、改めて質問させてください。

Q.フッターのフォローボタンの一番左端「Follow」をYouTubeに、一番右端の「feedly」をインスタグラムに変更したいです。上記の質問の回答を見ながら子テーマを使って自分でやって見たのですが、うまく反映されませんでした。
もしご迷惑でなければ、footer.phpの構造と変更方法を教えていただくことは可能でしょうか。
お忙しい中大変失礼いたします。どうぞよろしくお願いします。

返信する
サルワカくん

よくある質問に「フッター固定メニューの「フォロー」にInstagramを追加したい」を追加しました。
こちらを参考に、さらに以下のように設定すれば、YouTubeフォローボタンが表示されるかと思います。
①Feedly欄を空に(出力されない)

<a href="★InstagramのURL★" class="follow-insta" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i> Instagram</a>

のすぐ下に以下のようなYouTube用のコードを追加

<a href="★YouTubeのURL★" class="follow-youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube-play"></i> YouTube</a>

③子テーマのstyle.cssにさらに以下のCSSを追加

.follow-youtube {
    background: #f0504f;
    height: 50px;
}

ご確認お願いします。

返信する
ひまわり

サルワカさま

お忙しい中、とってもわかりやすいご説明をどうもありがとうございました。
Instagram同様、youtubeも無事設置することができました。

とっても機能性が高く、デザインも素敵で、魅力たっぷりのSANGOのテーマに惚れ込んでいますが、ここまで細かくご丁寧に素早くご対応していただけることがさらに嬉しく、本当に心から感謝しております。

今後ともよろしくお願いいたします。

返信する
宮本

本当に素敵なテーマをありがとうございます。大変重宝させて頂いております。
痒い所に手が届く親切なアップデートや改善方法の情報提供も、いつも嬉しく思っております。

僕はウェブ初心者で、これが変な質問だったら申し訳ないのですが

【質問】
モバイル用フッター固定メニューの『フォロー』のボタンから、
インスタグラムアカウントへのリンクを表示させる事は、可能でしょうか。

この記事の方法で、モバイル用フッター固定メニューのフォローボタンから、Twitterアカウントへのリンクは表示させる事が出来ました。
最近して下さったアップデートで、フォローボックスにインスタグラムアカウントのリンクを表示させる事が出来るようになりました。

このインスタグラムアカウントへのリンクを、モバイル用フッター固定メニューでも、表示させたいのです。

既出の質問でしたら、申し訳ございません。
いつも誠にありがとうございます!

返信する
宮本

サルワカ様。迅速なご対応を誠にありがとうございました。
早速、リンク先に書かれていた方法を試させて頂きましたが、申し訳ございませんが、うまく行きませんでした。

【状況報告】
●子テーマのfunctions.phpに指示されたコードを貼り付けました。(★で指示された部分を自分のinstagramのurlに書き換えました)
●子テーマのstyle.cssに、指示されたCSSを貼り付けました。
●双方、ファイルを更新しました。
●PCも、モバイルも、ブラウザのキャッシュをクリアしました。

⇒サイトを確認したところ、モバイル用フッター固定メニューは更新前のまま、ツイッターのフォローリンクは表示されますが、
インスタグラムのフォローリンクは表示されませんでした。

決して急ぎでは無いので、お時間がある時にご確認いただけましたら幸いです。
初心者のミスでしたら、申し訳ございません。
お手数ですが、よろしくお願い致します。

返信する
サルワカくん

確認したところ、functions.phpに貼り付けて頂いたコードに不備がありました。
(feedlyのフォローボタン設定がされていないと、Instagramボタンまで表示されないコードになってしまっていました)
申し訳ないのですが、もう一度よくある質問の「フッター固定メニューの「フォロー」にInstagramを追加したい」のコードを貼り付け直してみて頂けますか?
(コードを修正しました)

返信する
宮本

サルワカ様。迅速なご対応を誠にありがとうございました。
修正して頂いたコードを貼り付けましたが、うまく行きませんでした。何度も申し訳ございません。

【状況報告】
●修正して頂いたコードを貼り付け直し、更新し、キャッシュをクリアしました。(コードの★の部分に、instagramアカウントのURLも書き換えました)
⇒変わらず、モバイル用フッター固定メニューには、既に設定してあった「Twitter」のフォローボタンのみが表示されます。

●試しに「feedly」のフォローボタンを新しく設定してみたところ、モバイル用フッター固定メニューに「Twitter」と「feedly」のフォローボタンは表示されましたが、「instagram」のフォローボタンは表示されませんでした。

●フォローボックスには、しっかりと「Twitter」「feedly」「instagram」の三種類のボタンが表示されています。(ボタンのリンク先も正しかったです)

本当に、お時間がある時でかまいませんので、ご確認いただけますと幸いです。いつもお忙しい中、ご対応をありがとうございます。

サルワカくん

おかしいですね・・・。子テーマに貼り付けたfunctions.phpが反映されていないようです。
(実際にPHPコードを見てみないと分かりませんが)
子テーマにfooter.phpが入っていて、その中でモバイルフッター固定メニューの関数名を書き換えたりはしていませんか?
43行目がfooter_nav_menu();でなければ、別の関数が読み込まれてしまっています。

宮本

サルワカ様。いつも迅速でご丁寧なご対応を、誠にありがとうございます。
頂いたアドバイスを元に、色々と試してみました。

【状況報告】
●子テーマ(sango child)のfooter.phpを見る方法が分からなく、とりあえず親テーマ(sango1.4)のfooter.phpを見ました。43行目には

と書かれていました。

●今は、何か余計なプラグインが邪魔をしているのでは?と思い、よく見て洗い出しているところです。

結論としましては、あまりにも初心者なもので「何が具体的な問題なのかが分からない」という状態ですので、もう少し勉強して具体的な問題が分かりましたら、またご相談させて頂きます。
いつも暖かい御心遣いを、誠にありがとうございます!

サルワカくん

今気づいたのですが、子テーマのfunctions.phpに貼っていただいてる関数名が間違っておりました・・・。
子テーマのfunctions.phpのmy_footer_nav_menuという文字列をfooter_nav_menuに変えてみて頂けますか?
申し訳ないです。

宮本

サルワカ様。
ありがとうございます!ばっちり上手く行きました!
何度も丁寧にご対応して下さり、本当に感謝しております。ありがとうございました!
サルワカ様とSANGOのご成功を、心よりお祈り申し上げます!

はぎ

大変素晴らしいテーマのご提供ありがとうございます。先日購入させて頂いたWP初心者です。
モバイル用固定フッターメニューの背景色について質問させて頂きます。
選択した背景色を少し透過させたいのですが、カスタマイズの色設定からは不可能でしょうか?
お手隙のときにご教示頂けたら幸いです。宜しくお願い致します。

返信する
サルワカくん

子テーマのstyle.cssに以下を追加してみて頂くと良いかと思います。

.fixed-menu ul {
  background: rgba(255, 255, 255, 0.8);
}

0.8の値が不透明度ですね。0.6とかにするともっと透明になります。

返信する
はぎ

迅速なご対応ありがとうございました。
無事設定できました!これからもテーマを利用しながら知識を付けていきます!
ありがとうございました!

返信する
ムラサキ

サルワカ さま
 いつもお世話になっています。SANGOのおかげでブログ制作が楽しくなりました。

 質問は、記事下に表示されるSNSのボタンについてです。
 このシェアボタンを全て表示させなくすることはできるのでしょうか?

 用意ができたら、ブログのトップページにインスタなどのシェアボタンを埋めこみ、記事下にはシェアボタンが表示されないようにしたいです。

 既出の質問でしたら申し訳ありません。
 ご教示のほどよろしくお願いします。

返信する
フクロウ

はじめまして、このたび初めて有料テーマを使用させていただきました。
これまでとは違いカスタマイズが豊富でとても楽しく使用させていただいております。

さて、「モバイル用フッター固定メニュー」の作成で各ボタンの作成~表示まではできましたが、フォローボタンとシェアボタンは表示はあるもののなにもアクションができません。
表記の手順やチェックはしてみましたが改善されませんでした。
アドバイスいただけると幸いです。

返信する
サルワカくん

jQueryの読み込みを遅らせるプラグインを入れていると
そのような現象が起こる場合があります。
一度プラグインの確認と、プラグインの設定の見直しをお願いします。

返信する
フクロウ

ご連絡ありがとうございます。
「Head Cleaner」というプラグインを停止すると改善されました。
引き続きSANGOを楽しませていただきます。

返信する
81

モバイル用フッター固定メニューを使いたくて取り付けたところ、モバイルでシェアボタン表示されクリックできることこまできました。
リンク先の表示が5つ表示され内、3つが「□の中に×」という表示になっています。
TwitterやFacebookのマークを正しく表示したいのですが、原因がわからず・・・
という具合です。 
また。シェアのリンク先の選択など自分でできるものでしょうか?

SANGOは初心者の私でもHPを作る楽しさを教えてくれました。
私が初心者のため見落としていることが原因かもしれませんが
アドバイスお願いいたします。

返信する
81

モバイルでシェアボタンを押すと、
はてなブックマーク
LINE 
のマークは表示されますが

Twitter Facebook Poket
この3つだけ □の中に×マークが表示されます。
ちなみにクリックは正常に行われるのですべてリンク先へ繋がります。
モバイルでみるアイコンの表示だけがうまくいきません。

返信する
サルワカくん

この件、返信したと思うのですが、読まれましたか?FontAwesome5のコードを貼っているのが原因です。(シェアボタンのアイコンにはFontAwesome4.7が使われています。)

返信する
81

なんどもすみません。ご指定のもの4.7に変更しました。
ただし状況変わりません。
他に何か設定などあるんでしょうか。。。

サルワカくん

ソースコードを見ると、headタグ内にFont Awesome5のコードが貼られています。
こちらが貼られていると、自動でページ全体にFontAwesome5が適用されてしまいます。
このコードを削除して頂ければ、シェアボタンは表示されるようになります。
カスタマイズでアイコンを使用される場合には4.7の中から選んで頂ければと思います。

81

ご対応ありがとうございました。なんとかご説明の意味を説くことができました。

キム

ご指示の通りやって無事にモバイルフッダーメニューを作ることができました。しかし、シェアボタンだけが、押しても反応しません。子テーマを停止しても治りません.もし、解決策があるようでしたらご教授下さい。

返信する
サルワカくん

確認したところすべてカスタマイズのミスが原因のようです。
すみませんが、カスタマイズのミスにより生じた不具合に対してはこちらでは対応できません。
テーマのstyle.cssを最初の状態に戻せば、デザイン崩れはなくなると思います。

返信する
キム

記事やページ下にあるシェアボタンボックスをすべて消したいのですが、どうやっても消えません。実は上記のトラブルもこれのために起きています。(テーマ入れ直しで治りましたが)
にあるご説明の通りにやると、ページが表示されなくなります。
解決策を教えて下さい。よろしくお願いします。
それから、ほかのページで質問させていただきました、パンくずリストに関してもお答え頂けると助かります。(そのほかの問題は何とか自力で解決しました)

返信する
うい

サルワカさま

はじめまして。いつもお世話になっております。

ひとつ質問なのですが、モバイルフッター固定メニューを表示させると、詳細設定内の「スマホ/タブレットではサイドバーを非表示にする」にチェックを入れても効かなくなる仕様でしょうか?

モバイル環境では、フッター固定メニューがあれば新着記事下に表示されるサイドバーの要素は不要かなと思い、非表示にしたいと思ったのですが、フッター固定メニューが表示させているともれなくサイドバーも表示されてしまうようです。

仕様であれば諦めますので、ご教示いただけますと幸いです。宜しくお願いいたします。

返信する
サルワカくん

いえ、そのような仕様にはなっておりません。
ただし「スマホ/タブレットではサイドバーを非表示にする」オプションは、チェックボックスの下に書かれているように、投稿/固定ページでのみ有効です。
モバイルで投稿/固定ページを開いたときにもサイドバーが表示されてしまいますか?(その場合、キャッシュプラグインやカスタマイズが原因になっている可能性があります)。

返信する
うい

ご回答をありがとうございます。

確認いたしましたところ、投稿/固定ページではサイドバーが非表示となっていました。
「スマホ/タブレットではサイドバーを非表示にする」オプションはトップページに適用されない旨、私の認識不足でした。

解決いたしました。迅速なご対応をありがとうございました。

返信する
メルシー

お世話になっております。
私の何かの設定ミスや見落としであるとは思うのですが、フッターメニューをスマホで選択した際に、スマホ用ナビドロワーが表示されてしまいます。(フッターメニューとモバイルフッターメニューはそれぞれ設定しています。)
PCでは問題なく、フッターメニューからリンク先が表示されます。
もし想定出来る原因が分かれば教えて頂ければと思います、よろしくお願い致します。

返信する
サルワカくん

フッターメニューのナビゲーションラベルに、「利用規約」という文字列やFontAwesomeのコード以外のタグが混じっていませんか?
おそらくlabelタグなどを含めてしまっているような気がするのですが

返信する
コナン

初めまして。とても素敵なテーマでいつも記事の更新が楽しみです。ありがとうございます。
カテゴリごとに表示するメニューを切り替えることはできないでしょうか?
例えば
カテゴリ【ドイツ】ではドイツのホテルランキング・おすすめのドイツ語スクール
カテゴリ【フランス】ではフランスのホテルランキング・おすすめのフランス語スクール
などが表示されるようにフッダーメニューやヘッダーメニューを切り替えるなどです。

そのような方法はできないでしょうか?

返信する
サルワカくん

少し難易度高めですね・・・。WordPress(php)の知識がある程度ないと厳しいかもしれません。
header.phpにナビメニューのコードが書かれているため、子テーマにheader.phpを複製し、
カテゴリーの条件分岐タグにより
特定のカテゴリーのときだけ別のメニュー(ul liのリスト)を表示させるように修正すると良いかと思います。

<?php if( in_category('カテゴリーID') ) : ?>
  <ul>
     <li><a href="URL">特定のカテゴリーで表示するメニューアイテム1</a></li>
     <li><a href="URL">特定のカテゴリーで表示するメニューアイテム2</a></li>
     <li><a href="URL">特定のカテゴリーで表示するメニューアイテム3</a></li>
  </ul>
<?php else: ?>
  <?php //PC用
    ヘッダーナビ〜省略〜
    //end ?>
<?php endif; ?>
返信する
こっこ

サルワカ様素敵なテーマ有難うございます。
デザインが気に入って初めてのwpのテーマとして使わせて頂く事にしました。

モバイル固定フッターメニューで上手く行かない事があったので質問させてください。
現在wpテーマはsango 子テーマはPORIPUを利用しています。

とりあえず固定フッターメニューがどのように表示されるか確認する為、手順通りにカスタムリンクを設定しました。

ホーム シェア フォロー メニュー は見本通りにアイコンとテキストが表示されましたが、トップのアイコンが □ のように表示されてしまっています。

自分なりに調べたのですが、わかりません。PORIPUがFont Awesome 5対応だからでしょうか?Font Awesome 5だと、見本の曲がった矢印のアイコンが有料になっているからでしょうか?

ただ、PORIPUがFont Awesome 5を読み込んでいて、見本と同じアイコンが有料だから、□のように表示されていると仮説を立てて、別のFont Awesome 5フリーアイコンのコードを使ってみたのですが、今度は、アイコンとテキストが改行されず並んで表示されていしまいます。

どうしたらいいのかわからないので、解決策を教えて頂けないでしょうか?

返信する
サルワカくん

なるほど。

.fixed-menu ul li i {
    font-size: 24px;
    display: block;
    width: auto;
}

というCSSを追加することで、アイコンとテキストが改行されるようになるかと思います。

返信する
匿名希望

シェアボタンを非表示にしていますが、グレーの背景が残ってしまっているので、そちらも非表示または白背景にしたいのですが、どのように行えばよろしいでしょうか。

返信する
サルワカくん

以下のCSSは試されていますか?

.article-footer .footer-contents .sns-btn {
    display: none;
}

もし、フォローボックスも表示しており、その背景部分のグレイまで消したい場合には、以下のCSSを追加すればOKです。

.like_box {
    background: transparent!important;
}
返信する
しんご

使いやすいテーマ、ありがとうございます。
モバイル用フッター固定メニューのawesomeアイコンのサイズを変更することはできるのでしょうか?  fa-4x とかでやっても効かないのですが。
教えて頂けると助かります

返信する
サルワカくん

以下のようなCSSを追加することでサイズ変更が可能です。

.fixed-menu ul li .fa {
    font-size: 28px;
}
返信する
えーす

素敵なテーマありがとうございます。

スマホから見た時に以下が表示されません。
(設定したときは反映されますが時間が経つと消えます)
・モバイル用フッター固定メニュー
・メニュー
・ナビゲーションラベル

こちらで見落としあるかもしれませんがおわかりの点あれば教えていただきたいです。

返信する
サルワカくん

よくある原因としては
① キャッシュ系のプラグインによりモバイルでも、PCと同じデータが表示されている(その場合、プラグインの設定を見直す必要あり)
② AWS Cloudfrontを使っている場合、キャッシュでページを表示している
③ メニューを正しく設定できていない
ですね。
①の場合、「モバイルではキャッシュしない」というような設定にチェックを入れれば直るかと思います。

返信する
えーす

ご丁寧にありがとうございます。
キャッシュ系のプラグインの設定かもしれません、完全に解決していませんがもう少し調べつつ修正していきます。ありがとうございました!

返信する

コメントを残す

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