AMP ページに Simplicity の SNS フォローボタンを設置

AMPにSNSフォローボタンを設置

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

Simplicity は、デフォルトで SNS フォローボタンを備えたテーマです。

しかし、 AMP ページでは、 SNS フォローボタンが表示されません。

そこで、 AMP ページに Simplicity デフォルトの SNS フォローボタンを設置するカスタマイズをご紹介します。

完成図は以下のとおりです。

カスタマイズ後に設置されたAMPページのSNSフォローボタン

シェアボタンに各 SNS サービスのアイコンを表示する方法は、「 Simplicity の AMP ページでシェアボタンに SNS アイコンを表示する」をご覧ください。

テーマ設定

AMP ページの SNS フォローボタンは、一般ページと同様にテーマ設定から表示・非表示を変更できるようにカスタマイズを行います。

AMP ページで SNS フォローボタンを表示するために、 WordPress 管理画面 → 外観 → カスタマイズ → SNS より「全フォローボタンの表示」と「本文下フォローボタンの表示」にチェックを入れます。

また、使用するご自身の SNS の URL をご入力ください。

すでに設定されている方は、次のステップに移動します。

テンプレートを変更

次に親テーマにある amp-content.php を、 FTP ソフトを使用し子テーマの直下にコピペします。

子テーマに設置した amp-content.php を開き、下記のコードを探します。

<?php //AMP用のSNSシェアボタン
get_template_part('sns-amp'); ?>

上記のコードの下に、下記のコードを追加します。

<?php // AMP用のSNSフォローボタン
if( is_single() === true && is_body_bottom_follows_visible() )
    get_template_part_amp( 'sns-pages' );
?>

呼び出している sns-pages.php の AMP への対応は、 Simplicity に丸投げしています。

CSS でアイコンを指定し見た目を調整

あとは CSS を指定すれば終わりです。

下記の CSS を子テーマの amp.css にコピペします。

@font-face {
  font-family: 'icomoon';
  src: url('サイトのURL/wp-content/themes/simplicity2/webfonts/icomoon/fonts/icomoon.ttf?hd9e6o') format('truetype'),
       url('サイトのURL/wp-content/themes/simplicity2/webfonts/icomoon/fonts/icomoon.woff?hd9e6o') format('woff'),
       url('サイトのURL/wp-content/themes/simplicity2/webfonts/icomoon/fonts/icomoon.svg?hd9e6o#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.sns-follow-msg {
  font-size: medium;
  margin: 8px 0 0 0;
}

.snsp {
  margin: 10px 0 15px;
  list-style: none;
  padding-left: 0;
}

.snsp > li {
  display: inline-block;
  margin-right: 5px;
}

.snsp > li > a > span {
  background-color: #666;
  border-radius: 4px;
  display: block;
  height: 33px;
  overflow: hidden;
  width: 33px;
}

.snsp > li > a > span:before {
  color: #fff;
  font: normal normal normal 33px/1 icomoon;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Twitter */
.icon-twitter-logo:before {
  content: '\e939';
}

.icon-twitter-logo:hover {
  background-color: #55acee;
}

/* Facebook */
.icon-facebook-logo:before {
  content: '\e92d';
}

.icon-facebook-logo:hover {
  background-color: #3b5998;
}

/* Google Plus */
.icon-google-plus-logo:before {
  content: '\e930';
}

.icon-google-plus-logo:hover {
  background-color: #dd4b39;
}

/* はてなブックマーク */
.icon-hatebu-logo:before {
  content: '\e931';
}

.icon-hatebu-logo:hover {
  background-color: #3f729b;
}

/* Instagram */
.icon-instagram-logo:before {
  content: '\e932';
}

.icon-instagram-logo:hover {
  background-color: #008fde;
}

/* Pinterest */
.icon-pinterest-logo:before {
  content: '\e936';
}

.icon-pinterest-logo:hover {
  background-color: #cc2127;
}

/* YouTube */
.icon-youtube-logo:before {
  content: '\e93a';
}

.icon-youtube-logo:hover {
  background-color: #e52d27;
}

/* Flickr */
.icon-flickr-logo:before {
  content: '\e92f';
}

.icon-flickr-logo:hover {
  background-color: #1d1d1b;
}

/* LINE */
.icon-line-logo:before {
  content: '\e935';
}

.icon-line-logo:hover {
  background-color: #00c300;
}

/* GitHub */
.icon-github-logo:before {
  content: '\eab0';
}

.icon-github-logo:hover {
  background-color: #24292e;
}

/* Push7 */
.icon-push7-logo:before {
  content: '\e937';
}

.icon-push7-logo:hover {
  background-color: #eeac00;
}

/* Feedly */
.icon-feedly-logo:before {
  content: '\e92e';
}

.icon-feedly-logo:hover {
  background-color: #87bd33;
}

/* RSS */
.icon-rss-logo:before {
  content: '\e938';
}

.icon-rss-logo:hover {
  background-color: #fe9900;
}

SNS フォローボタンの見た目は、 Simplicity の通常ページとまったく同じです。

@font-face の 3ヶ所の サイトのURL には、ご自身のサイト URL を https または http からご指定ください。

すでに @font-faceicomoon を読み込んでいる場合には、 @font-face{} 部分はすべて削除します。

また、使用しない SNS の :before:hover の CSS は、削除することをおすすめします。

例えば RSS を使用しない場合には、以下の CSS を削除します。

/* RSS */
.icon-rss-logo:before {
  content: '\e938';
}

.icon-rss-logo:hover {
  background-color: #fe9900;
}

AMP で許可されている CSS サイズは 50キロバイトまでです。使用しない SNS の CSS まで指定する余裕はありません。


AMP ページにも、 Simplicity デフォルトの SNS フォローボタンを簡単に設置できます。

早速カスタマイズをし、フォロワーを獲得する AMP ページにしてはいかがでしょうか。