【Affinger5】プラグインなし！Twitterシェア数表示＆外部リンクにアイコン表示＆コピーライトをいじる【ネタ３本立て】

2021年から、WordPressテーマに「Affinger5」を使用しております。

テーマ変更にあたり、いろいろとカスタマイズをしました。
今回は、単独記事にするほどではないネタを3本お届け。

• Twitterのシェア数を取得して表示する
• エントリー部分のみ、外部リンクだけアイコンをつける
• フッターのクレジット表記をプラグインなしで削除＆コピーライトを好きに編集する

2番目は、現在ベータ版がリリースされているAffinger6でも可能です（ローカル環境で確認済み）。
1番目もいけると思うのですが、きちんとした検証はできてないので一応（仮）ということで。。

TWITTERのシェア数を取得して表示する

作業の流れは以下の通りです。

1. 外部サービス「widgetoon.js & count.jsoon」にブログのアドレスを登録申請する
2. 子テーマのfunctions.phpファイルにコードを追記する
3. シェア数を表示させたいページのphpファイル（エントリー部分ならsns.php）を親テーマからダウンロードし、子テーマにアップロード
4. シェア数を表示するコードを追記する

参考にさせていただいたのは以下の記事です。

ぶっちゃけ、ほぼ一緒のことをしています。

1. 「widgetoon.js & count.jsoon」に登録申請

サイトのトップページにある「サイト登録申請」ボタンをクリックして、

• サービスを利用したいサイト（ブログ）のトップページアドレス
• メールアドレス

以上の情報を入力します。

当ブログなら、申請するアドレスは「https://weblog.sh-rainbow.net/」になりますね。

数日すると、折り返し登録完了＆ユーザーページのアドレスが記載されたメールが届きます。
私は数年前に登録したので、何日くらいでメールが届くのかは忘れてしまいました、すみません?

2. 子テーマのfunctions.phpファイルにコード追記

外観→テーマエディターにすすみ、funtions.phpファイルを開きます。

1〜4行目にある​

<?php
if ( !defined( 'ABSPATH' ) ) {
exit;
}

このコードのあとに追記していきます。

//count.jsoonからTwitterのツイート数を取得
function fetch_twitter_count($url){
  $url = rawurlencode( $url );
  $subscribers = wp_remote_get( "http://jsoon.digitiminimi.com/twitter/count.json?url=$url" );
  $res = '0';
  if (!is_wp_error( $subscribers ) && $subscribers["response"]["code"] === 200) {
    $body = $subscribers['body'];
    $json = json_decode( $body );
    $res = ($json->{"count"} ? $json->{"count"} : '0');
  }
  return $res;
}

3. シェア数を表示させたいページのphpファイルを親テーマからダウンロードし、子テーマにアップロード

親テーマのファイルを直接編集すると、アップデートのたびに作業をしないといけなくなるので、この方法を採用しました。

FTPソフトを使うなり、レンタルサーバー提供のファイルマネージャーを使うなりして、sns.phpファイルをパソコンにダウンロードします。

次に、子テーマのフォルダに移動して、ダウンロードしたファイルをアップロードします。

4. シェア数を表示するコードを追記する

WordPress管理画面から外観→テーマエディターとすすみ、sns.phpファイルを開きます。

ページ中程にある、以下のコードを探してください。
「ツイートボタン」で検索をかけると早く見つかります。

<?php if ( trim( $GLOBALS['stdata410'] ) === '' ): ?>
	<!--ツイートボタン-->
	<li class="twitter"> 
	<a rel="nofollow" onclick="window.open('//twitter.com/intent/tweet?url=<?php echo $url_encode ?><?php echo $twitter_tag ?>&text=<?php echo $title_encode ?><?php echo $twitter_name ?>&tw_p=tweetbutton', '', 'width=500,height=450'); return false;"><i class="fa fa-twitter"></i><span class="snstext <?php echo $plug; ?>" >Twitter</span><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()=='0')?'<span class="snstext pcnone" >Twitter</span>':'<span class="snscount">'.scc_get_share_twitter().'</span>'; ?></a>
	</li>
<?php endif; ?>

コードの終わり間近にある「< /a>」の直前に、以下のタグを追記します。​

<?php echo fetch_twitter_count( get_permalink() ); ?>

以下のようになればOKです。​

（これより前のコードは長いので省略です）
<span class="snstext pcnone" >Twitter</span><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()=='0')?'<span class="snstext pcnone" >Twitter</span>':'<span class="snscount">'.scc_get_share_twitter().'</span>'; ?><?php echo fetch_twitter_count( get_permalink() ); ?></a>

ツイート数の取得には時間がかかるのでしばらく待ちましょう。

うまくいっていれば、ツイートボタンに数字が表示されます。

エントリー部分のみ、外部リンクだけアイコンをつける

以前はプラグインを使って表示させていましたが、インストールプラグインを減らすために何とかならんか……と検索しまくった結果、とても参考になる記事を見つけました。

例に漏れず、ほぼ同じことをしております。

Affinger5管理画面→「その他」ページにすすみ、「上級者向け」項目まで移動してください。

コードの出力 のすぐ下にある「headに出力するコード」に、以下のコードを入力します。

<script>
    jQuery(function(){
        jQuery('.entry-content p a[href*="//"]').not('[href*="'+location.hostname+'"]').each(function(){
            if(jQuery(this).text() !== ""){
                jQuery(this).prepend('<i style="vertical-align:middle;" class="fa fa-external-link fa-fw" aria-hidden="true"></i>');
            }
        })
    });
</script>

.not(hogehoge)の形で、外部リンクだけどアイコンをつけたくない条件を付け足すこともできます。
付け足す場合は、「.each〜」の前に書きます。

例：class属性にhogeが含まれている場合は除外する

.not('[class*="hoge"]')

書き方については、CSSですが以下の記事が参考になります。

フッターのクレジット表記をプラグインなしで削除＆編集する

最初はテーマ購入特典でついてきたクレジット削除プラグインを使っていたんですが、コピーライト表示まで若干時間がかかるのが気になって、「プラグインなしでなんとかならんもんか」と調べたのがきっかけです。

こちらの記事をほぼまねっこしております。

作業の流れとしては以下の通りです。

1. 親テーマからst-kanri.phpファイルをダウンロードし、子テーマにアップロードする
2. 該当部分のコードを書き換える

親テーマのファイルを直接編集する方法はとっていません。

1. 親テーマからst-kanri.phpファイルをダウンロードし、子テーマにアップロードする

Twitterのシェア数を取得して表示するで説明した、「シェア数を表示させたいページのphpファイルを親テーマからダウンロードし、子テーマにアップロード」と同様の方法で、パソコンにst-kanri.phpをダウンロードし、子テーマフォルダにアップロードします。

2. 該当部分のコードを書き換える

外観→テーマエディターにすすみ、アップロードしたst-kanri.phpファイルを開きます。

書き換える対象のコードは、以下の通りです。
私の環境では、4089〜4152行辺りにありました。​​

ここを、以下のように書き換えます。​​

このコードの出力結果が、ブログのフッターにある「© 2016 - 2021 星空と虹の橋のあしあと.」です。

「© 2016 - 2021 」が10〜11行目、「星空と虹の橋のあしあと.」が19〜20行目にあたります。
この部分を、好きな文章に書き換えればOKです。

'<font color="red" size="8">おはようございます！</font>'

​

まとめ

意外とボリュームがありましたｗ

手こずったのは、クレジット表記の書き換えです。
現在の西暦を自動取得したくて、別のカスタマイズ記事を参考にしながら自力で設定してみても全然反映されなくて……。
「date ( 'Y' )」で取得できるのは知っていたものの、コードへの書き方が悪かったようです。

ちなみにAffinger6でも書き換えは可能だと思うのですが、コードが結構変わっておりまして、どこをいじればいいのかの目星がついておりません。
目星がついたからと言ってできるとは言ってない

個人的に、ブログ開始月は入れておきたいなーって思うんですよね。

運よくできたらまとめてみます。