Category: WordPress

ฉลอง MV SNSD ตัวใหม่ด้วยบทความ ทำ Shortcode สำหรับดึง youtube thumbnail มาใช้ใน WordPress
บางครั้งเราก็ไม่ได้อยากจะ Embed Video จาก youtube มา เราต้องการแค่ thumbnail เพื่อให้มัน link ไปที่วิดีโอใน youtube ดังนั้นเราเลยสร้าง shortcode ขึ้นมาเลย เพื่อจะได้ง่ายในการนำไปใช้ด้วย

WordPress : Shortcode สำหรับดึง youtube thumbnail มาใช้งาน

ผมได้อ่านบทความอันนี้ WordPress Display Youtube Video Thumbnail แล้ว แต่ผมก็ยังไม่ถูกใจทั้งหมด เลยนำ Code ของเค้ามาปรับ ๆ อีกหน่อยให้เหมาะกับที่ผมจะนำไปใช้

[php]
function wp_youtube_video_thumbnail($atts) {
extract(shortcode_atts(array(
‘id’ => ”,
‘img’ => ‘0’,
‘align’=>’left’
), $atts));
$align_class=’align’.$align;
return ‘<a href="https://www.youtube.com/watch?v=’.$id.’" target="_blank"><img src="https://img.youtube.com/vi/’.$id.’/’.$img.’.jpg" alt="" class="’.$align_class.’" /></a>’;
}
add_shortcode(‘youtube_thumb’, ‘wp_youtube_video_thumbnail’);
[/php]

ผมใส่ shortcode แบบนี้นะครับ [youtube_thumb id=”6pA_Tou-DPI” img=”0″ align=”center”] จะได้ผลลัพธ์ออกมาดังตัวอย่างด้านล่าง

[youtube_thumb id=”6pA_Tou-DPI” img=”0″ align=”center”]

WordPress : รูปแบบของ shortcode

[youtube_thumb id=”XXX” img=”YYY” align=”ZZZ”]

id นำมาจาก id ของวิดีโอจาก youtube ที่เราต้องการ thumbnail

img สำหรับ img นั้น มีให้เราเลือกอยู่ 6 แบบ ดังนี้
- 0 : เป็น thumbnail ขนาด 480×360 pixels (จาก shortcode ที่เราสร้างขึ้น 0 จะเป็นค่ามาตรฐานของ img ในกรณีที่ไม่ได้ใส่ค่าให้ img)
- 1 หรือ 2 หรือ 3 : เป็น thumbnail ขนาด 120×90 pixels ที่มีรูปแตกต่างกัน
- default : เป็น thumbnail ขนาด 120×90 pixels รูปเดียวกับ 0
- hqdefault : เป็น thumbnail ขนาด 480×360 pixels รูปเดียวกับ 0
align นั้นมีให้เลือก 4 แบบ ดังนี้
- left (จาก shortcode ที่เราสร้างขึ้น left จะเป็นค่ามาตรฐานของ align ในกรณีที่ไม่ได้ใส่ค่าให้ align)
- right
- center
- none
ว่าแล้วก็ฉลองด้วย MV ตัวใหม่แบบไม่เป็น thumbnail เลยแล้วกันครับ >_< https://www.youtube.com/watch?v=6pA_Tou-DPI
October 18, 2011
[How to] [Plugin] วิธีใช้ All in one SEO สำหรับ WordPress

WordPress นั้นมี Plugin อยู่หลายตัวที่ใช้สำหรับการทำ SEO แต่ขอเลือกแนะนำ All in one SEO เพราะใช้ตัวนี้อยู่ :p

วิธีใช้ All in one SEO สำหรับ WordPress

หลังจากที่ติดตั้ง Plugin All in one SEO เสร็จแล้ว มาเริ่มตั้งค่าเพื่อใช้งานกัน

ตัวอย่างการตั้งค่า All in one SEO สำหรับ WordPress

Plugin Status

เริ่มแรกเราต้องเปิดใช้งาน Plugin ของเราก่อน เลือกไปที่ Enabled เลยครับ

Home Title

ข้อความที่จะขึ้นที่ Title สำหรับหน้า Home อย่างเช่น ตอนนี้เว็บของผม ผมก็ตั้งไว้ว่า กระต่ายดำ ทำ CSS, WordPress | Rabbitinblack เป็นต้น และถ้าจะใช้อะไรแบ่ง Title ให้ใช้ – หรือไม่ก็ |

Home Title ที่เราตั้งค่าไว้ จะปรากฎดังรูป

Home Description

รายละเอียดของหน้า Home ซึ่งปรกติจะเป็นการอธิบายรายละเอียดเกี่ยวกับเว็บของเราทั้งหมด

Home Keywords

คำสำคัญของหน้า Home โดยเราจะใช้ , เป็นตัวแบ่งคำสำคัญแต่ละคำ

Canonical URLs

Canonical URLs คือ เนื้อหาของเว็บที่เหมือนกัน ซึ่งจะทำให้อันดับใน Search engines ของเราลดลง ตัวอย่างที่อธิบายง่าย ๆ ก็อย่างเช่น https://example.com กับ https://www.example.com ซึ่งเนื้อหามันเหมือนกันแน่ ๆ เลือกหัวข้อนี้ไว้ เพื่อที่จะได้แก้ไขปัญหาลักษณะนี้

ตั้งค่าสำหรับ Rewrite Titles

Rewrite Titles

ปรกติแล้ว WordPress จะตั้งค่า Title ให้เราในลักษณะ Archive – Blog Name – Post Title ซึ่ง Title ลักษณะนี้ SEO นั้นดีสู้ Title ในลักษณะ Post Title – Blog Name สำหรับหน้า Post หรือ Page Title – Blog Name สำหรับหน้า Page ไม่ได้ ดังนั้น All in one SEO จีงจะเขียน Title ให้เราใหม่ในแบบที่เราต้องการ

การตั้งค่าต่าง ๆ ที่เหลือ

SEO for Custom Post Types

ในการทำเว็บ WordPress ในบางครั้ง เรามีการใช้ Custom Post Types ดังนั้นต้องมาเลือกที่หัวข้อนี้ก่อน Custom Post Types นั้นถึงจะใช้งาน All in one SEO ได้

Custom Post Types for SEO Column Support

สามารถเลือกได้ว่าจะให้ Post Types แบบไหนใช้งาน All in one SEO

Use Categories for META keywords, Use Tags for META keywords

เอา Categories กับ Tags มาเป็น Keywords โดยอัตโนมัติ

Dynamically Generate Keywords for Posts Page

สำหรับหน้า Custom Post Types All in one SEO จะมีการสร้าง Keywords ให้

Use noindex for Categories, Use noindex for Archives, Use noindex for Tag Archives

ไม่นำหน้า Categories, Archives, Tag Archives ไปรวม เพื่อป้องกันการซ้ำกันของเนื้อหาในเว็บ ซึ่งเป็นประโยชน์สำหรับ SEO ของเรา

Autogenerate Descriptions

All in one SEO จะสร้างรายละเอียดของแต่ละหน้าให้อัตโนมัติ

Capitalize Category Titles

หัวข้อนี้แปลออกมาว่า ประโยชน์จาก Category Titles ซึ่งผมก็ไม่รู้ว่ามันมีไว้ทำอะไร Y-Y

หลังจากที่ตั้งค่าทั้งหมดเสร็จแล้ว กด Update Options เป็นการเสร็จสิ้นครับผม

October 12, 2011
วิธีใช้ WP_Query ร่วมกับ Plugin WP-Pagenavi

วันนี้เจอปัญหานี้มาครับ ใช้ WP_Query ในการ query ข้อมูลออกมา แต่มันดันทำงานกับ WP-Pagenavi ไม่ได้ซะงั้น เกิดอะไรขึ้นเนี่ย เข้า Google เพื่อหาทางแก้ไขปัญหานี้ จนเจอวิธี HOW TO GET CUSTOM WP_QUERY LOOP WORKING WITH PAGINATION AND WP-PAGENAVI

วิธีการที่เค้าแนะนำมา คือให้เขียน Code แบบนี้ครับ

[php]
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query(‘cat=-6&paged=’ . $paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>

<?php // ใส่ Code เพื่อแสดง Post ของเรา ?>

<?php
endwhile;
if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); }
$wp_query = null; $wp_query = $temp; ?>
[/php]

และผมลองทดสอบกับ Plugin WP_Paging ที่ผมจะใช้งาน ก็ใช้ได้ผลเหมือนกันครับ

October 3, 2011
ไหน ๆ ก็มี Google+ ละ เอามาใช้กับ WordPress หน่อย

หลังจากที่ Google+ ออกมาซักพักใหญ่ ๆ แล้ว คงมีหลายคนที่อยากจะเอามาใส่ในเว็บของตัวเอง เหมือนที่เคยใส่ Facebook หรือ Twitter ในเว็บ ถ้างั้นมาลองดูว่า เราจะใส่อะไรเกี่ยวกับ Google+ ในเว็บเราได้บ้าง

Google+ Add Circle

มี Plugin อยู่ตัวนึง ที่เมื่อเราลงแล้ว จะมี widget มาให้เราสามารถนำ Google+ มาโชว์ได้ดังรูป

โดยสามารถไปโหลด Plugin ได้ที่นี่ googleCards-WordPress เมื่อทำการ Install Plugins แล้ว ก็ให้ไป Widgets จะพบว่ามีตัวนี้โผล่มา

เมื่อเราลากไปวางแล้วก็ต้องกรอกข้อมูลต่าง ๆ

โดยตัว Google Plus ID นั้นให้เราเข้าไปที่หน้า Profile ของเราใน Google+ ดูที่ URL แล้ว Copy มาแบบนี้

หลังจากนั้นก็ Save เราก็จะได้ Widget ตัวนี้มาวางแปะอยู่ที่ Sidebar ของเราแล้ว 🙂

ปุ่ม +1

ในความรู้สึก ปุ่ม +1 ของ Google+ ก็คงคล้าย ๆ กับปุ่ม Like ของ Facebook หรือปุ่ม Tweet ของ Twitter แบบที่เราเห็นวางแปะตามเว็บต่าง ๆ ถ้าอยากรู้เกี่ยวกับปุ่ม +1 ก็ลองไปหาอ่านใน google เอาแล้วกันนะ

ซึ่งปุ่ม +1 นั้นทาง Google เองก็มีหน้าสำหรับสร้างปุ่ม +1 ให้อยู่แล้ว แต่ถ้าต้องการเป็น Plugin ก็สามารถไปดูตามนี้ก็ได้ Plugin +1 for WordPress

ถูกใจหน้าตาของ Google+ เอามาเป็น Theme เว็บเลยแล้วกัน

มีมาแนะนำให้สามแบบคือ

WP Plus

PlusOne

Reflex+

ที่มา : Mashable

September 16, 2011
[WordPress] ทำ Taxonomy ให้เป็นหลายภาษาโดยใช้ qTranslate

ลง plugin qTranslate ไว้ แล้วอยากให้มันใช้งานกับ Custom Taxonomy ของเรา ซึ่งตอนแรก เราจะใส่ชื่อ(Name)ได้แค่ภาษาเดียว

แต่ที่เราต้องการ คือเว็บมีสองภาษาเป็นภาษาไทย กับภาษาอังกฤษ ก็เลยอยากให้ใส่ชื่อ(Name)ได้ทั้งภาษาไทยและภาษาอังกฤษ ดังนั้นให้เราใส่ Code ด้านล่างใน function.php

[php]
function qtranslate_edit_taxonomies(){
$args=array(
‘public’ => true ,
‘_builtin’ => false
);
$output = ‘object’; // or objects
$operator = ‘and’; // ‘and’ or ‘or’

$taxonomies = get_taxonomies($args,$output,$operator);

if ($taxonomies) {
foreach ($taxonomies as $taxonomy ) {
add_action( $taxonomy->name.’_add_form’, ‘qtrans_modifyTermFormFor’);
add_action( $taxonomy->name.’_edit_form’, ‘qtrans_modifyTermFormFor’);

}
}

}
add_action(‘admin_init’, ‘qtranslate_edit_taxonomies’);
[/php]

ก็จะได้ผลลัพธ์ออกมาเป็นแบบนี้

September 6, 2011
ปัญหา qTranslate แสดงผลชื่อเดือนของไทยเพี้ยน

สำหรับวันเดือนปีในภาษาอังกฤษ ไม่มีผิดเพี้ยนอยู่แล้ว แต่พอกดเลือกเปลี่ยนภาษาเป็นภาษาไทย

อ้าว เวรแล้วไง ทำไมภาษามันเพี้ยนแบบนี้ นั่งงมอยู่พักใหญ่ แก้นั่นแก้นี่ จนหาทางออกได้ว่า ที่ qTranslate ในส่วนของ Advanced Settings

มองหาหัวข้อ Date / Time Conversion แล้วเลือกที่ Use emulated date function and replace formats with the predefined formats for each language.

แต่บางทีอาจจะได้ผลลัพธ์เป็นแบบนี้

อย่าเพิ่งตกใจ ให้ไปแก้ไขในส่วนของ Date Format และ Time Format ในของแต่ละภาษา ให้เป็นช่องว่าง

เราก็จะได้วันเดือนปีในแบบภาษาไทย ที่ไม่เพี้ยนเป็นภาษาอะไรก็ไม่รู้

September 6, 2011