WordPress の投稿に著者略歴を追加する方法

公開: 2023-02-26

優れた文章を書くには、多大な時間、労力、スキルが必要であると主張する人は誰もいません。 新しい読者があなたのブログにアクセスしたとき、誰がコンテンツを書いたのかを知ってもらいたいと思いませんか? 画面上の言葉とそれを書いた作者とをどのように結びつけることができるでしょうか。

著者の略歴は、これに対する完璧なソリューションです。 記事に個性を加え、ブログの信頼性を高めることもできます。 プロフィールがどこで取り上げられても (投稿前、投稿後、または投稿中)、著者の略歴があることは、どのブログにとっても優れた資産です。

著者略歴はどのように作成されますか?

一部のテーマには、作成者のバイオ機能が自動的に付属しています。 選択したテーマがそうでない場合でも、心配する必要はありません。 いつでも自分で追加できます！

サイトに著者略歴を追加するには、2 つの方法があります。 既存のプラグインを使用することも、自分でやるのが好きな場合は、プラグインをゼロから簡単に作成することもできます。 両方の方法 (独自のプラグインを作成するためのチュートリアルを含む) について説明しますが、まず、いくつかの既存のプラグインから始めましょう。

著者略歴の作成に使用できるプラグイン

既存のプラグインを使用したい方には、優れたオプションがたくさんあります。 チェックアウトするカップルは次のとおりです。

  • スターボックス
  • シンプルオーサーボックス

プラグインを選択するときは、一部のプラグインが他のプラグインよりも高度な機能を備えていることに注意することが重要です。 既存のプラグインを使用することを選択したからといって、スタイリングが制限されるわけではありません。 多くの場合、CSS を変更して、ブランドと一致させることができます。 それがあなたが探しているものである場合は、必ず調査を行ってください.

WordPress ユーザーと役割

既存のプラグインを使用している場合でも、独自のプラグインを作成する場合でも、WordPress のユーザーとロールを活用したいと思うでしょう。

5 種類のロールについて簡単に説明します。

  • サブスクライバー:自分のプロファイルを表示し、WordPress サイトの投稿を読むことしかできないため、最も低いアクセス レベルです。
  • 貢献者:投稿を書くことはできますが、公開することはできません。 ゲスト ライターの場合、これは理想的なアクセス レベルです。
  • 作成者:これは、投稿の作成と公開を完全に制御できる寄稿者より上位のアクセス レベルです。
  • 編集者:自分の投稿を作成し、それぞれの投稿を管理できます。また、サイト上のすべての投稿者からのすべての投稿も管理できます。 これは、コンテンツ マネージャーの一般的なアクセス レベルです。
  • 管理者:これらのユーザーはサイトを完全に制御できるため、テーマの変更、プラグインの追加と削除、投稿の作成、投稿の読み取り、投稿の削除、作成者の追加と削除などを行うことができます。実行する必要があることはすべてアクセスできます。やるレベル。

さまざまなユーザー ロールについて説明したので、アクセス レベルに関係なく、投稿者の略歴には投稿の作成者が含まれていることに注意してください。 個人サイトに著者略歴を追加する場合は、管理者である可能性が高いため、心配する必要はありません。 複数の著者によるブログを作成している場合は、ライターが購読者として設定されていないことを確認してください。

バイオの追加

ユーザーが設定された後、略歴を入力するには、ユーザー設定を編集するだけです (または、管理者としてこれを行うことができます)。 [ユーザー] > [プロフィール] に移動するだけです。 バイオ、ウェブサイトなど、入力できるフィールドが表示されます。追加する情報が多いほど、ウェブサイトの著者バイオでより多くのユーザーが表示されます。

著者-bio-wordpress-users-bio-info

独自の Author Bio プラグインの作成

独自のプラグインを構築する前に 1 つ言及しておくべきことがあります。これはすべて、テスト サイトで行う必要があります。 開発環境のセットアップについてサポートが必要な場合は、MAMP の使用を開始するための段階的な手順に従ってください。

さあ、始めましょう！

1. plugins ディレクトリに新しいフォルダを作成します。 例: /wp-content/plugins/mysite-plugin/

著者-bio-wordpress-plugin-folder-start

2. 任意のテキスト エディタを開き、空のファイルを作成してmysite-plugin.phpとして保存します。

著者-bio-wordpress-プラグイン-php-ファイル

3. 次のコードをmysite-plugin.phpファイルに追加します (コメントと PHP タグを含む)。

 <?php /* Plugin Name: Author Bio for mysite.com Description: Site-specific functions for mysite.com */ /* Add Functions Here */ /* Keep Functions Above This */ ?>

4. プラグイン名と説明の情報を入力します。

著者-bio-wordpress-plugin-in-list
プラグイン リストに移動すると、この新しいプラグインがリストに表示されます。

次に、プラグイン ファイルにいくつかの情報を追加します。 完了すると、投稿の下にバイオボックスが表示されます。

表示する情報は次のとおりです。

  • 著者名
  • 著者のイメージ
  • 著者の略歴
  • 著者の投稿リンク
  • 著者のウェブサイト

プラグインにスニペットを追加する

1. 関数を作成する

function mysite_author_bio( $content ) { global $post; }


グローバル変数にアクセスするには、変数を「グローバル化」します。 これが、 $post含まれている理由です。 グローバル変数を宣言すると、この関数のすべての部分にアクセスできます。 「グローバル」という言葉を使用することで、 $postグローバル変数にアクセスすることを宣言していることになります。 この変数は、現在の投稿データに関するさまざまな詳細を保持します。 投稿者の情報を表示しているため、これは重要であり、正しい著者名、略歴、ウェブサイトなどを掲載する必要があります。

2. グローバル投稿変数の下で、独自のコンテンツの追加を開始できます。 閉じ括弧内にいることを確認してください。 ロジックが含まれているように、これが著者の単一の投稿にのみ表示されるように指定することも重要です。

 function mysite_author_bio( $content ) { global $post; if ( is_single() && isset( $post->post_author ) ) { } }

3. 作者の名前と情報を表示します。

 function mysite_author_bio( $content ) { global $post; if ( is_single() && isset( $post->post_author ) ) { } if ( empty( $display_name ) ) $display_name = get_the_author_meta( 'nickname', $post->post_author ); $user_description = get_the_author_meta( 'user_description', $post->post_author ); $user_website = get_the_author_meta('url', $post->post_author); $user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author)); if ( ! empty( $display_name ) ) $author_details .= '<p class="author_links"><a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>'; if ( ! empty( $user_website ) ) { $author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>'; } else { $author_details .= '</p>'; } }

このコードのおかげで、投稿者がいる単一の投稿で、その名前が表示されます。 たまたま名前を指定しなかった場合は、ニックネームを表示するオプションがあります。 以前にバイオ情報を入力したときのことを覚えていますか? これは、そのコンテンツが表示される場所です。 著者の投稿へのリンクも含まれます。 著者が別の Web サイトを持っていて、それをプロファイルに入力した場合、それはリンクとして表示されます。

4. ページに表示されるように、バイオのコンテンツに情報を渡します。

 function mysite_author_bio( $content ) { global $post; if ( is_single() && isset( $post->post_author ) ) { $display_name = get_the_author_meta( 'display_name', $post->post_author ); if ( empty( $display_name ) ) $display_name = get_the_author_meta( 'nickname', $post->post_author ); $user_description = get_the_author_meta( 'user_description', $post->post_author ); $user_website = get_the_author_meta('url', $post->post_author); $user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author)); if ( ! empty( $display_name ) ) $author_details = '<p class="author_name">' . $display_name . '</p>'; if ( ! empty( $user_description ) ) $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>'; if ( ! empty( $user_website ) ) { $author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>'; } else { $author_details .= '</p>'; } $content = $content . '<footer class="author_bio" >' . $author_details . '</footer>'; } return $content; } add_action( 'the_content', 'mysite_author_bio' ); remove_filter('pre_user_description', 'wp_filter_kses');

これは、自己紹介コンテンツとともにアバター画像を表示するためのロジックです (作成者がプロフィールに写真を含めていると仮定します)。 また、リンクとともに Web サイトの URL も表示されます。 この情報は投稿コンテンツに渡され、関数で呼び出されるため、投稿コンテンツの下に表示されます。

5. これをまだ行っていない場合は、必ずプラグインを有効にしてください。

著者-bio-wordpress-activate-plugin

ここでは独自のプラグインを作成しましたが、少し変更すれば、このチュートリアルのコード スニペットをfunctions.phpファイルにも入れることができることに注意してください。 テーマを切り替えた場合に再利用できるように、プラグイン ルートを選択しました。

著者略歴のスタイリング

これらの単純なコード スニペットだけでも問題ないように見えますが、カスタム スタイルを使用することもできます。 CSS を調整すると、見た目が完璧で洗練されたものになります。

著者-バイオ-ワードプレス-開始

まず、新しいスタイルを見てみましょう。 Chrome インスペクターは、何が起こっているかを確認するための優れた方法です。 右クリックして [検査] を選択し、Chrome インスペクターを開きます。

著者-バイオ-ワードプレス-検査
著者-バイオ-ワードプレス-検査-詳細

スタイルシートに追加できるいくつかのスタイルを次に示します。 これらを出発点として使用し、デザインのスタイルを調整できます。

 .author_bio { font-family: 'Montserrat', sans-serif; padding: 15px; border: 1px solid #ccc; } .author_bio .author_name { font-size: 2.5rem; font-weight: bold; text-align: center; border-bottom: 1px solid #CCC; } .author-details { border: 1px solid #D8D8D8; } .author_details img { border: 6px solid #e85555; border-radius: 50%; float: none; margin: 20px auto; display: block; clear: both; } .author_bio .author_links { text-align: center; } .author_bio .author_links a { text-decoration: none; color: #e85555; }
Abbey Fitzgerald の著者略歴のスクリーンショット
いくつかのカスタム スタイルを使用して、この著者のバイオは変更されており、オリジナルとはかなり異なって見えます。

既存のプラグインを選択した場合でも、独自のプラグインを作成した場合でも、コンテンツ作成者をフィーチャーするこの方法には多くの柔軟性があります. いくつかのコードを変更するか、プラグインを追加するだけで、サイトの投稿に簡単な著者の略歴を追加できます. いくつかの簡単な手順とカスタム CSS を追加するだけで、作成者の略歴をサイトのルック アンド フィールに合わせることができます。