Tag: wordpress

Plugin WordPress : Lazyest Stylesheet

ในการทำเว็บของเราด้วย WordPress นั้น คงต้องมีการเปลี่ยน Theme กันบ้าง แต่ปัญหาคือ มันจะมี Stylesheet บางตัว ที่เราเพิ่มเติมเข้าไปใน Theme เก่า มันไม่ได้ตามมา Theme ใหม่ด้วย เราก็ต้องไปหาว่า เราเพิ่มอะไรตรงไหนบ้าง เพื่อนำมาใช้กับ Theme ใหม่ของเรา ปัญหานี้จะหมดไป เมื่อคุณใช้ Lazyest Stylesheet

Lazyest Stylesheet

หลักการทำงานมันไม่ได้มีอะไรซับซ้อนหรอกครับ ก็เหมือนเราเขียน CSS ทั่วไป เพียงแต่ถ้าเราเปลี่ยน Theme ตัว Lazyest Stylesheet ก็จะดึง CSS ตัวที่เราเขียนไว้ เพื่อใช้งานกับ Theme ใหม่ทันที

Appearance >> Lazyest Stylesheet

หน้าตาของ Plugin

ยกตัวอย่างก็สมมติว่า เรามีตารางสีแดง เป็นตารางที่มีชื่อ class ว่า table-red แล้วกัน คราวนี้ถ้าเราจะเปลี่ยน Theme เราก็ต้องไปหาว่าเราเขียน .table-red ไว้ที่ไหนบ้าง จะได้เอามาแปะไว้ที่ CSS ของ Theme เรา แต่ถ้าใช้ Lazyest Stylesheet เราก็ไปเขียน .table-red ในนั้น ทีนี้เวลาเราเปลี่ยน Theme .table-red ที่เราเขียนไว้ ก็จะตามไปในทุก ๆ Theme ของเราเอง

ตามไปโหลดมาใช้งานได้ที่ : Lazyest Stylesheet

November 21, 2011
WordPress : ดึง Thumbnail มาใช้กับลิงก์ไป Post ถัดไปกับ Post ก่อนหน้า

ใน Theme ส่วนใหญ่แล้ว ด้านล่างของส่วนที่แสดงผลของ Post นั้นจะมี Navigation เพื่อไปยัง Post ก่อนหน้า และ Post ถัดไป แต่ถ้าเราอยากจะปรับแต่งมัน ให้แสดงผลลัพธ์เป็นลักษณะแบบนี้ละ

ซึ่งปรกติแล้วในส่วนนี้ของเว็บจะมีลักษณะแบบนี้

เราเข้าไปดูที่ single.php นะครับ ลองมองหา Code ที่คล้าย ๆ กับอันนี้

[php]
<div class="alignleft"><?php previous_post_link(‘« %link’) ?></div>
<div class="alignright"><?php next_post_link(‘%link »’) ?></div>
[/php]

อาจจะแตกต่างกันบ้าง แต่หลัก ๆ น่าจะมี previous_post_link กับ next_post_link อยู่ด้วย ให้เรานำ Code ด้านล่างไปวางแปะแทนที่

Code

[php]
<div id="cooler-nav">
<?php $prevPost = get_previous_post(true);
if($prevPost) { ?>
<div class="nav-box-prev">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(50,50) );
previous_post_link(‘%link’,"$prevthumbnail <p>%title</p>", TRUE); ?>
</div><!– .nav-box-prev –>
<?php }
$nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box-next">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(50,50) );
next_post_link(‘%link’,"<p>%title</p> $nextthumbnail", TRUE); ?>
</div><!– .nav-box-next –>
<?php } ?>
</div><!–#cooler-nav –>
[/php]

แล้วเขียน CSS เพื่อปรับแต่งรูปแบบของมัน

CSS

[css]
#cooler-nav {overflow:hidden;}
#cooler-nav .nav-box-prev {float:left;width:225px;}
#cooler-nav .nav-box-next {float:right;width:225px;}
#cooler-nav .nav-box-prev img {float:left;}
#cooler-nav .nav-box-next img {float:right;}
#cooler-nav .nav-box-prev p {width:155px;float:right;}
#cooler-nav .nav-box-next p {width:155px;float:left;text-align:right;}
[/css]

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

ที่มา : How to use Thumbnails with Previous and Next Post Links in WordPress

November 20, 2011
WordPress : จัดการกับ Permalinks
Permalinks คืออะไร อธิบายแบบเข้าใจกันง่าย ๆ มันก็คือ URL ที่ WordPress สร้างมาให้ในแต่ละ Post นั้นละครับ โดยมันก็จะมีรูปแบบในการสร้างที่แตกต่างกันแล้วแต่เราจะกำหนด

ในการ Search Permalinks จะมีผลในเรื่อง SEO อยู่บ้าง

WordPress : Default Permalinks

เมื่อเราลง WordPress ใหม่ ตัว WordPress เองจะตั้งค่า Permalinks มาในรูปแบบ https://example.com/?p=123

คือเป็น URL ของเว็บเราตามด้วย ID ของ Post นั้น ๆ ซึ่งเราจะไม่เปลี่ยนก็ได้ แต่ https://example.com/?p=123 นั้นมันไม่ใช่ URL ที่คนอย่างเราจะสามารถมองแล้วรู้เลยว่า มันเกี่ยวกับอะไร ดังนั้นการตั้งค่า Permalinks จะมีประโยชน์ในการแสดงผล และการค้นหาสำหรับเว็บเรา เรียกกันว่า Pretty URLs

WordPress : จะตั้งค่า Permalinks ได้ยังไง

หน้าตาของส่วนจัดการ Permalinks

ให้เลือกที่หัวข้อ Permalinks ซึ่งจะอยู่บริเวณตำแหน่งที่ 1

WordPress : Permalinks ตั้งค่าได้กี่แบบ

ดูที่ตำแหน่งที่ 2 เราก็จะทราบว่าเราสามารถตั้งค่า Permalinks ได้ดังนี้
- Default
- Day and name : https://example.com/2011/11/07/sample-post/ โดยใช้ ปี ตามด้วย เดือน ตามด้วย วันที่ ตามด้วย ชื่อ
- Month and name : https://example.com/2011/11/sample-post/ โดยใช้ ปี ตามด้วย เดือน ตามด้วย ชื่อ
- Numeric : https://example.com/archives/123 โดยใช้คำว่า archives ตามด้วย ID ซึ่งมันก็ไม่ค่อยแตกต่างกับแบบ Default คือ คนเราอ่านแล้วไม่รู้เรื่อง
- Custom Structure : เป็นรูปแบบที่เรากำหนดได้เอง
WordPress : Custom Struture Permalinks

มาดูกันว่าเราจะตั้ง Permalinks ในรูปแบบที่เรากำหนดเองได้ยังไงบ้าง
- %year%
  ใช้ตัวเลข ปี ที่เรา Publish Post
- %monthnum%
  ใช้ตัวเลข เดือน ที่เรา Publish Post
- %day%
  ใช้ตัวเลข วันที่ ที่เรา Publish Post
- %minute%
  ใช้ตัวเลข นาที ที่เรา Publish Post
- %second%
  ใช้ตัวเลข วินาที ที่เรา Publish Post
- %post_id%
  ใช้ตัวเลข Post ID ของ Post นั้น ๆ
- %postname%
  ใช้ Slug ซึ่งเราตั้งค่าไว้ อย่างเช่น Post นี้ก็มี Slug ชื่อ wordpress-permalinks โดยให้ดูที่ URL ด้านบน
- %category%
  ใช้ชื่อ Category โดยถ้าเป็น Sub Category ก็จะแสดง Category ตามด้วย Sub Category ไปเรื่อย ๆ และถ้า Post นั้นอยู่หลาย Category WordPress จะเลือกชื่อ Category ที่มี Category ID น้อยที่สุด
- %tag%
  ใช้ชื่อ Tag ที่เราได้ตั้งค่าไว้
- %author%
  ใช้ชื่อของคนที่ Publish Post นั้น ๆ
WordPress : วิธีใช้ Custom Structure Permalinks

ใช้นำตัวที่เราต้องการใช้มาเรียง โดยคั่นด้วย / อย่างเช่น /%year%/%monthnum%/%postname%/ หรือว่า /%year%/%author%/%postname%/

WordPress : Category Base และ Tag Base

สำหรับตำแหน่งที่ 3 นั้นจะเป็นการตั้งชื่อให้กับส่วนของ Category และ Tag โดยปรกติแล้วถ้าเราเลือกเพื่อดูเฉพาะ Category อย่างเช่น ผมจะดู Category ชื่อ wordpress ตัว Permalinks ก็จะเป็น https://example.com/category/wordpress และ Tag เองก็เป็นแบบนี้เหมือนกัน แค่เปลี่ยนเป็น https://example.com/tag/wordpress

ส่วนของ Category Base และ Tag Base นั้นจะทำให้เราสามารถเปลี่ยนคำว่า Category และ Tag ได้ อย่างเช่นในช่อง Category Base ผมใส่คำว่า Web-Category และ Tag Base ผมใส่คำว่า Web-Tag ดังนั้น Permalinks ที่ได้จะเป็นแบบนี้ https://example.com/Web-Category/wordpress กับ https://example.com/Web-Tag/wordpress

ทั้งหมดนั้นก็อยู่ที่เราจะนำไปประยุกต์ยังไงให้เหมาะสมกับเว็บเรามากที่สุดนะครับ >_<
November 7, 2011
วิธีใช้ WordPress ตอนที่ 9 – วิธีติดตั้ง Plugins
หลังจากที่เราใช้งาน WordPress มาซักพัก เราคงรู้สึกอยากให้เว็บเรามีนั่นเพิ่ม มีนี่เพิ่ม ซึ่งสิ่งที่เราอยากได้เพิ่มนั้น ส่วนใหญ่ก็จะมีคนที่อยากได้สิ่งนั้นเพิ่มคล้าย ๆ กับเรา ก็เลยมีการทำออกมาเป็น Plugins

วิธีใช้ WordPress : หัวข้อ Plugins

หน้าตาของหัวข้อ Plugins

ให้เราเลือกที่หัวข้อ Plugins ที่ตำแหน่งที่ 1 นะครับ ในหน้าของ Plugins นั้น มีหัวข้อย่อย ๆ ให้เลือก คือ
- Search : เราสามารถ Search หา Plugins ที่เราต้องการได้ตามชื่อของ Plugins ในบริเวณตำแหน่งหมายเลข 3
- Upload : ในกรณีที่เรา Download File Plugins ตัวนั้นมาลงเครื่องไว้แล้ว จะใช้การ Upload File เพื่อติดตั้ง Plugins ตัวนั้น ๆ
- Featured : เป็น Plugins ที่ทาง WordPress คัด ๆ มาว่าน่าสนใจ
- Popular : เรียงลำดับ Plugins จากจำนวนของผู้ที่ Download Plugins ตัวนั้น ๆ มาใช้งาน
- Newest : เรียงลำดับ Plugins จากการ Upload
- Recently Updated : เรียงลำดับ Plugins จากการ Update ตัว Plugins
วิธีใช้ WordPress : ติดตั้ง Plugin โดยวิธีการ Search

สมมติว่าผมอยากลง Plugin ชื่อ WP-PageNavi ผมก็ Search คำว่า wp pagenavi

Search คำว่า wp pagenavi เพื่อหา Plugin

หน้าผลการค้นหาจะแสดงรายการของ Plugin ที่มีชื่อเกี่ยวข้องกับคำที่เราค้นหา ซึ่งผมเจอละ Plugin ตัวที่ผมต้องการ กด Install Now

เจอแล้ว Plugin WP-PageNavi กด Install Now

แต่จริง ๆ แล้ว ผมแนะนำให้ทุกคนอ่านรายละเอียดของ Plugin ที่เราจะติดตั้งก่อนทุกครั้ง ก็จะดีนะครับ เพราะ Plugin เองก็มีหลายแบบ ทั้งแบบที่ติดตั้งแล้วใช้งานได้เลย ติดตั้งแล้วต้อง Settings ก่อนใช้งาน หรืออาจจะเป็น Widget (ซึ่งจะอธิบายถึง Widget ในตอนต่อ ๆ ไปครับ)

แต่ก่อนลง Plugin อย่าลืมอ่านรายละเอียดก่อนนะครับ

พอเรากด Install Now แล้ว ก็มากรอกรายละเอียดของ FTP

กรอกรายละเอียดเพื่อติดตั้ง Plugin

พอติดตั้งเสร็จ ก็ Activate Plugin เลยครับ

ติดตั้งเสร็จแล้ว กด Activated Plugin เลยครับ

Plugin ที่เราติดตั้งก็จะมาปรากฎที่หน้า Plugins แล้วครับ

ในหน้า Plugins มี WP-Pagenavi ที่เราติดตั้งแล้ว

ดูที่ตำแหน่ง 1 จะเห็นว่า Plugin ตัวนี้ของเรา เป็นแบบต้อง Settings ก่อนใช้งาน ส่วนตำแหน่งที่ 2 นั้นคือ Plugin ตัวที่เรายังไม่ได้ Activate นะครับ ซึ่งในการที่จะลบ Plugin ตัวไหน เราต้อง Deactivate ก่อนทุกครั้งนะครับ

วิธีใช้ WordPress : ติดตั้ง Plugins โดยวิธีการ Upload

คราวนี้ผมอยากลง Plugin ชื่อ No Right Click Images Plugin กด Download มาลงเครื่องเลยครับ

Download File Plugin มาลงเครื่องไว้

หลังจากนั้นมาที่หัวข้อ Plugins เลือกที่ Upload แล้วเลือก File ที่เรา Download มาเลยครับ

Upload File Plugin ที่เรา Download มา

หลังจากกด Install Now แล้ว ขั้นตอนต่าง ๆ ก็เหมือนกับติดตั้ง Plugin โดยวิธีการ Search และ Plugin ตัวที่เราติดตั้งก็มาปรากฎในหน้า Plugins โดยจะเห็นว่า Plugin ตัวนี้ไม่มีให้ Settings อะไร และจากที่อ่านรายละเอียดของ Plugin ก่อนที่จะโหลดแล้ว Plugin ตัวนี้จะทำงานทันทีที่เราติดตั้ง

ติดตั้ง Plugin เสร็จแล้วด้วยวิธี Upload

จบตอนนี้แล้ว หวังว่าทุกคนน่าจะสามารถหา Plugin ที่ถูกใจมาติดตั้งให้เว็บ WordPress ของตัวเองได้แล้วนะครับ ^^

ตอนต่อไปครับ วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์
November 5, 2011
WordPress : รวมเครื่องมือสำหรับทำ Theme WordPress
เวลาที่เราจะสร้าง Theme WordPress หรือเว็บไซต์อะไรก็แล้วแต่ มันคงจะดีถ้าเรามีตัวช่วยในการทำ ตั้งแต่การทำ Layout จาก Photoshop หรือ Fireworks การเขียน Code HTML / CSS แล้วเริ่มต้นนำมาทำเป็น Theme WordPress จนกระทั่งเช็ค Theme ที่เราทำออกมา

ซึ่งทาง Wplift ได้รวบรวมไว้ให้ตามหัวข้อดังนี้
1. Designing Your Theme
2. Coding the HTML / CSS
3. Coding your WordPress Theme
4. Testing Your Theme
ตามไปอ่านต่อได้ที่ The Ultimate (Free!) WordPress Theme Development Toolkit
November 4, 2011
[WordPress] Cheat Sheet สำหรับเขียน Theme WordPress เบื้องต้น

ทาง WP TUTS+ ได้ทำ Cheat Sheet สำหรับการทำ Theme WordPress เบื้องต้นไว้ เราไปดูกัน ว่ามีอะไรบ้างครับ

โครงสร้าง

แนวทางการเขียน Loop

วิธีการเขียน Loop

October 28, 2011