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

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

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

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

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

方法1：SeedProdを使ってWordPressにカスタム投稿者プロフィールページを作成する（推奨）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

色や枠線を変えたいだけなら、カスタム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のようなコードスニペットプラグインを使用してください。

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

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

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

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

この投稿が、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.