คราวที่แล้ว เราแนะนำให้ drupal รู้จักธีม Colourise ของเราไปแล้ว พร้อมทั้งจัดการนำส่วนเนื้อหาหลัก กับ sidebar มาแสดงในธีม คราวนี้มาสนุกกับส่วน header และ footer กันดีกว่า ก่อนอื่นเปิดใช้งานธีม Colourise ใน drupal เลยครับ ถ้าใครติดตั้ง โมดูล Switchtheme แล้ว ก็จัดการเอา block ของมันมาไว้ที่ right sidebar ได้เลย เวลาเปลี่ยนธีมกลับไปกลับมาจะได้ไม่ลำบาก
อีกอย่างก็ตั้งค่าใช้งานต่างๆของธีมเตรียมไว้ด้วย เช่น sitename , slogan , primary links , search และอื่นๆที่คิดว่าอยากเห็นในธีมของเรา (ผมขอไม่พูดถึงรายละเอียดวิธีการตั้งค่าพวกนี้นะครับ เพราะสันนิษฐานว่า "ผู้ใช้ drupal ที่ต้องการทำธีมเอง" คงรู้เรื่องการใช้งานพื้นฐานพวกนี้อยู่แล้ว)
- จัดการ sitename ธีม colourise ไม่มีโลโก้ มีแค่ชื่อเว็บ และชื่อเว็บใน drupal ก็คือ
$site_nameเริ่มจัดการกับมันด้วยการใช้ FireBug ค้นหาตำแหน่งที่ควรจะเป็น sitename ซึ่งก็คงไม่มีอะไรเหมาะไปกว่า<h1 id="logo-text">...</h1>ดังรูป
- เปลี่ยนชื่อให้เป็นเว็บไซต์ของเรา เปิดไฟล์ page.tpl.php ด้วยโปรแกรม text editor และเช่นเดียวกับคราวที่แล้ว ผมจะยังไม่อธิบายโค้ดแต่ละบรรทัดนะครับ แต่จะทำตัวอย่างให้ดูเลย แบบโค้ดข้างล่างนี้ (ขออภัย ไม่ได้กั๊กนะ แต่ขี้เกียจจริงๆ) เราไม่ต้องเปลี่ยน markup เพราะเราจะยังไม่เปลี่ยนอะไรใน css แต่ใช้วิธีแทนฟังชั่นของ drupal ลงไปใน markup เดิม แล้ว save
<?php if ($site_name): ?>
<h1 id="logo-text">
<a href="<?php print check_url($front_page) ?>" title="Go To Homepage"><?php print $site_name ?></a>
</h1>
<?php endif; ?>เมื่อ refresh หน้าเว็บ drupal ก็จะเห็นชื่อเว็บไซต์ของเราโผล่มาแทนคำว่า Colourise ครับ เมื่อคลิ๊กมันก็เป็นลิ้งค์ที่พาเรากลับโฮมเพจ
- ใส่สโลแกนซะ ใน drupal มันคือ
$site_sloganตำแหน่งที่เหมาะกับมัน ก็น่าจะเป็น<p id="intro">...</p>ทำเหมือนขั้นตอนที่แล้ว ด้วยโค้ด PHP คล้ายๆกัน<?php if ($site_slogan): ?>
<p id="intro"><?php print $site_slogan ?></p>
<?php endif; ?>เนื่องจากสโลแกนของ webzer มันสั้น ก็จะเห็นประมาณนี้
- เหยื่อรายต่อมาก็็คือ
$primary_linksตำแหน่งที่เหมาะกับมันคือ<div id="nav">...</div>เนื่องจากใน drupal เราสามารถแสดง primary links ของธีมเป็น list element ได้อยู่แล้ว (<ul>...</ul>) เราก็ไม่ต้องเขียนซ้ำอีก ใช้โค้ดสั้นๆแบบข้างล่างนี้ก็พอ<?php if (isset($primary_links)) : ?>
<div id="nav">
<?php print theme('links', $primary_links) ?>
</div>
<?php endif; ?>(ใน drupal มันจะเซ็ตคลาส active ให้กับลิงค์ของเราด้วย แต่ตอนนี้เรายังไม่เห็น ต้องแก้ css ทีหลัง)
- แล้วก็มาถึง Search Bar ด้านบน การจัดการกับ Search Bar ดูเหมือนจะง่าย แต่ก็ไม่ง่าย และผมไม่ต้องการไปแตะต้องอะไรใน Search Module ทางที่ง่ายที่สุดที่จะแสดง Search Bar โดยตรงในธีม ก็คือเรียกใช้
$search_boxโดยลบ<form id="quick-search" ... </form>ทิ้งไป แล้วใส่โค้ดสั้นๆแค่บรรทัดเดียว<?php print $search_box ?> - ได้เวลาสนุกกับ css แล้ว! เนื่องจากฟังชั่น
$search_boxเมื่อพรินต์ออกมาในหน้าเว็บของเรา มันดันมาซ้อนกับ primary links ที่ด้านซ้าย ก็ไม่ต้องตกใจครับ เพราะ css รับมือมันได้อยู่แล้ว เปิดไฟล์ Colourise.css ใน text editor แล้วมองหาส่วนที่เค้าคอมเมนต์เอาไว้ว่า/* header search */(ประมาณบรรทัดที่ 230) แล้วก็จัดการแทนค่า attribute ให้ตรงกับ markup ใน$search_boxแบบนี้/* header search */
#header form#search-theme-form {
position: absolute;
top: 38px; right: 0;
padding: 0; margin: 0;
border: none;
width: 262px; height: 30px;
background: url(header-search.jpg) no-repeat;
z-index: 999999;
}
#header form#search-theme-form .form-text {
margin: 2px 0 0 5px;
width: 210px;
background: none;
border: none;
}
#header form#search-theme-form label,
#header form#search-theme-form .form-submit {
display: none;
}เราแค่เปลี่ยน attribute พวก id กับ class ให้ตรงกับ markup โดยไม่ได้เปลี่ยนค่าอะไรของ css อย่างเช่น อันเดิมมันเป็น
id="quick-search"อันใหม่มันคือid="search-theme-form"เราก็แก้#header form#quick-searchใน css ให้เป็น#header form#search-theme-formเป็นต้น (ถ้าไม่คุ้นเคยกับ css อาจจะงงครับ และผมก็ไม่รู้จะอธิบายให้เข้าใจได้ง่ายๆยังไง) ถ้าไม่มีอะไรผิดพลาด องค์ประกอบของส่วน header ก็จะเป็นแบบภาพข้างล่างนี้ (ขออภัยสีสันอาจไม่เหมือนจริง เพราะบีบไฟล์ให้เล็กลง)
- แล้วส่วนหัวของเราก็เสร็จ มาเก็บหางกันต่อ! เนื่องจากผมอยากจะจัดการกับ block ในส่วน footer ทีหลัง เลยขอเคลียร์มันทิ้งไปก่อน คราวหน้าค่อยมากำหนด block regions ให้มันใหม่ เพราะยังไงก็ต้อง rewrite css อยู่แล้ว และโค้ดที่จะเหลือในส่วน footer จนถึงบรรทัดสุดท้ายของไฟล์ page.tpl.php ก็เป็นดังนี้ครับ
<!-- footer starts here -->
<div id="footer-wrap">
<div id="footer-content">
<?php if ($footer_message): ?>
<p><?php print $footer_message ?></p>
<?php endif; ?>
<p>Original Design From <a href="http://www.styleshout.com/">StyleShout.com</a> (<a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>). Ported to Drupal by <a href="http://webzer.net/">Webzer.net</a>.</p>
</div>
</div>
<div class="clearer"></div>
<!-- footer ends here -->
<!-- wrap ends here -->
</div>
<?php print $closure ?>
</body>
</html>$footer_messageใช้แสดงส่วนเครดิตของเว็บไซต์ ส่วนย่อหน้าและลิ้งค์ที่ผมเติมเข้ามาก็เพื่อให้เกียรติต้นแบบดีไซน์ เพราะ colourise template อันนี้เป็น Creative Commons Attribution 2.5 License เราก็ต้องส่งต่อการเผยแพร่ในลักษณะเดียวกัน ส่วน$closureก่อนแท็ค body ไม่เกี่ยวกับธีม แต่ต้องใส่ไว้เพื่อให้ drupal พรินต์พวกสคริปต์ของโมดูลบางตัว เช่น google analytics หรือ javascript - รอดไปอีกหนึ่งขั้น แต่ผมยังไม่ได้ใส่ฟังชั่นพื้นฐานบางตัวของ drupal ลงไปในธีมนะครับ เช่น
$breadcrumb,$secondary_linksเป็นต้น แต่ตอนนี้มันก็ใช้งานได้แล้วล่ะ ลองเปิดใช้งานส่วนต่างๆของธีมดูนะครับ หรือ ลองเล่น Switch Theme จาก sidebar ของ webzer ก็ได้ (แต่บางทีมันก็ไม่ switch ให้ สงสัยว่าจะเป็น cache)
ในธีมตัวอย่างที่เป็นไฟล์แนบด้านล่างนี้ สามารถเอาไปทดลองติดตั้งได้เลย (ไฟล์มันใหญ่เพราะภาพแบ็คกราวนด์ครับ และถ้ามันคลาย .zip ออกมา ก็อย่าลืมเปลี่ยนชื่อโฟลเดอร์เป็น colourise แทน colourise-sample-2 ก่อนเอาไปใช้ใน drupal นะครับ) ผมใส่คอมเมนต์ภาษาไทยไว้ในไฟล์ page.tpl.php ด้วย เพื่อบอกคร่าวๆ ว่าแต่ละฟังชั่นมีไว้ทำอะไร รวมทั้งแอบแก้ css ไปล่วงหน้าแล้ว เพื่อให้มองเห็นตัวหนังสือได้ง่ายขึ้น ใช้ใน localhost ได้เลย แต่อย่าเพิ่งเอาไปใช้กับเว็บไซต์จริงนะครับ (แต่ผมก็เอามาใช้แล้วล่ะ) เพราะยังเหลืออะไรที่ต้องแก้อีกเยอะ คราวหน้าค่อย "ทำให้มันเนียน" ด้วยการตกแต่งรายละเอียดที่จำเป็น เช่น ตำแหน่งของ block , เคลียร์อะไรที่ไม่จำเป็นออกไป และคงได้สนุกกับ css และ ไฟล์อื่นๆของ drupal กันมากขึ้น (มีใครคิดว่ามันสนุกบ้างมั้ยเนี่ย?)
ที่มา : http://webzer.net/node/51