【購入者限定】STORK(ストーク)にフッター固定メニューを導入する方法(非プラグイン版)

STORK(ストーク)にフッター固定メニューを導入する方法
【重要】WordPressプラグイン版
2018年2月6日に「プラグイン版」をリリースしました。
プラグイン化により設定が簡易になっております。機能的な変更はありません。

プラグイン版
最終バージョン
1.2(2018年4月16日 更新)
ダウンロード jstorkfooter.zip
使用方法 「STORK(ストーク)固定フッター」プラグイン 販売&説明
従来の非プラグイン版との併用はできませんので、削除した上でプラグイン版をご使用ください。
購入していない第三者にダウンロードURLを伝えるのは絶対におやめください。
不正なダウンロードを発見した場合には調査いたします。

この度は「STORK(ストーク)にフッター固定メニューを導入する方法」をお買い上げいただき、ありがとうございました!

このページは購入者限定でアクセスできるページとなります。

第三者にアクセスパスワードを漏らさないようにお願いします。

それでは、フッター固定メニューを導入する方法をご紹介します!

更新履歴

2018年 4月16日プラグイン版 最終更新
2018年 2月6日STORK(ストーク)固定フッター WordPressプラグイン版公開
2017年 8月24日STORK用フッター固定メニューv1.1 アップデート
2017年 6月26日「電話発信メニュー」実装例を追加
2017年 4月12日STORK用フッター固定メニューv1.0 販売開始

注意事項

フッター固定メニューを導入する作業に伴い、操作を誤りファイルを間違えて消してしまった、記述を間違えて画面が真っ白になってしまった

といったことが発生する可能性があります。

WordPressのファイルはご自身であらかじめバックアップを取っていただくなどをして、十分に気をつけて作業を行ってください。

必ず作業前の状態に戻せるようにしてから作業に臨んでください。

注意
ご自身の作業内容によってブログに不具合が発生した場合、いかなる被害や損害に関しても、当サイト及び管理人は一切の責任を負いかねます。ご自身のご判断と責任でご利用ください。
注意
今回用意したプログラムにもしも不具合がございましたら修正対応しますのでお問い合わせください。

STORKの子テーマを導入する

STORKテーマをカスタマイズするにあたり、子テーマの導入が必須となります。

子テーマを導入していない方は、まずはSTORKの公式サイトを元に、子テーマを設定してください。

子テーマの導入に関して
STORK本体(親テーマ)のソースをいじると、テーマがバージョンアップした際に、自分で行ったカスタマイズが消えてしまうことがあるので、必ず子テーマを導入するようにしましょう。

なお、STORKの子テーマを導入すると、テーマファイルの構成は以下のようになります。

親テーマ/example.com/public_html/wp-content/themes/jstork
子テーマ/example.com/public_html/wp-content/themes/jstork_custom

※「example.com」の部分は、サンプルの文字列となります。「jstork_custom」が子テーマのディレクトリ(フォルダ)になります。

フッター固定メニューの完成形

今回のフッター固定メニューの設置どおりに作業が完了すると、以下のようなメニューがスマホでの閲覧時に表示されます。

変更が可能な方は自由に変更可能です。

それぞれのボタンは、以下のような挙動をします。

ホームトップページへのリンク
メニューメニューをポップアップ表示(ヘッダーのハンバーガーメニューをタップした際と同様の動き)
最新記事最新記事へスクロール
フォローフォローボタンをフッターに表示(Twitterとfacebook)
SNSでシェアSNSシェアポップアップを表示
トップページ最上部へとスクロール

それぞれのボタンをタップした際に表示される画面は以下となります。

「メニュー」をタップ

「最新記事」をタップ

サイドバーに「最新の投稿」ウィジェットが必要となります。

「最新記事」の設定方法

「最新記事」を設定されたい方は、以下を参考にしてください。

管理画面より、

「外観」 → 「ウィジェット」

と進み、「PC: メインサイドバー」の欄に「[画像付き]最新の投稿」ウィジェットを設定してください。

「フォロー」をタップ

「SNSでシェア」をタップ

これらはあくまでも設置例ですので、HTMLを編集できる方は、表示される内容をご自身で好きなものに変更していただいても構いません。

表示するメニューは3個〜6個までがオススメです。

各メニューはCSSで「display: table-cell」という値を指定していて、テーブルレイアウトで横並びに表示します。

均等割りで表示されますので、我ながら見栄えがなかなかいいと考えています(笑)

フッター固定メニューの導入に必要なファイル一覧

フッター固定メニューの導入の際に新規設置や、一部内容の編集が必要となるファイルの一覧は以下となります。

新規設置 1. footer-fixed-menu.css
2. footer-fixed-menu.js
設置後内容を編集
(元ファイルはSTORK親テーマ)
3. footer.php
4. functions.php

「footer.php」と「functions.php」を変更する関する記述は、「footer_add.php」と「functions_add.php」にも記述しているので参考にしてください。

記述内容は本記事で説明しているものと同様です。

お買い上げ後、Gumroadよりファイルをダウンロード可能となっています。

続いて、それぞれのファイルの編集内容を説明します。以下の順番で設定をおこなってください。

1. footer-fixed-menu.css (新規設置)

フッター固定メニューのレイアウトを調整するCSSファイルとなります。

設置場所は以下となります。

/example.com/wp-content/themes/jstork_custom/library/css/footer-fixed-menu.css

※「example.com」の部分は、サンプルの文字列となります。

「library」ディレクトリ、「css」ディレクトリをサーバー上でそれぞれ作成した後に「footer-fixed-menu.css」をご自身のサーバにアップロードしてください。

2. footer-fixed-menu.js (新規設置)

フッター固定メニューの挙動を制御するJavaScriptファイルとなります。

設置場所は以下となります。

/example.com/wp-content/themes/jstork_custom/library/js/footer-fixed-menu.js

※「example.com」の部分は、サンプルの文字列となります。

先ほどのCSSファイルをアップロードした際にサーバーに作成した「library」ディレクトリ内に「js」ディレクトリを作成し、「footer-fixed-menu.js」をアップロードしてください。

3. functions.php (設置後内容を編集)

続いて、1番、2番で設置したCSSファイルとJSファイルを、STORKの子テーマのfunctions.phpからそれぞれ読み込めるように設定をします。

以下のファイルを設置し、

/example.com/wp-content/themes/jstork_custom/functions.php

「functions.php」を開いて、一番下に以下の5行をコピー&ペーストしてください。

※分かりやすく「一番下」としていますが、プログラムが正常に動作する記述であれば、「一番下」でなくても構いません。

// フッター固定メニュー用
function footer_fixed_menu() {
  wp_enqueue_script('footer-fixed-menu', get_stylesheet_directory_uri() . '/library/js/footer-fixed-menu.js', array( 'jquery' ), '1.0.0', true );
  wp_enqueue_style( 'footer-fixed-menu', get_stylesheet_directory_uri() . '/library/css/footer-fixed-menu.css', array(), '1.0.0', 'all');
}
add_action( 'wp_enqueue_scripts', 'footer_fixed_menu');
親テーマの「functions.php」には追記しないでください。テーマにアップデートがあった際に、追記した内容が消えてしまいます。

ファイル「functions_add.php」にも同じ記述がありますので、必要に応じてご使用ください。

4. footer.php (設置後内容を編集)

いよいよ、実際にフッターにメニューを表示する記述をします。

「footer.php」はSTORKの親テーマよりコピーして使用します。親テーマのディレクトリ内の以下にあるファイルを子テーマ内のディレクトリ内にコピーしてください。

■コピー前

/example.com/public_html/wp-content/themes/jstork/footer.php
※ファイルを削除してしまわないように十分ご注意ください。

■コピー後(新規でアップロード)

/example.com/public_html/wp-content/themes/jstork_custom/footer.php
※「jstork_custom」ディレクトリ直下にコピーして設置します。

続いて、「jstork_custom」ディレクトリ直下に配置したfooter.phpの先頭3行を削除します。

以下の画像キャプチャが該当します。

該当する3行を、以下のとおりに書き換えてください。コピーアンドペーストして使用してください。

<!-- スマホ固定フッター ここから -->
  <div class="hidden-pc">
    <ul class="footer-fixed-menu" id="footer-fixed-menu">
      <li><a href="<?php echo home_url(); ?>/"><i class="fa fa-home" aria-hidden="true"></i><br>ホーム</a></li>
      <li><a href="javascript:void(0)" data-remodal-target="spnavi"><i class="fa fa-folder-open-o" aria-hidden="true"></i><br>メニュー</a></li>
      <li><a href="#new-entries"><i class="fa fa-file-text-o" aria-hidden="true"></i><br>最新記事</a></li>
      <li id="sns-follow"><a href="javascript:void(0)"><i class="fa fa-user" aria-hidden="true"></i><br>フォロー</a></li>
      <?php if ( !get_option( 'sns_options_hide' ) ) : ?>
      <li><a href="javascript:void(0)" data-remodal-target="modal-sns"><i class="fa fa-share-alt" aria-hidden="true"></i><br>シェア</a></li>
      <?php endif; ?>
      <li id="mobile-top"><a href="#header"><i class="fa fa-chevron-up" aria-hidden="true"></i><br>トップ</a></li>
    </ul><!-- /.footer-fixed-menu -->

    <!-- SNSフォロー -->
    <ul class="sns-follow" id="sns-follow-popup" data-remodal-options="hashTracking:false">
      <li class="sns-follow-twt"><a href="https://twitter.com/【設定してください】/" rel="nofollow"><i class="fa fa-twitter" aria-hidden="true"></i><br>Twitter</a></li>
      <li class="sns-follow-fb"><a href="https://www.facebook.com/【設定してください】/" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i><br>facebook</a></li>
    </ul>

    <?php if ( !get_option( 'sns_options_hide' ) ) : ?>
      <!-- シェアポップアップ -->
      <div class="remodal" data-remodal-id="modal-sns" data-remodal-options="hashTracking:false">
        <div class="remodal-title">SNSでシェア</div>
        <?php get_template_part( 'parts_sns_short' ); ?>
        <button data-remodal-action="close" class="remodal-close"><span class="text gf">CLOSE</span></button>
      </div><!-- /.remodal -->
    <?php endif; ?>
  </div><!-- /.hidden-pc -->
  <!-- スマホ固定フッター ここまで -->

  <div id="page-top">
    <a href="#header" title="ページトップへ"><i class="fa fa-chevron-up"></i></a>
  </div>

得意な方は、上記のソース2行目〜11行目となる以下の記述において、<li>タグを変更して、表示されるメニューを変更しても構いません。

<ul class="footer-fixed-menu">
  ・
  ・
  ・
  (略)
  ・
  ・
  ・
</ul>

「フォローボタン」を使用される方は、SNSアカウント情報も設定してください。

以下の「【設定してください】」の文字列を、ご自身のアカウントIDやfacebookアカウントやfacebookページのIDに置き換えてください。

<li class="sns-follow-twt"><a href="https://twitter.com/【設定してください】/" rel="nofollow"><i class="fa fa-twitter" aria-hidden="true"></i><br>Twitter</a></li>
<li class="sns-follow-fb"><a href="https://www.facebook.com/【設定してください】/" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i><br>facebook</a></li>

SNSフォローを使用しない人は、先ほどの記述で、

<li id="sns-follow"><a href="javascript:void(0)"><i class="fa fa-user" aria-hidden="true"></i><br>フォロー</a></li>

の行を削除してください。

ファイル「footer_add.php」にも同じ記述がありますので、必要に応じてご使用ください。

アイコンの変更

今回のメニューでは、アイコンにはSTORKデフォルトで使用されている「Font Awesome」というアイコンフォントを使用しています。

このような記述が「Font Awesome」を使用したものとなります。

<i class="fa fa-file-text-o" aria-hidden="true"></i>

公式ページから好きなアイコンを選び、指定することもできます。

電話発信メニューを設置

フッター固定メニュー内で電話発信できる方法をご紹介します。

先ほどご紹介したHTML内「footer-fixed-menu」クラス内のリストタグ<li>で、実装することが可能です。

HTML

<ul class="footer-fixed-menu">
  ・
  ・
  ・
  <li><a href="tel:090-xxxx-xxxx"><i class="fa fa-phone" aria-hidden="true"></i><br>電話</a></li>
  ・
  ・
  ・
</ul>
 

実装例

「電話」ボタンをタップすると、指定した電話番号に発信することができます。
※「tel:090-xxxx-xxxx」部分は、実際の発信先電話番号に変更してください。

Google Adsenseのアンカー広告

Google Adsense アンカー広告

【出典】Google Adsense パフォーマンスレポート - 最適化

ページフッターに表示する「Google Adsenseのアンカー広告」と併用して使用する方法を説明します。

Googleのアンカー広告が表示される場合には、フッター固定メニューをアンカー広告の上部に移動させることができます。

Google Adsenseのアンカー広告と併用する場合は、「footer-fixed-menu-gad.js」を「footer-fixed-menu.js」にリネームした後、サーバーにアップロードしてください。

フッター固定メニューの近くに広告が表示されることは、誤クリック(タップ)を誘発すると捉えられ、場合によってはGoogle Adsenseの規約に反する可能性がありますので、推奨はしません。

ご自身の責任の元ご使用ください。

CSSファイル、JSファイルの圧縮

↑圧縮したファイルは、お経のようですね!

サイトの表示速度を高速化するために、CSSファイルやJSファイルを圧縮している人もいるかと思います。

今回のファイルでは、min化したファイルは用意していませんが、ご自身で圧縮して使用しても問題ありません。

僕も当ブログでSTORKを使用していますが、「Autoptimize」を使っています。

Autoptimizeを使うと、複数のCSSファイルやJSファイルを自動でまとめて圧縮までやってくれるので、圧倒的に便利です。

「STORK + Autoptimize」の組み合わせで使用しているんですが、今のところ不具合なく動作しているのでオススメできます!

STORKを導入していて表示速度にもこだわっていきたい人は使ってみてくださいね。

CSSのカスタム例

「footer-fixed-menu.css」を変更すれば、表示を自由にカスタマイズすることが可能です。

カスタマイズ項目対応要素、クラス名CSSプロパティ
背景色ul.footer-fixed-menubackground
線の色ul.footer-fixed-menuborder-top
余白ul.footer-fixed-menu lipadding
アイコン、文字の色ul.footer-fixed-menu li acolor
文字の大きさul.footer-fixed-menu li afont-size
アイコンの大きさul.footer-fixed-menu li ifont-size
※表は横スクロールが可能です。

こんな感じで、白抜き文字(背景色を付けて、文字とアイコンの色を白)にしても面白いでしょう↓

著作権

今回のプログラムの著作権は「ザ サイベース」ブログの管理人「とみっち」に帰属します。

ご自身が管理するブログでしたら幾つでも複製してご利用していただいて構いませんが、第三者にプログラムを渡したり、ブログやサイト等でプログラムの内容を公開することは禁止とします。

ただし、販売ページへのリンクや、拡散は歓迎します(笑)

また、もし今後このような追加機能を提供することで、お役に立てることがありましたら、STORKテーマに限らず、WordPressに関連する様々な機能を開発したいと考えています。

最後に

今回の「フッター固定メニュー」の設置に関し、疑問点やご要望等ありましたらお問い合わせください。僕のTwitterに連絡をいただいても構いません。

また、HTMLやWordPressの知識がある程度お持ちの方を対象に販売していますが、もしどうしても設置にお困りの場合は、チャットを通じて有償での設置サポートも行なっています。

FTP情報は預からず、画面共有で設置のアドバイスをさせていただく内容となります。

30分2,500円(税込)で承っていますので、ご連絡ください。
 

それでは、今後もまた何かお役に立てるようなサービスが提供できるよう努力しますので、引き続きよろしくお願いします!