ไฟล์แรกที่เราจะทำการปรับเปลี่ยน คือ
ไฟล์หน้าแรกของบอร์ด
หน้าแรกของบอร์ดที่ไฟล์ที่เกี่ยวข้อง 2 ไฟล์ คือ
1. index.template.php
2. BoardIndex.template.php
ไฟล์ index.template.php จะมีหน้าที่เป็นโครงสร้างหลักของบอร์ด ประกอบด้วย ส่วน Header และส่วนFooter โดยที่ทั้งสองส่วนนี้จะมีหน้าตาเหมือนกันในทุกๆเพจ
ส่วนไฟล์ BoardIndex.template.php จะเป็นส่วน Content ของหน้าแรก
เปิดไฟล์ index.template.php เราต้องทำการ include ไฟล์ bootstrap มาให้ครบ ทั้ง css และ js
ไปที่ฟังก์ชั่น template_html_above() หาแท็ก </head> ใส่ include ไฟล์ทั้งหมดก่อนแท็ก </head>
<!-- Bootstrap core CSS -->
<link href="',$settings['theme_url'],'/jumbotron/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="',$settings['theme_url'],'/jumbotron/jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Dont actually copy this line! -->
<!--[if lt IE 9]> <script src="',$settings['theme_url'],'/jumbotron/docs/assets//js/ie8-responsive-file-warning.js"></script> <![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
หลังจาก include ไฟล์ bootstrap มาแล้ว เราก็สามารถเรียกใช้งาน class ต่างๆของ bootstrap ได้ตามใจ ในทีนี้เราจะเอาโครงสร้างของธีม Jumbotron มาใช้ ดังนั้น เราก็เปิดไฟล์ธีมของ Bootstrap ที่ชื่อ Jumbotron/index.html ขึ้นมา
ก็อปปี้โครงสร้างทั้งหมดที่อยู่ภายใต้ แท็ก <body>... </body> นำมาวางในไฟล์ index.template.php ในฟังก์ชั่น template_body_above()
ตรงจุดนี้ ต้องใช้ความระมัดระวังนิดหนึ่งนะครับ โครงสร้างที่เราก็อปปี้มาและมาวางในไฟล์index.template.php นั้นต้องอยู่ภายใต้คำสั่ง echo ' ... '
ฟังก์ชั่น template_body_above() คือ ส่วนที่เป็น Content ในส่วนหัว หรือ Header เริ่มตั้งแต่ โลโก้ เมนู
ฟังก์ชั่น template_body_below() คือ ส่วนที่เป็น Content ในส่วนท้าย หรือ Footer
ช่องว่างระหว่าง template_body_above() และ template_body_below() จะเป็นส่วน Content ที่จะมาจากไฟล์ BoardIndex.template.php - หน้าแรก , ไฟล์ MessageIndex.template.php - หน้ารวมกระทู้ และไฟล์ Display.template.php - หน้ารายละเอียดกระทู้
หากไม่มีอะไรเกิดขึ้น เราก็จะได้หน้าแรกแบบใหม่ในสไตล์ Reponsive จะย่อหน้าเล็ก หรือหน้าใหญ่เนื้อหาก็ยืดหยุ่นไปตามไซส์ของบราวเซอร์ครับ
ถึงตอนนี้ ถ้าท่านทำตามแล้วผลยังไม่ออกมาตามตัวอย่าง ต้องไล่ดูโค๊ดอีกทีว่า ตกหล่น หรือพลาดตรงไหน..
(ตัวอย่างธีมที่ออกแบบใหม่)
ในตอนต่อไป เราจะมาพูดถึงรายละเอียดของหน้า รวมกระทู้ และหน้ารายละเอียดกระทู้
