「STORK(ストーク)にフッター固定メニューを導入する方法」を販売開始しました!

こんにちは。とみっちです。

当ブログはスマホで閲覧した際に、フッター固定メニューを表示できるようにしています。

「どうやって作ってるの!?」

といった問い合わせが多くあり、これまで僕がやってきたWordPressのマンツーマンレッスンなどで導入を支援したりもしていました。

いっそのこと、プログラム一式と、設置方法をまとめた方法を販売してみようかな!と考えたので、Gumroadを使って販売を開始してみます。

購入方法

クレジットカード決済とPayPal決済が可能な「Gumroad」、もしくは「銀行振込」に対応しています。

Gumroad

Gumroadは日本を含め、世界190カ国に対応している決済サービスです。

ちょっと日本語翻訳が変なところがありますが、ちゃんと取引できますので安心してください。

Gumroadで可能な決済方法

  • クレジットカード (VISA、Mastercard、AMERICAN EXPRESS、JCB、Diners Club)
  • PayPal

販売画面がポップアップ表示(もしくは別ウィンドウ表示)された後、「これが欲しいです!」ボタンをクリックしてください。

ファイルサイズは6KB弱となっていて、すぐにダウンロードできる大きさです。

クレジットカード情報を入力、もしくはPayPalでの支払いを選択でき、簡単に決済が完了します。

Gumroadでの購入後は、購入完了の通知Eメールが届きます。

Eメール内にファイル一式のダウンロードリンクがありますので、クリックしてダウンロードしてください。

ファイルをダウンロードしたら「readme.txt」を読んでくださいね!

銀行振込

銀行振込をご希望の場合は、口座情報をお知らせします。

対応銀行
埼玉縣信用金庫 「ザ サイベース」名義
三菱東京UFJ銀行 「とみっち」個人名義
埼玉りそな銀行 「とみっち」個人名義

ご入金確認後、直接ファイル一式のダウンロードURLをお送りしますので、お問い合わせフォームよりご連絡ください。

購入できる内容

BASEで購入後、以下のファイル一式をすぐにダウンロード可能です。

readme.txtフッター固定メニューの設置方法を詳しく説明したページへのアクセス情報を記載
footer_add.php「footer.php」のカスタマイズ内容を記載
functions_add.php「functions.php」のカスタマイズ内容を記載
footer-fixed-menu.cssフッター固定メニューのスタイルを設定
footer-fixed-menu.jsフッター固定メニューのアクションを設定
footer-fixed-menu-gad.jsGoogleアンカー広告と同時に使用する際に使用

設置方法を詳しく説明したページは当ブログ内にパスワードを設定して用意しています。

新規でサーバーに設置するファイル、及び編集するファイルがあります。

コピペでファイルを修正しますので、バックアップをご自身でとっていただいた後、WordPressの管理画面もしくは、テキストエディタでファイル内容を修正できる、WordPressの管理画面もしくは、FTPクライアントソフトを使用して、新規ディレクトリ(フォルダ)を作成できる方向けの内容となります。

フッター固定メニュー

フッター固定メニューを導入すると、スマホ閲覧時、以下のように表示されます。

当ブログでも導入しているので、スマホで見ると確認できます。

「footer.php」のHTMLタグを修正するだけなので、もちろんご自身で好きなメニューに変更していただくことも可能です。

スマホ端末がどんどん大きくなってきて、スマホサイトのヘッダーにあるハンバーガーメニューがホームボタンから遠く、どんどん使いづらくなってきましたね。。

今後、ハンバーガーメニューに変わるスマホメニューの表示方法の一つとしてフッター固定メニューは注目されています。

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

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

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

「メニュー」をタップ

「メニュー」ボタンをタップすると、STORKのハンバーガーメニューをタップした際と同様にメニューを表示します。

「フォロー」をタップ

「フォロー」ボタンをタップすると、SNSフォローボタンが下からニョキっとアニメーションして表示されます。不要な方は、該当メニュー部分の記述を削除、もしくはコメントアウトしてください。

「SNSでシェア」をタップ

「シェア」ボタンをタップすると、SNSシェアできるポップアップが表示されます。

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

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

Googleアンカー広告との併用

「Googleアンカー広告」と併用することも可能です。

Googleアンカー広告が表示される際にはメニューが上に移動し、広告が非表示となった際にはメニューも下に移動します。

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

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

アイコンの変更

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

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

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

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

カスタマイズに関して

フッター固定メニュー CSSサンプル

ボタンの色、テキストの大きさ、余白、線の色など、フッターに関する設定は全て「footer-fixed-menu.css」に記述をしていますので、CSSを編集できる方は、是非自由にカスタマイズを行って、自分らしいデザインにしてみてください。

使用するアイコンに関しても、「font-awesome」を使わずに、ご自身で画像を用意していただいても面白いかもしれません。

注意事項

親テーマを直接編集すると、アップデートの際に作業内容が消えてしまいます。作業前に必ずSTORKの子テーマ化を済まてください。

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

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

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

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

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

販売中のファイル一式の中にはSTORK本体に関するファイルは一切含まれていません。

必ずWordPressテーマ「STORK(ストーク)」を公式サイトでご購入ください。

複数のブログを運営する方は、運営するブログ数のライセンスを公式サイトで購入する必要があります。

最後に

STORKのフッターに固定メニューを表示させることで、是非ライバルに差をつけてください!

かなり需要がある機能だと思いますので、もしも今後STORK本体のアップデートで導入されたらその時はごめんなさい。。

先行的に利用できる機能だと考えてもらえれば幸いです。

実は今回のフッター固定メニューの開発では、つまづいたところがいくつかあって、2日ほどかかってしまいました。

自分で一から導入してみようとチャレンジすると、同様に時間がかかるので、

1,000円ならオトク!

と思っていただけたら幸いです。

今後、特にブロガー、アフィリエイター向けにWordPressテーマを便利にするカスタマイズ内容やプラグインの開発、販売などもおこなっていきたいと考えているので、楽しみにしていてくださいね。

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。@tomicci 詳しいプロフィール【運営サイト】 ザ サイベース おと風景