Wordpress

【販売終了】「STORK(ストーク)固定フッター」プラグイン 〜スマホ固定フッターメニューを表示〜

公開日: 2018年2月6日
販売終了のお知らせ
多くの方にプラグインを導入していただき、設定サポートなどをする機会が非常に増えました。これ以上一人でサポートを継続するのが難しく、2018年4月末をもっていったん販売を終了しました。

ご購入いただいた皆様、本当にありがとうございました！なお、今後また販売再開できる際には当ブログでお知らせします。

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

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

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

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

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

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

【販売終了】 「STORK(ストーク)固定フッター」プラグイン

※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」ファイルに記載されていたアクセスパスワードが必要です。

STORK（ストーク）にフッター固定メニューを導入する方法
【購入者限定】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.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よりプラグインを購入してください。

【販売終了】 「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ソースにミスがあったため、内容を修正しました。
 

最新記事

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

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

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

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

【2018年4月30日】アーカイブぺージでシェアされるURLを修正

カテゴリ名、投稿者名、タグなどのアーカイブページでは、固定フッターメニューのSNSシェアボタンを押してシェアする際に正しいURLとならない不具合が見られました。

不具合の症状としては、複数の記事が表示されている際に、最後の記事のURLやタイトルがシェアされてしまうという内容となります。

また、同様の現象がトップページでも発生する可能性があります。

STORKでは、トップページをデフォルト(最新の投稿)の状態とするか、自分で用意した固定ページなどを設定するか選ぶことができます。

トップページがデフォルト(最新の投稿)となっている場合に、アーカイブページと同様に不具合が発生することがあります。

これらは、正確にはSTORKテーマの仕様となるのですが、以下の対応を行うことで修正することが可能です。必ず子テーマ化を済ませてから行ってください。

STORK子テーマ
本作業を実行する際には必ず以下リンクよりSTORKの子テーマを導入してください。

専用「子テーマ」のダウンロード・解説 | OPENCAGE

STORKテーマでSNSシェアを設定しているファイルをカスタマイズします。以下のディレクトリにファイルをアップロードします。

/wp-content/themes/jstork_custom/parts_sns_short.php

ファイルのアップロードは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;
});

ここまで作業をすると、

「フリーランス」の記事一覧 | ザ サイベース https://thesaibase.com/category/freelance
「自動車」の記事一覧 | ザ サイベース https://thesaibase.com/category/car
「とみっち」の記事一覧 | ザ サイベース https://thesaibase.com/author/secret-slug

といった文言で、SNSシェアすることが可能となります。

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

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

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

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

著作権

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

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

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

最後に

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

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

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

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

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


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

RECOMMENDこちらの記事も人気です。

ABOUTこの記事を書いた人

数年前までバンド活動してました。現在はブログを運営して暮らしています。サウンドクリエイター / Webクリエイター。息子は6歳。長野市出身。埼玉県内を転々（東松山→志木→川越）、現在は本庄市に移住して法人化しました。 【興味】ギター/Web/車（GolfR Variant等）/旅/酒 ※自然の音からデスメタルまで聴きますw 【主な運営サイト】 ザ・サイベース おと風景 等 とみっち@ブログと動画 詳しいプロフィール

NEW POSTこのライターの最新記事