2026年5月20日

WordPressの著者アーカイブページをカスタマイズする方法

テーマ・デザイン

はじめに

WordPressの著者アーカイブは /author/{ユーザー名}/ というURLで自動生成されます。author.php テンプレートを作成することで、著者情報・SNSリンク・記事一覧をカスタマイズして表示できます。

症状・原因

著者アーカイブページのデザインを変えたい
著者のプロフィール・SNSリンクを表示したい
著者ページに独自の情報を追加したい
複数ライターのサイトで著者ページを充実させたい

解決手順

ステップ1：著者情報を取得する関数を理解する

// 著者アーカイブページで利用できる情報
$author_id = get_queried_object_id(); // 現在の著者ID

// 基本情報
$display_name = get_the_author_meta('display_name', $author_id);
$description  = get_the_author_meta('description', $author_id);  // プロフィール文
$website      = get_the_author_meta('user_url', $author_id);
$email        = get_the_author_meta('user_email', $author_id);

// アバター（Gravatar）
$avatar = get_avatar($author_id, 120, '', $display_name, ['class' => 'author-avatar']);

// 記事数
$post_count = count_user_posts($author_id, 'post');

// 著者アーカイブURL
$author_url = get_author_posts_url($author_id);

ステップ2：author.php テンプレートを作成する

<?php
// wp-content/themes/my-child-theme/author.php
get_header();

$author_id    = get_queried_object_id();
$display_name = get_the_author_meta('display_name', $author_id);
$description  = get_the_author_meta('description', $author_id);
$website      = get_the_author_meta('user_url', $author_id);
$post_count   = count_user_posts($author_id, 'post');
?>

<main class="author-archive">

    <!-- 著者プロフィールヘッダー -->
    <section class="author-profile">
        <div class="author-profile-inner">
            <?php echo get_avatar($author_id, 120, '', esc_attr($display_name), ['class' => 'author-avatar']); ?>
            <div class="author-info">
                <h1 class="author-name"><?php echo esc_html($display_name); ?></h1>
                <p class="author-post-count"><?php echo esc_html($post_count); ?> 件の記事を執筆</p>
                <?php if ($description): ?>
                    <p class="author-bio"><?php echo wp_kses_post($description); ?></p>
                <?php endif; ?>
                <?php if ($website): ?>
                    <a href="<?php echo esc_url($website); ?>" class="author-website" target="_blank" rel="noopener noreferrer">
                        ウェブサイトを見る
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- 著者の記事一覧 -->
    <section class="author-posts">
        <h2><?php echo esc_html($display_name); ?>の記事一覧</h2>
        <?php if (have_posts()): ?>
            <div class="posts-grid">
                <?php while (have_posts()): the_post(); ?>
                    <?php get_template_part('template-parts/content', 'card'); ?>
                <?php endwhile; ?>
            </div>
            <?php the_posts_pagination(['prev_text' => '← 前へ', 'next_text' => '次へ →']); ?>
        <?php else: ?>
            <p>記事がありません。</p>
        <?php endif; ?>
    </section>

</main>

<?php get_footer(); ?>

ステップ3：著者にSNSリンクを追加する

// functions.php — 著者プロフィールにSNSフィールドを追加
add_action('show_user_profile', 'add_author_social_fields');
add_action('edit_user_profile', 'add_author_social_fields');

function add_author_social_fields(WP_User $user): void {
    ?>
    <h3>SNSリンク</h3>
    <table class="form-table">
        <tr>
            <th><label for="twitter">X（Twitter）</label></th>
            <td><input type="url" id="twitter" name="twitter" value="<?php echo esc_attr(get_user_meta($user->ID, 'twitter', true)); ?>" class="regular-text"></td>
        </tr>
        <tr>
            <th><label for="linkedin">LinkedIn</label></th>
            <td><input type="url" id="linkedin" name="linkedin" value="<?php echo esc_attr(get_user_meta($user->ID, 'linkedin', true)); ?>" class="regular-text"></td>
        </tr>
    </table>
    <?php
}

add_action('personal_options_update', 'save_author_social_fields');
add_action('edit_user_profile_update', 'save_author_social_fields');

function save_author_social_fields(int $user_id): void {
    if (!current_user_can('edit_user', $user_id)) return;
    foreach (['twitter', 'linkedin'] as $field) {
        if (isset($_POST[$field])) {
            update_user_meta($user_id, $field, esc_url_raw($_POST[$field]));
        }
    }
}

// author.php でSNSリンクを表示
$twitter  = get_user_meta($author_id, 'twitter', true);
$linkedin = get_user_meta($author_id, 'linkedin', true);

if ($twitter || $linkedin):
?>
<div class="author-social">
    <?php if ($twitter): ?>
        <a href="<?php echo esc_url($twitter); ?>" target="_blank" rel="noopener noreferrer">X</a>
    <?php endif; ?>
    <?php if ($linkedin): ?>
        <a href="<?php echo esc_url($linkedin); ?>" target="_blank" rel="noopener noreferrer">LinkedIn</a>
    <?php endif; ?>
</div>
<?php endif; ?>

ステップ4：著者アーカイブのSEOを改善する

// functions.php — 著者アーカイブのタイトルを変更
add_filter('get_the_archive_title', function(string $title): string {
    if (is_author()) {
        $author = get_queried_object();
        return esc_html($author->display_name) . 'の記事一覧';
    }
    return $title;
});

// 著者アーカイブのメタディスクリプション
add_action('wp_head', function(): void {
    if (!is_author()) return;
    $author_id   = get_queried_object_id();
    $description = get_the_author_meta('description', $author_id);
    if ($description) {
        echo '<meta name="description" content="' . esc_attr(wp_trim_words($description, 30)) . '">' . PHP_EOL;
    }
});

注意事項

著者アーカイブページが不要な場合（シングル著者サイト等）は remove_action('template_redirect', ...) または Yoast SEOの「著者アーカイブを無効化」設定で無効化できます
count_user_posts() はデフォルトで post タイプのみカウントします。カスタム投稿タイプも含める場合は第2引数に配列を渡してください
プライバシー上、著者のメールアドレスはテンプレートに直接表示しないよう注意してください

まとめ

author.php テンプレートを子テーマに作成し、get_the_author_meta() で著者情報を取得して表示します。カスタムユーザーメタを使えばSNSリンクなども管理画面から設定できます。

Post Views: 19