投稿ページ、固定ページの一番下に「この記事を書いた人」を自動表示する方法

WordPressで記事を読むときに、ライター紹介（この記事を書いた人）が自動で表示されると、信頼性がアップして集客にも効果的です。今回は 固定ページの一番下にだけ 「この記事を書いた人」を表示する方法を紹介します。

functions.phpにコードを追加

以下のコードをテーマ（または子テーマ）の functions.php に追加してください。

// 投稿・固定ページの最後に「この記事を書いた人」を追加
function add_author_box_to_page( $content ) {
    if ( ( is_single() || is_page() ) && is_main_query() ) {

        $author_box  = '<div class="author-box">';
        $author_box .= '<h3>この記事を書いた人</h3>';
        $author_box .= 'get_avatar( get_the_author_meta("ID"), 80 ); // ←ここ';
        $author_box .= '<p>' . get_the_author() . '</p>';
        $author_box .= '</div>';

        $content .= $author_box;
    }
    return $content;
}
add_filter( 'the_content', 'add_author_box_to_page' );

// 投稿タイプ「post」のシングルページのみ処理
if ( is_singular('post') && is_main_query() ) {

        $author_box  = '<div class="author-box">';
        $author_box .= '<h3>この記事を書いた人</h3>';
        $author_box .= 'get_avatar( get_the_author_meta("ID"), 80 ); // ←ここ';
        $author_box .= '<p>' . get_the_author() . '</p>';
        $author_box .= '</div>';

        $content .= $author_box;
    }
    return $content;
}
add_filter( 'the_content', 'add_author_box_to_page' );

// 固定ページのみ処理
if ( is_page() && is_main_query() ) {

        $author_box  = '<div class="author-box">';
        $author_box .= '<h3>この記事を書いた人</h3>';
        $author_box .= 'get_avatar( get_the_author_meta("ID"), 80 ); // ←ここ';
        $author_box .= '<p>' . get_the_author() . '</p>';
        $author_box .= '</div>';

        $content .= $author_box;
    }
    return $content;
}
add_filter( 'the_content', 'add_author_box_to_page' );

汎用CSS

/*投稿ページ、固定ページの一番下に「この記事を書いた人」を自動表示する*/
.author-box {
    margin-top: 40px;
    padding: 20px;
    border: 2px solid #ddd;
    background: #f9f9f9;
    border-radius: 10px;
}

.author-box h3 {
    margin-bottom: 10px;
    font-size: 18px;
    color: #333;
}
  

テーマ別サンプルCSS

Lightning用

  /*Lightning用（この記事を書いた人）が自動で表示*/
.author-box {
	background: #fff8e1;
	border-left:5px solid #ff9800;
	padding: 20px;
	margin-top: 30px;
}
  

（例）

Cocoon用

  /*Cocoon用（この記事を書いた人）が自動で表示*/
.author-box {
    background: #eef7ff;
    border: 1px solid #90caf9;
    padding: 15px;
    margin-top: 25px;
    border-radius: 8px;
}
  

（例）

セキュリティ対策

「この記事を書いた人」を表示したすると、投稿者とログインID（ユーザー名）が同一人物だと「この記事を書いた人」＝ログインID（ユーザー名）によりセキュリティが弱くなってしまう為、「Edit Author Slug」プラグインで、ログインID（ユーザー名）の漏洩を未然に防いでください。

「Edit Author Slug」プラグインを使うとログインID（ユーザー名）を別の投稿者スラッグ名に変えることができます。マウスを右クリックして「ページのソースを表示」でも表示されてしまうログインID（ユーザー名）も変更できます。これで実際のログインID（ユーザー名）を守ることができます。

まとめ

固定ページの最後に「この記事を書いた人」を自動表示する方法を紹介しました。

• functions.phpにコード追加: 自動でプロフィールを挿入できる
• CSSで装飾: テーマに合わせてデザイン調整
• テーマ別CSSサンプル: LightningやCocoonにも対応

必ず「Edit Author Slug」プラグインを使い、ログインID（ユーザー名）を別の投稿者スラッグ名に変えてください。

その上で、ブログや事業サイトの信頼性アップに、ぜひ取り入れてみてください。