วิธีเพิ่มกล่องข้อมูลผู้แต่งใน WordPress

เผยแพร่แล้ว: 2021-11-18

คุณกำลังพยายามแสดงข้อมูลผู้แต่งโดยการเพิ่มกล่องข้อมูลผู้เขียนใน WordPress หรือไม่? กล่องข้อมูลผู้เขียนเป็นส่วนเล็กๆ ที่ให้คุณแสดงข้อมูลเกี่ยวกับผู้เขียนบล็อกและแสดงโปรไฟล์โซเชียลมีเดียของพวกเขา

มีหลายธีมใน WordPress ที่ให้คุณแสดงข้อมูลผู้แต่งได้อย่างง่ายดายตามค่าเริ่มต้น อย่างไรก็ตาม คุณอาจไม่พบมันในบางธีม

ในบทความนี้ ผมจะแสดงวิธีการหลายวิธีในการเพิ่มกล่องข้อมูลผู้แต่งใน WordPress อย่างง่ายดาย

มาขุดกันเถอะ

สารบัญ

วิธีเพิ่มกล่องข้อมูลผู้แต่งใน WordPress
- การเพิ่มกล่องข้อมูลผู้แต่งโดยใช้ธีมของคุณ
- การเพิ่มกล่องข้อมูลผู้แต่งโดยใช้ Plugin
- การเพิ่มกล่องข้อมูลผู้แต่งโดยใช้รหัสที่กำหนดเอง
คำสุดท้าย

วิธีเพิ่มกล่องข้อมูลผู้แต่งใน WordPress

มีหลายวิธีในการเพิ่มกล่องข้อมูลผู้แต่งใน WordPress คุณสามารถเพิ่มกล่องข้อมูลผู้แต่งได้โดยใช้ธีม ปลั๊กอิน รหัสที่กำหนดเอง ฯลฯ ที่นี่ฉันจะแสดงให้คุณเห็นสามวิธี

การเพิ่มกล่องข้อมูลผู้แต่งโดยใช้ธีมของคุณ

ธีม WordPress จำนวนมากมาพร้อมกับกล่องข้อมูลผู้เขียนด้านล่างแต่ละโพสต์ คุณสามารถใช้ช่องนี้เพื่อแสดงประวัติผู้แต่งของคุณ

ในการดำเนินการนี้ ให้ไปที่หน้า ผู้ใช้ -> ผู้ใช้ทั้งหมด ตอนนี้คลิกที่ปุ่ม 'แก้ไข' ของผู้ใช้

หน้าใหม่จะเปิดขึ้น เลื่อนลงไปที่ส่วน 'ข้อมูลชีวประวัติ' ในส่วนนี้ ให้เพิ่มข้อมูลทั้งหมดของผู้แต่ง คุณยังสามารถเพิ่ม HTML ในช่องนี้เพื่อเพิ่มลิงก์

หากผู้เขียนไม่มีรูปโปรไฟล์ บอกผู้เขียนให้ตั้งค่าจาก Gravatar สุดท้าย ให้คลิกที่ผู้ใช้ที่อัปเดต แล้วคุณจะเห็นช่องข้อมูลผู้เขียนด้านล่างเนื้อหา

การเพิ่มกล่องข้อมูลผู้แต่งโดยใช้ Plugin

หากคุณกำลังใช้ธีมที่ไม่มีกล่องข้อมูลผู้แต่ง คุณสามารถใช้วิธีนี้ได้ ในวิธีนี้ คุณจะต้องมีปลั๊กอินชื่อ Author Bio Box

ผู้เขียน Bio Box

ติดตั้งและเปิดใช้งานปลั๊กอิน จากนั้นไปที่การตั้งค่า -> หน้าผู้เขียน Bio Box เพื่อกำหนดการตั้งค่า

จากหน้านี้ เลือกขนาด Gravatar สี ตำแหน่ง และเปลี่ยนแปลงการเปลี่ยนแปลงอื่นๆ สำหรับกล่องข้อมูลผู้แต่ง เมื่อคุณกำหนดค่าปลั๊กอินแล้ว ให้คลิกที่ปุ่มบันทึกการเปลี่ยนแปลง

ไปที่หน้าผู้ใช้ -> ผู้ใช้ทั้งหมด และคลิกที่ปุ่ม 'แก้ไข' สำหรับผู้ใช้ที่คุณต้องการเปลี่ยน

ที่นี่ ให้เลื่อนลงไปที่ส่วน "ข้อมูลติดต่อ" และเพิ่มลิงก์โปรไฟล์โซเชียลมีเดียทั้งหมดของผู้เขียน ปลั๊กอินจะแสดงเฉพาะไอคอนสำหรับโซเชียลมีเดียที่คุณป้อน URL

ตอนนี้เลื่อนลงไปที่ส่วน 'ข้อมูลชีวประวัติ' และเพิ่มข้อมูลของผู้เขียนทั้งหมดที่นี่ คุณยังสามารถใช้ HTML ที่นี่เพื่อเพิ่มลิงก์

ตอนนี้คลิกที่ปุ่ม อัปเดตผู้ใช้ และคุณทำเสร็จแล้ว

การเพิ่มกล่องข้อมูลผู้แต่งโดยใช้รหัสที่กำหนดเอง

ในวิธีนี้ คุณต้องเพิ่มโค้ดลงในเว็บไซต์ของคุณ

ขั้นแรก ไปที่ ' ลักษณะที่ปรากฏ -> ตัวแก้ไขธีม ' จากนั้นคลิกที่ ฟังก์ชั่นธีม (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; }

จากนั้นคลิกที่ปุ่ม เผยแพร่ ด้านบน ตอนนี้คุณมีกล่องข้อมูลผู้แต่งที่ออกแบบแล้ว

คำสุดท้าย

ไม่ว่าคุณจะทำตามวิธีใดที่นี่ คุณจะสามารถเพิ่มกล่องข้อมูลผู้แต่งได้อย่างง่ายดายเสมอ หากคุณประสบปัญหาใด ๆ ให้ถามโดยไม่ลังเล หากคุณชอบบทความนี้ช่วยเราด้วยการแบ่งปันบทความนี้