今回はワードプレスで著者情報を自作する方法について解説します。
Simple Author Box
Simple Author Boxを使えば、著者情報はサクッと作れます。ただ、画像の大きさを変更する場合課金しないといけないのが難点です。
ウィジェットとして著者情報を追加する
外観 > ウィジェット の「ユーザー・プロフィール」をサイドバーに追加します。「ユーザー・プロフィール」がない場合は、「テキスト」か「カスタムHTML」のウィジェットを使用して著者情報プロフィールを作成することができます。
プラグインなしで著者情報を自作する
「プラグインを使用する場合」「ウィジェットを使用する場合」と比べると作成の難易度は上がりますが、著者情報を自作することも可能です。
管理画面のユーザープロフィールに項目を追加する
functions.phpに下記コードを追加します。
// ユーザープロフィールの項目のカスタマイズ
function my_user_meta($wb)
{
//項目の追加
$wb['twitter'] = 'twitter';
$wb['Facebook'] = 'Facebook';
$wb['Instagram'] = 'Instagram';
$wb['YouTube'] = 'YouTube';
$wb['position'] = '役職';
$wb['company_name'] = '会社名';
$wb['company_tel'] = '会社電話番号';
return $wb;
}
add_filter('user_contactmethods', 'my_user_meta', 10, 1);
※下記コードの内不要な行は削除すればユーザー画面に削除した項目は表示されなくなります。
$wb['twitter'] = 'twitter'; $wb['Facebook'] = 'Facebook'; $wb['Instagram'] = 'Instagram'; $wb['YouTube'] = 'YouTube'; $wb['position'] = '役職';
著者情報を投稿ページの下部に表示させる
simple.phpに以下コードを追加します。
<div class="author-box">
<div class="author-name">
Author：<?php the_author_meta("display_name"); ?>
</div>
<div class="belle-box">
<div class="belle-img">
<img src="【画像URL】" width="【画像のサイズ】" height="【画像のサイズ】">
</div>
<div class="author-sns">
<?php if(get_the_author_meta('twitter') != ""): ?>
<?php the_author_meta('twitter'); ?>
<?php endif; ?>
<?php if(get_the_author_meta('Instagram') != ""): ?>
<?php the_author_meta('Instagram'); ?>
<?php endif; ?>
<?php if(get_the_author_meta('Facebook') != ""): ?>
<?php the_author_meta('Facebook'); ?>
<?php endif; ?>
<?php if(get_the_author_meta('YouTube') != ""): ?>
<?php the_author_meta('YouTube'); ?>
<?php endif; ?>
</div>
</div>
<div class="belle-info">
<?php the_author_meta("description"); ?>
</div>
<div class="clearfix"></div>
</div>
<img src="【画像URL】" width="【画像のサイズ】" height="【画像のサイズ】">
上記コードの代わりに下記コードを使用してもいいそうです。ただし、テーマによっては機能しません。
<?php echo get_avatar(get_the_author_meta( 'ID' ),【表示させたいサムネイルのサイズ ex：「150」と入力】 ); ?>
著者情報の位置をCSSで指定
CSSに以下コードを追加します。
/*基本パーツ*/
.author-box{
border:2px solid;
margin-top:25px;
display：flexbox;
}
.author-name{
border-bottom: dotted 1px;
padding:6px;
}
.belle-box{
float:left;
}
.belle-img2{
float:left;
}
.belle-img,.belle-img2{
margin:5px;
}
.belle-info{
font-size:13px;
padding:5px;
overflow: hidden;
}
.belle-info2{
font-size:13px;
padding:5px;
}
/* SNSボタンの間隔調整 */
.author-sns,.author-sns2{
padding:13px;
}
/* ボタン全体の装飾 */
.psns{
font-family:'Trebuchet MS',sans-serif;/* 好きなフォントに変えてね */
border-radius:50%;
display:inline-block;
width:40px;
height:40px;
font-size:22px;
transition:.5s;
text-decoration:none !important;;
}
/* ボタンマウスホバー時テキストカラー */
.psns:hover{
color:#fff !important;
}
/* Twitter */
.ptwitter{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.ptwitter:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* お問い合わせ */
.pemail{
border:solid 1px #f3981d;
color:#f3981d;
}
/* お問い合わせマウスホバー時 */
.pemail:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* ボタンの位置 */
.pfollow{
display:flex;
flex-flow:row wrap;
}
.pfollow2{
display:flex;
flex-flow:row wrap;
max-width:200px;}
/* ボタン同士の余白 */
.pfollow li,.pfollow2 li{
flex:0 0 33%;
text-align:center!important;
}
/* ボタンレイアウト調整 */
ul.pfollow,ul.pfollow2{
list-style-type:none!important;
padding:0!important;
}
※このままでも問題起動しますが、余計なCSSコード混じっている可能性ありです。適宜削除してください。
当記事を作成するにあたり下記記事を参考しました。
著者情報（この記事を書いた人）をプラグインなしで設置する（2020年増補改訂） | きもおたねっと。
WordPressでユーザープロフィールの項目を新たに追加する方法！管理画面の投稿者情報をカスタマイズする | ホワイトベアー株式会社
WordPressで著者情報を追加する3つの方法（プラグイン・コーディング・ウィジェット） | まほウェブ
以上、著者情報を自作する方法について解説しました。
コメント