สำหรับ Episode 3 ของการแปลง Colourise (free css template) เป็นธีมของ drupal6.x นี้ ก็คงเป็นตอนสุดท้ายที่ผมจะเขียน แต่ไม่ใช่ขั้นตอนสุดท้ายของการพัฒนาธีม แต่หลังจากผ่านขั้นตอนพื้นฐานของการทำธีม drupal ก็จะเป็นเรื่องการตกแต่ง ซึ่งเน้นไปที่ css มากกว่า drupal และผมตั้งใจว่าจะแยกเรื่อง css ออกมาเขียนต่างหาก เพราะมันสามารถเอาไปพัฒนาธีม/เทมเพลตสำหรับ cms ตัวอื่นๆได้เช่นกัน
ขั้นตอนที่เหลือสำหรับ Drupal Colourise Theme ก็คือ กำหนดตำแหน่ง block เพิ่มเติม , เปลี่ยน path ของไฟล์ให้เป็นระเบียบ แล้วก็เพิ่มและเคลียร์สิ่งที่ไม่จำเป็นออกไปจาก css
- เพิ่ม block regions ใน footer ในไฟล์ index.html ดั้งเดิมของ colourise ส่วน footer เราจะเห็นใน firebug ว่า มันมี block อยู่ 3 คอลัมน์ และเช่นเคย ผมจะไม่เปลี่ยนโครงสร้างเดิมของ markup และ css เราจึงกำหนดให้มันมี 3 block regions ใน footer โดยเพิ่มลงไปในไฟล์ colourise.info ดังนี้
regions[footer_1] = Footer Block 1
regions[footer_2] = Footer Block 2
regions[footer_3] = Footer Block 3 - แสดง footer blocks ในไฟล์ page.tpl.php เช่นเดียวกับการเพิ่มเนื้อหาใน block ด้านข้าง (Right Sidebar) เราก็เติม Footer Block ทั้ง 3 คอลัมน์ได้ดังนี้
<?php if ($footer_1): ?>
<div class="col float-left space-sep">
<?php print $footer_1 ?>
</div>
<?php endif; ?>
<?php if ($footer_2): ?>
<div class="col float-left">
<?php print $footer_2 ?>
</div>
<?php endif; ?>
<?php if ($footer_3): ?>
<div class="col2 float-right">
<?php print $footer_3 ?>
</div>
<?php endif; ?> - ตอนนี้เราก็มี block regions เพิ่มขึ้นมา 3 ที่แล้ว! ก็เอา block ต่างๆของ drupal มาวางได้เลย แต่เนื่องจาก ทั้ง 3 blocks ใช้วิธีการ float ใน css ส่วนที่เป็น เครดิตของเว็บไซต์ด้านล่างจึงลอยตามขึ้นมาด้วย วิธีแก้ง่ายๆ ก็คือ ใส่
clear: bothให้มัน แต่ไม่ต้องเขียน css เพิ่มก็ได้ เพราะมันมีclass="clearer"กำหนดให้เป็นตัวเคลียร์ใน Colourise.css อยู่แล้ว เราก็ใส่ class นี้ให้กับ elements ที่ต้องการเคลียร์ตำแหน่งซะ เป็น<?php if ($footer_message): ?>
<!-- เครดิตของเว็บไซต์ -->
<p class="clearer"><?php print $footer_message ?></p>
<?php endif; ?>
<p class="clearer">...</p>
- จัดการ path ของไฟล์ให้เป็นระเบียบ เนื่องจากไฟล์ Colourise.css อยู่ในโฟลเดอร์ images แต่เพื่อความเป็นระเบียบ ผมชอบรวมไฟล์ css ไว้ต่างหาก เพราะบางทีเราต้องเขียนหลายไฟล์ ก็เลยจัดการสร้างโฟลเดอร์ใหม่ ชื่อว่า css ในโฟลเดอร์ธีมของเรา แล้วเอาไฟล์ colourise.css ย้ายไปเก็บไว้ในนั้น (ผมเปลี่ยนชื่อมันเป็น colourise.css แทน Colourise.css แต่จริงๆไม่มีผลอะไร เพียงแต่เป็นความชอบส่วนตัว ที่ไม่อยากเห็นชื่อไฟล์มีตัวอักษรใหญ่) จากนั้นก็เข้าไปแก้ในไฟล์ colourise.info เป็น
stylesheets[all][] = css/colourise.css - อย่าลืมเปลี่ยน path ของภาพพื้นหลังในไฟล์ css ด้วย เพราะไฟล์รูปภาพที่เราใช้ใน css เขียน path ไว้แบบอ้างอิง เราก็ต้องแก้ path ใหม่ให้มันด้วย ไม่งั้นมันจะไม่แสดงภาพพื้นหลัง เช่น เปลี่ยน
background: url(bg.jpg);ให้เป็นbackground: url(../images/bg.jpg);ซึ่งในไฟล์ colourise.css ก็มีอยู่ 5-6 จุด - งานก่อสร้างเสร็จแล้ว เหลืองานตกแต่งภายใน ผมจะยังไม่พูดถึงการตกแต่งธีมด้วย css หรอกนะครับ เพราะเรื่องมันยาวเกินกว่าจะพล่ามได้จบใน 3 ตอน แต่งานก่อสร้างพื้นฐานของธีม colourise ใน drupal 6 ก็มีหลักๆเท่านี้ ที่เหลือก็แก้ไข css เอาเองได้ และเรายังสามารถต่อเติมธีมได้อีกมาก และหลายๆอย่างผมก็ยังไม่ได้พูดถึง เช่น การเพิ่ม features สำหรับเลย์เอาต์ของธีมในไฟล์ template.php , การสร้างไฟล์ *.tpl.php อื่นๆ เพื่อ markup ของ drupal ให้ได้ดั่งใจเรา รวมถึงการ override ไฟล์ css ของระบบและโมดูลใน drupal ด้วย
เมื่อผมแก้ไขธีม Colourise สำหรับ Drupal 6 ได้สมบูรณ์แล้ว ก็จะเอามาให้ดาวน์โหลดไปใช้ได้ ส่วนไฟล์แนบด้านล่างนี้ คือ ธีมที่ยังไม่ได้เขียน css ใหม่ แต่ก็สามารถเอาไปทดลองปรับแต่ง หรือใช้งานในเว็บไซต์สำหรับทดสอบได้ เหมือนที่ผมเอามาทดลองใช้อยู่ใน webzer ขณะนี้
ที่มา : http://webzer.net/node/53