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

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

1 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' );

2 汎用CSS

/* ----------------------------------
 * 投稿・固定ページの最後に著者情報を表示
 * ---------------------------------- */

/* 著者情報のボックス全体 */
.author-box {
    margin-top: 40px;        /* 上の要素との間隔を40px空ける */
    padding: 20px;           /* 内側の余白を20pxに設定 */
    border: 2px solid #ddd;  /* 薄いグレーの境界線 */
    background: #f9f9f9;     /* 背景色を薄いグレーに設定 */
    border-radius: 10px;     /* 角を丸くする */
}

/* 著者ボックス内のタイトル（例：この記事を書いた人） */
.author-box h3 {
    margin-bottom: 10px;     /* 下の要素との間隔を10px空ける */
    font-size: 18px;         /* 文字サイズを18pxに設定 */
    color: #333;             /* 文字色をダークグレー */
}
  

3 テーマ別サンプルCSS

3.1 Lightning用

 /* ----------------------------------------------------------
 * Lightning用：投稿ページの最後に「この記事を書いた人」を自動表示
 * ---------------------------------------------------------- */

/* 著者情報ボックス全体 */
.author-box {
    background: #fff8e1;      /* 背景色を薄いクリーム色に設定 */
    border-left: 5px solid #ff9800;  /* 左側にオレンジの太いラインを追加 */
    padding: 20px;            /* 内側の余白を20pxに設定 */
    margin-top: 30px;         /* 上の要素との間隔を30px空ける */
}
  

3.2 Cocoon用

/* -------------------------------------------------------
 * Cocoon用：投稿ページの最後に「この記事を書いた人」を自動表示
 * ------------------------------------------------------- */

/* 著者情報ボックス全体 */
.author-box {
    background: #eef7ff;      /* 背景色を薄い青色に設定 */
    border: 1px solid #90caf9; /* 薄い青色の枠線を追加 */
    padding: 15px;             /* 内側の余白を15pxに設定 */
    margin-top: 25px;          /* 上の要素との間隔を25px空ける */
    border-radius: 8px;        /* 角を丸くして柔らかい印象にする */
}
  

4 完成イメージ

4.1 Lightning

4.2 Cocoon

5 セキュリティ対策

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

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

6 まとめ

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

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

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

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