วิธีเรียกใช้ไฟล์ CSS และ Js ลงใน Extension ของ Joomla

Post a reply


In an effort to prevent automatic submissions, we require that you complete the following challenge.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: วิธีเรียกใช้ไฟล์ CSS และ Js ลงใน Extension ของ Joomla

วิธีเรียกใช้ไฟล์ CSS และ Js ลงใน Extension ของ Joomla

by Patipat » 10/07/2019 5:07 pm

ในเรื่อของ Joomla เราจะมีตัวส่วนเสริมที่เราสามารถใช้ในการขายสินค้าออนไลน์ได้สะดวก ส่วนนั้นก็คือ ตัว MooZiicart ที่สามารถสร้าง หมวดหมู่สินค้าและสินค้าได้ง่าย ๆ โดยไม่ต้องเขียนโปรแกรม และในบทความนี้เราจะมาพูดถึงเรื่องการทำ Module ขึ้นเอง Module ของ MooZiicart คือ ส่วนที่แสดงผลบนเว็บไซต์ตามตำแหน่ง ที่ผู้ดูแลระบบได้สร้างไว้ โมดูลก็จะมีหลายโมดูลให้เราได้เลือกใช้กัน อย่างเช่น เราจะสร้าง Module Login ก็สามารถเพิ่มได้เลย ที่เรากล่าวมาว่าจะทำ โมดูลขึ้นเอง ก็จะสามารถแสดงสินค้าแบบ สุ่มได้ แสดงสินค้าแบบ เรากำหนดเอง และในเรื่องความสวยงาม เราก็จะไม่พ้น CSS และ ไฟล์ JS ที่ Extension ของ Joomla จะต้องใช้
ถ้าเราเขียนโปรแกรมใน ภาษา PHP ทั่วไป เราก็จะเรียก ใช้ฟังก์ชันนี้

Code: Select all

<link rel="stylesheet" href="/file.css"> 
แต่ถ้าเราเขียนใน Joomla เราจะต้องใช้ฟังก์ชันนี้ครับ

วิธีการใช้งาน

1. ให้เราเขียน

Code: Select all

$document = JFactory::getDocument(); 
2. เลือกที่จะใช้งานว่า จะเลือกไฟล์ไหนเข้าใช้งาน
ถ้าเราจะเรียกใช้ไฟล์ CSS

Code: Select all

$document->addStyleSheet($url);
ถ้าเราจะเรียกใช้ไฟล์ JS

Code: Select all

$document->addScript($url);

โค้ดนี้ยก ตัวอย่าง ไฟล์ Js ก็จะใช้แบบนี้ครับ

Code: Select all

<?php 
$document->addScript('file.js');
?>

ตัวอย่าง ไฟล์ CSS ก็จะใช้แบบนี้ครับ

Code: Select all

<?php 
$document->addStyleSheet('file.css');
?>
เรามีวิธีเช็คไฟล์ ก็คือ ให้เรากด คลิกขวาที่หน้าเว็บเพจครับ แล้วกด Inspect > Network > CSS แล้วกด Refresh 1 รอบครับจะขึ้นไฟล์ CSS ที่เราเรียกใช้มา
Selection_999(262).png

Top