WordPressでテーマを混乱させることなく著者欄を追加する方法を知りたいですか？複数のライターがいるブログを管理し始めたとき、筆者の経歴を表示する方法が必要だった。
このチュートリアルでは、WordPressにオーサーボックスを追加する方法を、プラグインの有無にかかわらず、具体的にご紹介します。
あなたのサイトにぴったり合ったカスタムデザインをお望みなら、私がほとんどのサイトで使っているドラッグ＆ドロップ式のWordPressビルダー、SeedProdを使った方法もご紹介します。
WordPressのAuthor Boxとは？
WordPressのオーサーボックスは、WordPressの投稿の下に表示される小さなテキストボックスです。このボックスには、ウェブサイトの作者が誰なのか、何をしている人なのか、どこで作者を見つけることができるのかといった情報が表示されます。
多くの場合、著者の経歴欄にはこう書かれている：
- 著者の概要または経歴
- プロフィール写真またはグラビア
- 著者の投稿URL
- ソーシャルメディアへのリンク
- ゲスト著者のウェブサイトへのリンク
なぜWordPressでAuthor Boxを使うべきなのか？
ほとんどのWordPressテーマは、デフォルトでブログ記事に作者名、または作者メタ表示を表示します。しかし、通常それ以上の情報は表示されません。
しかし、コンテンツの背後にある書き手を明らかにすることは、読者との信頼と信用を築くのに役立ちます。ひいては、あなたのサイトのオーソリティを向上させることになる。
場合によっては、"About Me "の著者ページだけでユーザーに必要な情報を提供できることもある。しかし、すべての読者がそのページを訪れるとは限らない。
さらに、複数の執筆者がいるウェブサイトでは、各投稿の執筆者に関する情報を個別に表示するために、執筆者ボックスがあると便利です。
しかし、それだけではない。
カスタムの著者経歴は、著者が読者に貢献し、読者と関わるための特別なインセンティブを与えます。それは、著者が自分のソーシャルプロフィールへのリンクを追加し、読者を増やすことができるからです。
結局のところ、WordPressにオーサーボックスを追加することは、信頼性、権威、エンゲージメントを構築し、より多くのライターにコンテンツを投稿してもらうための優れた方法なのだ。
WordPressで著者欄を追加する方法（3つの方法）
前述したように、WordPressテーマをカスタマイズしてライターバイオセクションを含めることは必ずしも簡単ではありません。ここでは、プラグインなしで、そしてプラグインを使って著者欄を作成する3つの方法をご紹介します。
方法1：SeedProdを使ってWordPressにカスタムオーサーボックスを追加する（コードなし）
もしあなたのWordPressテーマがオーサーボックスに対応しておらず、ウェブサイトや著者情報の見栄えをカスタマイズしたいのであれば、これが解決策となる。
この方法では、SeedProdWordPressプラグインを使用して、カスタムライター情報セクションを簡単に追加し、WordPressテーマを作成します。
SeedProdは、ドラッグアンドドロップ機能を備えた最高のWordPressウェブサイトビルダーです。コードを一行も書くことなく、カスタムWordPressテーマ、レイアウト、ランディングページを作成できます。
何百ものレスポンシブテンプレートが用意されているので、すぐに使い始めることができます。また、カスタマイズ可能なコンテンツエレメントが多数用意されているため、開発者を雇うことなくウェブサイトの隅々までカスタマイズできます。
その強力な要素のひとつが、オーサーボックスです。オーサーボックスを使えば、著者の経歴をウェブサイトのデザインに合わせてカスタマイズしたり、カスタムリンクやコンテンツを追加したりすることができます。
ステップ1.SeedProd Website Builder プラグインをインストールする。
始めるには、まずSeedProdのライセンスを取得する必要があります。
注：Theme BuilderとAuthor Boxブロックを使用するには、SeedProd ProまたはEliteライセンスが必要です。
SeedProdをコンピュータにダウンロードした後、WordPressウェブサイトにプラグイン.zipファイルをインストールして有効化する必要があります。WordPressプラグインをインストールする方法については、こちらをご覧ください。
SeedProdがあなたのウェブサイトで稼動したら、 SeedProd " 設定 ページに行き、ライセンスの詳細を入力してください。
プラグインのライセンスキーは、SeedProdウェブサイトのアカウントエリアの「ダウンロード」にあります。
ステップ2.WordPressテーマを作成する
次のステップは、 SeedProd " Theme Builder ページに行き、'Themes'ボタンをクリックします。
そうすると、WordPressのテーマが表示されます。気に入ったテーマにカーソルを合わせてチェックマークアイコンをクリックすると、あなたのウェブサイトにインポートされます。
そこから、テーマを構成する個々のテンプレートパーツのリストが表示されます。例えば、私たちが選んだOnline Authorテーマには以下のテンプレートが含まれています：
- シングルページ
- シングルポスト
- ブログ, アーカイブ, 検索
- ホームページ
- サイドバー
- フッター
- ヘッダー
- グローバルCSS
通常、WordPressのテーマファイルにアクセスして編集するには、ファイルマネージャにアクセスする必要があります。しかし、SeedProdを使用すると、サイトを離れることなく、WordPressのダッシュボードでそれらをすべて見ることができます。
さらに良いことに、コードを書くことなく、SeedPodの簡単なビジュアルエディタで各テンプレートを編集することができます。その結果、ポイント、クリック、ドラッグ、ドロップでWordPressテーマ全体をカスタマイズすることができます。簡単です！
ステップ3.シングル投稿テンプレートに著者欄を追加する
SeedProdを使用してWordPressテーマにカスタムオーサーボックスを追加するには、まずプロフィールページに著者の詳細を追加する必要があります。方法1の手順に従ってください。
次に、SeedProd " Theme Builderに 行き、Single Postテンプレートを見つけてください。そこからテンプレートにカーソルを合わせ、「Edit Design」リンクをクリックします。
そうすると、SeedProdのドラッグ＆ドロップビルダーでSingle Postテンプレートが開きます。
SeedProdのビジュアルエディタはシンプルなレイアウトです。左側には、あなたのデザインに簡単に追加できるブロックとセクションがあります。そして右側には、変更をリアルタイムで確認できるプレビューがあります。
プレビューのどこかをクリックすると、ページレイアウトとブロックを編集できます。そして左側では、各ブロックの設定をリアルタイムでカスタマイズできます。
現在使用しているテーマには、投稿内容の下に著者欄がありません。SeedProdのテンプレートタグを使って追加する必要があります。
テンプレートタグは、WordPressの動的なコンテンツをデザイン上の任意の場所に表示するための個々のブロックです。例えば、私たちのテーマには
- 投稿タイトル
- 特集画像
- 投稿情報
- コメントを投稿する
この情報はWordPressのデータベースから自動的に取得されるので、テーマのどこにでも追加することができる。
あなたのテーマに著者経歴を追加するには、「テンプレートタグ」の見出しの下にある著者ボックスブロックを見つけ、投稿の下にドラッグします。
次に、ブロックをクリックして、次のような設定を編集することができる：
- プロフィール写真の表示・非表示
- 表示名の表示／非表示
- HTMLタグの種類
- ウェブサイトまたはアーカイブ記事のリンクを含む
- 著者略歴の表示／非表示
詳細設定」タブをクリックすると、さらに多くのカスタマイズ・オプションがあります。例えば、「スタイル」セクションでは、フォント、フォントカラー、シャドウを変更することができます。
Background（背景）セクションでは、背景色、背景グラデーションを変更したり、カスタム背景画像を追加することができます。
また、スペーシングやボーダーをカスタマイズしたり、オーサーボックスにカスタムCSSクラスを与えることもできます。
あとはシングル投稿レイアウトのカスタマイズを続けるだけだ。
もし少し手助けが必要であれば、SeedProdでカスタムSingle Postテンプレートを作成する方法のステップバイステップガイドをご覧ください。必要なすべてのブロックと設定、そしてそれぞれの編集方法について説明しています。
テンプレートの見た目に満足したら、右上の緑色の保存ボタンをクリックします。
ステップ4.テーマの残りの部分をカスタマイズする
残された選択肢は2つ：
- 現在のWordPressテーマデザインを公開する
- テーマ・テンプレートの残りの部分をカスタマイズする
ホームページ、ブログページ、ヘッダー、フッターなど、残りのテーマテンプレートを見て、あなたのブランディングに合うように微調整することをお勧めします。
SeedProd " Theme Builderに 戻り、テンプレートの「Edit Design」リンクをクリックするだけです。そこから'Single Post'レイアウトで行ったようにテンプレートをカスタマイズすることができます。
ステップ5.WordPressテーマを公開する
WordPressテーマとAuthor BoxをSeedProdでライブにするのは簡単です。Theme Builderページに行き、Enable SeedProd Themeトグルを「Yes」に変更してください。
これで、ワードプレスサイトのどの記事に行っても、新しいカスタムオーサーボックスを見ることができる。
方法2：WordPressテーマのAuthor Boxサポートを利用する
多くの優れたWordPressテーマは、組み込みのユーザープロフィールを使って、各ブログ記事の下に著者ボックスを表示しています。通常、このボックスには著者のプロフィール写真と略歴が表示されます。
しかし、その前に、あなたのテーマにオーサーボックスのサポートが含まれているかどうかを確認する必要があります。
ワードプレスの管理パネルからユーザー " すべてのユーザーにアクセスして確認できます。次に、該当するプロフィールにカーソルを合わせ、「編集」リンクをクリックします。
次の画面では、特定のユーザーに関する編集可能な情報が表示されます。あなたのWordPressテーマがオーサーボックスをサポートしている場合、ページのさらに下に「Biographical Info」というセクションがあるはずです。
そのエリアでは、簡単な著者略歴を追加したり、ソーシャルネットワークや著者のウェブサイトへのリンクをHTMLで含めることができる。
あなたのテーマは、作者がアカウントを持っている場合、Gravatarサービスから作者のプロフィール画像を自動的に取得します。そうでない場合は、グレーのプレースホルダ画像が表示されます。
著者情報を追加したら、「プロフィールを更新」ボタンをクリックしてください。
これで、あなたのウェブサイトでそのライターの記事をクリックすると、そのライターのオーサーボックスをライブで見ることができる。
方法3：コードを使って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のサンプルコードを紹介します：
.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テーマカスタマイザーが開き、テーマの特定の部分を視覚的にカスタマイズすることができます。
Additional CSSの見出しが表示されるまで下にスクロールし、タブを展開します。カスタムCSSコードを貼り付け、公開ボタンをクリックします。
これで、どのブログ記事にもアクセスし、あなたのオーサーボックスの動きを見ることができる。
よくある質問
プラグインなしでWordPressに著者欄を追加できますか？
テーマの functions.php ファイルを使うか、著者の略歴セクションが含まれている場合は、テーマの組み込みサポートを使ってください。
WordPressでオーサーボックスを追加する最も簡単な方法は？
SeedProdのようなドラッグ＆ドロップビルダーを使うのが最も簡単な方法です。コーディング不要で、視覚的にカスタムオーサーボックスを作成することができます。
WordPressの著者紹介が表示されないのはなぜですか？
これは通常、テーマが作者の経歴をサポートしていないか、作者のプロフィールに経歴情報がない場合に起こります。ユーザー " プロフィールの編集に移動し、経歴欄に記入してください。
オーサーボックスにソーシャルメディアのリンクを表示できますか？
はい。多くのテーマやプラグインでは、HTMLやプロフィールフィールドを使ってソーシャルリンクを追加することができます。SeedProdを使用すると、リンクや画像などを含めるために著者ボックスを完全にカスタマイズすることができます。
オーサーボックスのレイアウトをカスタマイズするにはプラグインが必要ですか？
いいえ、しかしSeedProdのようなプラグインを使えば、コードを編集することなくデザインを完全にコントロールすることができます。オーサーボックスをあなたのブランドに合わせたい場合に最適です。
プラグインを使わずにWordPressのオーサーボックスを作成する方法がわかりました。さらに、強力なプラグインを使ってWordPressにオーサーボックスを追加するために必要なすべての手順がわかります。
SeedProdは単なるオーサーボックスプラグインではありません。初心者から上級者まで、完全にカスタムされたWordPressサイトを作成するために必要なすべてのツールを備えた完全なWordPressウェブサイトビルダーです。
ぜひ試してみてはいかがだろうか。
WordPressの魅力的なログインページの例を提供するこの他の記事も気に入っていただけるかもしれません。
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
