แนะนำบทความที่เกี่ยวข้องกับเนื้อหาด้วย Contextual Related Posts

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

Contextual Related Post

คือปลั๊กอินที่จะมาช่วยสร้างเพิ่ม Related Post นี้ให้กับเว็บของเรา มันดีตรงที่จะมีความยืดหยุ่นกว่าตัวที่มากับธีมส่วนใหญ่ และโดยส่วนตัวที่ลองใช้ปลั๊กอินนี้มานาน ก็ไม่คิดที่จะเปลี่ยนใจไปใช้ตัวอื่นเลย เหตุผลเพราะมันดึงโพสได้ตรงกับความต้องการมากที่สุด เพราะเน้นไปที่การวิเคราะห์จากเนื้อหาและหัวข้อของบทความโดยเฉพาะ ปลั๊กอินอื่นๆ มักจะเน้นไปที่การดึงบทความใน Categories หรือ  Tags เดียวกัน แต่การดึงจากเนื้อหาจะทำให้ตรงกับที่เราต้องการนำเสนอมากกว่า

Features

• Automatic แสดงอัตโนมัติในโพสและใน Feed
• Manual สามารถใช้ function ฝังในธีมตามที่เราต้องการ
• Widgets มี widget ที่แสดงบน sidebar แทนก็ได้
• Shortcode สามารถใช้ shortcode แสดงตรงไหนในบทความก็ได้
• Algorithm ค้นหาบทความที่เกี่ยวข้องจากเนื้อหาและหัวข้อบทความ
• Caching มีระบบแคชในตัว ช่วยให้ทำงานได้เบาขึ้น
• Exclusion สามารถกำหนดให้ไม่ต้องแสดงบทความหรือหมวดหมู่ใด ในผลลัพธ์ก็ได้
• Custom Post Type รองรับ  Custom Post Type สามารถกำหนดให้ใช้งานหรือไม่ใช้งานบน CPT ไหนก็ได้ จะให้ดึงมาไว้ในผลลัพธ์ด้วยหรือไม่ก็ได้
• Thumbnails สามารถแสดง Thumbnail ได้
• Style ตกแต่งด้วย CSS เองได้
• Customisable output กำหนดให้แสดง excerpt ใน related posts และกำหนดความยาวด้วยก็ได้ สามารถใช้แท็ก html ด้วยได้
• Extendable Code  มี Filter และ Action มากมายสำหรับ Developer

Contextual Related Posts สามารถติดตั้งได้ฟรีจากเมนู Plugins > Add New

การตั้งค่า

ไปที่เมนู Settings > Related Posts เพื่อตั้งค่าปลั๊กอิน

General Options

การตั้งค่าพื้นฐาน

Cache output เป็นการตั้งค่าทั่วไป ส่วนที่สำคัญคือ Cache Outout ที่จะช่วยสร้างแคชสำหรับผลลัพธ์ในแต่ละหน้าไว้ ทำให้ระบบทำงานได้เบาและเร็วขึ้น สามารถคลิกเคลียร์แคชได้หากต้องการล้างของเก่า เช่น เวลาอัพรูปภาพ Featured image ใหม่ แต่แคชยังแสดงรูปเดิม ก็อาจจะต้อง Clear Cache ก่อน เป็นต้น

Automatically Add Related Posts อันนี้เราสามารถกำหนดได้ว่าจะให้แสดงที่ไหนบ้าง ก็เลือกเฉพาะอันที่เราต้องการค่ะ

Show metabox กำหนดว่าจะให้แสดงกล่องตัวเลือกในโพสหรือไม่ ซึ่งตัวนี้จะช่วยให้เราสามารถกำหนดโพสที่ต้องการจะแสดงได้เองในโพสนั้นๆ รวมถึงกำหนดให้ไม่ต้องแสดงบนหน้านั้นๆ เลยก็ได้ หากปกติไม่ได้กำหนดอยู่แล้วก็ไม่ต้องติ๊กนะคะ เอาออกได้ การใช้งานแต่ละคนไม่เหมือนกัน หากใครต้องการกำหนดจำเพาะเจาะจงบ่อยๆ ก็ค่อยเปิดตรงนี้ก็ได้

List tuning options

การตั้งค่าการแสดงผลของลิสต์ผลลัพธ์

Number of related posts to display  จำนวนผลลัพพธ์ที่ต้องการให้แสดง

Related posts should be newer than กำหนดว่าต้องเป็นโพสที่ไม่มากกว่า (ใหม่กว่า) กี่วัน สำหรับเว็บบางเว็บ เช่น เว็บข่าว คุณอาจไม่อยากจะขุดข่าวที่เก่ามากๆ มาแสดงก็ได้ เอาเฉพาะอันที่ทันสมัย เป็นต้น

Find related posts base on content as well as title ข้อนี้สำคัญมาก คือปกติปลั๊กอินเนี่ยจะดึงเฉพาะผลลัพธ์จากชื่อเรื่อง แต่หากเราเปิดตรงนี้ด้วย ปลั๊กอินก็จะดึงจากเนื้อหาในบทความนั้นๆ ด้วย ซึ่งหากเปิดตรงนี้เขาก็แนะนำว่าให้เปิด Cache ใน General Settings ด้วย

Post types to include in the result  กำหนดว่าจะแสดงผลลัพธ์จาก Post type ตัวไหนบ้าง หากในเว็บเรามีหลาย Post type ก็เลือกว่าอันไหนที่จะเกี่ยวข้องนำมาแสดงในบทความได้ อันไหนไม่ต้องการก็ไม่ต้องติ๊กค่ะ

List of post or page IDs to exclude from the result  ใส่โพสหรือเพจ ID ที่เราไม่ต้องการให้แสดง โดยการหา ID นั้นทำได้โดยการคลิกแก้ไขที่โพสนั้นๆ แล้วดูเลขด้านบน นำมากรอกโดยใช้เครื่องหมายคอมม่าคั่น , แต่ละโพส

Categories to exclude from the result  คล้ายๆ กับอันบน แต่อันนี้ง่ายกว่า แค่พิมพ์หมวดหมู่ที่เราต้องการจะไม่ให้แสดงในผลลัพธ์ มันก็จะดึงให้อัตโนมัติ ไม่ต้องหา ID ค่ะ

Output options

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

Title of related posts  เป็นการตั้งหัวข้อหลังก่อนที่จะแสดง related posts ตรงนี้สามารถใช้ html ได้ ในรูปเราใช้ <h3> เพื่อให้ตัวใหญ่ขึ้น

When there are no posts, What should be show  ถ้าไม่มีผลลัพธ์ที่เกี่ยวข้องจะให้แสดงอะไร Blank output คือไม่ต้องแสดงอะไรเลย ส่วนอีกข้อก็ใส่ข้อความที่เราอยากให้แสดงแทน

Show post excerpt in list  ให้แสดง Excerpt (ตัดทอน) ด้วยหรือไม่ กรณีนี้เราไม่ต้อง อยากใช้แค่ Title ก็ไม่ต้องติ๊กค่ะ ถ้าติ๊กข้อนี้ก็ดูข้อต่อไป

Lenght of excerpt (in word)  ความยาวของ Excerpt อันนี้นับเป็นคำนะคะ ภาษาไทยกับภาษาอังกฤษนับคำไม่เท่ากันหรอกค่ะ ดังนั้นบางอันอาจจออกมายาวสั้นต่างกัน เพราะไม่ได้นับเป็นตัวหนังสือ (Character)

Show post author in list  แสดงชื่อคนเขียนบทความด้วยหรือไม่ กรณีที่เราต้องมีคนเขียนหลายคนและอยากให้ระบุก็ติ๊กได้

Show post date in list  แสดงว้นที่

Limit post title lenght (in characters)  จำกัดความยาวของ Title หรือชื่อเรื่อง นับเป็นตัวอักษร ให้ยาวได้ไม่เกินจำนวนที่กรอก

Open link in new tab  เปิดลิงค์ในแท็บใหม่

Add nofollow attribute to link in the list  กำหนดให้ลิงค์เป็นแบบ nofollow

Exclusion settings

เกี่ยวกับการกำหนดในเรื่องของข้อยกเว้นที่จะนำมาแสดงในผลลัพธ์

Exclude display of related posts on these posts / pages  ใส่ ID ของหน้าที่เราไม่ต้องการให้แสดง related posts

Exclude display of related posts on thease post types  ไม่ต้องแสดง related posts บน post type ที่เลือก

Customize the output

กำหนดการแสดงผลของลิสต์ผลลัพธ์ซึ่งสามารถใช้ html มากำหนดได้ ซึ่งในภาพเป็นค่าพื้นฐานอยู่แล้ว ไม่จำเป็นต้องตั้งค่าอะไร เป็น html ของ ul li ที่ใช้แสดงลิสต์นั่นเอง

HTML to display before the list of posts:  แท็ก html ก่อนแสดงลิสต์

HTML to display before each list item:  แท็ก html สำหรับก่อนหน้าแต่ละลิสต์

HTML to display after each list item:  แท็ก html ต่อหลังแต่ละลิสต์

HTML to display after the list of posts: แท็ก html หลังจากลิสต์ทั้งหมด

ซึ่งจากด้านบนมันก็จะออกมาในรูปแบบด้านล่าง

<ul>
   <li>List 1</li>
   <li>List 2</li>
   <li>List 3</li>
   <li>List 4</li>
</ul>

Thumbnails options

เป็นการตั้งค่าในส่วนของการแสดง Thumbnail หรือภาพ Featured image ของบทความประกอบในลิสต์นั่นเอง ปกติก็จะตั้งค่าเลือกเฉพาะขนาดค่ะ นอกนั้นเวลาเรา Save มันจะกำหนดให้เอง

Location of the post thumbnail กำหนดตำแหน่งที่จะให้แสดงภาพ หากใครต้องการให้แสดงเป็นลิสต์หัวข้อแบบไม่ต้องมีภาพ

• Thumbnail inline, before title  แสดงภาพก่อนหน้า title
• Thumbnail inline, after title  แสดงภาพหลังจาก title
• Only thumbnail, no text เฉพาะภาพ ไม่ต้องแสดงข้อความ
• No thumbnail, Only text ไม่ต้องแสดงภาพ แสดงเฉพาะข้อความ

Thumbnail size  ขนาดของภาพ

Extract the first image from the post กำหนดให้ใช้ภาพแรกของบทความ ในกรณีที่ไม่ได้ตัง Featured image อันนี้ไม่ค่อยแนะนำ เพราะบางทีภาพอาจจะสัดส่วนต่างกันมาก แสดงออกมาไม่สวย

Use default thumbnail  กำหนดภาพมาตฐาน ใช้สำหรับบทความที่ไม่มีภาพเช่นกัน แต่ตัวนี้เราจะกำหนดภาพเอง โดยการใส่ URL ของภาพที่ช่องว่าง

Styles

เป็นการกำหนดในส่วนของรูปลักษณ์และการตกแต่งเพิ่มเติม

ปกติแล้วหากเราเลือกเป็นแสดงเฉพาะลิสต์ ในข้อก่อนหน้านี้ ก็ไม่จำเป็นต้องมาตั้งค่าที่ตรงนี้นะคะ เพราะว่ามันจะไม่ส่งผลอะไรค่ะ แต่หากเราเลือกให้แสดงภาพ เช่น เราเลือกไว้ว่า Location of post thumbnail: Display thumbnails inline with posts, before title (แสดงภาพเหนือข้อความ) เราก็จะสามารถมาตั้งค่าในส่วนนี้ได้ ดังนี้

Style of the related posts  กำหนดรูปแบบที่ต้องการให้แสดง

• No style  ไม่มีสไตล์ คือจะเป็นร่างภาพและข้อความเรียงกันลงมาเปล่าๆ โดยเราต้องไปกำหนด CSS เองที่ช่อง Custom CSS  ด้านล่าง
• Round Thumbnails เป็นการแสดงภาพแบบกรอบมนแบบในรูปตัวอย่าง เป็นสไตล์ที่ระบบสร้างมาให้แล้ว ซึ่งเตยคิดว่าไม่ค่อยสวยและอาจไม่เข้ากับธีมบางธีม ข้อนี้จะไม่ค่อยเลือกค่ะ
• Text Only แสดงเฉพาะข้อความ

จริงๆ แบบ Round Thumbnails นั้นจะดีกว่าเพราะทำให้กินพื้นที่น้อย แต่เนื่องจากเตยไม่ค่อยชอบสไตล์ของมันที่แลดูเยอะไปนิดนึง ทั้งเงา ทั้งขอบ ทั้งพื้นหลัง ซ้อนกันหลายชั้น อาจเพราะดีไซน์มานานแล้ว ซึ่งไม่เข้ากับธีมของเราที่ต้องการเน้นความเรียบง่ายมากกว่า

ดังนั้นเราจะเลือกเป็นแบบ No style แล้วทำการดีไซน์รูปแบบเอง โดยเปลี่ยนจากผลลัพธ์ No style ด้านซ้าย ให้เป็นแบบภาพด้านล่าง โดยกำหนดขนาด Thumbnail size  เป็น 640px เพื่อให้เวลา Responsive แล้วภาพไม่เบลอเกินไปเลยขอให้ภาพใหญ่นิดนึง ความสวยงามนี้จะอยู่ที่สัดส่วนภาพที่เท่ากัน แต่เนื่องจากก่อนหน้านี้เราใช้คนละธีม ภาพคนละแบบกัน ก็เลยจะไม่ได้เท่ากันหมด บางบทความชื่อก็ยาวกว่าด้วย

โค้ดที่ต้องนำไปใส่ใน Custom CSS to add to header

.crp_related  ul li {
float: left;
width: 30%;
margin-right: 20px;
margin-top: 20px;
border: 1px solid #f3f3f3;
border-radius: 3px;
text-align: center;
}

.crp_thumb {
width: 100%;
border-bottom: 1px solid #ededed;
}

.crp_title {
font-size: 16px; /*ขนาดตัวหนังสือของ Title เปลี่ยนเลขได้*/
margin: 10px;
display: inline-block;
}

.crp_clear {
	clear: both;
}

.crp_related  ul li:nth-child( 3n+4) {
clear:both;
}

@media (max-width: 1110px) {
.crp_related  ul li:nth-child( 3n+4) {
clear: none;
float: left;
}
.crp_related  ul li:nth-child(2n+3) {
clear:both;
}
.crp_related  ul li {
width: 45%;
}
}

@media (max-width: 499px) {
.crp_related  ul li {
clear: both;
}
.crp_related  ul li {
width: 100%;
}
}

ต้องบอกก่อนว่าเตยก็ไม่ได้เก่งเรื่องโค้ดนะคะ โค้ดด้านบนเป็นแบบ Reponsive แสดงภาพบนหน้าจอคอมแบบ 3 คอลัมน์ และลดลงตาขนาดหน้าจอเป็น 2 และคอลลัมน์เดียวบนมือถือแบบแนวตั้งค่ะ ใครจะนำไปปรับปรุงใช้กับเว็บของตนเองก็ได้ค่ะ

Contextual Related Posts Widget

นอกจากแสดงในส่วนของท้ายบทความแล้ว บางทีเราอาจจะอยากที่จะแสดงบทความที่เกี่ยวข้องกันไว้ที่ Sidebar ซึ่ง Contextual Related Posts ก็มี Widget สำหรับให้เราใส่ใน Sidebar ได้ด้วย

ใส่ป้ายชื่อ Title ที่ช่อง Title

กำหนดจำนวนที่ต้องการให้แสดงที่ No. of posts : จากนั้นให้เรากำหนดว่าต้องการที่จะแสดงอะไรบ้าง

Show excerpt  แสดง excerpt (ตัดตอน)
Show author  แสดงชื่อคนเขียน
Show date แสดงวันที่

Thumbnail options กำหนดการแสดงภาพ

Thumbnail inline, before title  แสดงภาพก่อนหน้า title
Thumbnail inline, after title  แสดงภาพหลังจาก title
Only thumbnail, no text เฉพาะภาพ ไม่ต้องแสดงข้อความ
No thumbnail, Only text ไม่ต้องแสดงภาพ แสดงเฉพาะข้อความ

Thumbnail height/Thumbnail width : กำหนดความสูง ความกว้างของภาพ

Post types to include กำหนดว่าต้องการนำผลลัพธ์จาก post type ไหนมาใช้บ้าง ก็ติ๊กเลือกเอา

จากนั้นก็กด Save

สรุปการใช้งาน

อย่างที่บอกเป็นปลั๊กอินที่ใช้งานมายาวนานและชอบมากๆ แบบไม่คิดจะเปลี่ยนใจ ไม่มีอะไรให้ตินอกจากจะเป็นในเรื่องของ Thumbnail ที่มีรูปแบบให้เลือกแค่อันเดียว แต่ก็มี Custom CSS ซึ่งเขาน่าจะเน้นให้เราทำเองให้ตรงตามที่ต้องการมากกว่า (อาจจะลำบากสำหรับคนที่เขียน CSS ไม่เป็น) รวมถึงการตั้งค่าต่างๆ ก็มีความยืดหยุ่นสูงมาก มี Cache มาให้ด้วย เป็นปลั๊กอินที่ไม่ทำให้เว็บช้า Shortcode ก็มี แล้วยังมี Widget อีก เรียกได้ว่าเป็นปลั๊กอินที่คุ้มค่าต่อการ Donate มากๆ ค่ะ