プラグインなしでWordPressに著者ボックスを追加する方法（4つの方法） 

「プラグインなしでWordPressに著者ボックスを追加する方法」を検索した場合、すでにプラグイン中心の結果が表示されているはずです。このガイドは異なります。WordPressに既に組み込まれているツールを使用して著者ボックスを追加できます。

著者ボックスは信頼を構築します。読者は各投稿の下にあなたの名前、短い自己紹介、顔写真を閲覧し、あなたのサイトは匿名ではなく信頼できるものになります。このチュートリアルでは、最も簡単な方法（エディターのネイティブブロック）からSeedProdを使用したカスタムデザインまで、4つの方法をカバーします。

著者ボックスが重要な理由

著者ボックスは、ブログ投稿の下に表示されるプロフィールセクションです。通常、名前、プロフィール写真、短い自己紹介、ソーシャルプロフィールやウェブサイトへのリンクが表示されます。

ほとんどのWordPressテーマはデフォルトで投稿に著者名を表示しますが、それ以上のものはありません。著者ボックスはそのギャップを埋めます。

ソロブロガーにとっては、コンテンツが関連経験を持つ実在の人物からのものであることを検索エンジンに伝えるE-E-A-Tシグナルとなります。複数著者のサイトの場合は、読者を方向付け、各著者に独自の存在感を与えます。

著者ボックスに含めるべきもの

著者ボックスを設定する前に、何を含めるべきかを知っておきましょう。最も効果的なものには以下が含まれます：

• 表示名 – あなたの本名、またはあなたのオーディエンスが知っている名前。
• 短い自己紹介 – あなたの経歴に関する2〜3文。ニッチに特化させてください。
• 資格情報 – あなたのコンテンツを裏付ける関連経験または専門知識。
• プロフィール写真 – 顔写真。メールアドレスがGravatarアカウントと一致する場合、WordPressはGravatarから自動的に取得します。
• ソーシャルリンク – Twitter/X、LinkedIn、またはあなたが最もアクティブな場所。

これらはWordPressのユーザー → プロフィールで設定します。以下の4つの方法すべてが同じプロフィールフィールドから取得されるため、一度入力すればすべてに対応できます。

プラグインなしでWordPressに著者ボックスを追加する方法（4つの方法）

前述したように、WordPressテーマをカスタマイズしてライターのプロフィールセクションを含めることは、常に簡単ではありません。ここでは、プラグインなしでWordPressの著者ボックスを追加する4つの方法を、最も簡単なものから最も技術的なものまで紹介します。

方法1：WordPressの著者ブロックを使用する

WordPressには、ブロックエディターに組み込みの著者ブロックがあります。プラグインもコードも不要です。ユーザープロファイルから名前、略歴、アバターを自動的に取得します。

唯一の制限：著者ボックスは個々の投稿に追加されますが、サイト全体には追加されません。すべての投稿でサイト全体に表示するには、代わりに方法2（テーマ）または方法3（SeedProd）を使用してください。

ステップ1：ブロックエディターで投稿を開く

投稿 → すべての投稿に移動し、更新したい投稿を開きます。

ステップ2：著者ブロックを追加する

エディターの+インサーターをクリックし、「著者」を検索します。投稿の著者名、アバター、略歴などの詳細を表示する著者ブロックを選択します。通常、投稿コンテンツの下に配置されます。

ステップ3：ブロック設定を構成する

右側のサイドバーには、アバターを表示または非表示にするオプション、アバターサイズの指定、略歴の表示、著者の名前を著者ページにリンクするオプションがあります。

ステップ4：投稿を更新する

更新をクリックして保存します。これで、その投稿に著者ボックスが表示されます。

略歴や写真が表示されない場合は、ユーザー → プロフィールに移動し、「略歴情報」フィールドに入力してください。写真が表示されるように、メールアドレスがGravatarアカウントと一致していることを確認してください。

方法2：SeedProdでカスタム著者ボックスを追加する（コード不要）

WordPressテーマが著者ボックスをサポートしておらず、ウェブサイトと著者情報の表示方法をカスタマイズしたい場合は、これが解決策です。

この方法では、SeedProd WordPressプラグインを使用して、カスタムライター情報セクションを簡単に追加し、WordPressテーマを作成します。

SeedProdは、ドラッグアンドドロップ機能を持つ最高のWordPress ウェブサイトビルダーです。コードを一行も書かずに、カスタムWordPressテーマ、レイアウト、ランディングページを作成できます。

何百ものレスポンシブテンプレートにより、すぐに開始できます。また、何千ものカスタマイズ可能なコンテンツ要素が含まれており、開発者を雇うことなくウェブサイトのあらゆる部分をカスタマイズできます。

これらの強力な要素の1つが著者ボックスであり、著者略歴をウェブサイトのデザインに合わせて調整し、カスタムリンクやコンテンツを追加できます。

ステップ1：SeedProdウェブサイトビルダープラグインをインストールする

開始するには、まずSeedProdライセンスを取得する必要があります。

注意：テーマビルダーと著者ボックスブロックを使用するには、SeedProd ProまたはEliteライセンスが必要です。

SeedProdをコンピューターにダウンロードした後、WordPressウェブサイトにプラグインの.zipファイルをインストールしてアクティブ化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストールガイドを参照してください。

SeedProdがウェブサイトで有効になったら、SeedProd » 設定ページに移動し、ライセンス情報を入力します。

プラグインのライセンスキーは、SeedProdウェブサイトのアカウントエリアの「ダウンロード」の下にあります。

ステップ2：WordPressテーマを作成する

次のステップは、SeedProd » テーマビルダーページに移動し、「テーマ」ボタンをクリックすることです。

これにより、すぐに開始できるいくつかの既製のWordPressテーマが表示されるウィンドウが開きます。好きなテーマにカーソルを合わせ、チェックマークアイコンをクリックしてウェブサイトにインポートします。

そこから、テーマを構成する個々のテンプレートパーツのリストが表示されます。たとえば、私たちが選択したオンライン著者テーマには、次のテンプレートが含まれています。

• シングルページ
• シングル投稿
• ブログ、アーカイブ、検索
• ホームページ
• サイドバー
• フッター
• ヘッダー
• グローバルCSS

通常、WordPressテーマファイルにアクセスして編集するには、ファイルマネージャーにアクセスする必要があります。しかし、SeedProdを使用すると、サイトを離れることなく、WordPressダッシュボードですべてを表示できます。

さらに良いことに、コードを書かずにSeedPodの簡単なビジュアルエディターで各テンプレートを編集できます。その結果、指で指し、クリックし、ドラッグアンドドロップするだけでWordPressテーマ全体をカスタマイズできます。簡単です！

ステップ3.シングル投稿テンプレートに著者ボックスを追加する

SeedProdを使用してWordPressテーマにカスタム著者ボックスを追加するには、まずプロフィールページに著者情報を追加する必要があります。これは、方法2の手順に従って行うことができます。

次に、SeedProd » テーマビルダーに移動し、シングル投稿テンプレートを見つけます。そこから、カーソルを合わせて「デザインを編集」リンクをクリックします。

これにより、シングル投稿テンプレートがSeedProdのドラッグアンドドロップビルダーで開きます。

SeedProdのビジュアルエディターはシンプルなレイアウトです。左側には、デザインに簡単に追加できるブロックとセクションがあります。次に、右側にはリアルタイムで変更を確認できるプレビューがあります。

プレビューのどこかをクリックしてページレイアウトとブロックを編集できます。次に、左側でブロックの設定をリアルタイムでカスタマイズできます。

使用しているテーマには、現在投稿コンテンツの下に著者ボックスがありません。追加するには、SeedProdのテンプレートタグのいずれかを使用する必要があります。

テンプレートタグは、デザインのどこにでも動的なWordPressコンテンツを表示できる個々のブロックです。たとえば、私たちのテーマには次のものが含まれています。

• 投稿タイトル
• アイキャッチ画像
• 投稿情報
• 投稿コメント

その情報はWordPressデータベースから自動的に取得されるため、テーマのどこにでも追加できます。

著者バイオをテーマに追加するには、「テンプレートタグ」の見出しの下にある著者ボックスブロックを見つけて、投稿の下にドラッグします。

次に、ブロックをクリックして、次のような設定を編集できます。

• プロフィール写真の表示または非表示
• 表示名の表示または非表示
• HTMLタグタイプ
• ウェブサイトまたはアーカイブ投稿リンクを含める
• 著者の経歴の表示または非表示

高度なタブをクリックすると、著者ボックスのさらに多くのカスタマイズオプションがあります。たとえば、「スタイル」セクションでは、フォント、フォントの色、影を変更できます。

背景セクションでは、背景色、背景グラデーションを変更したり、カスタム背景画像を追加したりできます。

また、スペーシング、境界線をカスタマイズし、著者ボックスにカスタムCSSクラスを付けることもできます。

あとは、シングル投稿レイアウトのカスタマイズを続けるだけです。

少しヘルプが必要な場合は、SeedProd でカスタムのシングル投稿テンプレートを作成する方法についてのステップバイステップガイドを以下に示します。必要なすべてのブロックと設定、およびそれぞれの編集方法について説明します。

テンプレートの外観に満足したら、右上にある緑色の「保存」ボタンをクリックします。

ステップ 4. 残りのテーマをカスタマイズする

これで、あと 2 つのオプションがあります。

1. 現在の WordPress テーマのデザインを公開する
2. 残りのテーマテンプレートをカスタマイズする

ホームページ、ブログページ、ヘッダー、フッターを含む残りのテーマテンプレートを確認し、ブランディングに合わせて調整することをお勧めします。

「SeedProd » Theme Builder」に戻り、いずれかのテンプレートの「デザインを編集」リンクをクリックするだけです。そこから、シングル投稿レイアウトと同じようにテンプレートをカスタマイズできます。

ステップ 5. WordPress テーマを公開する

SeedProd を使用して WordPress テーマと著者ボックスを公開するのは簡単です。「Theme Builder」ページに移動し、「SeedProd テーマを有効化」トグルを「はい」に変更します。

これで、WordPress サイトの任意の投稿に移動して、新しいカスタム著者ボックスを確認できます。

方法3：WordPressテーマの著者ボックスサポートを使用する

多くの優れた WordPress テーマでは、組み込みのユーザープロファイルを使用して、各ブログ投稿の下に著者ボックスを表示します。通常、著者​​のプロフィール写真と略歴が含まれます。

しかし、まず、お使いのテーマが著者ボックスをサポートしているかどうかを確認する必要があります。

WordPress 管理パネルから「ユーザー » 全ユーザー」に移動して確認できます。次に、関連するプロファイルにカーソルを合わせ、「編集」リンクをクリックします。

次の画面には、その特定のユーザーに関する編集可能な情報が表示されます。WordPress テーマが著者ボックスをサポートしている場合、ページの下の方に「略歴」というセクションがあるはずです。

その領域では、簡単な著者バイオを追加し、HTML を使用してソーシャルネットワークまたは著者ウェブサイトへのリンクを含めることができます。

著者がアカウントを持っている場合、テーマは Gravatar サービスから著者のプロフィール写真を自動的に取得します。それ以外の場合は、灰色のプレースホルダー画像が表示されます。

著者情報を追加したら、「プロフィールを更新」ボタンをクリックします。

これで、そのライターのウェブサイト上の任意の記事をクリックして、新しい著者ボックスを表示できます。

バイオを入力しても著者ボックスが表示されない場合は、テーマに組み込みの著者ボックスサポートが含まれていない可能性があります。その場合は、簡単な修正として方法 1（著者ブロック）を使用するか、カスタムデザインのために方法 3（SeedProd）を使用してください。

方法4：コードでWordPressに著者ボックスを手動で追加する

プラグインなしで WordPress 著者ボックスを作成したい場合は、WordPress テーマに新しい関数を追加する必要があります。この方法ではテーマファイルを編集するため、上級ユーザーにのみお勧めします。

注意: カスタムテーマの変更を行う場合は、子テーマを作成することをお勧めします。そうすれば、テーマの更新によって変更が失われるリスクを回避できます。または、WPCode を使用して WordPress サイトのどこにでもコードスニペットを追加できます。

プラグインなしでWordPressの著者ボックスを追加するには、以下のコードスニペットをコピーして、functions.phpファイルに貼り付けてください。

function wpb_author_info_box( $content ) {
 
global $post;
 
// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {
 
// Get author's display name
$display_name = get_the_author_meta( 'display_name', $post->post_author );
 
// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );
 
// Get author's biographical information or description
$user_description = get_the_author_meta( 'user_description', $post->post_author );
 
// Get author's website URL
$user_website = get_the_author_meta('url', $post->post_author);
 
// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
 
if ( ! empty( $display_name ) )
 
$author_details = '<p class="author_name">About ' . $display_name . '</p>';
 
if ( ! empty( $user_description ) )
// Author avatar and bio
 
$author_details .= '<p class="author_details">' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '</p>';
 
$author_details .= '<p class="author_links"><a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>'; 
 
// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {
 
// Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>';
 
} else {
// if there is no author website then just close the paragraph
$author_details .= '</p>';
}
 
// Pass all this info to post content
$content = $content . '<footer class="author_bio_section" >' . $author_details . '</footer>';
}
return $content;
}
 
// Add our function to the post content filter
add_action( 'the_content', 'wpb_author_info_box' );
 
// Allow HTML in author bio section
remove_filter('pre_user_description', 'wp_filter_kses');

この関数は、著者の情報を取得し、サイトのWordPress投稿の下に表示します。

次に、テーマとブランディングに合わせて著者ボックスをスタイル設定する必要があります。開始点として使用できるサンプルCSSコードを次に示します。サンプルCSSコード

.author_bio_section{
background-color: #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
}
 
.author_name{
font-size:16px;
font-weight: bold;
}
 
.author_details img {
border: 1px solid #D8D8D8;
border-radius: 50%;
float: left;
margin: 0 10px 10px 0;
}

そのコードをテーマに追加するには、WordPress管理パネルから外観 » カスタマイズをクリックします。これにより、WordPressテーマカスタマイザーが開かれ、テーマの特定の側面を視覚的にカスタマイズできます。

追加CSSの見出しが表示されるまで下にスクロールしてタブを展開します。次に、カスタムCSSコードを貼り付けて、公開ボタンをクリックします。

これで、任意のブログ投稿にアクセスして、著者ボックスが機能していることを確認できます。

よくある質問

これで、プラグインなしでWordPress著者ボックスを作成する方法がわかりました。さらに、強力なプラグインを使用してWordPressに著者ボックスを追加するために必要なすべての手順があります。

SeedProdは、単なる著者ボックスプラグインではありません。初心者から上級者まで、完全にカスタムなWordPressサイトを作成するために必要なすべてのツールを備えた、完全なWordPressウェブサイトビルダーです。

ぜひご自身でお試しください。

WordPressのログインページ例が掲載されている、こちらの他の投稿も気に入るかもしれません。

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。