Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressにカスタム投稿者プロフィールページを追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

あなたのサイトの投稿者は、専門家であり、ストーリーテラーであり、あなたのブランドを支える声です。彼らの経験や専門知識を紹介することで、読者との強いつながりを築き、サイトの検索順位を向上させることができます。

しかし、多くのWordPressテーマでは、基本的で刺激的でない投稿者情報ページしか提供されていません。WordPressサイトに、より魅力的で有益な著者プロフィールページを追加する最良の方法について、よく質問を受けます。

この投稿では、サイト訪問者の印象に残るカスタム投稿者プロフィールページをWordPressで作成する方法をご紹介します。

Adding a custom author profile page in WordPress

ここでは3つの方法を取り上げる。以下のリンクから興味のあるセクションにジャンプしてください:

WordPressでカスタマイザープロフィールページを作成する最良の方法は、SeedProdプラグインを使用することです。

SeedProdはWordPressのための最高のドラッグアンドドロップページビルダーです。あなたのサイトのすべてのライターのための美しい著者ページを含む、カスタマイザーWordPressテーマとページレイアウトを簡単に作成することができます。

あらかじめ用意されたテーマのライブラリが付属しており、あなたのページを即座にプロフェッショナルな外観に仕上げることができます。さらに、ページブロックを使って、画像、ソーシャルプロフィール、最近の投稿などで著者プロフィールページをフルカスタムできます。

開始するには、SeedProdプラグインをインストールして有効化する必要があります。ステップバイステップの手順については、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

注: SeedProdには無料版があります。しかし、カスタムオーサーページテンプレートを使用するには、Proバージョンが必要です。

プラグインを有効化したら、WordPressダッシュボードからSeedProd ” Theme Builderに行き、’Theme Templates Kit’ボタンをクリックします。

Click the Theme Templates Kit button

SeedProdの既成サイトキットのライブラリに移動します。

サイトテーマを選ぶには、気に入ったデザインにマウスオーバーし、チェックマークアイコンをクリックするだけです。

Choose a SeedProd theme kit

選択後、SeedProdはサイトキットをインポートし、テーマビルダーのダッシュボードにテンプレートパーツのリストが表示されます。

ホームページ、ブログページ、お問い合わせページなど、サイト開設に必要なテンプレートパーツがすべて揃っています。

どのテンプレートでも「デザインの編集」リンクをクリックすると、ドラッグ&ドロップのテーマビルダーを使ってカスタマイザーにカスタマイズすることができます。

Click Edit Design link to customize each template part

ステップバイステップの手順については、カスタマイザーWordPressテーマの作成方法をご覧ください。

カスタム投稿者ページテンプレートの作成

サイトテーマのカスタマイザーが終わったら、次は投稿者プロフィールページを作成しましょう。

そのためには、SeedProd ” Theme Builderに移動し、’Add New Theme Template’ボタンをクリックします。

Click the Add New Theme Template button to create author page

新規テーマテンプレートポップアップが開きます。

次に、「タイプ」ドロップダウンメニューで、「投稿者ページ」オプションを選択します。

Select the Author page template type

すべての投稿者に同じ投稿者ページレイアウトを適用したい場合は、「投稿者条件」セクションの下に表示される空欄を無視することができます。

ただし、投稿者ごとに固有の投稿者ページを作成したい場合は、このフィールドに特定の投稿者のユーザーIDを入力する必要があります。例えば、ユーザーIDが2の場合、空欄に入力してください。

Enter the user id to create custom author pages for each writer

WordPressでユーザーIDを探すのに助けが必要な場合は、こちらのガイドを参照してください。

次に、「保存」ボタンをクリックして続けます。

投稿者プロフィールページのカスタマイズ

投稿者ページテンプレートの設定が完了したら、その下にある「デザインを編集する」リンクをクリックしてカスタマイザーを始めることができます。

Edit author page design

これでSeedProdのページビルダーでテンプレートが開きます。

左側には、ページに追加できるブロックとセクションが表示されます。右側にはページのプレビューが表示され、まだコンテンツが追加されていないので空白になっています。

SeedProd theme builder

これでコンテンツを追加し始めることができる。

カラムの追加」アイコンをクリックして、ページレイアウトを設定します。

Add columns to your custom author page

次に、カラムレイアウトの選択が表示されます。

投稿者ページに必要なカラムレイアウトのタイプを選択してください。

Choose your column layout

これでSeedProdの既製ブロックをページに追加できます。

例えば、「見出し」ブロックをページにドラッグして、投稿者の見出しを追加することができる。

Drag and drop headline block onto author profile page

見出しをカスタマイズするには、それをクリックするだけです。

投稿者名を入力したり、サイズや配置などを調整できるパネルが開きます。

Edit the headline block

次に、「投稿者プロフィール」ブロックをページにドラッグして、投稿者に関する情報を表示することができます。

このブロックは、投稿者のWordPressユーザープロフィールから自動的にコンテンツを取得します。

Add author bio block in SeedProd

投稿者の最近の投稿を紹介できるようになりました。

投稿」ブロックをページにドラッグするだけです。

Add Posts block in SeedProd

投稿ブロックを追加したら、それをクリックして「クエリータイプ」をカスタマイザーに設定する。

次に、「投稿者別クエリー」トグルを有効化し、ドロップダウンリストから特定の投稿者を選択する。

Configure Posts block for author page

これで、その投稿者の投稿のみが投稿者ページに表示されるようになります。

投稿者ページのカスタマイザーはさらに続けることができます。例えば、「テキスト」や「Image」ブロックを追加して、投稿者に関する追加情報を含めることができます。また、ソーシャルプロフィール、ソーシャルシェア、推薦文などのブロックを追加することもできます。

Add social profiles to author page

投稿者ページの外観に満足したら、画面上部の「保存」ボタンをクリックし、ページビルダーを終了します。

カスタマイザーの投稿者プロフィールページを公開する

サイト上で投稿者ページを有効化するには、カスタマイザーのテーマを有効化する必要があります。

これを行うには、SeedProd ” Theme Builderにアクセスしてください。そこから’SeedProdテーマを有効化’トグルを見つけて’はい’の位置に切り替えてください。

Enable SeedProd theme

SeedProdはあなたのカスタムWordPressテーマを公開します。

あなたのサイトにアクセスして、新しい投稿者プロフィールページを実際にご覧ください。

Example of custom author profile page created with SeedProd

方法2:WP User Managerを使ってWordPressにカスタム投稿者プロフィールページを追加する。

この方法は設定が簡単だが、SeedProdほどデザインやカスタマイザーのオプションは多くない。

最初に必要なことは、WP User Managerプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、ユーザー ” 設定ページでプラグイン設定を行う必要があります。

WP User Manager settings page

このプラグインは、カスタムログイン、カスタムユーザー登録、パスワード忘れ、アカウント、プロフィールページとして使用するさまざまなページを自動的に作成します。

WP User Managerはあなたの投稿者プロフィールページに様々なオプションを提供します。それらを注意深く確認し、使いたくない機能をオフにする必要があります。

次に、’Profiles’タブをクリックして、ユーザープロフィール設定を行う必要があります。

User profile page settings

ここでは、ゲストのプロフィールページオプションを有効化することができ、誰でもユーザーのプロフィールを表示できるようになります。また、メンバー同士のプロフィール表示を許可することもできます。このオプションをオフにすると、ユーザーは自分のプロフィールページしか表示できなくなります。

また、ユーザーがカスタマイザーのプロフィール写真をアップロードしたり、最近の投稿やコメントをプロフィールページに表示することもできます。

変更を保存」ボタンをクリックして、設定を保存することを忘れないでください。

次に、投稿者プロフィールページのSEOフレンドリーなURLまたはパーマリンクを選択する必要があります。これを行うには、設定 ” パーマリンクのページにアクセスし、’ユーザープロファイルパーマリンクベース’セクションまでスクロールダウンします。

Select a URL structure for user profile pages

このプラグインでは、URLにユーザーID、ユーザー名、ニックネームを使用することができます。ニックネームとユーザー名はユーザーIDよりもSEOに優しいオプションです。クリックしてどちらかを選択し、変更を保存ボタンをクリックしてパーマリンクの設定を保存してください。

カスタマイザーの投稿者プロフィールページはほぼ完成しました。あとは、ユーザーがWordPressサイトで簡単にプロフィールページを見つけられるようにするだけです。

外観 ” ウィジェットページに移動し、ログインフォームウィジェットをサイドバーに追加します。

Add user login and profile link widget to sidebar

投稿者のプロフィールページが実際に表示されているのを、あなたのサイトで確認できるようになりました。

ログイン中のユーザーは、サイドバーウィジェットに自分のアカウント情報が表示されます。ユーザー名をクリックすると、投稿者のプロフィールページに移動します。

Author profile page

サイドバーウィジェットは、ログアウト中のユーザーにログインフォームを表示します。ユーザーがサイトに登録することを許可している場合、フォームには登録へのリンクも含まれます。

また、このプラグインはサイト上の投稿者リンクを変更し、初期設定の投稿者アーカイブページの代わりに投稿者プロフィールページを表示します。

投稿者プロフィールページの外観変更

色や枠線を変えたいだけなら、カスタムCSSを追加すれば可能だ。

しかし、レイアウトや順序を変更したい場合は、プラグインのテンプレートファイルを編集する必要があります。WP User Managerはカスタマイザーテンプレートをサポートしており、プラグインが使用する独自のテンプレートを現在のテーマ内で作成することができます。

まず、FTPクライアントを使用してサイトに接続し、/wp-content/plugins/wp-user-manager/templates/フォルダに移動する必要があります。そこにあるファイルをすべてコンピューターにダウンロードしてください。

次に、現在のテーマフォルダーに移動し、その中に「wpum」という新しいフォルダーを作成する必要があります。先ほどダウンロードしたファイルをwpumフォルダーにアップロードします。

これらのファイルを編集して、必要に応じてプロフィールページの外観をカスタマイズすることができます。

方法3:テーマにカスタム投稿者プロフィールページを手動で作成する(コード)

この方法では、WordPressテーマまたは子テーマファイルを編集する必要があります。WordPressでコードをコピー&ペーストする方法をご覧ください。

まず、FTPクライアントを使用してサイトに接続し、/wp-content/themes/your-current-theme/フォルダに移動する必要があります。

現在のテーマのフォルダー内に、author.phpファイルを作成する必要があります。その後、archive.phpファイルのコンテンツをコピー&ペーストし、新しいauthor.phpテンプレート内に貼り付けます。

あなたのテーマにすでにauthor.phpファイルがある場合は、それを編集することもできます。

ここでの目標は、投稿者のプロフィール情報を取得し、それを表示することです。どこから編集を始めるかを決める必要があります。通常は、get_header();とget_sidebar()の行の間であれば何でも編集できます:

<?php
// Set the Current Author Variable $curauth
$curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
?>
 
<div class="author-profile-card">
    <h2>About: <?php echo $curauth->nickname; ?></h2>
    <div class="author-photo">
    <?php echo get_avatar( $curauth->user_email , '90 '); ?>
    </div>
    <p><strong>Website:</strong> <a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a><br />
    <strong>Bio:</strong> <?php echo $curauth->user_description; ?></p>
</div>
 
<h2>Posts by <?php echo $curauth->nickname; ?>:</h2>
 
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h3>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
<?php the_title(); ?></a>
</h3>
<p class="posted-on">Posted on: <?php the_time('d M Y'); ?></p>
 
<?php the_excerpt(); ?>
 
<?php endwhile; 
 
// Previous/next page navigation.
the_posts_pagination();
 
else: ?>
<p><?php _e('No posts by this author.'); ?></p>
 
<?php endif; ?>

このコードでは、ページ上部に投稿者プロフィールカードを追加し、その投稿者の最近の投稿を表示するだけである。

このコードは必要なだけ自由にカスタマイズしてください。サイトにユーザープロファイルフィールドを追加したり、投稿者のTwitterやFacebookのプロフィールリンクを追加したり、投稿におすすめ画像を表示したり、などなど。

投稿者プロフィールカードを見やすくするためのサンプルCSSです。テーマにカスタムCSSとして追加するか、WPCodeのようなコードスニペットプラグインを使用してください。

Adding Custom Author Profile Page CSS in WPCode

また、テーマの色に一致するようにコードをカスタマイズすることもできる:

.author-profile-card {
    background: #eee;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}
.author-photo {
    float: left;
    text-align: left;
    padding: 5px;
}

これで、あなたのサイトにアクセスして、カスタマイザーのプロフィールページを実際に見ることができます。

これがデモサイトでの様子です:

A custom author profile page in WordPress

この投稿が、WordPressサイトにカスタマイザープロフィールページを追加する方法を学ぶのにお役に立てば幸いです。初心者のための究極のWordPress SEOガイド、またはWordPressとWooCommerceのための最高のソーシャルプルーフプラグインのエキスパートピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

23件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      If you are using the plugin then you would need to use their method for adding custom fields

      管理者

  2. Subodh Gupta says

    The username is showing in the author archive URL.

    How can I easily change it to display name or nickname for admin and all authors?

    • WPBeginner Support says

      If you are using the method from this article then you should be able to update that under Settings > Permalinks

      管理者

    • WPBeginner Support says

      Should we find a method we would recommend, we will look into updating this article.

      管理者

      • Ben Osborne says

        I know this maybe isn’t something you can recommend…. but I used advanced custom fields to create a wysiwyg editor right in the edit user screen, then call that custom field in the customised author.php. Works pretty good.

  3. Nomi says

    wpbeginner is top. Always comes up with the best solutions. When I see on serp wpbeginneer, I just click it

  4. Rouni Haddad says

    Hello, I am trying to add the login page to the top of my website in the menu area but when I add it, it doesn’t show on the website, anyway I can fix this.

  5. Annapurna Agrawal says

    Hi guys,

    I am really stuck with this. My author template is not working. As in, I am getting 404 error for the author archive page.

    I have no spaces in the author nice_name, i have deactivated all plugins to check for conflicts. I couldn’t find any solution to this. Can you help me out please?

  6. grab says

    in wordpress job site how put each company description permanently ,i don’t want to add everytime each job descriptions and keywords

  7. Sharif Mustajib says

    On my website, there are writers who send through e-mail. If they don’t create any profile, how can I add their profile? Please..

  8. William says

    THank you for this tutorial. However I can’t seem to find an author.php or archive.php in my theme. I am using Customizr Pro. Any ideas would be greatly appreciated. I love the look in your demo image!

    • WPBeginner Support says

      Hi William,

      If you don’t have an author.php file, then you can create one. If you don’t have archive.php, then you can copy the contents of index.php, category.php, or any other archive template in your theme. Please contact your theme’s support and they will be able to guide you better.

      管理者

  9. Adel says

    i’m looking desperatly for a way to make child pages in author’s page..
    a menubar or tabs to display categories seperatly…
    thanks in advance

  10. Gatera says

    Thanks for this article. I used Method 2.

    I would like to display the current author’s woocommerce products under their bio. Do you know how I can achieve this?

    Thanks,

  11. Muhammad Ibrahim says

    Really helpful article specially for beginners like me. a video tutorial could be a great way to know more about it. but still it is enough to know how to setup custom author profile page.
    i always use to visit this site whenever i need to learn anything about WordPress.
    thanks a lot dear Syed Balkhi to create such an amazing wordpress resource site.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。