恐らく訪問者に自身の情報を表示させたい、という使用方法よりも、作者情報を投稿や固定ページに表示することで信頼度が上がってSEOに効果がある？という感覚で表示させることが多い作者情報。

これを表示できるブロックがWordPressには標準搭載されています。

そう、「投稿者」という名前のブロックです。

ブロックテーマのテンプレート内に挿入すれば、簡単にプロフィール欄が表示されるようになります。

でもちょっとデザインが．．。今回はそんな方のために標準の「投稿者」ブロックをちょっと見栄えよくする方法を紹介します。

標準の投稿者ブロックを体裁よく表示する方法

標準の「投稿者」ブロックをそのまま表示すると、実に素っ気ない！？ですよね。

他のブロックと同じように文字の大きさや色などが変更できるものの、ちょっとアレな感じがします。

ここでは、標準の「投稿者」ブロックにいくつかのカスタマイズを行って可能な限り見栄えよくしていきます。

ちなみに完成形は↓↓です。

Site Logo

ひまあーと（管理人）

WordPressと出会ったのはTwenty Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。

本サイトでは主にTT2テーマのカスタマイズ方法、多彩な機能を詰め込んだ【Hima Art Utility】プラグインの紹介をしています。

WordPressへの感謝、プラグイン作者への感謝を込めて、ささやかながら日本語翻訳に参加させていただいています（参加プロダクトはこちら）

標準状態と比べたら、いい感じになってるかなと思いますがいかがでしょうか？

プロフィールの詳細情報で改行などを使えるようにする

不正なコードを使われないようにするため、ユーザープロフィール編集画面の「プロフィール情報」欄では、更新時に入力された文字からHTMLタグのほとんどを削除する仕組みになっています。

以下のコードをテーマ（子テーマ）のfunctions.phpへ追加することで、チェックを無効にし、HTMLタグを使えるようにします。

remove_filter('pre_user_description', 'wp_filter_kses');//プロフィールのHTMLを許可

これによって、改行や見出しなどのタグが使えるようになったり、インラインでスタイルを入れて文字装飾したりすることができるようになり、投稿者ブロックで「自己紹介を表示」を有効にした場合に表示される文章の体裁を整えることができます。

冒頭で触れた通り、この手法はこの欄の入力セキュリティに穴をあけるものです。個人的には不正にログインされて、おかしなリンクを挿入される．．程度のリスク上昇なのかもと考えますが、検討の上で導入するようにしてください

アバター（ユーザー画像）でグラバター（Gravatar）を使用しないようにする

「投稿者」ブロックで表示されるユーザー画像は、Gravatarという外部サービスの画像を用いるようになっています。

が、わざわざサービスに登録しなくても、メディアにアップロードした画像をそのままユーザー画像として使うこともできます。

これをカスタムコードで実装するのはかなり大変なので、プラグインに頼ることとします。

おすすめは、「Simple Local Avaters」というプラグインです。

グラバター（Gravatar）の代わりにアップロードした画像をユーザー画像にできるプラグイン「Simple Local Avatars」

コメント欄や掲示板プラグインの投稿者欄へ表示されるユーザー画像（これをアバターと言います）。WordPress…

Knowledge Base

インストールして有効化すると、プロフィール設定画面にユーザー画像アップロード用の項目が追加されるので、そこで画像を設定すれば、Gravatarの代わりにその画像が表示されるようになります。

「プロフィール情報」欄を整える

前項の設定でプロフィール情報欄にHTMLタグが使えるようになりましたので、タグを使ってプロフィール情報を整えましょう。

サンプルでは以下のように入力していますので参考に．．。

<p class="author-profile">WordPressと出会って<span style="color:red;">10年超</span>。作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。</p>
<p class="author-profile">本サイトでは主にTT2テーマのカスタマイズ方法、多彩な機能を詰め込んだ【<a href="https://habone.biz/hima-art-utility" target="_blank" rel="noopener">Hima Art Utility</a>】プラグインの紹介をしています。</p>
<p class="author-profile">WordPress全般のことについては、姉妹サイト「<a htef="https://www.momosiri.info/" target="_blank" rel="noopener">KnowledgeBase</a>」でも数多くのカスタマイズ情報を紹介していますのでよかったら訪問ください。</p>

デザインを整える

最後にデザイン要素の設定をしていきます。

パソコンとモバイルとでデザインを出し分ける

個人的に、モバイル環境からのアクセスでは、ユーザー画像は必要ないかなと思う点、上下マージンなどの調整を別々に行った方がいいという点から、パソコンとモバイルとでデザインコードを分けることにしました（実際にスマホで見ていただければデザインが違うのがお分かりいただけると思います）。

パソコンとモバイルでのデザインコード振り分けは、通常メディアクエリというのを書いて行うのですが、ここでは、テーマ（子テーマ）のfunctions.phpへ以下の簡単なコードを追加して、bodyクラスを使って出し分けをします。

/***** PC Mobileでそれぞれbodyclassを付与 *****/
if ( !function_exists( 'sample_pc_mobile_body_class' ) ){
function sample_pc_mobile_body_class( $classes ) {
    if ( wp_is_mobile() ) {
        $classes[] = 'is-mobile';
    }else{
		$classes[] = 'is-pc';
	}
    return $classes;
}
}
add_filter( 'body_class', 'sample_pc_mobile_body_class' );

これで、パソコンのみに反映させるスタイルコードには

body.is-pc

を、モバイルのみに反映させる場合は

body.is-mobile

を追加すれば判別して適用してくれます。

本サイトで配布している【Hima Art Utility】プラグインでは、タブレットからのアクセスをパソコンと同様に認識させる機能を追加した形で、この出し分けができる機能を設けています

サンプルのようにするためのスタイルコード

以下が冒頭のサンプル表示で追加したスタイルコードです。コピーしてテーマ（子テーマ）のstyle.cssへ追加すれば同じ感じのデザインになります。

スタイルコードは本サイトの設定に合わせたものですので、お使いのテーマやテンプレートの内容等で調整が必要となる場合があります

以下のスタイルコードは前項のパソコンとモバイルの出しわけ機能を有効にした前提のコードです

p.wp-block-post-author__name {
    font-size: 1.2em;
    font-weight: 700;
}

p.wp-block-post-author__name:before {
    content: 'ページの作者：';
}

body.is-pc p.author-profile {
    margin-block-end: 0.5px;
    margin-block-start: 0px;
}

.wp-block-post-author {
    border: 1px solid #ddd;
}


body.is-mobile .wp-block-post-author {
    display: block;
}

body.is-mobile .wp-block-post-author__avatar {
    display: none;
}

ユーザー画像のサイズと文字サイズ、パディングは、ブロックの設定で行っています

ここまでを適用することで以下のような表示ができるようになります。

Site Logo

ひまあーと（管理人）

WordPressと出会ったのはTwenty Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。

本サイトでは主にTT2テーマのカスタマイズ方法、多彩な機能を詰め込んだ【Hima Art Utility】プラグインの紹介をしています。

WordPressへの感謝、プラグイン作者への感謝を込めて、ささやかながら日本語翻訳に参加させていただいています（参加プロダクトはこちら）

標準状態よりはよくなったと思いませんか？（思わない？）

上のサンプルでは、表示するユーザー画像がもともと丸型なので気にならないのですが、本来は四角い画像が表示されます。

これを丸く切り抜いて表示する場合は、以下のスタイルコードを追加すればよいでしょう。

.wp-block-post-author__avatar img {
    border-radius: 50%;
}

あまりお気に召さない方は、専用プラグインの使用などを検討ください。