วิธีเพิ่มกล่องผู้แต่งในธีม GeneratePress [2021]

คุณรู้หรือไม่ว่าคุณสามารถเพิ่มกล่องผู้เขียนในธีม Generatepress โดยไม่ต้องติดตั้งปลั๊กอินเพิ่มเติม

ดังนั้น เพื่อช่วยบล็อกเกอร์ ฉันได้เตรียมคำแนะนำโดยละเอียดเกี่ยวกับ วิธีเพิ่มกล่องผู้แต่ง โดยใช้คุณลักษณะองค์ประกอบของธีม Generatepress

ฉันรู้ว่าคุณหลายคนถามทำไมไม่เพิ่มปลั๊กอินกล่องผู้เขียนใน WordPress และทำให้งานง่ายขึ้น เนื่องจากการติดตั้งปลั๊กอินเพิ่มเติมอาจส่งผลต่อความเร็วเว็บไซต์ของคุณ ควรใช้โค้ด HTML และ CSS ที่กำหนดเองเพื่อสร้างกล่องผู้แต่งโดยใช้คุณลักษณะ Generatepress Element ดั้งเดิม

หมายเหตุ: คุณสามารถใช้เคล็ดลับนี้ได้ก็ต่อเมื่อคุณมีปลั๊กอิน Generatepress premium ติดตั้งอยู่ในเว็บไซต์ WordPress ของคุณ

ทำไมคุณถึงต้องการกล่องผู้แต่งบนเว็บไซต์ของคุณ?

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

สร้างความสัมพันธ์และความไว้วางใจที่ดีระหว่างผู้อ่านและผู้เขียน และยังช่วยสร้าง อำนาจ ในชุมชนอินเทอร์เน็ต

คุณรู้เกี่ยวกับ อัลกอริธึม EAT หรือไม่? หากต้องการอันดับที่ดีใน Google คุณต้องสร้างแบรนด์ด้วยการสร้าง ความเชี่ยวชาญ อำนาจหน้าที่ และความน่าเชื่อถือ – ซึ่งเป็นสิ่งที่ EAT ย่อมาจาก Author Box เป็นขั้นตอนแรกในการบรรลุเป้าหมายนั้น

ขั้นตอนในการเพิ่มกล่องผู้เขียนในธีม generatePress

ก่อนเพิ่มกล่องผู้เขียนในธีม Generatepress คุณต้องทำการตั้งค่าพื้นฐานบางอย่างใน WordPress

1. เพิ่มรูปโปรไฟล์และคำอธิบายผู้แต่ง

ไปที่ แดชบอร์ด WordPress และคลิกที่ส่วน ผู้ใช้ ตอนนี้คลิกที่ปุ่มแก้ไขด้านล่างชื่อผู้ใช้

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

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

<a href=”https://key2blogging.co/about-us/”>หน้าเกี่ยวกับเรา</a>

ทางนี้, คุณสามารถเพิ่ม anchor text ด้วยลิงก์ ใน กล่อง Author ของ ธีม GeneratePress

หากคุณยังไม่ได้เพิ่ม Gravatar คุณสามารถทำได้โดยคลิกลิงก์ด้านล่างดังที่แสดงไว้ที่นี่

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

2. เปิดใช้งานโมดูลองค์ประกอบ

หากต้องการเปิดใช้งานโมดูล Element ให้ไปที่ Appearance > GeneratePress > Elements > Activate

หากคุณทำเสร็จแล้วคุณสามารถข้ามไปยังขั้นตอนที่สามได้

3. สร้างองค์ประกอบตะขอใหม่

ตอนนี้คลิกที่ส่วนลักษณะที่ปรากฏและคุณจะเห็นตัวเลือกที่เรียกว่า " องค์ประกอบ " คลิกที่มัน ตอนนี้คลิกที่ " เพิ่มองค์ประกอบใหม่ " และเลือก ตะขอ

4. ตั้งชื่อเป็น “Author Box” และวางโค้ด HTML

คุณต้องตั้งชื่อเป็น Author Box และวางโค้ด HTML ด้านล่างในตัวแก้ไขโค้ด

คัดลอกโค้ดด้านล่าง

 <div class="author-box"> <div class="avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?> </div> <div class="author-info"> <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"></a> </div> </div> </div>

5. ตั้งค่าตะขอตั้งค่า

หลังจากวางโค้ดแล้ว คุณต้องตั้งค่า Hook ในตัวเลือก Hook เลือก “ สร้างหลังจากเนื้อหา ” จากนั้นคลิกที่ “ ดำเนินการ PHP ” และตั้งค่าลำดับความสำคัญเป็น “ 20 ”

6. ตั้งค่ากฎการแสดงผล

ตอนนี้คลิกที่กฎการแสดงผลทางด้านขวาของการตั้งค่า ตอนนี้ใน Location เลือก “ All singular ” และในแท็บ Exclude ให้เลือก “ Frontpage ”

ตอนนี้คุณได้ตั้งค่า Hook เรียบร้อยแล้ว ดังนั้น กดปุ่ม เผยแพร่

7. เพิ่มโค้ด CSS

ตอนนี้คุณต้องออกแบบกล่องผู้เขียนโดยใช้โค้ด CSS ไปที่ลักษณะที่ ปรากฏ >> ปรับแต่ง >> CSS เพิ่มเติม แล้ววางโค้ดด้านล่างแล้วกดปุ่มเผยแพร่

คัดลอกโค้ด CSS :

 .author-box { padding: 3%; padding-bottom: 10px; margin-top: 30px; font-size: 0.9em; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } .author-box .avatar { width: 450px; height: auto; border-radius: 100%; margin-right: 30px; } h5.author-title { margin-bottom: 0.1em; font-weight: 800; } .author-description { line-height: 1.6em } .author-links a { margin-top: -1.5em; font-size: 2em; line-height: 2em; float: left; } @media (max-width: 768px) { .author-box { padding: 20px; padding-bottom: 25px; margin-top: 60px; flex-direction: column; text-align: center; } .author-box .avatar { margin-right: 0; width: 100%; margin-top: -25px; } .author-box .avatar img { max-width: 100px; } .author-links a { float: none; align-self: center; } .author-description { margin-bottom: -0.1em; } }

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

คู่มือวิดีโอ:

หมายเหตุ : หากคุณใช้ธีม Generatepress เวอร์ชันฟรี คุณจะต้องเพิ่มกล่องผู้แต่งโดยใช้ปลั๊กอิน

บทสรุป

ตอนนี้เราได้กล่าวถึงกระบวนการทีละขั้นตอนในการเพิ่มกล่องผู้แต่งในธีม Generatepress ใน WordPress หากคุณมี ข้อสงสัย ใดๆ ถามฉันใน ส่วนความคิดเห็น หรือเชื่อมต่อฉันทาง Twitter

หากคุณชอบคู่มือนี้ ให้แชร์กับชุมชนบล็อกของคุณและชื่นชมในความพยายาม ขอขอบคุณ.

อ่าน เพิ่มเติม : ส่วนขยาย Chrome ที่มีประโยชน์ 10 อันดับแรกสำหรับบล็อกเกอร์