WordPressで著者情報ボックスを追加する方法

公開: 2021-11-18

WordPressに著者情報ボックスを追加して著者情報を表示しようとしていますか？作成者情報ボックスは、ブログの作成者に関する情報を表示したり、ソーシャルメディアのプロファイルを表示したりできる小さなセクションです。

WordPressにはいくつかのテーマがあり、デフォルトで作成者情報を簡単に表示できます。ただし、一部のテーマでは見つからない場合があります。

この投稿では、WordPressに著者情報ボックスを簡単に追加するためのいくつかの方法を紹介します。

掘り下げてみましょう。

WordPressで著者情報ボックスを追加する方法
- テーマを使用して著者情報ボックスを追加する
- プラグインを使用した作成者情報ボックスの追加
- カスタムコードを使用した作成者情報ボックスの追加
最後の言葉

WordPressで著者情報ボックスを追加する方法

WordPressで著者情報ボックスを追加する方法はいくつかあります。テーマ、プラグイン、カスタムコードなどを使用して、作成者情報ボックスを追加できます。ここでは、3つの方法を紹介します。

テーマを使用して著者情報ボックスを追加する

多くのWordPressテーマには、各投稿の下に作成者情報ボックスがあります。このボックスを使用して、著者の略歴を表示できます。

これを行うには、 [ユーザー]->[すべてのユーザー]ページに移動します。次に、ユーザーの[編集]ボタンをクリックします。

新しいページが開き、[経歴情報]セクションまで下にスクロールします。このセクションでは、作成者のすべての情報を追加します。このフィールドにHTMLを追加して、リンクを追加することもできます。

作者にプロフィール写真がない場合は、Gravatarから設定するように作者に伝えます。最後に、更新されたユーザーをクリックすると、コンテンツの下に作成者情報ボックスが表示されます。

プラグインを使用した作成者情報ボックスの追加

作成者情報ボックスが付属していないテーマを使用している場合は、この方法を使用できます。この方法では、AuthorBioBoxという名前のプラグインが必要になります。

著者バイオボックス

プラグインをインストールしてアクティブ化し、[設定]-> [作成者バイオボックス]ページに移動して、設定を構成します。

このページから、Gravatarのサイズ、色、場所を選択し、作成者情報ボックスのその他の変更を変更します。プラグインを構成したら、[変更を保存]ボタンをクリックします。

次に、[ユーザー]-> [すべてのユーザー]ページに移動し、変更するユーザーの[編集]ボタンをクリックします。

ここで、[連絡先情報]セクションまでスクロールし、作成者のすべてのソーシャルメディアプロファイルリンクを追加します。プラグインは、URLを入力したソーシャルメディアのアイコンのみを表示します。

次に、[経歴情報]セクションまでスクロールダウンし、ここにすべての著者の情報を追加します。ここでHTMLを使用してリンクを追加することもできます。

次に、[ユーザーの更新]ボタンをクリックすると、完了です。

カスタムコードを使用した作成者情報ボックスの追加

この方法では、Webサイトにコードを追加する必要があります。

まず、[外観]-> [テーマエディター]に移動し、[テーマ関数（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');

ファイルを更新することを忘れないでください。これで、情報ボックスのスタイルはそのままになります。

[外観]->[カスタマイズ]に移動し、[追加の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; }

次に、上の[公開]ボタンをクリックします。これで、設計された作成者情報ボックスができました。

最後の言葉

ここでどの方法を使用しても、作成者情報ボックスを非常に簡単に追加できます。問題が発生した場合は、ためらうことなく質問してください。この記事が気に入った場合は、この記事を共有してください。