【SANGO】カスタム:「この記事を書いた人」に楽天roomを追加する方法!コピペOK!

Amazon 楽天マーク

この記事はSaruwakaさんが作成した有料テーマ【SANGO】の方向けの記事になります。

今回は記事下に表示される「この記事を書いた人」に楽天roomへのリンクとアイコンを追加するカスタム記事です。

完成図

この記事を書いた人にamazonマークを表示させます

子テーマのfunction.phpに追記しますので、FTPソフトの扱い方を覚える必要があります。

FTPソフトについてはこちら。

【wordpress】初心者向け。FTPソフトを入れよう!
準備事項
  • FTPソフトを使用できるようにする。
  • 【超重要】子テーマのfunction.phpのバックアップを取る。
  • 【超重要】子テーマのstyle.cssのバックアップを取る。
  • 慣れていない方は気を落ち着かせる。

【SANGO】カスタム:「この記事を書いた人」に楽天roomをプロフィールに挿入する手順

では、実際の手順を記載していきます。

手順1
楽天roomへのリンクの挿入

ユーザーあなたのプロフィールを開き、楽天roomへのリンクを挿入します。

ここで、デフォルトで用意されているSNSの中から1つ犠牲にしなければなりません。

なんでかというとですね、SNSの項目を増やすとデザイン性に非常にアンバランスになってくるから。

あとは名称変更とか複雑に絡んできちゃうのですよね。

ちなみに、私はLineをブログに連結させていませんので、Lineのリンク先に楽天roomへのリンク先を挿入しました。

手順2
こんな感じ

あなたのプロフィールにamazonのリンクを挿入

手順3
functions.phpへの追記

子テーマのfunction.phpに下記コードを追加します。

HTML


/* この記事を書いた人を若干変更加えるスクリプト by こなゆき */
if (!function_exists('insert_author_info')) {
  function insert_author_info()
  {
    $author_descr = get_the_author_meta('description');
    if (!empty($author_descr)): //プロフィール情報が埋まっているときに表示 ?>
      <div class="author-info pastel-bc">
        <div class="author-info__inner">
          <div class="tb">
            <div class="tb-left">
            <div class="author_label">
              <span>この記事を書いた人</span>
            </div>
            <div class="author_img"><?php $iconimg = get_avatar(get_the_author_meta('ID'), 100);
            if ($iconimg) {
                echo $iconimg;
            }
            //画像 ?></div>
              <dl class="aut">
              <dt>
                <a class="dfont" href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>">
                  <span><?php esc_attr(the_author_meta('display_name')); //名前 ?></span>
                </a>
              </dt>
              <dd><?php esc_attr(the_author_meta('yourtitle'));?></dd>
              </dl>
            </div>
          <div class="tb-right">
            <p><?php the_author_meta('user_description'); //プロフィール文 ?></p>
            <div class="follow_btn dfont">
            <?php
              $socials = array(
                'Twitter' => esc_attr(get_the_author_meta('twitter')),
                'Facebook' => esc_url(get_the_author_meta('facebook')),
                'Instagram' => esc_url(get_the_author_meta('instagram')),
                'Feedly' => esc_url(get_the_author_meta('feedly')),
                'rakuten' => esc_url(get_the_author_meta('line')),
                'YouTube' => esc_url(get_the_author_meta('youtube')),
                'Website' => esc_url(get_the_author_meta('url')),
              );
              foreach ($socials as $name => $url) {
                if ($url) { ?>
                  <a class="<?php echo $name; ?>" href="<?php echo esc_url($url); ?>" target="_blank" rel="nofollow noopener noreferrer"><?php echo esc_attr($name); ?></a>
          <?php }
              }?>
            </div>
          </div>
          </div>
        </div>
      </div>
    <?php endif;}
}
/* ここまで by こなゆき */
手順4
style.cssへの追記

子テーマのstyle.cssへ下記コードを追加します。

CSS

.follow_btn .Rakuten:before {

    font-family: "Font Awesome 5 Free"!important;
    background: #df0000;
    content: "\f25d";
    font-size: 38px;

}

以上で追加されます。

[/timeline]

【SANGO】カスタム:注意事項

  • 必ず子テーマ(poripuでもSANGO子テーマでもOK)に追記してください。
  • 必ずバックアップを取って実施してください。
  • キャッシュの削除をお忘れなきようお願いします。
  • 自己責任でお願いします。

補足

私はLineにリンク先を挿入しましたが、twitter、Feedly、Instagram、Website、Facebook、Youtubeでも可能です。

その場合、挿入するPHPの該当箇所を変更してください。

PHP

$socials = array(
                'Twitter' => esc_attr(get_the_author_meta('twitter')), /* twitterを変更する場合はココ */
                'Facebook' => esc_url(get_the_author_meta('facebook')),  /* Facebookを変更する場合はココ */
                'Instagram' => esc_url(get_the_author_meta('instagram')), /* Instagramを変更する場合はココ */
                'Feedly' => esc_url(get_the_author_meta('feedly')), /* Feedlyを変更する場合はココ */
                'Rakuten' => esc_url(get_the_author_meta('line')),
                'YouTube' => esc_url(get_the_author_meta('youtube')), /* Youtubeを変更する場合はココ */
                'Website' => esc_url(get_the_author_meta('url')), /* Websiteを変更する場合はココ */
              );

また、変更箇所とcssのクラスネームは揃えてください。

例えば
rakutenにしたい場合、挿入するPHPをrakutenに変更し、cssのクラスネームを.Rakutenから.rakutenに変更してください。

いかがでしたでしょうか?

前回はプロフィールを変更しましたが、今回は「この記事を書いた人」に楽天roomを追加してみました。

もしかしたら、あなたのroomからどなたかが購入してくれるかもしれません。

最後までお読みいただきありがとうございました。

【SANGO】カスタム:プロフィールの変更はこちらへ

プロフィールのアイコンの変え方はこちら。

Amazon 楽天マーク 【sango】プロフィールにAmazonと楽天ROOMのボタンを追加する方法!コピペOK!