ワードプレステーマSTORK(ストーク)でAMPにシェアボタンを出す方法

みなさんどうもアクセラレーテッド!AMPに四苦八苦している@xi10jun1です。

僕はワードプレステーマSTORK(ストーク)を使っています。プラグインでAMP化しているのですが、そのままだとシェアボタンが付けられないのですよね。

それで販売公式サイトを参考にシェアボタンを自力で作り、さらにアドセンスやプラグインを使って関連記事を出すところまで頑張ったので、お願いだからシェアしてくなんしょ~!

特にはてブ!ワードプレスブロガーは、はてブに飢えています。

STORK(ストーク)でAMPに「はてブ」「pocket」「Google+」「Feedly」を出すには?

僕のブログのAMPはご覧の通り、ツイッター、フェイスブック(シェア)、はてブ、pocket、Google+、Feedlyを表示しております。カウントはちょっと出せなかったので、まだ検証中です。

で、STORK(ストーク)の販売サイト(Open Cageさん)には、このような記事があります。

こちらの通りにやれば、ツイッターとフェイスブック(シェア)とLINEのボタンは出せます。が、一般的なボタンである、はてブ、pocket、Google+、Feedlyについては記述がありません。

ということで、「この4つのボタンも出しましょう!」というのがこの記事の目標です。※ちなみに今回LINEは消しました。ごめんなさい。

注意点

functions.phpをいじりますので、慣れていない人だとかなり難しいです。

ミスると画面とともに顔も白くなりますから、ローカル環境なりバックアップなり、何か起きても必ず復旧できるようにしてから次の手順を行ってください。

といっても、なるべく「コピペ!」「簡単!」「楽々!」的な感じでご紹介します。

コピペと少しの作業が必要なシェアボタンのコード

まずはfunctions.phpにアクセスしてください。子テーマをお持ちの方は、そちらのfunctions.phpにアクセスします。

そして下記のコードをfunctions.phpに記述します。

とりあえずコピペで実装できるようにしましたが、ここから少し作業があります。

作業

作業としては、ツイッターでシェアしたときに自分のアカウント名も一緒に出るようにした点です。こちらはご自身のアカウント名(@以下)をご記入ください。

必要ない場合は、&via=’.あなたのツイッター名(@以下~).’を消せばOKです。

またFeedlyの部分ですが、https://feedly.com/index.html#subscription%2Ffeed%2Fhttps%3A%2F%2FあなたのサイトURL%2Ffeed%2Fとあるように、ご自身のサイトURLをご記入ください。

※SSLの方は、https%3A%2F%2FあなたのサイトURL%2Ffeed%2Fと、sの記述を忘れないように。無い場合は逆にsを消してください。

色や形、各ボタンの名称については適宜変更を。

もし実装しても表示されない場合

記述箇所に問題があるか、どこかに余計な半角スペースまたは全角スペースが入っている可能性がありますので、根気よく探して消してください。

応用編:アドセンス(関連ユニット)と関連記事も表示させる方法

応用すればアドセンス(関連ユニット)や、プラグインを使って関連記事も出せます。

こちらもコピペと作業があります。

アドセンスに関してはAMP用のコードを使いますが、functions.phpで記述する場合はwidth=’336’と、「”~”」ではなく「’~’」でないと表示されませんのでご注意を。

※たぶん規約に引っかからないと思いますが、何かアドセンスからお叱りがきたら、素直にごめんなさいして対処しましょう。今のところ来てませんが・・・。

また関連記事ですが、プラグイン「List category posts」のショートコードでなら表示可能です。ただ移動先のURLはAMPにならない(通常のモバイルページ)のと、ちょっとデザインがダサいです。

まとめ:functions.phpでAMPの記事下をイジイジできる!

これを覚えておくと、functions.phpの記述を変えるだけでAMPの記事下のコンテンツをあれこれ編集できます。

ちょっと難易度が高いですが、お役に立てれば幸いです。

それから今回の記事作成にあたり、Open Cageさんの記事を参考にしましたのでご紹介いたします。

ちなみに

最近「他の人が使っていないテーマがいい」なんて方もいらっしゃいますが、海外WPテーマ販売サイト「Envato Market」はご存知でしょうか?

magazineタイプやblogタイプなど世界中のオシャレなテーマが陳列されているので、「そのオシャレなテーマ、どこで買ったの?」なんて聞かれますよ、きっと。

アメリカのサイトなので、全編英語&購入はドル(ペイパル決済可)と少々難易度は高いです。が、被りにくく且つハイセンスなテーマで勝負したい方にオススメです!

アクセスはこちら→Themeforest(Envato Market)

スポンサーリンク

いつも「読んだらシェア」を心掛けてくださりありがとうございます!

※はてブを使うとコメントと同時に複数のSNSにシェアできて楽ですよ!

スポンサーリンク