WordPress記事の投稿者を表示

2018年5月12日 | WordPress

記事投稿のユーザー権限「投稿者」でプロフィールを記事内に表示する方法を記載します。出力するプロフィールに改行やHTMLを有効にする方法とコピペで使えるHTML、CSS、PHPのコードも備忘録も兼ねて掲載しておきます。

プロフィール出力させる方法は、通常下記を記載します。


<?php the_author_meta('description'); ?>

下記は、出力するプロフィールに改行を反映させるコードです。


<?php echo wpautop(get_the_author_meta('user_description')); ?>

プロフィール出力のデフォルトは、HTMLを記載する事ができません。下記をfunctions.phpに記載する事でHTML使えるようになります。


remove_filter('pre_user_description', 'wp_filter_kses');

ここからは、実際に使用したコードを掲載します。CSSも掲載しておりますので、併せて使って頂くとプロフィール紹介ボックスが表示できます。デモをご用意しておりますので、ご確認ください。

demo


<div class="box_7">
    <span class="box-title_2">投稿者プロフィール</span>
 <div class="box_7_profile">
    <div class="profi_photo">
        <!-- プロフィール画像の出力 -->
        <?php echo get_avatar( get_the_author_id(), 150 ); ?>
    </div>
    <div class="profi_text">
         <!-- 投稿者名出力 -->  
        <h4 class="prof_mida"><?php the_author(); ?></h4>
        <!-- プロフィール情報出力 -->
        <?php echo wpautop(get_the_author_meta('user_description')); ?>
    <div class="prof_link_name">
         <!-- 投稿者記事一覧へのリンク出力 -->
         <?php
if (!is_search()) :
?>

 <i class="fa fa-user"></i> <?php the_author_posts_link(); ?>の記事一覧

<?php
endif;
?>
    </div>
    </div>
 </div>
</div>

上記HTMLの装飾をするCSSは下記になります。シンプルに閲覧しやすいように作成しております。コピペでご自由にお使いください。


.box_7 {
	position: relative;
	border: solid 3px #009FB7;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding: 20px 20px 5px 20px;
}
.box_7 .box-title_2 {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	vertical-align: middle;
	font-size: 17px;
	background: #009FB7;
	color: #ffffff;
	border-radius: 5px 5px 0 0;
	letter-spacing: 1px;
}
.box_7_profile{
	padding: 10px;
	overflow: hidden; 
	position: relative; 
	zoom:1; 
}
.profi_photo{
        float: left;
        margin-right: 10px;
        width: 150px;
}
.profi_photo img{
	border-radius: 50%;
        width:  150px;
        height: 150px;
}
.profi_text{
        float: right;
        margin-left: 10px;
        width: 500px;
}        
.prof_mida{
        border-bottom: 1px solid #ccc !important;
        font-size: 18px;
        margin-top: 0 !important;
        padding-left:0;
        display: block;
}
.box_7_profile a{
        color: #2DABAD;
}
.box_7 a:hover{
        color: #68E5E8;
	text-decoration: none;
}

@media screen and (max-width:480px) {
.box_7 {
	position: relative;
	border: solid 3px #009FB7;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding: 20px 20px 5px 20px;
	margin-top: 60px;
}
.profi_photo{
        float: none;
        margin-right: 0;
        width: 100%;
        text-align: center;
}
.profi_text{
        float: none;
        margin-left: 0;
        width: 100%;
}
.prof_mida{
        border-bottom: none !important;
        font-size: 18px;
        margin-top: 20px !important;
        padding-left:0;
        display: block;
        text-align: center;
}
.prof_link_name{
	text-align: center;
	width: 100%;
}
}