記事投稿のユーザー権限「投稿者」でプロフィールを記事内に表示する方法を記載します。出力するプロフィールに改行やHTMLを有効にする方法とコピペで使えるHTML、CSS、PHPのコードも備忘録も兼ねて掲載しておきます。
プロフィール出力させる方法は、通常下記を記載します。
[html]
<?php the_author_meta(‘description’); ?>
[/html]
下記は、出力するプロフィールに改行を反映させるコードです。
[html]
<?php echo wpautop(get_the_author_meta(‘user_description’)); ?>
[/html]
プロフィール出力のデフォルトは、HTMLを記載する事ができません。下記をfunctions.phpに記載する事でHTML使えるようになります。
[html]
remove_filter(‘pre_user_description’, ‘wp_filter_kses’);
[/html]
ここからは、実際に使用したコードを掲載します。CSSも掲載しておりますので、併せて使って頂くとプロフィール紹介ボックスが表示できます。デモをご用意しておりますので、ご確認ください。
[html]
<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]
上記HTMLの装飾をするCSSは下記になります。シンプルに閲覧しやすいように作成しております。コピペでご自由にお使いください。
[css]
.box_7 {
position: relative;
border: solid 3px #009FB7;
font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "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 Pゴシック", "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%;
}
}
[/css]
この度のウェブサイト制作において投稿権限を持つユーザー様のメディアをわける必要がありましたので、「View Own Posts Media Only」というプラグインを使いユーザー間のメディア共有を防ぎました。プラグインの詳細説明がこちらでされていますので参考にされてください。
投稿者権限のユーザーでは、iframeタグの使用ができないようになっているようです。もし、地図を埋め込んだりYouTube動画を埋め込むにあたりiframeタグを使われる場合は、こちらの記事を参考にされてください。