ตัวอย่าง การปรับแต่งและใช้งานเทมเพลต

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

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

หากต้องการรู้ว่าในเทมเพลตมีตำแหน่งอะไรอยู่ตรงไหนบ้างให้พิมพ์ index.php?tp=1 ต่อท้ายชื่อเว็บ เช่นของเว็บนี้จะเป็น http://www.thaisolution.net/index.php?tp=1

ตัวอย่างกำหนดการแสดงในเว็บนี้

หน้าแรกแสดงเป็นสามคอลัมน์ ด้านบนมีโดดูลสำหรับแสดงเนื้อหาที่ต้องการให้แสดงหน้า(Front Page)แรกตลอดไม่ตกไปหากเพิ่มเนื้อหามาใหม่ ด้านล่างแสดงโมดูลกระทู้ล่าสุด กระทู้ยอดนิยม ข้อคิดเห็นล่าสุด และบทความแก้ไขล่าสุด โดยจะแสดงในหน้าแรก(Front Page) หน้าหนึ่งเท่านั้นหากผู้ใช้กดไปตั้งแต่หน้าสองจะไม่แสดงอีก

ภาพแสดงโมดูลในตำแหน่ง top (กำหนดให้แสดงในหน้าหนึ่งเท่านั้น)

ภาพแสดงโมดูลในตำแหน่ง bottom (กำหนดให้แสดงในหน้าหนึ่งเท่านั้น) ในภาพจะอยู่ด้านล่างบริเวณที่เป็นสีเหลือง

รูปด้านล่างแสดงการวางตำแหน่งต่าง ๆ ในเทมเพลตของเว็บนี้

ตำแหน่ง user3 จะอยู่บนสุด (ในเว็บนี้ใช้แสดงปุ่มเมนูด้านบน)

ตำแหน่ง header จะอยู่บนตำแหน่ง top จะแสดงในทุกหน้า (ยังไม่ได้ใช้)

ตำแหน่ง footer จะอยู่ถัดจากตำแหน่ง bottom จะแสดงในทุกหน้า (ในเว็บนี้จะแสดง Google Adsense)

ด้านซ้ายมือจะเป็นตำแหน่ง left

ด้านขวามือจะเป็นตำแหน่ง right

การเปลี่ยนภาพหัวเว็บด้านบน ให้ใช้ภาพที่มีขนาดเท่ากันบันทึกแทนไฟล์เดิมที่อยู่ในกล่อง images ชื่อไฟล์ Header.jpg และภาพอื่น ๆ ในกล่อง images สามารถใช้โปรแกรมตกแต่งภาพแก้ไขได้ทุกไฟล์เพียงแต่ให้มีความกว้างยาวเท่า เดิม

การเปลี่ยนชื่อและสโลแกนเว็บไซต์ ให้แก้ในไฟล์ index.php ของเทมเพลตแล้วแก้ในส่วนนี้

edit-slogan.txt

รูปด้านล่างแสดงภาพหัวเว็บ ชื่อ และสโลแกนของเว็บไซต์

การใส่ไฟล์ Flash บนหัวเว็บ

ถ้าต้องการให้แสดงไฟล์ Flash บนหัวเว็บเหมือนในเว็บนี้ ให้อัพโหลดไฟล์ Flash ชื่อ header.swf หรือชื่ออะไรก็ได้แต่ต้องแก้ในโค้ดให้ตรงกันไปไว้ในกล่อง images แล้วแทรกคำสั่งต่อไปนี้ในไฟล์ index.php ของเทมเพลตในระหว่างแท็ก

แสดงตัวอย่างโค้ด

code-insert-flash.txt

ในโค้ดจะมีคำสั่ง PHP ตรวจสอบหน้าที่ไม่ต้องการให้แสดงไฟล์ Flash เช่นในหน้า Editor เพราะเมื่อใช้เครื่องมือของบางตัวที่เปิดหน้าต่าง Popup จะถูกบังโดยไฟล์ Flash ทำให้ใช้งานไม่สะดวก

การแก้ไขการตรวจสอบเงื่อนไขของหน้าหรือคอมโพแนนท์

ถ้าต้องการกำหนดการแสดงจำนวนคอลัมน์ที่แตกต่างจากที่กำหนดไว้เดิม ให้แก้ไขในไฟล์ index.php ของเทมเพลต ให้ระวังเรื่องของรูปแบบคำสั่งให้มากครับ ถ้าผิดนิดนึงเทมเพลตอาจใช้ไม่ได้ ในการแก้ไขควรมีความรู้ภาษา PHP พอสมควร

โดยเงื่อนไขการเปรียบเทียบเราสามารถดูได้จาก URL ของหน้าที่เราต้องการตรวจสอบ ซึ่งจะอยู่หลัง index.php ต่อจากเครื่องหมาย ? เช่น ?task=editpost หรือ ?option=com_content เป็นต้น เราจะเห็น URL แบบนี้ได้ต้องไม่เปิดระบบ SEF ของ Joomla นะครับ ถ้าเปิดอยู่ให้ปิดดูก่อนเสร็จแล้วค่อยเปิดทีหลังได้ครับ

การกำหนดเงื่อนไขสำหรับให้แสดงคอลัมน์เดียว ให้แก้ไขบริเวณนี้ครับ

view source

print?

01.if(JRequest::getCmd('mode') == 'post' or JRequest::getCmd('mode') == 'edit'

02. or JRequest::getCmd('mode') == 'reply' or JRequest::getCmd('mode') == 'quote'

03. or JRequest::getCmd('layout') == 'form' or JRequest::getCmd('task') == 'edit'

04. or JRequest::getCmd('task') == 'editpost' or JRequest::getCmd('layout') == 'entry'

05. or JRequest::getCmd('option') == 'com_jpfchat' or JRequest::getCmd('task') == 'icalevent.edit'

06. or JRequest::getCmd('option') == 'com_ccboard' or JRequest::getCmd('option') == 'com_projectfork'

07. or JRequest::getCmd('view') == 'addpost') {

08./* Start assign parameters for one column */

09.$cols_num = 1;

10.$main_pos = "left";

11.$div_class = "content-full";

12./* End assign parameters for one column */

การกำหนดเงื่อนไขสำหรับให้แสดงสองคอลัมน์ ให้แก้ไขบริเวณนี้ครับ อยู่ถัดจากโค้ดข้างบนเลย

view source

print?

01.} elseif($this->countModules('left')) { /* if not one column condition */

02. if(JRequest::getCmd('view') == 'article' or JRequest::getCmd('option') == 'com_comprofiler'

03. or JRequest::getCmd('option') == 'com_frontenduserarticlelist'

04. or JRequest::getCmd('option') == 'com_alphacontent'

05. or JRequest::getCmd('option') == 'com_fabrik' or JRequest::getCmd('option') == 'com_cbmailing'

06. or JRequest::getCmd('option') == 'com_uddeim' or JRequest::getCmd('layout') == 'blog'

07. or JRequest::getCmd('option') == 'com_blog' or JRequest::getCmd('option') == 'com_lyftenbloggie') {

08./* Start assign parameters for two column some component */

09.$cols_num = 2;

10.$main_pos = "right";

11.$div_class = "content-middle";

12./* End assign parameters for two column some component */

ตรงนี้ไม่ขออธิบายมากครับ ถ้าไม่จำเป็นก็ไม่ควรแก้ไข เขียนไว้คร่าว ๆ สำหรับผู้ที่มีประสบการณ์ในการแก้ไขเทมเพลตครับ

โค้ดคำสั่งกำหนดเงื่อนไขในการแสดงจำนวนคอลัมน์ของเทมเพลต

ตรงนี้จะแสดงและอธิบายโค้ดคำสั่งที่ใช้ในการตรวจสอบเงื่อนไขการแสดงจำนวน คอลัมน์ของเทมเพลต เพื่อใช้เป็นแนวทางสำหรับผู้ที่ต้องการแก้ไขเทมเพลตอื่น ๆ

ให้ทำการแก้ไขไฟล์ index.php ของเทมเพลตที่ใช้ ควรสำรองไฟล์ index.php เดิมเก็บไว้ก่อน แทรกโค้ดคำสั่งนี้ไปแทนที่คำสั่งเดิมของเทมเพลต ตั้งแต่ส่วนที่แสดงตำแหน่งโมดูล left จะถึงตำแหน่งโมดูล right ส่วนนี้สำหรับผู้ที่มีประสบการณ์ในการแก้ไขเทมเพลตเท่านั้นนะครับ ถ้าคุณยังไม่เคยแก้ไขเทมเพลตให้ศึกษาคำสั่ง PHP และรูปแบบของเทมเพลตก่อน

รูปแบบคำสั่งมีดังนี้

script-manage-template.txt

คำสั่งที่ใส่ในส่วนของตัวอย่างนั้นให้คัดลอกมาจากเทมเพลตที่คุณใช้อยู่ครับ

ส่วนสำคัญอันหนึ่งคือต้องกำหนดความกว้างของหน้าในไฟล์ CSS ของเทมเพลตที่ใช้ด้วยตัวแปล $div_class สามารถกำหนดตาม CSS ที่ใช้ได้ อาจจะคัดลอกจากของเดิมเป็นสามชุด แล้วเปลี่ยนชื่อให้ตรงกับที่กำหนดในตัวแปล ส่วนค่าอื่น ๆ เอาไว้เหมือนเดิมเปลี่ยนแต่ค่า width อย่างเดียว

ตัวอย่าง

template.css.txt

หลักการก็คือคำสั่งในไฟล์ index.php จะตรวจสอบเงื่อนไขของหน้าเว็บหรือคอมโพแนนท์ แล้วกำหนดในค่าตัวแปล $div_class ตามการแสดงจำนวนคอลัมน์แล้วไปกำหนดให้แท็ก

เรียกใช้คลาสอันใดอันหนึ่งจากไฟล์ CSS ที่มีการกำหนดความกว้างไว้ต่างกันตามการแสดงจำนวนคอลัมน์

ในการใช้งานจริงการแก้ไขแต่ละเทมเพลตจะมีรายละเอียดไม่เหมือนกัน ต้องปรับใช้กันเองตามเทมเพลตที่ใช้ครับ

สำหรับผู้ที่สนใจเทมเพลตในเว็บนี้สามารถติดต่อรายละเอียดกับผมได้ครับ