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

公開: 2016-09-01

優れた執筆には多大な時間、労力、スキルが必要であると誰もが主張することはありません。 それで、新しい読者があなたのブログに着くとき、あなたは彼らに誰がコンテンツを書いたかを知ってもらいたいですよね？ 画面上の単語とそれらを書いた作者を他にどのように結び付けますか？

著者の経歴は、このための完璧なソリューションです。 記事に個性を加えることができ、ブログの信頼性を高めることもできます。 略歴が掲載されている場所（投稿前、投稿後、投稿中）に関係なく、著者の略歴を掲載することは、どのブログにとっても大きなメリットです。

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

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

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

著者の経歴を作成するために使用できるプラグイン

既存のプラグインを使用したい方のために、たくさんの素晴らしいオプションがあります。 ここにチェックアウトするいくつかがあります：

  • スターボックス
  • ファンシー作者ボックス
  • シンプルな著者ボックス

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

WordPressのユーザーと役割

既存のプラグインを使用している場合でも、独自のプラグインを作成する場合でも、WordPressのユーザーとロールを利用することをお勧めします。

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

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

さまざまなユーザーの役割がカバーされたので、アクセスのレベルに関係なく、作成者の経歴が投稿の作成者を特徴としていることに注意することが重要です。 個人のサイトに著者の略歴を追加する場合は、おそらく管理者であるため、心配する必要はありません。 複数の著者のブログを作成している場合は、ライターが購読者として設定されていないことを確認してください。そうすれば、ライターは投稿を書くことができます。

バイオを追加する

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

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

独自の著者バイオプラグインを作成する

独自のプラグインを作成する前に言及することが1つあります。これはすべて、テストサイトで実行する必要があります。 開発環境のセットアップについてサポートが必要な場合は、MAMPの使用を開始するためのステップバイステップの指示に従ってください。

それでは、始めましょう！

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

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

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

著者-bio-wordpress-plugin-php-file

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.グローバル投稿変数の下で、独自のコンテンツの追加を開始できます。 閉じ括弧内にいることを確認してください。 ロジックが含まれるように、これを作成者のいる1つの投稿にのみ表示するように指定することも重要です。

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>';
}

}

このコードのおかげで、著者との1つの投稿に、その名前が表示されます。 たまたま名前を指定しなかった場合は、ニックネームを表示するオプションがあります。 以前にバイオ情報を入力したときのことを覚えていますか？ これは、そのコンテンツが表示される場所です。 著者の投稿へのリンクも含まれます。 作成者が別の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;
}
著者-バイオワードプレス-完全
いくつかのカスタムスタイルで、この著者の経歴は変更されており、元の著者とはかなり異なって見えます。

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

WordPressについて学び続ける

WordPressは初めてですか？ いらっしゃいませ！ 学ぶことはたくさんありますが、すぐにWordPressプロになるために、ゆっくりと着実に取り組んでいきます。 この電子ブックの終わりまでに、WordPressとは何か、WordPressの使用の基本、そして次にどこに進んで詳細を学ぶことができるかがわかります。 WordPressのすべてを学ぶ準備はできましたか？