多くの方にプラグインを導入していただき、設定サポートなどをする機会が非常に増えました。これ以上一人でサポートを継続するのが難しく、2018年4月末をもっていったん販売を終了しました。
ご購入いただいた皆様、本当にありがとうございました!なお、今後また販売再開できる際には当ブログでお知らせします。
気がつけばノマド歴5年。Webクリエイターの「とみっち」です。
当ブログでは、有料WordPressテーマ「STORK(ストーク)」に関する情報をいくつか発信しています。
昨年2017年4月、スマホで閲覧した際に「固定フッターメニュー」を表示することのできる方法を実験的に有料販売してきました。

予想を上回る反響があり、これまでに150人以上の方にお買い上げいただき、圧倒的感謝をしています…!
以前販売していた内容は、「functions.php」や「footer.php」の一部を書き換えたり、サーバー上に新規ディレクトリ(フォルダ)を作成する必要があったりと、初心者の方には導入の敷居が高い内容となっていました。
埼玉県の在宅WordPressエンジニア 「稲福一也」さんとthe Saibase 「とみっち」との共同開発のもと、ついに機能はそのままでWordPressプラグインとして開発することができました。
※WordPress公式プラグインでない点は、あらかじめご了承ください。
今回の記事ではプラグインの販売、説明から設定方法まで全てを紹介しています。
クリックでジャンプ
更新履歴
2018年 4月30日 | アーカイブページでSNSシェアした場合の不具合を修正する方法 |
---|---|
2018年 4月16日 | SNSフォローボタンの不具合を修正 |
2018年 2月20日 | メニュー設定例 メニュー(スマホメニューを表示)のHTMLミスを修正 |
2018年 2月6日 | STORK(ストーク)固定フッター WordPressプラグイン版公開 |
2018年 4月30日
トップページやアーカイブぺージで、複数の記事が表示されている際に、SNSシェアされるURL及びタイトルがおかしくなってしまう現象が発生していたため、回避策を追記しました。
【2018年4月30日】アーカイブぺージでシェアされるURLを修正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」ファイルに記載されていたアクセスパスワードが必要です。
購入方法、料金
となります。
クレジットカード決済とPayPal決済が可能な「Gumroad」での決済をお願いしています。
今後バージョンアップ対応などにより、料金を値上げする可能性がありますのでご了承ください。
Gumroad

Gumroadは日本を含め、世界190カ国に対応している決済サービスです。
様々な言語が翻訳途中で、日本語翻訳が変な点もありますが、問題なく取引できますので安心してください。
もちろん、決済処理はSSL通信で暗号化されています。
- クレジットカード (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よりプラグインを購入してください。
プラグインのインストール

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

「今すぐインストール」をクリックしてください。
プラグインの設定
続いてスマホ画面で表示させたいフッターメニューを設定します。

管理画面のダッシュボード左メニュー内で、
と進みます。

「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>
(スマホメニューを表示)のHTMLソースにミスがあったため、内容を修正しました。
最新記事
<a href="#new-entries"><i class="fa fa-file-text-o" aria-hidden="true"></i><br>最新記事</a>
※上述した「最新記事」の設定方法が必要です。
フォロー(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>
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固定フッター」をインストールします。
インストール手順は、先ほどの「 プラグインのインストール」を参考にしてください。
【2018年4月30日】アーカイブぺージでシェアされるURLを修正
カテゴリ名、投稿者名、タグなどのアーカイブページでは、固定フッターメニューのSNSシェアボタンを押してシェアする際に正しいURLとならない不具合が見られました。
不具合の症状としては、複数の記事が表示されている際に、最後の記事のURLやタイトルがシェアされてしまうという内容となります。
また、同様の現象がトップページでも発生する可能性があります。
STORKでは、トップページをデフォルト(最新の投稿)の状態とするか、自分で用意した固定ページなどを設定するか選ぶことができます。

トップページがデフォルト(最新の投稿)となっている場合に、アーカイブページと同様に不具合が発生することがあります。
これらは、正確にはSTORKテーマの仕様となるのですが、以下の対応を行うことで修正することが可能です。必ず子テーマ化を済ませてから行ってください。
STORKテーマでSNSシェアを設定しているファイルをカスタマイズします。以下のディレクトリにファイルをアップロードします。
ファイルのアップロードはWordPressの管理画面、もしくはFTPクライアントソフトを使用してください。
アップロードするファイル内容は以下となります。コピー&ペーストしてご使用ください。
「parts_sns_short.php」の内容
<?php
if(is_home() || is_front_page()) {
// トップページ
$url = home_url();
$title_encode = urlencode( get_bloginfo('description') . ' | ' . get_bloginfo( 'name' ) );
} else if(!is_home() && !is_front_page() && is_archive()) {
// アーカイブ(カテゴリページ、投稿者ページ、タグページ)
$url = esc_url( home_url() . $_SERVER['REQUEST_URI'] );
$title_encode = urlencode( get_the_archive_title(" , ") );
} else {
// トップ以外
$url = get_permalink();
$title_encode = urlencode( the_title( " , " , 0 ) );
}
$url_encode = urlencode($url);
// Twitter
$tw_url = get_the_author_meta( 'twitter' );
$tw_domain = array("http://twitter.com/"=>","https://twitter.com/"=>","//twitter.com/"=>");
$tw_user = '&via=' . strtr($tw_url , $tw_domain);
?>
<div class="share short">
<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter">
<a href="https://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode;?>&tw_p=tweetbutton" rel="nofollow"><i class="fa fa-twitter"></i><span class="text">ツイート</span><span class="count"><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></span></a>
</li>
<!--Facebookボタン-->
<li class="facebook">
<a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" rel="nofollow"><i class="fa fa-facebook"></i>
<span class="text">シェア</span><span class="count"><?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></span></a>
</li>
<!--はてブボタン-->
<li class="hatebu">
<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url;?>&title=<?php echo $title_encode;?>" rel="nofollow" onclick="window.open(this.href, 'HBwindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank" rel="noopener nofollow"><span class="text">はてブ</span><span class="count"><?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></span></a>
</li>
<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo $url;?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" data-toggle="tooltip" data-placement="top" title="GooglePlusで共有" rel="nofollow"><i class="fa fa-google-plus"></i><span class="text">Google+</span><span class="count"><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></span></a>
</li>
<!--ポケットボタン-->
<li class="pocket">
<a href="https://getpocket.com/edit?url=<?php echo $url;?>&title=<?php echo $title_encode;?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" rel="nofollow"><i class="fa fa-get-pocket"></i><span class="text">Pocket</span><span class="count"><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></span></a>
</li>
</ul>
</div><!-- .sns -->
</div><!-- .share -->
以上により、アーカイブページや「最新の投稿」が選択されたトップページでも正常にSNSシェアが可能となります。
「カテゴリー:タイトル」や「作者:作者名」のようにシェアされますが、子テーマの「functions.php」に以下の記述を追加することで、シェアされる文面を変更することができます。
少しだけPHPが分かる方には変更もできるかと思われますが、「functions.php」を誤って変更してしまうと、ブログが止まってしまう可能性もあるため、十分注意して作業してください。
「functions.php」に追記する内容
// アーカイブページのタイトル変更
add_filter( 'get_the_archive_title', function ($title) {
if ( is_category() ) {
$title = '「' . single_cat_title( '', false ) . '」の記事一覧' . ' | ' . get_bloginfo('name');
} elseif ( is_tag() ) {
$title = '「' . single_tag_title( '', false ) . '」の記事一覧' . ' | ' . get_bloginfo('name');
} elseif ( is_author() ) {
$title = '「' . get_the_author() . '」の記事一覧' . ' | ' . get_bloginfo('name');
}
return $title;
});
ここまで作業をすると、
といった文言で、SNSシェアすることが可能となります。
お買い上げいただいた方々のメッセージ
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— タカ・ポーター・ブリッジズ (@sutaba_mac) April 20, 2017
フッターメニュー設置できた?かわいい!! https://t.co/VRtOp30ikU
— じゅり? (@JURIn29) July 16, 2017
他にも、無事に設定できた!簡単だった!といったメールなどを何件かいただいています。
お買い上げありがとうございました!
著作権
今回のプログラムの著作権は「ザ サイベース」に帰属します。
ご自身が管理するブログでしたら幾つでも複製してご利用していただいて構いませんが、第三者にプログラムを渡したり、ブログやサイト等でプログラムの内容を公開することは禁止とします。
ただし、販売ページへのリンクや、拡散は大歓迎です!
最後に
今回の「フッター固定メニュー」の設置に関し、疑問点やご要望等ありましたらお問い合わせください。
また、WordPressの知識がある程度ある方を対象に販売していますが、もしどうしても設置にお困りの場合は、チャットを通じて有償での設置サポートも行なっています。
FTP情報は預からず、画面共有で設置のアドバイスをさせていただく内容となります。
30分2,500円(税込)で承っていますので、ご連絡ください。
それでは、今後もまた何かお役に立てるようなサービスが提供できるよう努めますので、引き続きよろしくお願いします!