Drupal Colourise Theme (EP.1)

          ผมเป็นคนหนึ่งที่อยากเห็นตัวอย่างการทำธีมสำหรับ drupal 6.x แบบรวดเร็วทันใจ แต่มันก็ไม่ง่ายเหมือนการดาวน์โหลดธีมมาติดตั้ง วิธีที่ผมคิดออกเพื่ออธิบายขั้นตอนการทำธีมของ drupal ก็คือ ยังไม่ต้องพูดถึงที่มาที่ไปของแต่ละขั้นตอนมากมายนัก เพราะรายละเอียดมันเยอะมาก เอาไว้ถ้ามีโอกาสก็คงได้พูดถึงมันทีหลัง และอยากจะข้ามขั้นตอนการออกแบบเว็บไซต์ไปด้วย จะได้ไม่ต้องคิดอะไรฟุ้งซ่านเกินไป

         ทางออกก็คือ หา Free CSS Template มาเป็นต้นแบบ เพื่อประกอบการอธิบาย ซึ่งจะทำให้งานของเราง่ายขึ้นมาก และสุดท้ายเราก็สามารถเอาธีมนั้นมาใช้งานจริงได้ด้วย แบบนี้คงช่วยให้เห็นกระบวนการสร้างธีม drupal แบบไม่ปวดหัวใจ(และปวดกบาล) แต่ยังมีอีกหลายวิธีที่ทำได้เหมือนกัน ผมเพียงแต่ยกวิธีนี้ขึ้นมาเป็นตัวอย่าง เพราะคิดว่ามันเป็นวิธีที่ "เมื่อยนิ้วน้อยที่สุดแล้ว" (ไม่ต้องยุ่งกับโค้ดมากมายเกินไป)

          ผมเลือกธีม Colourise จาก Styleshout.com ซี่งเป็น Free CSS Template มาเป็นต้นแบบ เพราะเลย์เอาต์ไม่ซับซ้อนมาก เป็น tableless layout ใช้ไฟล์กราฟิคไม่มาก และเท่าที่ผมรู้ ก็ยังไม่มีใครเอามาทำเป็นธีมสำหรับ drupal ส่วนข้อเสียของ Colourise คือ ตัวอักษรส่วนเนื้อหาเล็กเกินไป และใช้สีกลืนกับพื้นหลังมากเกินไป แต่เราสามารถแก้ไขมันได้ไม่ยากในไฟล์ css และย้ำอีกครั้งว่า ตัวอย่างนี้ เป็นการทำธีมสำหรับ drupal 6.x นะครับ ซึ่งบางอย่างใช้ไม่ได้กับ drupal 5.x แต่หลักการจะคล้ายๆกัน

การเตรียมตัวและสิ่งที่ต้องรู้

          ผมไม่ได้เขียนเรื่องนี้ขึ้นมาจากอากาศ หรือนั่งเทียนคิดไปเอง แต่รวบรวมหลายๆอย่างที่หาอ่านได้จาก Theme Guide (Drupal 6) นอกจากนั้นก็เป็นประสบการณ์ส่วนตัว ที่เคยเจอปัญหาและเคยหาทางแก้มาแล้ว และขอออกตัวก่อนว่า ผมไม่ได้เก่งกาจมาจากไหน แต่พยายามทำทุกอย่างให้ง่ายเข้าไว้ มันก็เลยออกมาเป็นหัวข้อที่ผมกำลังเขียนอยู่นี้ และผมสันนิษฐานว่า ผู้ใช้ drupal ที่ต้องการปรับแต่งหรือทำธีมเอง คงคุ้นเคยกับการใช้งาน drupal มาระดับหนึ่ง , เคยพัฒนาเว็บไซต์ทั้งในคอมพิวเตอร์ส่วนตัวและบนเซิร์ฟเวอร์มาแล้ว และรู้จัก HTML กับ CSS ด้วย ส่วน PHP ไม่ต้องเขียนเป็นก็ได้ แต่่รู้ไว้ก็ยิ่งดี

          ผมเลือกใช้ชุดโปรแกรมเว็บเซิร์ฟเวอร์ MAMP สำหรับ Mac OSX เพื่อใช้งาน Apache , MySQL , PHP และ phpMyAdmin ส่วนโปรแกรมสำหรับผู้ใช้ Windows เท่าที่ผมรู้ก็มี Appserv ซึ่งพัฒนาโดยคนไทย (Linux ผมไม่คุ้นเคย เลยไม่รู้จะแนะนำตัวไหน)

          และเพื่อให้เราสามารถตรวจสอบลักษณะของธีมที่จะทำใน drupal ได้ทันที ก็ขอให้ติดตั้ง drupal ใน localhost ก่อน และควรมีเนื้อหาตัวอย่างไว้ด้วย เช่น blog , page , book หรือ forum เพื่อให้เราเห็นหน้าตาของธีมกับเนื้อหาใน drupal และยังไม่ควรเปิดใช้งานระบบ cache

          และเพื่อหลีกเลี่ยงความสับสนระหว่างการทำธีม ให้เลือก Administration Theme หรือ ธีมของหน้าดูแลระบบ เป็น garland หรือ ธีมที่มันไม่ต้องแก้ไขอะไรแล้ว โดยเลือกได้ที่ /admin/settings/admin หรือ /?q=admin/settings/admin

เครื่องมือคู่ชีพที่ต้องใช้
  1. FireFox (Browser)
  2. FireBug (FireFox Addon)
  3. TextWrangler (Text Editor)

แค่นี้ก็เอาอยู่ ทีนี้ก็... บ่นมากไปเดี๋ยวจะหมั่นไส้กันซะเปล่าๆ เริ่มกันเลยดีกว่า!

 

Drupal 6 จะรู้จักธีม Colourise ของเราได้ยังไง?

          drupal 6 จะมองเห็นธีมของเรา ก็ต่อเมื่อมีไฟล์นามสกุล .info อยู่ในโฟลเดอร์ธีมของเรา หรือเรียกว่า Theme Registry (แต่ธีมสำหรับ drupal5 ไม่ต้องมีไฟล์นี้) ขั้นตอนการแนะนำตัวให้ drupal รู้จักธีมที่เราจะสร้างจาก Free CSS Template ก็ทำได้ดังนี้ครับ

  1. ดาวน์โหลด colourise template จากนั้นคลาย .zip แล้ว ก็เปลี่ยนชื่อโฟลเดอร์เป็น colourise แล้วก็ copy ทั้งโฟลเดอร์ไปไว้ใน /sites/all/themes/
  2. ดูโครงสร้างเลย์เอาต์ของธีม โดยเปิดไฟล์ index.html ของ colourise ใน FireFox ใช้ FireBug ดูชั้นโครงสร้างเลย์เอาต์ เราก็จะเห็นว่ามันมี 3 ส่วนใหญ่ๆ คือ header , content-wrap และ footer-wrap ทั้ง 3 ส่วนนี้ ถูกห่อไว้ใน wrap ดังรูป
    firebug-crop-1
  3. ส่วนที่เราสนใจคือ เนื้อหาหลัก <div id="main"> กับ เนื้อหารอง <div id="sidebar"> ใน <div id="content-wrap"> ซึ่งเราจะกำหนดให้มันเป็น ส่วนแสดงเนื้อหา และ block regions ในขั้นตอนต่อไป
  4. สร้างไฟล์ colourise.info ใน text editor พร้อมทั้งกำหนด block regions และ stylesheet ของธีม ในชั้นแรกผมกำหนดแค่ Right Sidebar เป็นพื้นที่ของ block กับ images/Colourise.css ให้เป็น stylesheet หลัก ด้วยโค้ดข้างล่างนี้ จากนั้นก็ save เป็นไฟล์ชื่อ colourise.info เก็บไว้ในโฟลเดอร์ธีม colourise

    ; $id: colourise.info,v0.1 2008/11/04 gibbo Exp $
    name = Colourise
    description = Drupal6.x Theme Created from <a href="http://www.styleshout.com/templates/preview/Colourise1-0/index.html">StyleShout's Colourise</a> Free CSS Template. Visit <a href="http://webzer.net/tags/colourise">Webzer.net</a> for more info.
    version = VERSION
    core = 6.x
    engine = phptemplate
    regions[right] = Right Sidebar
    stylesheets[all][] = images/Colourise.css

    (ไฟล์ css ของ colourise อยู่ในโฟลเดอร์ images ผมไม่เปลี่ยน path เพราะยังไม่อยากแก้อะไรใน css ตอนนี้)

  5. สร้างไฟล์ page.tpl.php โดยเปิดไฟล์ index.html ของ colorise ใน text editor แล้วเปลี่ยนส่วนหัวของมัน ด้วยฟั่งชั่น PHP + API ของ drupal โดยลบแค่ส่วน <!DOCTYPE ... จนถึงแท็ค </head> ก่อนแท็ค <body> แล้วแทนที่มันด้วยโค้ดด้านล่างนี้ จากนั้นก็ save as เป็นไฟล์ page.tpl.php เก็บไว้ในโฟลเดอร์ธีม colorise ของเราอีกครั้ง

    <?php
    // $id: page.tpl.php, 2008/11/04 gibbo Exp $
    ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
    <head>
    <?php print $head ?>
    <title><?php print $head_title ?></title>
    <?php print $styles ?>
    <?php print $scripts ?>
    </head>

  6. ตอนนี้ drupal ก็รู้จักธีม colourise ของเราแล้ว! ถ้าลองไปที่ /admin/build/themes เราก็จะเห็นชื่อธีมใหม่ คือ Colourise ดังรูปด้านล่าง แต่ยังไม่ต้องรีบร้อนเปิดใช้งานมันนะครับ เดี๋ยวจะงงซะเปล่าๆ เพราะเรายังไม่ได้นำส่วนเนื้อหาและบล็อคของ drupal มาแสดง
    colourise-crop-1.png
  7. ใส่เนื้อหาของ drupal โดยเคลียร์ markup ที่ยาวเฟื้อยออกไปจากไฟล์ page.tpl.php ของเรา เหลือไว้เฉพาะที่เป็นเลย์เอาต์ของธีม ในส่วน <div id="main"> และ <div id="sidebar"> แล้วก็แทนมันด้วยโค้ด PHP ของ drupal เพื่อให้ธีมของเราแสดงเนื้อหาหลัก ใน <div id="main">...</div> และ เนื้อหารอง ใน<div id="sidebar">...</div> แบบโค้ดข้างล่างนี้

    <!-- content-wrap starts -->
    <div id="content-wrap">
    <div id="main">
    <?php if ($title): ?>
    <h2><?php print $title ?></h2>
    <?php endif; ?>
    <?php if (!empty($messages)): print $messages; endif; ?>
    <?php if (!empty($help)): print $help; endif; ?>
    <?php if (!empty($tabs)): ?><?php print $tabs; ?><?php endif; ?>
    <?php print $content ?>
    <?php print $feed_icons ?>
    <!-- main ends -->
    </div>
    <!-- sidebar starts -->
    <div id="sidebar">
    <?php if ($right): ?>
    <?php print $right ?>
    <?php endif; ?>
    <!-- sidebar ends -->
    </div>
    <!-- content-wrap ends-->
    </div>

  8. ทดลองเปิดใช้งาน Colourise Theme ถ้าไม่มีอะไรผิดพลาด หลังจากเปิดใช้งานธีม เราก็จะเห็นเนื้อหาปกติ (สีตัวหนังสือของธีมนี้ มันมืดไปหน่อย เดี๋ยวค่อยมาแก้ css กันทีหลังได้ครับ) ส่วนที่เป็นบล็อคตรง sidebar ก็สามารถตั้งค่าได้เหมือนธีมทั่วไปแล้ว นอกจากนี้ ก็ขอแนะนำให้ติดตั้ง Switchtheme Module เวลาสลับธีมจะได้สะดวกขึ้น ส่วนตัวอย่างไฟล์ colourise.info กับ page.tpl.php ผมทำไว้ให้ในไฟล์แนบด้านล่าง

        แต่งานของเรายังไม่เสร็จหรอกนะครับ ยังไม่ถึงครึ่งทางด้วยซ้ำไป เพราะส่วน header กับ footer ยังไม่ได้ทำอะไรกับมันเลย เดี๋ยวคราวหน้าเราจะมาจัดการส่วนอื่นๆที่เหลือกันต่อ เพราะอุตส่าห์ทำธีมทั้งที จะไม่ให้มือเปื้อนโค้ด css ซักบรรทัดเลย ก็กระไรอยู่!

ที่มา : http://webzer.net/node/50