Cơ bản về Template trong Joomla! 1.0.x

Thảo luận các vấn đề vể cài đặt và sử dụng Joomla! và các thành phần mở rộng của Joomla!
Nội quy chuyên mục
Thành viên đăng quảng cáo trong chuyên mục này sẽ bị xóa toàn bộ bài viết và cấm vĩnh viễn tham gia Diễn đàn.

* Xem qui định đăng bài viết tại đây: Nội quy đăng bài viết
Đã khóa
Hình đại diện của thành viên
BuaXua
Điều hành viên chính
Điều hành viên chính
Bài viết: 28
Ngày tham gia: 12/09/2010 - 22:54

Cơ bản về Template trong Joomla! 1.0.x

Gửi bài gửi bởi BuaXua » 22/08/2019 - 10:39

Template là giao diện của trang web, phần giao tiếp với người dùng. Template quyết định đến cách trình bày, bố cục và các định dạng về kiểu chữ, màu sắc, kích thước, các hiển thị hình ảnh trang trí trên trang Web....

Trong Joomla! Template cũng được xem như là một thành phần mở rộng và cũng được cài đặt như các thành phần mở rộng khác. Template được đóng gói dưới dạng tập tin nén, có 2 loại dành cho trang web (Site, Front-end) và dành cho phần quản trị (Administrator, Back-end).

các thành phần cơ bản của Template
  • Temp_name: Thư mục chính chứa tất cả các thư mục và tập tin của Template. Thư mục này được đặt theo tên của Template để thuận tiện quản lý.
  • css: Thư mục chứa các tập tin bảng kiểu chứa các thông tin về định dạng của Template.
  • Thu mục images: Chứa các tập tin ảnh được sử dụng trong Template.
  • index.html: Tập tin ngăn sự truy cập trực tiếp vào thư mục của Template.
  • index.php: Tập tin chính sử dụng mã nguồn PHP tạo nên cấu trúc của Template.
  • Template_thumbnail.png: Tập tin hiển thị ảnh của Template.
  • TemplateDetails.xml: Tập tin chứa các thông tin và thông số để cài đặt Template.
Hình ảnh

Ngoài ra một số Template có các tập tin cấu hình để giúp thay đổi các thông số của Template (hình dáng, màu sắc...) và các tập tin mã (Java Script) để hỗ trợ thêm chức năng cho Template.

Template luôn được định trước các vị trí để hiển thị các Moduleule và có nhiều vị trí, mỗi vị trí có thể đặt nhiều Moduleule và các Moduleule này được sắp xếp theo một trật tự có thể thay đổi được. Mỗi Template có kiểu và số lượng vị trí để đặt các Moduleule khác nhau.

Các vị trí cơ bản của Template mẫu
  • Top: Vị trí này thường được dùng để đặt các Module nào muốn hiển thị ở trên, trong Template này vị trí Top được đặt Module Newsflash.
  • Left: Vị trí nay thường dùng để đặt các Module Menu như: Main Menu, User Menu, Orther Menu...
  • Right: Vị trí này thường dùng cho các chức năng phụ của trang web và là nơi đặt các Logo quảng cáo.
  • Banner: Vị trí này được đặt các Banner quảng cáo.
  • User1: Vị trí này thường được đặt Module Latest News (các tin mới nhất)
  • User2: Vị trí này thường được đặt Module Popular (các tin được xem nhiều nhất)
  • User3: Vị trí này thường được đặt Module Top Menu (các Menu đặc biệt đặt ở vị trí này để người dùng dễ tìm thấy)
  • User4: Vị trí này thường được đặt Module Search (công cụ tìm kiếm)
  • Content: Vị trí lớn nhất và thường nằm chính giữa Template gọi là Main Body, nơi đây là vị trí của các Component hiển thị phần nội dung chính của trang Web.
Hình ảnh

Cách cài đặt Template cho trang web (Front-end)
  • Tải Template được đóng gói dưới dạng tập tin nén về máy.
  • Log-in vào Admin.
  • Chọn Menu Installer -> Template - Site để truy cập vào phần cài đặt Template cho trang web.
Hình ảnh
  • Trong Install new Template [ Site ] chọn Browse, chọn File Template muốn cài đặt, nhấn Open và sau đó nhấn Upload File & Install.
Hình ảnh
  • Nhấn Continue khi được báo Upload Template - Success.
Hình ảnh

Chọn template làm mặc định cho trang web
  • Trong Template Manager [ Site ] chọn Template vừa được cài đặt và nhấn Default để chọn làm Template mặc định cho các trang Web (Front-end).
Hình ảnh
  • Bây giờ trang Web của bạn đã chuyển sang Template mới,
Joomla! cho phép cài đặt nhiều Template và chọn cho mỗi Menu (trang) một Template khác nhau bằng cách chọn Template và nhấn Assign sau đó chọn Menu nào muốn áp dụng Template này.

Có rất nhiều trang Web cho tải Template miễn phí, bạn hãy dùng công cụ tìm kiếm với từ khóa "free Template for Joomla", tuy nhiên các Template miễn phí này thường đơn giản và có những hạn chế nhất định, để có được một Template như ý thì thông thường phải chỉnh sửa nhiều thứ trong Template. Bạn cũng có thể chọn mua các Template thương mại được thiết kế rất đẹp và nhận được sự hỗ trợ của tác giả.
https://www.buaxua.vn => Trang web BuaXua.vn
https://www.buaxua.vn/forum => Diễn đàn Hỏi - Đáp BuaXua.vn

Hình đại diện của thành viên
BuaXua
Điều hành viên chính
Điều hành viên chính
Bài viết: 28
Ngày tham gia: 12/09/2010 - 22:54

Cấu trúc Template trong Joomla! 1.0.x

Gửi bài gửi bởi BuaXua » 22/08/2019 - 10:43

Template của joomla! có nhiều nhiều tập tin với các nhiệm vụ riêng và hỗ trợ cho nhau. Bài viết này sẽ trình bày phần nội dung của tập tin index.php, đây là tập tin chính của Tempplate, qua đó bạn sẽ hiểu được cấu trúc và hoạt động của Tempplate trong Joomla!

Tập tin index.php nằm trong thư mục có tên của Tempplate, bạn có thể dùng bất cứ chương trình soạn thảo văn bản đơn giản nào (Notepad, Write...) để mở và chỉnh sửa tập tin hoặc cũng có thể sử dụng chức năng Edit có sẵn trong phần quản lý Template (Template Manager) của Joomla!.

Truy cập vào phần quản lý Template (Template manager)
  • Trong Amin, chọn Site -> Template Manager -> Sites Template.
Hình ảnh
  • Chọn Template cần xem hoặc chỉnh sửa, nhấn Edit HTML. Trong bài này sử dụng Tempplate tên là Madeyourweb, đây là template có sẵn trong Joomla!
Hình ảnh
  • Trong Template HTML Editor sẽ hiện ra nội dung của tập tin index.php.
Nội dung của tập tin index.php

Phần đầu (Head)
  • Dòng lệnh ngăn không cho truy cập trực tiếp vào tập tin này:
Hình ảnh
  • Định nghĩa các tiêu chuẩn của tập tin html:
Hình ảnh
  • Hiển thị các thông số của trang Web như: tên của trang Web, các từ khóa... được thiết lập trong Global Configuration:
Hình ảnh
  • Khởi tạo chương trình soạn thảo văn bản trực quan (WYSIWYG-editor):
Hình ảnh
  • Định nghĩa kiểu nội dung:
Hình ảnh
  • Khai báo các tập tin bảng kiểu CSS cho Template:
Hình ảnh

Phần thân (Body)
  • Vị trí User4.
Hình ảnh
  • Vị trí User3.
Hình ảnh
  • Vị trí đặt Logo của trang web.
Hình ảnh
  • Vị trí đặt Banner quảng cáo.
Hình ảnh
  • Vị trí hiển thị đường dẫn đến trang hiện tại.
Hình ảnh
  • Vị trí cột bên trái (Left).
Hình ảnh
  • Vị trí User1.
Hình ảnh
  • Vị trí User2.
Hình ảnh
  • Vị trí MainBody, đây là phần nội dung chính của trang Web.
Hình ảnh
  • Vị trí cột bên phải (Right) và phía trên bên phải (Top).
Hình ảnh

Phần cuối (Footer)
  • Vị trí cuối trang (Footer) và Debug.
Hình ảnh
https://www.buaxua.vn => Trang web BuaXua.vn
https://www.buaxua.vn/forum => Diễn đàn Hỏi - Đáp BuaXua.vn

Hình đại diện của thành viên
BuaXua
Điều hành viên chính
Điều hành viên chính
Bài viết: 28
Ngày tham gia: 12/09/2010 - 22:54

Cách chỉnh sửa Template cho Joomla! 1.0.x

Gửi bài gửi bởi BuaXua » 22/08/2019 - 10:48

Mặc định trong Joomla! đã có tích hợp sẵn Template, đây là một Template mẫu với một số ít vị trí cơ bản. Nếu muốn trang Web có kiểu dáng đẹp và nhiều vị trí để hiển thị các thành phần mở rộng hơn thì cần phải thay đổi Template khác hoặc sửa lại cho phù hợp.

Sau đây là một số cách sửa Template mặc định rhuk_solarflare_ii trong Joomla! 1.0.x

Cách thay hình ảnh Logo:
  • Mở trang web và xem hình dạng Logo của Template mặc định rhuk_solarflare_ii .
Hình ảnh
  • Tìm tập tin hình ảnh Logo này trong thư mục images của Template rhuk_solarflare_ii đang sử dụng và nhận biết các thông số: tên: header_short.jpg, loại: jpg, kích thước: 635x150 px của tập tin này.
Hình ảnh
  • Sau đó tạo một tập tin hình ảnh Logo mới với các thông số tương tự để thay thế cho Logo cũ.
Hình ảnh
  • Có thể áp dụng cách làm này để thay đổi toàn bộ hình ảnh của Template tùy ý, các hình ảnh này thông thường đều nằm trong thư mục images của Template đang sử dụng.
Cách tạo thêm vị trí hiển thị Module:
  • Kiểm tra các vị trí hiện có của Tempale bằng cách thêm tham số /?tp=1 vào dòng địa chỉ.
Hình ảnh
  • Truy cập vào Menu Site Templates trong phần Quản trị (Admin).
Hình ảnh
  • Trong Template Manager [ Site ] chọn Template muốn sửa (rhuk_solarflare_ii) và nhấn nút Edit HTML
Hình ảnh
  • Trong cửa sổ Template HTML Editor, tìm vị trí MainBody như trong hình:
Hình ảnh
  • Thêm các đoạn mã để tạo vị trí Module mới là user7 nằm phía dưới MainBody như trong hình:
Hình ảnh
  • Sau khi sửa xong nhấn vào nút Save để lưu các thay đổi lại.
  • Do vị trí này đãđươợc gán iduser7 (có thể thay đổi tùy ý) nên nếu muốn chỉnh sửa các thông số (chiều rộng, chiều cao, font chữ,...) cho vị trí này thì tiếp tục chọn Template rhuk_solarflare_ii và nhấn nút Edit CSS.
Hình ảnh
  • Thêm đoạn mã như trong hình vào phía cuối để định dạng cho vị trí User7.
Hình ảnh
  • Bây giờ Template đã có thêm 1 vị trí Module mới là user7.
Hình ảnh

Cách tạo thêm vị trí hiển thị Module trong phần Mainbody:
  • MainBody là vị trí hiển thị phần nội dung chính (Component) của trang Web, các Module được đặt trong vị trí này sẽ hiển thị chung với phần nội dung chính.
  • Truy cập vào Menu Site Templates trong phần Quản trị (Admin).
  • Trong Template Manager [ Site ] chọn Template muốn sửa (rhuk_solarflare_ii) và nhấn nút Edit HTML
  • Trong cửa sổ Template HTML Editor, tìm đoạn mã như trong hình bên dưới.
Hình ảnh
  • Thêm 2 vị trí Module đặt tên là user5 nằm phía trên và user6 nằm phía dưới phần nội dung chính bằng cách sửa lại như trong hình.
Hình ảnh
  • Sau khi sửa xong nhấn vào nút Save để lưu các thay đổi lại. Bây giờ Template đã có thêm 2 vị trí Module mới là user5user6.
Hình ảnh

Lưu ý:
  • Nếu các đoạn mã không nằm ngay hàng cũng không sao, chỉ cần đúng cú pháp là được.
  • Phần Edit HTML sẽ sửa đổi tập tin index.php nằm trong thư mục của Template đang sử dụng và Edit CSS sẽ sửa đổi tập tin template_css.css nằm trong thư mục css của Template đang sử dụng . Có thể mở và sửa trực tiếp các dòng mã trong các tập tin đó.
  • Ngoài tên của các vi trí mặc định trong Template, Joomla! 1.0.x còn có sẵn các tên từ user1 -> user9 để đặt cho các vị trí khi cần thêm vào, nếu đặt tên khác thì phải khai báo thêm tên này trong phần Site -> Template manager -> Module Positions.
https://www.buaxua.vn => Trang web BuaXua.vn
https://www.buaxua.vn/forum => Diễn đàn Hỏi - Đáp BuaXua.vn

Hình đại diện của thành viên
BuaXua
Điều hành viên chính
Điều hành viên chính
Bài viết: 28
Ngày tham gia: 12/09/2010 - 22:54

Các kiểu CSS trong Joomla! 1.0.x

Gửi bài gửi bởi BuaXua » 22/08/2019 - 10:51

Joomla! đã được định nghĩa sẵn các kiểu CSS và cho phép người dùng can thiệp vào để thay đổi, chỉnh sửa cách trình bày của trang Site. Mỗi Template đều có File template.css, đây là File chứa các thông số CSS của Template và Joomla!

Sau đây là các kiểu CSS cơ bản trong Joomla! 1.0.x

Hình ảnh

Hình ảnh
https://www.buaxua.vn => Trang web BuaXua.vn
https://www.buaxua.vn/forum => Diễn đàn Hỏi - Đáp BuaXua.vn

Đã khóa
  • Các chủ đề liên quan
    Trả lời
    Xem
    Bài viết mới nhất

Quay về