【1,500円】「STORK(ストーク)固定フッター」プラグイン販売中!スマホ固定フッターメニューを表示

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

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

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

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

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

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

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

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

【必読】 注意事項

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

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

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

STORKのライセンス

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

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

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

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

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

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

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

注意事項

  • 第三者への譲渡や無償提供、転売などは固く禁止します。

バックアップ

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

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

注意事項

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

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

必要な知識

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

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

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

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

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

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

購入方法、料金

料金は1,500円(税込)

となります。

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

今後バージョンアップ対応などにより、料金を値上げする可能性があります。

Gumroad

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

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

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

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

Gumroadで可能な決済方法

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

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

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

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

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

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

プラグインの内容

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

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

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

jstorkfooter.phpWordPress管理画面の設定、実際に出力されるフッター固定メニューを制御するプログラム
/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よりプラグインを購入してください。

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

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='#sidebar1' class='to-sub-category'><i class='fa fa-folder-open-o' aria-hidden='true'></i><br>メニュー</a>

 

最新記事

<a href="#new-entries"><i class="fa fa-file-text-o" aria-hidden="true"></i><br>最新記事</a>

※上述した「最新記事」の設定方法が必要です。
 

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

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

 

シェア(SNSシェアできるポップアップを表示)

<a href='javascript:void(0)' data-remodal-target='modal-sns'><i class='fa fa-share-alt' aria-hidden='true'></i><br>シェア</a>

 

電話

<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固定フッター」を削除します。

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

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

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

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

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

他にも、無事に設定できた!簡単だった!といったメールなどを何件かいただいています。

お買い上げありがとうございました!

著作権

今回のプログラムの著作権は「ザ サイベース」に帰属します。

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

ただし、販売ページへのリンクや、拡散は大歓迎です!

最後に

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

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

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

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

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

Facebookアカウントでコメント

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

ABOUTこの記事を書いた人

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