この記事を書いた人のボタンを変更する

ブログ

【SANGO】Amazonウィッシュリスト&楽天ROOMにリンクを貼ろう!2【コピペ】

投稿日:

[category id="カテゴリーID"][/category]この記事はSaruwakaさんが作成した有料テーマ【SANGO】の方向けの記事になります。

今回は記事下に表示される「この記事を書いた人」のアイコンマークを変えたいと思います。

完成図がこちら。

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

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

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

[kanren id="1065"]

[box class="box33" title="実装する前の準備"]
[list class="li-chevron li-mainbdr main-c-before"]

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

[/list][/box]

手順

[timeline]
[tl label='リンクの挿入' title='リンクの挿入']

ユーザーあなたのプロフィールを開き、amazonほしいものリストと楽天Roomのリンクを挿入します。

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

私はFacebookとLineをブログと連結させていませんので、FacebookとLineのリンク先に、それぞれamazonと楽天Roomのリンク先を挿入しました。

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

[/tl]
[tl label='function.phpへの追記' title='function.phpへの追記']

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


/* この記事を書いた人を若干変更加えるスクリプト 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')),
                'Amazon' => 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 こなゆき */

[/tl]
[tl label='style.cssへの追記' title='style.cssへの追記']

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

CSS

.follow_btn .Amazon:before {

    font-family: "Font Awesome 5 Free";
    background: #febe31;
    content: "\f270";

}

.follow_btn .Rakuten:before {

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

}


[/tl]
[/timeline]

以上で追加されます。

注意事項

[list class="li-niku"]

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

[/list]

補足

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

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

PHP


$socials = array(
                'Twitter' => esc_attr(get_the_author_meta('twitter')), /* twitterを変更する場合はココ */
                'Amazon' => esc_url(get_the_author_meta('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のクラスネームは揃えてください。

[box class="box26" title="例えば"]
amazonにしたい場合、挿入するPHPをamazonに変更し、cssのクラスネームを.Amazonから.amazonに変更してください。
[/box]

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

前回はプロフィールを変更しましたが、今回は「この記事を書いた人」を変更しました。

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

プロフィールの変更はこちらへ

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

[kanren id="1428"]


  • この記事を書いた人

こなゆき

パーフェクト趣味人。 知的好奇心MAX。 ゲーム・パソコン全般・科学・DIY・オーパーツとか怪しげなものも大好物。

-ブログ

Copyright© さぶかるぐらし , 2019 All Rights Reserved.