Simplicity に画像付き SNS フォローエリアを設置するカスタマイズ
完成図
WordPress テーマ Simplicity には、テーマ独自のウィジェット Facebookページ「いいね!」 があります。
このウィジェットは非常にいいね! でも、Twitter のフォローボタンも欲しい。
ということで、Simplicity に Facebook と Twitter のボタンがある画像付き SNS フォローエリアを設置するカスタマイズの紹介です。ついでに、Feedly と Push7 のボタンも付けています。また、AMP ページに設置するカスタマイズも紹介しています。
カスタマイズ後の完成図は、このようなものです。
Feedly と Push7 が不要な場合は、該当部分のコードの削除で外せます。
テーマ設定
各 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, 0.6), rgba(0, 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, 0.2); display: block; height: 48px; line-height: 48px; margin-bottom: 8px; text-align: center; text-decoration: none; transition: 0.3s cubic-bezier(0.4, 0, 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, 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, 0.6), rgba(0, 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, 0.8), rgba(247, 97, 161, 0.5)); content: ''; height: 100%; position: absolute; width: 100%; z-index: 1; }
すると、カラフルなグラデーションが画像にかかります。サイトカラーに合わせたグラデーションにするといいかもしれません。
