【4月で新規販売終了予定】1,500円 -「STORK（ストーク）固定フッター」プラグイン販売中！スマホ固定フッターメニューを表示

販売終了予定告知
多くの方にプラグインを導入していただき、設定サポートなどをする機会が非常に増えてきました。

大変ありがたいことなのですが、これ以上一人でサポートを継続するのは難しいと考え、今月2018年4月末をもっていったん販売を中止します。

ご購入いただいた皆様には、できる限り当プラグインのサポートを続けたいと考えています。今後また販売再開できる際には当ブログでお知らせします。

気がつけばノマド歴5年。Webクリエイターの「とみっち」です。

当ブログでは、有料WordPressテーマ「STORK（ストーク）」に関する情報をいくつか発信しています。

昨年4月、スマホで閲覧した際に「固定フッターメニュー」を表示することのできる方法を実験的に有料販売してきました。

予想を上回る反響があり、これまでに100人以上の方にお買い上げいただき、圧倒的感謝をしています...！

以前販売していた内容は、「functions.php」や「footer.php」の一部を書き換えたり、サーバー上に新規ディレクトリ（フォルダ）を作成する必要があったりと、初心者の方には導入の敷居が高い内容となっていました。

埼玉県の在宅WordPressエンジニア「稲福一也」さんとthe Saibase 「とみっち」との共同開発のもと、ついに機能はそのままでWordPressプラグインとして開発することができました。

「STORK（ストーク）固定フッター」プラグイン

※WordPress公式プラグインでない点は、あらかじめご了承ください。

今回の記事ではプラグインの販売、説明から設定方法まで全てを紹介しています。

更新履歴

2018年 4月16日	SNSフォローボタンの不具合を修正
2018年 2月20日	メニュー設定例メニュー（スマホメニューを表示）のHTMLミスを修正
2018年 2月6日	STORK（ストーク）固定フッター WordPressプラグイン版公開

2018年 4月16日

SNSフォローボタンの不具合を修正しました。facebook、TwitterのURL末尾にスラッシュ「/」を強制的に付与する処理を停止しました。

また、LINE@に関しても、URL末尾にスラッシュ「/」が付与されることでリンク先が正しく機能しない不具合を修正しました。

2018年 2月20日

Google AdsenseやGoogle Analyticsなどの兼ね合いにより、導入ブログによってはフッター固定メニューの下に余白が表示されてしまう現象が発生しておりました。

修正いたしました。ご不便をおかけしました。

【必読】注意事項

「注意事項」を最初に記載します。

注意事項に反する利用用途に関してはサポートできませんので、必ず目を通してください。

お買い上げ後のトラブルをできるだけ防ぎ、「導入してよかった！」と気持ちよく使っていただくためのものですので、ご了承ください。

STORKのライセンス

当ページで販売している「STORK固定フッター」プラグインは、ザサイベースブログの管理人「とみっち」が個人的に作成したもので、STORKを販売しているOPENCAGE公式サイトとは無関係です。

販売許可をいただいています。

当ページで販売している「STORK固定フッター」に関する問い合わせは、OPENCAGE公式サイトではなく僕にお願いします。

また、「STORK固定フッター」を導入する際にはOPENCAGE公式サイトで購入したWordPressテーマ「STORK」が必ず必要となりますのでご注意ください↓↓↓

販売中の「STORK固定フッター」プラグインにはSTORK本体に関するファイルは一切含まれていません。

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

今回販売している「STORK固定フッター」は、一度お買い上げいただければ、ご自身の運営する複数のサイトに導入していただいて構いません。

注意事項

本プラグインを第三者へ譲渡することや無償提供、転売などは固く禁止します。

バックアップ

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

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

注意事項

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

WordPressをバックアップする際に便利なプラグインとして「BackWPup」をオススメします。

必要な知識

WordPressの「プラグインのアップロード」、「新規追加」、インストール済プラグインの「停止」や「削除」が可能な方の導入をお願いします。

また、有料の導入サポートをご希望される場合、必要に応じてSkypeやChatwork、GoogleハングアウトのいずれかでPCの画面共有ができることが必須となります。

非プラグイン版をご購入の方

今回のプラグイン版での設定が再度必要となってしまいますが、非プラグイン版をお買い上げの方は無償でダウンロード可能です。

詳しくは以下のページにアクセスし、ご確認ください。

お買い上げ時に「readme.txt」ファイルに記載されていたアクセスパスワードが必要です。

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

この度は「STORK（ストーク）にフッター固定メニューを導入する方法」をお買い上げいただき、ありがとうございました！このページは購入者限定でアクセスできるページとなります。第三者にアクセスパスワードを漏らさないように

thesaibase.com

購入方法、料金

料金は1,500円（税込）

となります。

クレジットカード決済とPayPal決済が可能な「Gumroad」での決済をお願いしています。

今後バージョンアップ対応などにより、料金を値上げする可能性がありますのでご了承ください。

Gumroad

【出典】https://gumroad.com/

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

様々な言語が翻訳途中で、日本語翻訳が変な点もありますが、問題なく取引できますので安心してください。

もちろん、決済処理はSSL通信で暗号化されています。

「STORK（ストーク）固定フッター」プラグイン

Gumroadで可能な決済方法

クレジットカード（VISA、Mastercard、AMERICAN EXPRESS、JCB、Diners Club）
PayPal

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

ファイルサイズは6KB程度で、すぐにダウンロードできる大きさです。

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

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

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

プラグインの内容

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

jstorkfooter.zip	WordPressのプラグイン「新規追加」機能でサーバー上で自動的に展開されるため、解凍作業は不要です。

「jstorkfooter.zip」の中身を紹介すると、

jstorkfooter.php	WordPress管理画面の設定、実際に出力されるフッター固定メニューを制御するプログラム
/library/footer-fixed-menu.css	フッター固定メニューのスタイルを設定
/library/footer-fixed-menu.js	フッター固定メニューのアクションを設定

となっています。

フッター固定メニュー

フッター固定メニューを導入すると、スマホでサイトを閲覧した場合に、以下の例のように表示することができます。

当「ザサイベース」ブログでもフッター固定メニューを導入しているので、スマホで見ると確認できます。

ボタンはそれぞれ、以下のような動作やリンクを設定することが可能です。

ホーム	トップページへのリンク
メニュー	メニューをポップアップ表示（ヘッダーのハンバーガーメニューをタップした際と同様の動き）
最新記事	最新記事へスクロール
フォロー	フォローボタンをフッターに表示（TwitterとFacebook、Instagram、LINE@が設定可能）
SNSでシェア	SNSシェアポップアップを表示
トップ	ページ最上部へとスクロール

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

「メニュー」をタップ

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

「最新記事」をタップ

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

「最新の投稿」ウィジェットの設定方法

「最新記事」を設定されたい方は、以下を参考に「最新の投稿」ウィジェットを設定してください。

管理画面より、

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

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

PC、スマホともに最新の投稿が表示されます。

「フォロー」をタップ

「フォロー」ボタンをタップした場合に、SNSフォローボタンが下からニョキっとアニメーションして表示させることができます。

「シェア」をタップ

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

これらはあくまでも設置例ですので、HTMLを編集できる方は、表示されるメニュー名やアイコンをご自身で好きなものに変更していただいても構いません。

表示するメニューは最大7個まで設定可能です。

電話発信メニューを設置

「電話」ボタンをタップすると、指定した電話番号に発信をすることが可能です。

電話番号の指定はHTMLのaタグ内に「tel:090-xxxx-xxxx」を指定することで簡単に実装できます。

会社や店舗のブログで、「問い合わせ先」などの用途として是非ご使用ください。

Googleアンカー広告との併用

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

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

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

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

導入方法

Gumroadよりプラグインを購入してください。

「STORK（ストーク）固定フッター」プラグイン

プラグインのインストール

WordPressの管理画面にログインし、ダッシュボード左メニュー内で、

「プラグイン」 → 「新規追加」

と進みます。

「今すぐインストール」をクリックしてください。

プラグインの設定

続いてスマホ画面で表示させたいフッターメニューを設定します。

管理画面のダッシュボード左メニュー内で、

「設定」 → 「STORK固定フッター」

と進みます。

「STORK固定フッター設定」画面が表示されますので、「リンクの設定」に表示させたいメニューを最大7つまで設定します。

現在、メニューの並び替え機能はありません。メニューを並び替える際にはメモ帳などに一旦貼り付けて並び替えをお願いします。

今後のアップデートで対応する可能性はあります。ご不便をおかけします。

メニュー設定例

以下の中から使用したいメニューのHTMLをコピーし、「STORK固定フッター」管理画面のメニュー1〜7へと貼り付けてください。

ダブルクリックすると選択しやすいです。

ホーム（サイトトップURLへのリンク）

<a href='https://example.com/'><i class='fa fa-home' aria-hidden='true'></i><br>ホーム</a>

※「https://example.com/」はご自身のサイトURLに書き換えてください。

メニュー（スマホメニューを表示）

<a href="#" data-remodal-target="spnavi"><i class="fa fa-folder-open-o" aria-hidden="true"></i><br>メニュー</a>

内容を修正(2018年2月20日)
（スマホメニューを表示）のHTMLソースにミスがあったため、内容を修正しました。

フォロー（SNSのリンク設定が必要です）

<a href="#" id="sns-follow"><i class="fa fa-user" aria-hidden="true"></i><br>フォロー</a>

シェア（SNSシェアできるポップアップを表示）

<a href='#' data-remodal-target='modal-sns'><i class='fa fa-share-alt' aria-hidden='true'></i><br>シェア</a>

SNSボタンの表示
WordPress管理画面より、【外観 > カスタマイズ > 投稿・固定ページ設定】の「SNSボタンを表示しない」のチェックを外してご使用ください。チェックがついていると機能しません。

電話

<a href="tel:090-xxxx-xxxx"><i class="fa fa-phone" aria-hidden="true"></i><br>電話</a>

トップ（ページ最上部へとスクロール）

<a href='#header' id='mobile-top'><i class='fa fa-chevron-up' aria-hidden='true'></i><br>トップ</a>

SNSのリンク設定

メニューにSNSフォローボタンを表示する場合、必ず1つ以上設定してください。

SNSの設定、および表示メニューに「フォロー」ボタンを設定した場合、以下のように「フォロー」ボタンをタップした際にSNSリンクが表示されます。

デザイン設定

固定フッターメニューのデザインを調整できます。

「背景の色」、「テキストの色」、「上部枠線の色」をそれぞれ設定してください。

カラーピッカーで選択するか、「#」から始まる16進数を設定してください。

アイコンの変更

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

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

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

公式ページから好きなアイコンを選び、メニュー設定欄の中で使用することもできます。

アップデートの方法

アップデートの際は、Gumroadに最新版のファイルをアップロードしますので、ご自身でダウンロードして適宜ご使用ください。

なお、プラグインを削除時も、WordPress管理画面に表示される「STORK固定フッター」プラグインの設定内容は保持されます。

以下の手順で一旦「STORK固定フッター」を削除します。

管理画面のダッシュボード左メニュー
「プラグイン」内の「プラグイン一覧」をクリック
「STORK固定フッター」を「停止」
「STORK固定フッター」を「削除」

続いて最新の「STORK固定フッター」をインストールします。

インストール手順は、先ほどの「プラグインのインストール」を参考にしてください。

お買い上げいただいた方々のメッセージ

STORKのフッター固定メニューをお買い上げいただいた方のTweetを一部掲載させていただきます。

固定フッターはこの人のを買ったけどSTORKを使ってる人にはオススメ！(というかSTORKでしか使えないけど)ユーザビリティが上がるし他のテンプレっぽいブログと違ったデザインにできます。 https://t.co/vTKgeRNtgt
— さだぢ (@sadaji_art) August 17, 2017

うひょー俺のストークがオシャレに1UPしたあああああああああ(´ω`)
「STORK（ストーク）にフッター固定メニューを導入する方法」を販売開始しました！ https://t.co/8xTGc7vOZp pic.twitter.com/ZBkCw6LLqI
— まっさー綴命のアドセン術師 (@iMassa07) June 3, 2017

とみっち(G)さん（@tomicci）のこれ、めっちゃ使える。これで1,000円とか安すぎわろた
「STORK（ストーク）にフッター固定メニューを導入する方法」を販売開始しました！ https://t.co/3hoAFlxBfT
— Yusuke Takahata (@sutaba_mac) April 20, 2017