รวมวิธีการใช้ Wordpress, Joomla, Drupal, Magento และ SEO » css http://killthewhat.com Knowledge Base by howhost.com Fri, 24 Dec 2010 15:00:17 +0000 en hourly 1 http://wordpress.org/?v=3.0.3 วิธีเพิ่มไฟล์ js หรือ css ในธีม magentohttp://killthewhat.com/magento-tutorials/%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b9%80%e0%b8%9e%e0%b8%b4%e0%b9%88%e0%b8%a1%e0%b9%84%e0%b8%9f%e0%b8%a5%e0%b9%8c-js-%e0%b8%ab%e0%b8%a3%e0%b8%b7%e0%b8%ad-css-%e0%b9%83%e0%b8%99%e0%b8%98%e0%b8%b5/ http://killthewhat.com/magento-tutorials/%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b9%80%e0%b8%9e%e0%b8%b4%e0%b9%88%e0%b8%a1%e0%b9%84%e0%b8%9f%e0%b8%a5%e0%b9%8c-js-%e0%b8%ab%e0%b8%a3%e0%b8%b7%e0%b8%ad-css-%e0%b9%83%e0%b8%99%e0%b8%98%e0%b8%b5/#comments Sun, 04 Apr 2010 19:08:11 +0000 snappy http://killthewhat.com/?p=5687 เราสามารถเพิ่มลูกเล่นต่างๆให้กับ magento ได้ด้วย jquery และตกแต่งให้สวยงามด้วย css เพราะเนื่องจากบาง theme ที่เราใช้งานอาจจะยังสวยไม่พอหรือเราต้องการเพิ่มลูกเล่นต่างๆของ jquery ลงไปเราสามารถเพิ่มได้ดังนี้ครับ

ให้นำไฟล์ jquery ไปไว้ที่ /skin/frontend/default/default/js/yourscriptname.js และ css ไปไว้ที่ /skin/frontend/default/default/css/yourcssname.css โดยในที่นี้ผมจะเพิ่มไปยังใน theme default ของ magento นะครับ

จากนั้นแก้ไขไฟล์ /app/design/frontend/default/default/layout/page.xml หาโค็ดประมาณนี้

<block type=”page/html_head” name=”head” as=”head”>
...
...
...
</block>

เพิ่มโค็ดตามนี้ไปครับ โดยเพิ่มไประหว่าง block

<action method="addJs"><script>yourscriptname.js</script></action>
<action method="addCss"><stylesheet>css/yourcssname.css</stylesheet></action>
]]> http://killthewhat.com/magento-tutorials/%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b9%80%e0%b8%9e%e0%b8%b4%e0%b9%88%e0%b8%a1%e0%b9%84%e0%b8%9f%e0%b8%a5%e0%b9%8c-js-%e0%b8%ab%e0%b8%a3%e0%b8%b7%e0%b8%ad-css-%e0%b9%83%e0%b8%99%e0%b8%98%e0%b8%b5/feed/ 0 Plugin : SyntaxHighlighter แสดง code สวยๆบน wordpresshttp://killthewhat.com/wordpress-tutorials/plugin-syntaxhighlighter-%e0%b9%81%e0%b8%aa%e0%b8%94%e0%b8%87-code-%e0%b8%aa%e0%b8%a7%e0%b8%a2%e0%b9%86%e0%b8%9a%e0%b8%99-wordpress/ http://killthewhat.com/wordpress-tutorials/plugin-syntaxhighlighter-%e0%b9%81%e0%b8%aa%e0%b8%94%e0%b8%87-code-%e0%b8%aa%e0%b8%a7%e0%b8%a2%e0%b9%86%e0%b8%9a%e0%b8%99-wordpress/#comments Mon, 29 Jun 2009 10:57:12 +0000 snappy http://killthewhat.com/?p=3073 > SyntaxHighlighter วิธีใช้งานน่ะครับ เขียนเนื้อหาปกติอะครับ แต่ถ้าจะใส่ code ที่จะสอนลงไปก็ตามนี้ครับ ใส่ code ที่ต้องการ รูปภาพด้านล่างคือตัวอย่างการแสดงผลออกมาครับ Link : http://wordpress.org/extend/plugins/syntaxhighlighter/]]> เป็น plugin ที่ผมตามหามานานแสนนาน สำหรับ plugin ในลักษณะแบบนี้ มันเอาไว้ใช้แสดง code ที่เราจะพิมพ์ออกมาในหน้าบทความเราให้ออกมาในรูปแบบที่ดูง่ายขึ้น มีการไฮไลท์สี และแสดงบรรทัด เหมาะสำหรับบทความที่ต้องการสอนเรื่องในการเขียน code ของภาษาต่างๆ เช่น CSS , PHP , HTML เป็นต้น ซึ่งผมถูกใจมากที่สุด เพราะเป็นปัญหามาโดยตลอดในการเขียนใส่ลงในเนื้อหาเพื่อให้แสดงผลออกมาในรูปแบบ code ให้คนที่เข้าชมเว็บเราสามารถ copy นำไปใช้งานได้เลย

โดยให้เราดาวโหลด SyntaxHighlighter มาทำการติดตั้งบน wordpress ของเราครับ แล้วทำการ Active ตัว plugin ครับ

จากนั้นถ้าต้องการปรับแต่งค่าต่างๆให้ไปที่ Settings >> SyntaxHighlighter
syntaxhighlighter
syntaxhighlighter

วิธีใช้งานน่ะครับ เขียนเนื้อหาปกติอะครับ แต่ถ้าจะใส่ code ที่จะสอนลงไปก็ตามนี้ครับ

ใส่ code ที่ต้องการ

syntaxhighlighter

รูปภาพด้านล่างคือตัวอย่างการแสดงผลออกมาครับ
screenshot-1

Link : http://wordpress.org/extend/plugins/syntaxhighlighter/

]]> http://killthewhat.com/wordpress-tutorials/plugin-syntaxhighlighter-%e0%b9%81%e0%b8%aa%e0%b8%94%e0%b8%87-code-%e0%b8%aa%e0%b8%a7%e0%b8%a2%e0%b9%86%e0%b8%9a%e0%b8%99-wordpress/feed/ 0 สร้างรูปแบบใหม่ด้วย Module Class Suffixhttp://killthewhat.com/joomla-tutorial/%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%a3%e0%b8%b9%e0%b8%9b%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%83%e0%b8%ab%e0%b8%a1%e0%b9%88%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-module-class-suffix/ http://killthewhat.com/joomla-tutorial/%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%a3%e0%b8%b9%e0%b8%9b%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%83%e0%b8%ab%e0%b8%a1%e0%b9%88%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-module-class-suffix/#comments Tue, 09 Jun 2009 17:38:11 +0000 snappy http://killthewhat.com/?p=2278 joomla นั้นองค์ประกอบบนหน้าเว็บไซค์ต่างๆจะประกอบไปด้วย module ต่างๆมาประกอบกันเป็นเว็บไซค์ โดย module ต่างๆบนน้าเว็บไซค์ของเราถ้าเราสร้างออกมาไม่ว่าจาก module ที่เราโหลดมาติดตั้งหรือสร้างมาเอง รูปแบบโดยพื้นฐานจะมาจาก template ที่เราเรื่องไว้ เช่น ผมเลือก template ชื่อ rhuk_milkyway ถ้าเรานำ module มาติดตั้งและใช้งานรูปแบบก็จะออกมาเป็นดังรูปด้านล่างเสมอๆ
howhost_0017
ทำให้หน้าเว็บเราก็จะมีแต่แบบนี้ดูแล้วน่าเบื่อชะมัดยาก ฉะนั้นเราจะมาทำให้ module ที่เราต้องการมีสีหรือรูปแบบตามที่เราต้องการได้

โดยเราต้องเข้าใจก่อนว่า module ต่างๆถูกกำหนดด้วย Div และชื่อ class ก็คือ div.moduletable ซึ่งทุกครั้งที่ถูกสร้างขึ้นมาก็จะเป็นชื่อนี้หมด ทีนี้เราจะมาสร้างรูปแบบเฉพาะให้กับ Module กันนะครับ โดยให้เราสังเกตุว่าใน Parameter ของ Module นั้นแทบทุก Module จะต้องมีอยู่หัวข้อหนึ่งเสมอ นั้นก็คือ Module Class Suffix
module-class-suffix

โดย module class suffix จะเป็นการกำหนดรูปแบบ css ที่เราสร้างเองแยกมาอีกชุด เพื่อให้นำมาแสดงรูปแบบเฉพาะของ Module นั้นเองครับ โดยในช่องว่างจะเป็นการใส่ชื่อ css ใหม่ลงไป ซึ่งชื่อนี้จะนำมาต่อท้าย div.moduletable เช่น
div.moduletable_news
ชื่อที่กำหนดต่อท้าย (_news) เราจะตั้งเป็นอะไรก็ได้ครับ (ในที่นี้ผมใช้เป็น news) แต่ที่สำคัญคือต้องมีการใส่เครื่องหมาย “_” ก่อนหน้าเสมอหรือจะใส่ “-” ขั้นไว้ก็ได้ และเวลาที่เราจะใส่ชื่อในช่อง Module Class Suffix ก็จะใส่เต็มคือ _news
module-class-suffix-1

ที่นี้เรามาดูรูปแบบของ css ใน module ก่อนครับจะทำให้เราเขียนกำหนดได้ถูกต้อง ในส่วนหัวข้อจะถูกำหนดเป็น .moduletable h3 และตัว module จะเป็น .moduletable
module-class-suffix-2
1. ในส่วนนี้จะใช้ชื่อว่า .moduletable_news h3
2. ในส่วนนี้จะใช้ชื่อว่า .moduletable_news

ให้เราเข้าไปที่ templates/[ชื่อ template]/css/template.css ซึ่งของผมก็คือ templates/rhuk_milkyway/css/template.css ให้เราแก้ไขไฟล์ตัวนี้และใส่ class css เพิ่มเข้าไปในไฟล์
module-class-suffix-4

กำหนด css ได้ตามต้องการครับ จะสวยไม่สวยก็อยู่ตรงนี้ละครับในการจัดรูปแบบ css เสร็จแล้วถ้าเราต้องการใช้ซ้ำ ก็ให้กำหนด module class suffix ของ module ตัวอื่นให้ชื่อเป็นตามเดิมที่เราได้สร้างไว้ _news

]]> http://killthewhat.com/joomla-tutorial/%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%a3%e0%b8%b9%e0%b8%9b%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%83%e0%b8%ab%e0%b8%a1%e0%b9%88%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-module-class-suffix/feed/ 1 Module : Custom HTML สร้าง module ขึ้นมาเองได้http://killthewhat.com/joomla-tutorial/module-custom-html-%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87-module-%e0%b8%82%e0%b8%b6%e0%b9%89%e0%b8%99%e0%b8%a1%e0%b8%b2%e0%b9%80%e0%b8%ad%e0%b8%87%e0%b9%84%e0%b8%94%e0%b9%89/ http://killthewhat.com/joomla-tutorial/module-custom-html-%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87-module-%e0%b8%82%e0%b8%b6%e0%b9%89%e0%b8%99%e0%b8%a1%e0%b8%b2%e0%b9%80%e0%b8%ad%e0%b8%87%e0%b9%84%e0%b8%94%e0%b9%89/#comments Mon, 08 Jun 2009 20:53:29 +0000 snappy http://killthewhat.com/?p=2256 > Module Manager ซึ่ง module custom HTML ตัวนี้เราจะไม่เห็นอยู่ในรายการของ module manager โดยถ้าจะเรียกให้งานให้กด New เพื่อสร้าง module ใหม่ มันมาซ่อนอยู่ที่นี่เอง…คลิกเข้าไปเลยครับ ในนี้จะถูกแบ่งออกมาเป็น 2 ส่วนน่ะครับ คือด้านบนจะมีช่องสำหรับใส่รายละเอียดเหมือนกับ module ทั่วๆไป ส่วนด้านล่างจะเป็นพื้นที่เขียนข้อความด้วยเครื่อง TinyMCE เรามาดูส่วนบนกันก่อนครับ ใส่หัวข้อของ [...]]]> joomla นั้นมี module มากมายหลากหลายชนิดเยอะแยะมากมายจนเลือกใช้กันไม่ไหว แต่ยังไงเสียก็อาจจะไม่มี module ที่เราต้องการก็ได้ครับ ฉะนั้นแล้วเรามาสร้างเองกันดีกว่า ซึ่งจะเป็นการสร้าง module ชนิดของ HTML ในการแสดงผลออกมา โดยสามารถแสดงผลได้ตามความต้องการของเราเลย พร้อมทั้งสามารถใส่ media ทุกชนิดลงไป และ plugin ที่สนับสนุน สมมติว่าเราต้องการเสนอข่าวสารเล็กๆน้อยๆ ที่แยกออกมาจากพื้นที่แสดงบทความปกติ ก็จะใช้ module ตัวนี้ล่ะครับเป้นตัวสร้างขึ้นมา มาดูวิธีใช้กันดีกว่า…

ไม่ต้องไปหาดาวโหลดที่ไหนครับมันมีมาให้อยู่แล้ว ให้เราไปที่ Extensions >> Module Manager ซึ่ง module custom HTML ตัวนี้เราจะไม่เห็นอยู่ในรายการของ module manager โดยถ้าจะเรียกให้งานให้กด New เพื่อสร้าง module ใหม่
custom-html-11

มันมาซ่อนอยู่ที่นี่เอง…คลิกเข้าไปเลยครับ
custom-html-2

ในนี้จะถูกแบ่งออกมาเป็น 2 ส่วนน่ะครับ คือด้านบนจะมีช่องสำหรับใส่รายละเอียดเหมือนกับ module ทั่วๆไป ส่วนด้านล่างจะเป็นพื้นที่เขียนข้อความด้วยเครื่อง TinyMCE
custom-html-3
custom-html-4

เรามาดูส่วนบนกันก่อนครับ
custom-html-51

  1. ใส่หัวข้อของ module ในที่นี้ผมจะใส่ว่า liverpool ลงไป
  2. เปิดใช้งาน Enable
  3. จากนั้นเลือกตำแหน่งในการแสดงผล
  4. ในส่วนของ Module Class Suffix จะเป็นการทำให้ module ตัวนี้แตกต่างไปจากตัวอื่นๆโดยเราสามารถกำหนดสีตัวอักษร พื้นหลัง และอื่นๆได้ครับ โดยเป็นการเพิ่ม class ของ css ลงไป ซึ่งไว้วันหลังผมจะมาเขียนบทความเกี่ยวกับเรื่องนี้ให้ดูทีหลังครับ

ส่วนล่างให้เราใส่รายละเอียดของข่าวสารที่เราต้องการแสดงออกมาลงไป
custom-html-6

จากนั้น save แล้วมาดูกัน…ผมอาจตกแต่งได้ไม่สวย ^ ^ เพราะแค่อยากให้ดูว่า module class suffix เมื่อทำแล้วผลจะออกมาเป็นยังไง มันก็ขึ้นอยู่กับฝีมือ css ของแต่ละบุคคล
custom-html-7

]]> http://killthewhat.com/joomla-tutorial/module-custom-html-%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87-module-%e0%b8%82%e0%b8%b6%e0%b9%89%e0%b8%99%e0%b8%a1%e0%b8%b2%e0%b9%80%e0%b8%ad%e0%b8%87%e0%b9%84%e0%b8%94%e0%b9%89/feed/ 1