อยากรู้จริงว่า CSS เราถึงขั้นไหนแล้ว

ปรกติทุกวันก็นั่งดูเว็บนั่นเว็บนี่ หาความรู้ใส่ตัว แล้ววันนึงก็ไปสะดุดกับ Banner ตัวนี้

Unmatchedstyle CSS

แน่นอนว่าไม่รีรอที่จะคลิ๊กเข้าไปดู แล้วก็พบว่ามันเป็นการแข่งกันทำ CSS >_< Unmatchedstyle CSS

มีการให้คะแนนงานที่ทำมาด้วย ตอนนั้นรู้สึกเลยว่า เราทำ CSS มายังไม่เคยมีใครให้คะแนนเราแบบจริงจังเลย งานนี้ละมีคนให้คะแนนเราแล้ว เข้าไปดูหลักการให้คะแนนของเค้า เค้าจะแบ่งเป็นหัวข้อหลัก 4 หัวข้อ ตัดสินโดยกรรมการ 3 ท่าน คะแนนเต็ม 100 คะแนน โดยแต่ละหัวข้อมีดังนี้

Code

User Experience

Browser Support & Optimization

Responsiveness

ส่วนกรรมการนั้น ยอมรับว่ารู้จักอยู่แค่ 2 ท่าน คือ Chris Coyier แห่ง CSS Tricks กับ Christopher Schmitt ซึ่งเป็นจัดงาน CSSSummit ที่ผ่านมา โดยผลงานนึง ๆ จะมีกรรมการ 3 ท่านจากการสุ่มจากกรรมการทั้งหมด 13 ท่าน

กรรมการ

และตัว PSD ที่จะให้เราใช้งานนั้นก็ Design โดย Paravel

Paravel

เมื่อเป็นการแข่งขันก็ต้องมีรางวัล โดยที่ 1 ก็จะได้รางวัลดังนี้

รางวัล

แต่เป้าหมายที่ตั้งไว้ ตอนนี้ต้องการแค่ติด Top 25 ก็พอใจแล้ว เพราะว่าถ้าคะแนนติด Top 25 เค้าจะนำผลงานเราไปแปะไว้ที่หน้าเว็บเค้าด้วย

อ่านมาถึงตรงนี้แล้ว ถ้าอยากสมัครแข่งเหมือนกัน ก็เข้าไปที่เว็บ CSS Off เลย โดยเมื่อสมัครแล้วก็รอ PSD ในวันพุธที่ 20 ตุลาคม และส่งผลงานได้วันสุดท้าย วันพุธที่ 3 พฤศจิกายน [หรือเข้าไปอ่านกฎนะครับ]

วิธีใช้ WordPress ตอนที่ 1 – Dashboard

วิธีใช้ WordPress ในส่วนของ Dashboard ซึ่งการที่เราจะเข้าถึงส่วนของ Dashboard ได้นั้น เราสามารถเข้าได้โดย

  • ถ้าลง WordPress แล้วยังไม่ได้เปลี่ยน Theme ในส่วนของหน้าแรกจะมี Link ให้คลิ๊กเพื่อเข้าสู่หน้า Login
    รูปอธิบายหัวข้อ วิธีใช้ WordPress
  • หรือจะพิมพ์ที่ URL ตามด้วยคำว่า wp-admin อย่างเช่น http://www.rabbitinblack.com/test/wp-admin
    รูปอธิบายหัวข้อ วิธีใช้ WordPress

หลังจากนั้นเราจะพบหน้าที่ใช้สำหรับ Login เพื่อเข้าใช้งาน โดยเราก็กรอก Username กับ Password ที่เราตั้งไว้ และกด Log In เพื่อเข้าใช้งาน

รูปอธิบายหัวข้อ วิธีใช้ WordPress

ส่วนต่าง ๆ ของหน้า Dashboard

รูปอธิบายหัวข้อ วิธีใช้ WordPress

โดยแบ่งออกเป็น 4 ส่วนคือ

  1. Header [สีชมพู]
  2. Main Navigation Menu [สีฟ้า]
  3. Workspace [สีเขียว]
  4. Footer [สีเหลือง]

Header

รูปอธิบายหัวข้อ วิธีใช้ WordPress

โดยในแต่ละส่วนไว้ใช้งานดังนี้

  1. ถ้าคลิ๊กแล้ว จะไปที่หน้าแรกของเว็บเรา
  2. จะมีเมนูย่อยดังรูป

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    สำหรับไปยังหน้าแก้ไข Profile กับ Log Out ออกจากระบบ

  3. Screen Option ใช้สำหรับเลือกสิ่งต่าง ๆ ที่จะปรากฎในหน้าจอนั้น และยังสามารถเลือก Layout ว่าจะให้แบ่งออกเป็นกี่คอลัมน์ โดยตัวอย่างของหน้า Dashboard เป็นดังรูป

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    ลองคลิ๊กเล่นดูก็ได้ แล้วดูในส่วน Workspace จะเปลี่ยนไปตามที่เราเลือก

  4. อธิบายเกี่ยวกับหน้าจอนั้นว่าแต่ละอย่างคืออะไรบ้าง ก็มันคือ Help นิ

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

Main Navigation Menu

ประกอบด้วยหัวข้อต่าง ๆ ที่สำคัญ ไม่ว่าจะเป็น Posts, Pages, Appearance, Plugins, Settings เป็นต้น โดยเราสามารถที่จะขยายเมนูเพื่อดูเมนูย่อยได้ โดยนำ Cursor ไปวางไว้ที่ปลายด้านขวา ก็จะมีสามเหลี่ยมเล็ก ๆ ปรากฎขึ้นมา เมื่อเราคลิ๊กไปจะพบกับเมนูย่อยของหัวข้อนั้น และเราสามารถย่อกลับไปได้ โดยการคลิ๊กที่สามเหลี่ยมเล็ก ๆ เหมือนเดิม ก็จะเป็นการย่อเมนูย่อยกลับไปแล้ว

รูปอธิบายหัวข้อ วิธีใช้ WordPress

และเรายังสามารถย่อ/ขยาย ส่วนของ Main Navigation Menu ได้โดยการคลิ๊กที่ Collapse menu ที่อยู่ตรงด้านล่าง และเมื่อเราย่อขนาดของ Main Navigation Menu แล้ว หัวข้อต่าง ๆ จะกลายเป็น icon เมื่อเรานำ cursor ไปวางจีงจะปรากฎหัวข้อและเมนูย่อย

รูปอธิบายหัวข้อ วิธีใช้ WordPress

Workspace

เราสามารถเคลื่อนย้ายแต่ละกล่องได้โดยการจับลากได้เลย

รูปอธิบายหัวข้อ วิธีใช้ WordPress

คราวนี้เราลองเลือกที่ Screen Options ด้านบน เราไม่อยากให้มันโชว์ Other WordPress News, WordPress Blog, Plugins, Incoming Links แล้วก็อยากได้เป็น 3 แถวด้วย

รูปอธิบายหัวข้อ วิธีใช้ WordPress

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

รูปอธิบายหัวข้อ วิธีใช้ WordPress

Footer

ส่วนสุดท้าย Footer นั้นก็จะมี Link ไปยังเว็บต่าง ๆ ที่เกี่ยวข้องกับ WordPress และที่มุมด้านขวาก็จะบอก Version ของ WordPress ที่เราใช้อยู่ขณะนั้นด้วย

inherit คืออะไร

หลาย ๆ คนใช้งาน CSS มาอาจจะเคยใช้ inherit บางคนอาจจะเคยเห็นแต่ไม่เคยใช้ บางคนอาจจะไม่เคยเห็นเลยด้วยซ้ำ

มาทำความรู้จักกับ inherit ดีกว่าว่ามันคืออะไรนะ แต่ก่อนจะรู้จัก inherit เรามาดูก่อนว่าเวลาเราเขียน CSS เนี่ยแต่ละส่วนมันเรียกว่าอะไรกันบ้าง

CSS ประกอบด้วยอะไรบ้าง

[css]
#my-div {
font-size : 16px;
color : #F00;
}
[/css]

สำหรับ #my-div เราเรียกมันว่า Selectors ก็คือเหมือนชี้เป้าหมายว่า ตัวนี้นะจะต้องมีคุณสมบัติตามใน { } ของชั้นนะ

ต่อมาคือ font-size, color เราเรียกมันว่า Properties ซึ่งจริง ๆ แล้ว CSS มี Properties อีกมากมาย แต่นี่เป็นการยกตัวอย่างมาเท่านั้น โดย Properties ก็ทำหน้าที่บอกหัวข้อคุณสมบัติ อย่างเช่น font-size ก็คือบอกหัวข้อคุณสมบัติว่า Selector ตัวนี้ต้องมีขนาดของตัวอักษร … เป็นต้น

สุดท้ายก็คือ 16px, #F00 เราเรียกมันว่า Value ซึ่งทำหน้าที่บอกว่าค่าให้คุณสมบัตินั้น ๆ อย่างเช่น font-size:16px; ก็แสดงว่าต้องการให้มีขนาดตัวอักษรที่ 16px เป็นต้น

แล้ว inherit คืออะไร

inherit นั้นเป็น Value ซึ่งถ้าตามหลัง Properties ตัวไหน มันก็จะสืบทอดค่ามาจาก parent โดย Properties ที่มีค่า Default ของตัวเองเป็น inherit นั้นได้แก่

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • font
  • letter-spacing
  • list-style-type
  • list-style-position
  • list-style-image
  • list-style
  • line-height
  • orphans
  • page-break-inside
  • quotes
  • text-align
  • text-indent
  • text-transform
  • visibility
  • white-space
  • widows
  • word-spacing

ถ้าเริ่มงง ๆ แล้วไม่เป็นไรครับ เดี๋ยวทำตัวอย่างให้ดู

[css]
#my-div {font-size:16px;}
#my-div p {color:#F00;}
[/css]

[html]
<div id="my-div">
<p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
</div><!– my-div –>
[/html]

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

จะเห็นว่าตัวอักษรใน p มีขนาด 16px เพราะว่าตัว font-size นั้นมันมีค่า default value เป็น inherit ดังนั้นจึงดึงค่า font-size มาจาก parent ของมัน ซึ่งก็คือ #my-div

[css]
#my-div {font-size:16px;border:2px solid #000;}
#my-div p {color:#F00;}
[/css]

[html]
<div id="my-div">
<p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
</div><!– my-div –>
[/html]

คราวนี้เรามีเพิ่มกรอบให้ #my-div จะได้ผลลัพธ์ออกมาเป็นแบบนี้นะครับ

ถ้าเกิดเราใส่ค่าให้ #my-div p มี border:inherit; ละผลจะเป็นยังไง

[css]
#my-div {font-size:16px;border:2px solid #000;}
#my-div p {color:#F00;border:inherit;}
[/css]

จะเห็นได้ว่า p ก็ไปดึงค่า border มาจาก parent ซึ่งก็คือ #my-div มาใช้งานด้วย

สิ่งที่ควรรู้เพิ่มเติมสำหรับ inherit

  • Browser ที่ไม่ Support ค่า inherit นั้นก็มี IE6 กับ IE7
  • ใช้ inherit กับ shorthand properties ไม่ได้

แถม : shorthand properties คืออะไร

มันก็คือการเขียนให้สั้นลงของ CSS อย่างเช่น

[css]
#my-border {
border-width : 2px;
border-style : solid;
border-color : #F00;
}
[/css]

เราสามารถเขียนให้สั้นลงได้ให้กลายเป็น

[css]
#my-border {
border : 2px solid #F00;
}
[/css]

ซึ่งค่า inherit ไม่สามารถใส่ค่าลงไปแบบนี้ได้

[css]
#my-border {
border : 2px inherit #F00;
}
[/css]

ไหน ๆ ก็มี 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

[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]

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