Category: WordPress

[Plugin WordPress] : ใช้จัดการ File เพื่อให้ Download

วันนี้มี Plugin สำหรับคนที่อยากจัดการ File เพื่อให้คนเข้าเว็บ Download File ที่เราเตรียมไว้ Plugin ตัวนี้มีชื่อว่า WP-Filebase Download Manager

Plugin WordPress : WP-Filebase Download Manager

หลังจากที่เราลงตัว Plugin แล้วที่เมนูด้านซ้าย จะมีเมนูเพิ่มขึ้นที่ด้านล่างแบบนี้

เมนูของ WP-Filebase

ซึ่งตัว WP-Filebase จะมีส่วนที่ให้เราอัพโหลด File เพื่อนำไปใช้แบบนี้

หน้าสำหรับอัพโหลด File ไปใช้งาน

ผมลองอัพโหลด File ให้ดูเป็นตัวอย่างว่าจะไปปรากฎที่ด้านหน้ายังไงนะครับ

ผมอัพโหลด File ชื่อ Sublime.Zen.Coding.1.1.3.zip นะครับ

กรอกข้อมูลต่าง ๆ ในส่วนของ Post ID คือ เลือกว่าจะให้ File ตัวนี้ไปปรากฎที่ Post ไหน

ผลลัพธ์ที่ได้จากการอัพโหลดด้วย WP-Filebase

ซึ่งรูปแบบของมัน เราสามารถตกแต่งเพิ่มเติมได้ และมีรูปแบบให้เลือกอยู่หลากหลายทีเดียว ถ้าสนใจลองไปดูที่

Plugin WordPress : WP-Filebase Download Manager

November 24, 2011
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 : รวมเครื่องมือสำหรับทำ 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