Simplicity に画像付き SNS フォローエリアを設置するカスタマイズ

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

Simplicity には、オリジナルウィジェットの Facebookページ「いいね!」があります。

このウィジェットは非常にいいね!

でも… Twitter のフォローボタンも欲しい。

ということで、Simplicity に、Facebook と Twitter のボタンがある SNS フォローエリアを設置するカスタマイズの紹介です。

ついでに、Feedly と Push7 のボタンも付けています。

また、AMP ページに設置するカスタマイズも紹介しています。

完成図

カスタマイズ後の完成図は、このようなものです。

Feedly と Push7 が不要な場合は、該当部分のコードの削除で簡単に外せます。

このフォローエリアのスタイルは、IRORIO を真似しました。

テーマ設定

各 SNS ボタンには、「テーマ設定」の SNS の URL を使用します。

WordPress 管理画面 → 外観 → カスタマイズ → SNS より、使用するご自身の SNS の URL を予め登録しておきます。

Push7 については、APPNO を登録していないと出力されません。

アイキャッチ画像用テンプレートの作成

フォローエリアには、アイキャッチ画像を表示します。

そのアイキャッチ画像を取得するテンプレートを作成します。

FTP ソフトやサーバーのファイルマネージャー機能を使い、子テーマフォルダの直下に 1 つファイルを作成します。作成したファイルに self-made-sns-follow-area-thum.php と名前を付け、下記コードを追加します。

<?php
if ( has_post_thumbnail() && is_eye_catch_visible() ) {
  the_post_thumbnail( array( 400, 400 ) );
}
?>

フォローエリアのテンプレートの作成

次に、SNS フォローエリアのテンプレートを作成します。

FTP ソフトやサーバーのファイルマネージャー機能を使い、子テーマフォルダの直下に 1 つファイルを作成します。そして、ファイル名を self-made-sns-follow-area.php とします。

作成した self-made-sns-follow-area.php に、下記のコードを追加します。

<?php
$facebook_page_url = 'https://www.facebook.com/' . get_facebook_follow_id();

// 通常ページで Facebook スクリプトを使用する
if ( ! is_amp() ) {
  global $g_facebook_sdk;
  $g_facebook_sdk = true;
}
?>

<div class="follow-area">
  <div class="fb-box">
    <?php
    if ( is_amp() ) {
      get_template_part_amp( 'self-made-sns-follow-area-thum' );
    } else {
      get_template_part( 'self-made-sns-follow-area-thum' );
    }
    ?>
    <div class="fb-in">
      <p class="fb-text"><span>Facebook ページに</span>いいね!をする</p>
      <div class="fb-btn">
        <?php if ( is_amp() ) : ?>
        <div class="fb-like"><amp-facebook-like width=88 height=48 layout="fixed" data-layout="button" data-href="<?php echo $facebook_page_url; ?>" data-size="large"></amp-facebook-like></div>
        <?php else : ?>
        <div class="fb-like" data-href="<?php echo $facebook_page_url; ?>" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
        <?php endif; ?>
      </div>
    </div>
  </div>
  <div class="twitter-box">
    <p class="twitter-text"><span>最新ニュース情報を</span>チェックしよう!</p>
    <div class="twitter-btn">
      <a href="//twitter.com/<?php echo esc_html( get_twitter_follow_id() ); ?>" title="Twitterでフォローします" rel="nofollow"><span class="fa fa-twitter" aria-hidden="true"></span><span>フォローする</span></a>
    </div>
  </div>
</div>
<!-- feedly -->
<div class="feedly-btn">
  <a class="feedly-link" href="//feedly.com/i/subscription/feed/<?php bloginfo( 'rss2_url' ); ?>" title="Feedlyに追加します" rel="nofollow"><span class="feedly-text">Feedlyに追加</span></a>
</div>
<!-- push7 -->
<?php $push7 = fetch_push7_info();
if ( get_push7_follow_app_no() && $push7 ) : ?>
<div class="push7-btn">
  <a class="push7-link" href='https://<?php echo $push7->domain; ?>' title="Push7で更新情報を購読します" rel="nofollow"><span class="push7-text">Push通知を受け取る</span></a>
</div>
<?php endif; ?>

Feedly が不要な場合

Feedly を使わない場合は、下記コードを削除します。

<!-- feedly -->
<div class="feedly-btn">
  <a class="feedly-link" href="//feedly.com/i/subscription/feed/<?php bloginfo( 'rss2_url' ); ?>" title="Feedlyに追加します" rel="nofollow"><span class="feedly-text">Feedlyに追加</span></a>
</div>

Push7 が不要な場合

Push7 を使わない場合は、下記コードを削除します。

<!-- push7 -->
<?php $push7 = fetch_push7_info();
if ( get_push7_follow_app_no() && $push7 ) : ?>
<div class="push7-btn">
  <a class="push7-link" href='https://<?php echo $push7->domain; ?>' title="Push7で更新情報を購読します" rel="nofollow"><span class="push7-text">Push通知を受け取る</span></a>
</div>
<?php endif; ?>

テンプレートを設置

作成した self-made-sns-follow-area.php ファイルを設置します。

ただ、通常ページと AMP ページとで設置方法が異なります。

通常ページに設置

通常ページへのフォローエリアの設置には、ウィジェットを使用します。

ただ、WordPress のウィジェットは、PHP コードが動きません。

そこで「WordPress でプラグイン使わずにウィジェットで PHP コード動かす」で紹介されているショートコードを使う方法を用います。

子テーマの functions.php に、見出し「functions.php」で紹介されているコードを追加します。

2 行目の 'ahoaho' の部分は、'self-made-sns-follow-area' にご変更ください。

コードを追加後「投稿 SNS ボタン上」または「投稿 SNS ボタン下」のウィジェットエリアに、「カスタム HTML 」ウィジェットを放り込みます。

「カスタム HTML 」ウィジェットに、[self-made-sns-follow-area] を記述すれば SNS フォローエリアが表示されます。

AMP ページに設置

AMP ページにフォローエリアを設置するには、AMP ページのテンプレートをカスタマイズします。

まず、親テーマの amp-content.php を子テーマフォルダ直下にコピペをし、子テーマに設置した amp-content.php を開きます。

そして、下記のコードを探します。

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

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

<?php // SNS フォローエリア
get_template_part( 'self-made-sns-follow-area' ); ?>

次に、親テーマの amp-header.php を子テーマフォルダ直下にコピペをします。

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

echo '<link rel="stylesheet" href="https://max'.'cdn.boot'.'strapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">'.PHP_EOL;

上記のコードの上の行に、下記のコードを追加します。Facebookページ「いいね!」ボタンを AMP ページで表示するための amp-facebook-like スクリプトを読み込むコードです。

echo '<script async custom-element="amp-facebook-like" src="https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"></script>' . PHP_EOL;

これで AMP ページの SNS シェアボタンの下に、フォローエリアを表示できます。

ただし、amp-facebook-like は現在英語しか対応しておらず、Facebookページ「いいね!」のボタンが「Like」で表示されます。

CSS の指定

あとはCSS で見た目を整えて終わりです。

子テーマの style.css に、下記 CSS を追加します。また、AMP ページにフォローエリアを設置する場合は、子テーマの amp.css にも追加します。

.follow-area {
  display: flex;
  margin-bottom: 8px;
}

.fb-box,
.twitter-box {
  height: 168px;
  position: relative;
  width: 50%;
}

.fb-box {
  background: #333;
}

.fb-box:before {
  background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.fb-box img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.fb-box amp-img {
  height: 100%;
}

.fb-in {
  position: absolute;
  top: 26.5px;
  width: 100%;
  z-index: 1;
}

.fb-text,
.twitter-text {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  margin: 0;
  text-align: center;
}

.fb-text > span,
.twitter-text > span {
  display: block;
}

.fb-btn {
  margin-top: 12.5px;
  text-align: center;
}

.twitter-box {
  background: #111;
}

.twitter-text {
  margin: 26.5px 0 12.5px;
}

.twitter-btn {
  background: #1b95e0;
  border-radius: 4px;
  display: flex;
  height: 28px;
  justify-content: center;
  line-height: 28px;
  margin: 0 auto;
  width: 119px;
}

.twitter-btn:active,
.twitter-btn:focus,
.twitter-btn:hover {
  background: #0c7abf;
}

.twitter-btn > a {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

.twitter-btn .fa {
  font-size: 18px;
  margin-right: 4px;
  position: relative;
  top: 1.6px;
}

/* Feedly & Push7 */
.feedly-link,
.push7-link {
  border-radius: 25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  display: block;
  height: 48px;
  line-height: 48px;
  margin-bottom: 8px;
  text-align: center;
  text-decoration: none;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.feedly-link {
  background: #6CC655;
}

.push7-link {
  background: #efad00;
}

.feedly-link:hover,
.push7-link:hover {
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, .2);
  transform: translateY(-1px);
}

.feedly-text,
.push7-text {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 17px;
  justify-content: center;
}

.feedly-text:before,
.push7-text:before {
  display: inline-block;
  font: normal normal normal 26px/1 icomoon;
  margin-right: 8px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.feedly-text:before {
  content: '\e92e';
  font-size: 29px;
}

.push7-text:before {
  content: '\e90e';
}

AMP ページ用 CSS

AMP ページにフォローエリアを設置する場合は、下記の 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;
}

これは、Feedly と Push7 のアイコンを読み込む CSS です。

3 ヶ所のサイトのURL の部分は、https または http から始まるサイト URL を指定します。

尚、この CSS を指定すると、AMP ページのシェアボタンにもアイコンを表示できます。そのカスタマイズ方法は、下記のページで解説しています。

Simplicity の AMP でシェアボタンのアイコンとフォローボタンを表示

アレンジ

CSS の中に、このような記述があります。

.fb-box:before {
  background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

background の値を以下のように変えてみます。

.fb-box:before {
  background: linear-gradient(rgba(140, 27, 171, .8), rgba(247, 97, 161, .5));
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

すると、カラフルなグラデーションが画像にかかります。

サイトカラーに合わせたグラデーションにするといいかもしれません。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。