この記事はSaruwakaさんが作成した有料テーマ【SANGO】の方向けの記事になります。
今回は記事下に表示される「この記事を書いた人」にamazonほしいものリストへのリンクとアイコンを追加するカスタム記事です。
[box class=”box26″ title=”完成図”]
[/box]
子テーマのfunction.phpに追記しますので、FTPソフトの扱い方を覚える必要があります。
FTPソフトについてはこちら。
[kanren id=”1065″]
[box class=”box31″ title=”準備事項”]
- FTPソフトを使用できるようにする。
- 【超重要】子テーマのfunction.phpのバックアップを取る。
- 【超重要】子テーマのstyle.cssのバックアップを取る。
- 慣れていない方は気を落ち着かせる。
[/box]
【SANGO】カスタム：「この記事を書いた人」にAmazonボタンをプロフィールに挿入する手順
では、実際の手順を記載していきます。
[timeline]
[tl label=’手順1′ title=’amazonへのリンクの挿入’]
ユーザーあなたのプロフィールを開き、amazonほしいものリストのリンクを挿入します。
ここで、デフォルトで用意されているSNSの中から１つ犠牲にしなければなりません。
なんでかというとですね、SNSの項目を増やすとデザイン性に非常にアンバランスになってくるから。
あとは名称変更とか複雑に絡んできちゃうのですよね。
ちなみに、私はFacebookをブログに連結させていませんので、Facebookのリンク先にamazonのリンク先を挿入しました。
[/tl]
[tl label=’手順2′ title=’こんな感じ’]
[/tl]
[tl label=’手順3′ title=’functions.phpへの追記’]
子テーマのfunction.phpに下記コードを追加します。
[codebox title=”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')),
'Amazon' => esc_url(get_the_author_meta('facebook')),
'Instagram' => esc_url(get_the_author_meta('instagram')),
'Feedly' => esc_url(get_the_author_meta('feedly')),
'Line' => 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 こなゆき */
[/codebox]
[/tl]
[tl label=’手順4′ title=’style.cssへの追記’]
子テーマのstyle.cssへ下記コードを追加します。
[codebox title=”CSS”]
.follow_btn .Amazon:before {
font-family: "Font Awesome 5 Free";
background: #febe31;
content: "\f270";
}
[/codebox]
[/tl]
[/timeline]
以上で追加されます。
【SANGO】カスタム：注意事項
[list class=”li-niku”]
- 必ず子テーマ（poripuでもSANGO子テーマでもOK）に追記してください。
- 必ずバックアップを取って実施してください。
- キャッシュの削除をお忘れなきようお願いします。
- 自己責任でお願いします。
[/list]
補足
私はFacebookにリンク先を挿入しましたが、twitter、Feedly、Instagram、Website、Youtubeでも可能です。
その場合、挿入するPHPの該当箇所を変更してください。
[codebox title=”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を変更する場合はココ */
'Line' => esc_url(get_the_author_meta('line')), /* Lineを変更する場合はココ */
'YouTube' => esc_url(get_the_author_meta('youtube')), /* Youtubeを変更する場合はココ */
'Website' => esc_url(get_the_author_meta('url')), /* Websiteを変更する場合はココ */
);
[/codebox]
また、変更箇所とcssのクラスネームは揃えてください。
[box class=”box26″ title=”例えば”]
amazonにしたい場合、挿入するPHPをamazonに変更し、cssのクラスネームを.Amazonから.amazonに変更してください。
[/box]
いかがでしたでしょうか？
前回はプロフィールを変更しましたが、今回は「この記事を書いた人」にamazonほしいものリストを追加してみました。
もしかしたら、あなたのファンがほしいものリストからあなた宛のプレゼントを送ってくれるかもしれません（笑）
最後までお読みいただきありがとうございました。
【SANGO】カスタム：プロフィールの変更はこちらへ
プロフィールのアイコンの変え方はこちら。
[kanren id=”1428″]
[box class=”box29″ title=”合わせて読みたい”]
[card2 id=”1880″]
[/box]