147

Hướng dẫn sử dụng Joomla 3.0

Embed Size (px)

DESCRIPTION

Hướng dẫn sử dụng Joomla 3.0

Citation preview

Page 1: Hướng dẫn sử dụng Joomla 3.0
Page 2: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

2

Những người thực hiện

Người viết

Đào Ngọc Ánh Bùi Thị Mơ

Biên tập viên

Nguyễn Thị Thanh Huyền Bùi Anh Tuấn Bùi Huy Thắng

Thiết kế đồ họa

Hồ Huy Tùng Lưu Minh Sơn

Dịch giả

Tô Nam Phong

Ngày xuất bản: Tháng 7 năm 2013

Ấn bản thứ ba.

Page 3: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

3

Page 4: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

4

Nội dung

Những người thực hiện ................................................................................................................................... 2

Nội dung ............................................................................................................................................................... 4

Tính năng của Joomla! 3.x .............................................................................................................................. 6

Bước 1: Làm quen với Joomla! CMS ........................................................................................................... 8

Vậy Joomla! CMS là gì? ............................................................................................................................................... 8

Những thành phần chính của Joomla? ................................................................................................................. 12

Bước 2: Cài đặt Joomla! 3.x trên localhost .............................................................................................. 30

Cài đặt XAMPP .............................................................................................................................................................. 31

Cài đặt Joomla! ............................................................................................................................................................. 35

Bước 3: Tạo nội dung cho website Joomla ............................................................................................. 37

Chuẩn bị cấu trúc nội dung ....................................................................................................................................... 37

Tạo nội dung .................................................................................................................................................................. 38

Quản lý nội dung của bạn với JSN PowerAdmin ................................................................................................ 54

Chỉnh sửa bài viết đẹp hơn ....................................................................................................................................... 55

Bước 4: Tùy chỉnh giao diện website của bạn với Joomla! template ............................................... 81

Joomla! template là gì? ............................................................................................................................................... 81

Chọn Joomla! template ............................................................................................................................................... 83

Cài đặt Joomla! template ............................................................................................................................................ 85

Bước 5: Sắp xếp modules ở các vị trí ........................................................................................................ 90

Joomla! module và Joomla! position là gì? ......................................................................................................... 90

Thêm mới một module .................................................................................................................................................. 94

Bước 6: Mở rộng chức năng của website với Joomla! extensions ................................................ 100

Làm việc với thành phần mở rộng (Extensions) mặc định “Contacts” ...................................................... 101

Thêm mới Extension ................................................................................................................................................... 112

Bước 7: Quản lý website với JSN PowerAdmin .................................................................................... 117

Quản lý website Joomla! với Site Manager ......................................................................................................... 120

Truy cập nhanh các mục bất kỳ với Spotlight Search ..................................................................................... 133

Quản lý các kiểu template với Template Style Manager .................................................................................. 135

Những tính năng khác .............................................................................................................................................. 139

Cấu hình JSN Power Admin .................................................................................................................................... 143

Kết luận............................................................................................................................................................. 146

Tham khảo ....................................................................................................................................................... 147

Page 5: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

5

Dịch giả chú thích: Một số từ hay cụm từ được để nguyên không dịch, vì nếu dịch sang tiếng Việt có thể sẽ

khiến bạn thấy khó hiểu hơn.

Page 6: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

6

Tính năng của Joomla! 3.x

Joomla! 3.x là phiên bản mới nhất của Joomla! Phiên bản mới này bao gồm nhiều điều thú vị với rất nhiều cải

tiến mới mẻ. Bạn có thể lướt qua 6 tính năng tuyệt vời của Joomla! 3.x mang lại trong “Infographic” bên dưới.

Để tìm hiểu thêm thông tin về các tính năng của Joomla! 3.x, bạn có thể truy cập http://www.joomla.org/3/en.

6 tính năng tuyệt vời của Joomla! 3.x

Page 7: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

7

Dịch giả chú thích:

Responsive Layout: Trong thiết kế Web (chính xác là front-end development) thì Responsive Layout chỉ là một

phần của Responsive Web Design. Vậy Responsive Layout là gì? Về cơ bản thì Responsive Layout là một cấu

trúc cơ bản của một website nhưng đảm bảo hiển thị được tốt trên tất cả các loại màn hình khác nhau (có thể là

màn hình Desktop, màn hình Tablet (Ipad, Kindle) hay các thiết bị di động như iphone, android, etc)

Twitter Bootstrap (Bootstrap Framework) được tạo và phát triển bởi Twitter gồm các mã CSS + HTML cơ bản

cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website. Xem trang

chủ: http://twitter.github.io/bootstrap/ hay trang Showcases: http://builtwithbootstrap.com

Page 8: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

8

Bước 1: Làm quen với Joomla! CMS

Trước đây nếu bạn muốn xây dựng một website, chỉ có một sự lựa chọn là thuê một công ty thiết kế web chuyên

nghiệp làm cho bạn và sau đó bạn hoàn toàn phụ thuộc vào họ để duy trì và cập nhật website này. Nhưng bây giờ,

với sự phát triển mạnh mẽ của phần mềm mã nguồn mở, bạn có thể tự xây dựng một website dễ dàng bằng cách sử

dụng một hệ quản trị nội dung CMS (Content Management System). Có nhiều hệ quản trị CMS để bạn lựa chọn,

nhưng thích hợp nhất để xây dựng một website trung bình hoặc nhỏ là Joomla!

Trong phần này bạn sẽ nắm được những thông tin sơ lược về Joomla! và các thành phần của nó.

Vậy Joomla! CMS là gì?

Joomla! logo

Joomla! CMS là một hệ quản trị nội dung mã nguồn mở cho phép bạn tạo và quản lý các website. Trển các

website này, bạn có thể chỉnh sửa:

1. Nội dụng website như chữ, hình ảnh, videos, v.v.

2. Giao diện website bằng cách dùng các template (Joomla Templates)

3. Chức năng website bằng cách dùng các extension (Joomla Extensions)

Hệ thống website Joomla! gồm hai phần : Front-end (Phần Mặt trước - những gì người dùng chung thấy) và

Back-end (Phần mặt sau - những gì mà người quản trị thấy).

Page 9: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

9

Phần front-end

Front-end là những gì mà mọi người xem được khi họ truy cập website của bạn. Thông thường một mẫu thiết

kế bao gồm những mục cơ bản như logo, thanh danh mục (menu bar), cột bên trái, cột bên phải (side column)

và khối văn bản.

Phần front-end của website

Page 10: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

10

Xem một bài viết tại front-end

Phần back-end

Phần back-end là vùng quản trị - Nơi mà bạn có thể điều chỉnh website của bạn. Những thành viên có quyền

Administrator có thể truy cập vào đây thông qua một trang đăng nhập đặc biệt.

Phần back-end của Joomla!

Page 11: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

11

Chỉnh sửa một bài viết trong back-end

Page 12: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

12

Những thành phần chính của Joomla?

Bây giờ, hãy khám phá những thành phần chính của Joomla!

Nội dung

Trong Joomla!, nội dung bao gồm những bài viết, chuyên mục hay media.

Bài viết (Articles)

Bài viết là khối nội dung chính của một website Joomla!. Trong phần front-end bạn có thể dễ dàng nhận ra một

bài viết là một đoạn văn bản có hoặc không có hình ảnh, được trình trong vùng nội dung chính.

Bài viết “Getting started”

Tại back-end, các bài viết được quản lý tromg danh mục con “Article Manager”. Bạn có thể truy cập vào

đây thông qua danh mục “Content” => “Article Manager”.

Page 13: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

13

Phần “Article Manager”

Tại đây bạn có thể tạo bài viết mới, chỉnh sửa chúng, chọn hiển thị hay ẩn bài viết, v.v.

Chuyên mục (Categories)

Chuyên mục giúp bạn tổ chức các bài viết tiện lợi và khoa học hơn. Bạn có thể hình dung các chuyên mục

giống như là những thư mục (folders) trong máy tính bao gồm những tập tin (files). Ví dụ, một chuyên mục

“Sản phẩm” có thể chứa tất cả các bài viết về sản phẩm của bạn. Hay, một chuyên mục “Về chúng tôi” có thể

chứa tất cả các bài viết có nội dung như “Giới thiệu công ty”, “Tầm nhìn & Sứ Mệnh”, “Hội đồng quản trị”,

v.v.

Trong back-end, chuyên mục được quản lý trong danh mục con “Category Manager”. Bạn có thể truy cập vào

đây thông qua danh mục “Content” => “Category Manager”.

Phần “Category Manager”

Page 14: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

14

Tại đây, bạn có thể tạo chuyên mục mới, chỉnh sửa chúng, chọn hiển thị hay ẩn chuyên mục, v.v.

Thẻ bài viết (Tags)

Các thẻ bài viết (Tags) là các từ hoặc cụm từ được gán vào một đoạn thông tin (bài viết, blog post...). Nó mô tả

nội dung của mục đó. Ví dụ, bạn có thể thêm các thẻ như “Joomla! templates” và “Joomla! extensions” vào

bài viết “Getting Started with Joomla!”.

Các mục có những thẻ bài viết giống nhau sẽ được nhóm lại cùng nhau, vì vậy mọi người có thể tìm kiếm

chúng dễ dàng hơn. Bạn có thể tạo một danh mục (hay một module) để hiển thị tất cả các thẻ bạn đã tạo.

Trong phần quản trị back-end, các thẻ bài viết được đặt trong bảng chỉnh sửa bài viết (Article Manager). Bạn

vào phần “Content” => “Article Manager”, sau đó đi tới các bài viết riêng biệt để gán thẻ bài viết.

Chức năng Thẻ bài viết (“Tag”) giúp bạn gán từ khóa vào các mục riêng biệt

Để quản lý tất cả thẻ bài viết của bạn, bạn có thể truy cập vào “Component” => “Tags”

Page 15: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

15

Vào “Components” -> “Tags” để quản lý thẻ bài viết của bạn

Page 16: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

16

Media

Hiểu theo cách đơn giản, media là những thứ không phải văn bản mà bạn có thể đưa vào trong phần nội dung.

Nó không chỉ là hình ảnh, mà còn có thể là các videos hay những thành phần “đa phương tiện” khác.

Media được quản lý bằng danh mục con “Media Manager”. Bạn có thể truy cập tới đây thông qua danh mục

“Content” => “Media Manager”.

Phần quản lý “Media Manager”

Tại đây, bạn có thể tạo các thư mục media mới, đưa các tập tin lên, v.v. Chúng ta sẽ thảo luận chi tiết cách sử

dụng Media Manager nhiều hơn trong chương “Bước 3: Tạo nội dung cho website Joomla”.

Page 17: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

17

Danh mục (Menus)

Danh mục giúp khách truy cập website có thể di chuyển tới các trang khác nhau trong website của bạn. Bạn có

thể tạo nhiểu danh mục và cấu hình chúng hiển thị ở các vị trí khác nhau trong website, ví dụ trên đầu trang

hoặc bên phải, bên trái website.

Một danh mục trên webiste

Trong ví dụ trên, người quản trị tạo một danh mục là “Home” với nhiều danh mục con bên trong nó như

“Getting Started”, “Using Joomla!”, etc.

Để quản lý danh mục, bạn truy cập vào phần quản trị danh mục qua “Menus” => “Menu Manager”.

Page 18: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

18

Mục “Menu Manager” trong phần quản trị Joomla!

Trong “Menu Manager” bạn có thể tạo danh mục và các danh mục con để liên kết các thành phần trên website.

Khi đã tạo xong một danh mục, bạn tạo một module danh mục để hiển thị nó trên front-end.

Page 19: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

19

Thành viên (Users)

Joomla! cho phép nhiều thành viên đăng ký trong website của bạn. Tất cả những thành viên này được sắp xếp

vào từng nhóm với các quyền truy cập khác nhau. Mặc định có những nhóm thành viên như “Author”,

“Editor”, “Publisher”, etc. Ví dụ:

Thành viên trong nhóm“Administrator” có thể truy cập cả back-end và front-end.

Thành viên trong nhóm “Registered” chỉ có thể truy cập vào phần front-end. Họcó thể quản lý các thành

viên, các nhóm thành viên và các quyền truy cập tương ứng trong danh mục “Users” => “User Manager”.

Danh mục “Users” trong back-end

Page 20: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

20

Các thành phần mở rộng (Extensions)

Các thành phần mở rộng của Joomla! (extentions) là những phần mềm đặc biệt được viết để để tích hợp vào

Joomla! nhằm tăng cường cũng như mở rộng chức năng cho website. Ví dụ, bạn cần cài đặt extension.nếu bạn

muốn có một slideshow hình ảnh, bộ sưu tập video, hay một biểu mẫu liên hệ với các chức năng nâng phong

phú hơn.

Mặc định gói cài Joomla! đã cung cấp cho bạn khá nhiều loại Extensions cho những nhu cầu cơ bản. Nếu bạn

muốn sử dụng nhiều extension hơn, bạn có thể truy cập vào trang Joomla! Extension Directory. Đây là trang

chính thức của Joomla! Extention được quản lý bởi một đội ngũ nòng côt của Joomla!.

Joomla! Extensions Directory

Có 5 loại extensions cơ bản, đó là: components, modules, plug-ins, templates và languages. Mỗi một loại

extensions này đều xử lý một chức năng cụ thể.

Page 21: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

21

Components

Component là loại extension phức tạp nhất. Đây được xem như một ứng dụng thực hiện một số nhiệm vụ nhất

định và hiển thị những nội dung đặc biệt trên website của bạn. Như đã đề cập ở trên, một bộ sưu tập video là

một ví dụ của một component. Nó cũng có thể là một hệ thống mua bán trực tuyến, hệ thống đặt phòng trực

tuyến, diễn đàn, v.v.

Component “Newsfeeds” tại front-end

Nội dung được tạo ra bởi một component và được hiển thị trong vùng nội dung chính. Trong ví dụ ở trên, bạn

có thể nhìn thấy một danh sách nguồn cấp dữ liệu (feed) được tạo ra bởi component“Newsfeeds”. Tất cả các

components nằm trong phần “Components” của Joomla!

Page 22: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

22

Danh mục “Components” trong phần back-end

Mặc định, gói Joomla! cung cấp các components: “Banners”, “Contacts”, “Messaging”, “News

Feeds”, “Redirect”, “Search”, “Smart Search”, “Tags” và “Web links”.

Page 23: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

23

Modules

Modules cũng đóng vai trò như những components nhưng ở quy mô nhỏ hơn. Modules thực hiện những chức

năng đơn giản và hiển thị nội dụng như một khổi thông tin (block) nhỏ ở trên website.

Những modules hiển thị trong front-end

Một số modules thường thấy là module tìm kiếm (search box), module đăng nhập (login form), module danh

mục (menu module), module hiển thị thông tin cuối website (footer copyright), v.v. Trong nhiều trường hợp,

các modules làm việc nhằm liên kết với các components để hiển thị nội dung. Ví dụ, ta sử dụng môt

component mua bán trực tuyến để quản lý sản phẩm và một module để hiển thị những sản phẩm mới trên

Page 24: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

24

website.

Tất cả các modules được quản lý thông qua “Extensions” => “Module Manager”.

Danh mục con quản lý “Module Manager” trong phần back-end

Page 25: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

25

Templates

Template điểu khiển việc thiết kế đồ họa trên website của bạn. Nó quyết định bố cục website, màu sắc, kiểu

chữ cùng nhiều thành phần khác nhằm tạo nên nét riêng cho website của bạn.

Thông thường, một template bao gồm 3 thành phần sau:

Các yếu tố đồ họa tĩnh như ảnh nền, các chi tiết trang trí, logo, v.v.

Vùng nội dung chính trình bày dữ liệu được tạo ra bởi các components.

Nhiều vị trí module để hiển thị nội dung được trình bày bởi các modules, trong những vị trí nhất định.

Ví dụ ảnh nền (background), vị trí của module (module positions) và phần nội dung chính (body)

Page 26: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

26

Trong back-end, bạn có thể quản lý templates thông qua “Extensions” => “Template Manager”.

“Template Manager”

Mặc định, Joomla! 3.x có sẵn hai front-end template là: “Protostar” và “Beez3”. Ngoài ra có hàng ngàn

templates miễn phí cũng như phải trả phí cho bạn lựa chọn. Đây là một danh sách các template: top 10 Joomla!

3.0 templates for users.

Page 27: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

27

Dưới đây là một vài ví dụ về Joomla template:

JSN Pixel

JSN Boot

Page 28: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

28

Plug-ins

Plug-ins được thiết kế để hiển thị nội dung bên trong các component và module. Plugin cũng có thể thực hiện

một số công việc “ngầm” (một hành động hay một thao tác) trong những thời điểm nhất định khi tải website.

Bạn có thể hiểu rằng plug-ins giúp tương tác với hệ thống Joomla! linh hoạt hơn.

Hai plugins“Voting” và “Read more” trong front-end

Ví dụ, ở hình trên bạn có thể nhìn thấy plug-in Đánh giá (“Voting”) và plug-in Đọc thêm (“Read more…”)

trong những bài viết. Các plug-ins được quản lý qua “Extensions” => “Plug-in Manager”.

“Plug-in Manager”

Trong gói cài đặt Joomla! 3.x, plug-ins được chia vào trong 11 chuyên mục là: “authentication”, “captcha”,

“content”, “editor”, “editors-xtd”, “extension”, “finder”, quickicon”, “search”, “system” và “user”.

Page 29: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

29

Languages

Gói ngôn ngữ (Languages) cho phép bạn chạy website với nhiều ngôn ngữ khác nhau. Ví dụ, nếu bạn muốn sử

dụng tiếng Pháp cho website Joomla! của bạn trong cả hai phần front-end / back-end, bạn chỉ cẩn truy cập vào

“Extension Manager” => “Language Manager”. Sau đó nhấn vào nút “Install languages”, chọn French rồi

ấn nút “Install”.

“Language Manager”

Tất cả các gói ngôn ngữ được cài đặt sẽ hiển thị trong phần “Extensions” => “Language Manager” tại back-

end.

>>> Bước kế tiếp

Bây giờ bạn đã có được một số kiến thức về Joomla là gì rồi phải không, hãy thực hành luôn nhé. Cài đặt

Joomla! 3.x trên localhost và chạy thử nào.

Page 30: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

30

Bước 2: Cài đặt Joomla! 3.x trên localhost

Việc cài đặt Joomla! 3.x trên localhost khá đơn giản; tuy nhiên, nếu đây là lần đầu làm, bạn cần chú ý làm theo

các hướng dẫn để cài đặt cho đúng.

Đầu tiên, ta cần làm rõ khái niệm “Localhost”. Bạn biết đấy, bất kỳ một website nào cũng cần phải được lưu

trữ, sắp xếp trên một web server để hiển thị nội dung đến các users. Thông thường, bạn cần mua một gói

hosting từ nhà cung cấp hosting nào đó như Rackspace hay GoDaddy (Ở VN chúng ta có PaVietnam, Hostvn,

v.v.). Phụ thuộc vào gói hosting mà bạn chọn, nhà cung cấp hosting sẽ cài đặt một web server cho bạn trên

server của họ và cho phép người dùng truy cập đến nó. Một localhost về cơ bản giống với một web server; cái

khác ở đây là nó được cài đặt trên máy tính của các bạn.

Tuy nhiên, để chạy Joomla!, ngoài web server, bạn còn cần hai thứ quan trong nữa là: Ngôn ngữ thông dịch

PHP và Cơ sở dữ liệu MySQL. Nghe thì có vẻ phức tạp nhưng may mắn thay chúng ta có một gói phần mềm

là XAMPP đã tích hợp sẵn tất cả những thành phần ở trên.

Nào bây giờ hãy cài XAMPP trên máy tính của bạn.

Page 31: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

31

Cài đặt XAMPP

1. Tải gói cài đặt XAMPP tại địa chỉ http://www.apachefriends.org/en/xampp.html

2. Chạy file cài đặt và làm theo từng bước hướng dẫn, tương tự như các phần mềm thông thường khác.

3. Mở “XAMPP Control Panel Application”, chạy “Apache” và “MySQL”.

Bảng điều khiển chính của XAMPP

Như vậy, localhost đã được cài đặt trên máy tính của các bạn. Bạn hãy kiểm tra bằng cách gõ địa chỉ:

“http://localhost” vào trình duyệt. Giao diện của bạn sẽ xuất hiện như hình bên dưới.

Page 32: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

32

Giao diện của XAMPP cho Windows

Page 33: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

33

4. Tạo một cơ sở dữ liệu mới trong phpMyAdmin.

Từ giao diện của XAMPP, chọn phpMyAdmin để tạo một cơ sở dữ liệu mới.

Chọn “phpMyAdmin”

Page 34: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

34

5. Tiếp theo, chọn “Database” trong thanh công cụ hiển thị như hình bên dưới

Chọn “Database”

6. Tiếp theo, điền tên cơ sở dữ liệu và nhấn “Create”

Tạo database

Bây giờ bạn đã sẵn sang để cài đặt Joomla!.

Page 35: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

35

Cài đặt Joomla!

1. Tải gói cài đặt Joomla! 3.x tại http://www.joomla.org/download.html

2. Tạo một thư mục mới có tên là “Joomla3x” trong thư mục “htdocs” của XAMPP. Thông thường nó sẽ

được đặt trong “C:\xampp\htdocs”

3. Giải nén gói cài đặt đã tải về vào trong thư mục “Joomla3x”

4. Gõ vào thanh trình duyệt địa chỉ “http://localhost/Joomla3x”

5. Làm theo các bước cài đặt trong Joomla:

a. Bước 1. Cấu hình chung

Select Language: Chọn gói ngôn ngữ cho riêng bạn từ menu sổ xuống (drop-down menu), ví

dụ, “English (United States)”

Site Name: Điền tên website của bạn

Description: Điền thông tin mô tả cho website

Site Offline: Chọn trạng thái cho website của bạn khi bạn truy cập site: Chọn “Yes” nếu

muốn website “offline” và “No” cho website “online”

Admin Email: Điền thông tin địa chỉ email bạn muốn sử dụng cho website

Admin Username: Điền mặc định là “admin”

Admin Password: Nhập mật khẩu của bạn

Confirm Admin Password: Nhập lại mật khẩu của bạn

Nhấn “Next” để sang bước 2

b. Bước 2. Cấu hình dữ liệu

Database Type: Chọn MySQLi

Host Name: Điền “localhost”

Username: Điền “root”

Password: Để trống

Database Name: Nhập vào tên của cơ sở dữ liệu mà bạn đã tạo trước đó là “Joomla30”

Table Prefix: Để mặc định

Old Database Process: Nhấn “Backup” để sao lưu các bảng từ việc cài đặt hoặc “Remove” để

xóa các bảng

Nhấn “Next” để sang bước 3

c. Step 3. Các cấu hình cuối cùng

Page 36: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

36

Finalization: Bạn có thể chọn việc cài đặt dữ liệu mẫu cho website hoặc không bằng cách

nhấn vào những lựa chọn tương ứng.

Overview: Trong bước này, bạn sẽ đánh giá lại tổng quan toàn bộ thông tin bạn đã cấu hình

trong bước 1. Sau khi kiểm tra, nhấn “Install.”

Khi việc cài đặt hoàn tất, bạn chỉ cần nhấn vào nút “Remove installation folder” để hoàn tất

quá trình cài đặt. Sau cùng, bạn có thể nhấn vào “Site” để xem trang vừa tạo hoặc nhấn vào

“Administrator” để truy cập vùng quản trị dành cho Administrator.

Bây giờ bạn đã cài đặt xong cho mình website Joomla! đầu tiên rồi đó. Không quá khó khăn phải không? Nếu

có bất cứ vấn đề gì trong quá trình cài đặt, bạn có thể thử tìm cho mình câu trả lời từ những nguồn sau:

Diễn đàn chính thức của Joomla!

Diễn đàn Joomla! là một trong những diễn đàn hỗ trợ sôi động nhất (và thân thiện nhất) trên thế giới, đây

cũng là một nơi tuyệt vời để nhận được sự giúp đỡ cũng như gặp gỡ các thành viên Joomla! khác. Có

nhiều câu hỏi và câu trả lời được thảo luận tại đây. Bởi vì chủ đề của chúng ta là Cài đặt Joomla! 3.x,

vậy bạn có thể tìm kiếm sự giúp đỡ và câu trả lời trong chuyên mục “Installation Joomla! 3.x”.

Dịch vụ hỗ trợ Joomla! (http://joomla.cmshelplive.com/)

Đây là website cung cấp cho bạn dạng dịch vụ “Joomla! theo yêu cầu”. Tất nhiên là bạn phải trả tiền cho

những dịch vụ rồi, nhưng các vấn đề của bạn sẽ được giải quyết. bởi những chuyên gia Joomla!.

Những nguồn website học Joomla! khác

Có nhiều website hữu ích mà bạn có thể sử dụng để tự học về Joomla!, dưới đây là một vài ví dụ:

o http://docs.joomla.org/Beginners

o http://www.joomlatutorials.com/

o http://www.joomlablogger.net/

o http://www.ostraining.com/

>>> Bước tiếp theo

Cài đặt Joomla! 3.x thành công trên localhost là việc đầu tiên bạn cần làm trước khi bắt đầu với website

Joomla! Website của bạn sẵn sang rồi, bây giờ chúng ta tiến hành tạo nội dung cho nó .

Page 37: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

37

Bước 3: Tạo nội dung cho website Joomla

Thành phần quan trọng nhất của mỗi website đó là nội dung. Trong bước này, bạn sẽ:

1. Chuẩn bị cấu trúc nội dung

2. Tạo các chuyên mục và bài viết

3. Tạo một danh mục

4. Quản lý nội dung của bạn với JSN PowerAdmin

Chuẩn bị cấu trúc nội dung

Tạo một nội dung tương tự việc sắp xếp các sản phẩm vào trong một cửa hang tạp hóa vậy. Với Joomla!, các

bài viết giống như những sản phẩm, các chuyên mục thì giống như những kệ đựng sản phẩm và danh mục thì

giống như lối đi để tìm đến những cái kệ đó . Giả dụ bây giờ bạn có một website bán hàng; cấu trúc của nội

dung website có thể hình dung như thế này:

1. About (Giới thiệu)

a. About my site (Giới thiệu website)

b. How to purchase/order products (Mua hàng thế nào)

c. How to make payment (Thanh toán)

2. News (Tin tức)

a. Latest news (Tin tức mới nhất)

b. Arrivals (Hàng mới về)

c. Sale (Hàng giảm giá)

d. Coupons (Phiếu giảm giá)

e. Promotion (Khuyến mãi)

3. Support (Hỗ trợ)

a. Hotline information (Hỗ trợ khách hàng qua điện thoại)

b. Online customer services (Hỗ trợ khách hàng trực tuyến)

c. Contact us (Liên lạc)

Page 38: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

38

Tạo nội dung

Sau khi chuẩn bị cấu trúc nội dung của website trên giấy, bạn có thể tiến hành tạo nội dung đó trong Joomla!.

Hãy bắt đầu với việc tạo các chuyên mục.

Các chuyên mục

1. Vào “Content” => “Category Manager” và nhấn “Add New Category”

Thêm một chuyên mục mới

2. Tiếp theo, điền tên chuyên mục là “About” và nhấn “Save & Close” trên thanh công cụ.

Nhập thông tin cho chuyên mục

Page 39: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

39

Sau đó, ban có thể nhìn thấy chuyên mục “About” bạn mới tạo nằm bên trong phần “Category Manager”.

Chuyên mục “About”

Bạn có thể tạo tất cả các chuyên mục còn lại theo cách này.

Page 40: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

40

6 chuyên mục mới đã được tạo

Sau khi hoàn tất việc tạo các chuyên mục, hãy tạo các bài viết.

Page 41: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

41

Bài viết

Hãy thêm mới một bài viết vào trong chuyên mục “About”.

1. Vào “Content” => “Article Manager” và nhấn “Add New Article”

Thêm mới bài viết

2. Tiếp theo, bạn điền thông tin vào các trường sau:

Title: Nhập vào tiêu đề “About my site”.

Category: Chọn chuyên mục “About” trong danh sách.

Article text: Nhập nội dung của bài viết.

Bây giờ, chúng ta chỉ nhập một bài viết đơn giản với chữ. Tiếp đến trong phần “Chỉnh sửa bài viết

đẹp hơn” chúng ta sẽ biết cách tạo các bài viết phức tạp hơn (Với hình ảnh, liên kết, v.v.)

Page 42: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

42

3. Nếu bạn muốn một bài viết hiển thị ở ngoài trang đầu, bạn đặt thiết lập giá trị tham số “Featured” là

“Yes”. Việc này sẽ làm bài viết hiện lên trên trang chủ của website.

Chọn “Yes”để hiển thị bài viết hiện lên trên trang chủ

Nếu bạn muốn thêm thẻ bài viết, hãy điền các thẻ đó vào tham số “Tags”.

Thêm thẻ bài viết

Page 43: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

43

4. Sau đó, nhấn nút “Save & Close” trên thanh công cụ để lưu lại bài viết mới tạo.

Nhấn nút “Save & Close” để lưu bài viết

Bây giờ bạn đã có một bài viết mới trong phần “Article Manager”.

Bài viết mới tạo “About my site”

Làm tương tự với hai bài viết “How to purchase/order products” và “How to make payment” trong chuyên

mục “About my site”.

Page 44: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

44

Ba bài viết mới tạo

Bây giờ bạn đã hoàn tất quy trình tạo bài viết, chỉ còn bước cuối cùng là tạo các danh mục với các liên kết đến

các bài viết này.

Page 45: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

45

Menus

Trong Joomla!, một danh mục(Menu) là một bộ các liên kết tới các thành phần đã có, như các bài viết bạn vừa tạo

chẳng hạn. Tất cả các danh mục trong back-end được đặt trong phần “Menus”. Theo mặc định, một danh

mục“Main Menu” được cài đặt sẵn trong Joomla!.

“Main Menu” được trình bày tại front-end

Hãy tạo mới một danh mục con trong danh mục “Main Menu”.

1. Nhấn vào “Main Menu” trong phần “Menus” sổ xuống như hình dưới.

Page 46: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

46

Nhấn “Main Menu”

2. Tiếp theo, nhấn vào “New” để tạo mới một danh mục con mới.

Nhấn vào “New” để tạo một danh mục con mới

3. Sau đó, nhấn “Select” để chọn loại danh mục con.

Chọn loại danh mục

Page 47: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

47

4. Kết quả là môt màn hình pop-up được hiển thị. Bạn có thể tạo liên kết đến nhiều thành phần như

“Contacts”, “Articles”, “Smart Search”, “Newfeeds”, v.v. Trong trường hợp này bạn cần tạo một liên

kết tới một bài viết, vì vậy hãy nhấn “Single Article”.

Chọn loại danh mục là “Single Article”

Page 48: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

48

5. Tiếp theo, bạn cần điền thông tin vào trường “Menu Title”, ví dụ“About my site”.

Nhập tiêu đề danh mục con

6. Sau đó, bạn chọn một bài viết mà bạn muốn hiển thị với danh mục đó. Trong phần bên phải ở hình

dưới, bạn chọn “Select” để chọn một bài viết.

Chọn nút “Select”

Page 49: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

49

7. Một màn hình pop-up sẽ hiển thị. Chọn bài viết “About my site”.

Nhấn vào bài viết mà bạn muốn lựa chọn

8. Nhấn “Save & New” để tạo tiếp hai danh mục nữa cho hai bài viết là “How to purchase/order products”

và “How to make a payment”.

Nhấn “Save & New”

Page 50: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

50

Sau khi tạo xong những menus này, bạn đã có 3 danh mục con mới.

Có 3 danh mục con mới đã được tạo

Page 51: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

51

Thẻ bài viết

Bạn có thể tạo một danh mục hay Module mới để hiển thị thẻ bài viết của bạn.

Tạo một Danh mục thẻ bài viết (Tag Menu): Vào “Menus” => “Menu Manager” => “Add New

Menu” sau đó chọn loại “Tags”.

Tạo một menu mới để hiển thị các thẻ bài viết của bạn

Tạo một Module thẻ bài viết (Module Tag): Vào“Module Manager” => “New” => chọn loại “Popular

Tags”.

Tạo một module mới để hiển thị các thẻ bài viết

Page 52: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

52

Bây giờ bạn có thể ra ngoài front-end để xem kết quả.

Các danh mục con mới trong Main Menu

Page 53: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

53

Khi bạn nhấn vào mỗi một liên kết thì bạn sẽ thấy một bài viết tương ứng mà bạn đã gán trước đó.

Bài viết“About my site”

Bây giờ bạn có thể lặp lại các bước làm như trên để tạo liên kết đển tất cả các bài viết cần thiết.

Page 54: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

54

Quản lý nội dung của bạn với JSN PowerAdmin

Khi làm việc với Joomla!, nếu bạn có quá nhiều danh mục, bài viết hay modules, bạn có thể thấy khó khăn khi

tìm kiếm những thứ này. Có một extension miễn phí giúp bạn giải quyết vấn đề này một cách nhanh chóng và

tiện lợi - JSN PowerAdmin.

JSN PowerAdmin sẽ giúp bạn:

1. Tìm kiếm một cách nhanh chóng các mục trong back-end với Spotlight Search. Bạn có thể tiết kiệm thời

gian trong khi tìm kiếm các mục cần chỉnh sửa.

2. Điều khiển nội dung website chỉ trên một trang với Site Manager. Ở đây, người quản trị

(Administrators) có thể chỉnh sửa một bài viết hoặc quản lý các modules và các danh mục với tính năng

kéo thả rất tiện lợi.

Quản lý website với JSN PowerAdmin

Extension này được người dùng Joomla! trên JED đánh giá cao với hơn 30+ bình chọn và hơn 30+ đánh giá.

Tải JSN PowerAdmin miễn phí - Xem video giới thiệu JSN PowerAdmin.

Page 55: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

55

Chỉnh sửa bài viết đẹp hơn

Vậy là bạn đã biết cách tạo các bài viết. Giờ thì chúng ta học nâng cao hơn và tạo các bài viết đẹp, hữu ích

hơn. Có nhiều cách để bạn làm điều này, chẳng hạn như: định dạng văn bản, thêm hình ảnh, liên kết, v.v.

Định dạng văn bản

Nếu bạn đã từng làm việc với Microsoft Word hoặc bất cứ trình soạn thảo nào khác thì kiểu định dạng văn bản

trong Joomla! sẽ không còn xa lạ với bạn nữa. Tuy nhiên, nó đơn giản hơn so với Microsoft Word vì nó chỉ

cung cấp một vài tùy chỉnh định dạng văn bản đơn giản mà thôi.

Bạn truy cập tới Article Manager và mở bài viết“About my site”. Bây giờ hãy chú ý đến vùng soạn thảo. Đây

là nơi mà bạn chỉnh sửa bài viết của chính mình:

Chỉnh sửa bài viết

Hãy nhìn kỹ các định dạng bên dưới – hầu hết các biểu tượng đều rất quen thuộc, với những biểu tượng để tạo

dòng chữ của bạn đậm hơn, nghiêng hay gạch dưới và các biểu tượng để chỉnh sửa văn bản của bạn. Hãy chọn

đoạn văn bản mà bạn muốn định dạng sau đó nhấn vào biểu tượng thích hợp.

Các nút định dạng văn bản Joomla!

Page 56: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

56

Bạn có thể tạo những tựa đề (headings) ở các định dạng khác nhau bằng cách nhấn vào mũi tên chỉ xuống trong

ô “paragraph”, rồi nhấn vào tựa đề tương ứng sổ xuống, từ “Heading 1” tới “Heading 6”.

Chọn định dạng tiêu đề cho đoạn văn

Bạn có thể thấy dòng chữ này lớn hơn:

Đoạn văn với định dạng Heading 1

Page 57: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

57

Thêm hình ảnh

Trước khi thêm các hình ảnh vào các bài viết, bạn nên tổ chức và sắp xếp chúng vào trong một thư mục đặc biệt.

Việc này giúp cho việc tìm kiếm và quản lý chúng dễ dàng hơn nhiều.

Tạo các thư mục hình ảnh

1. Vào “Content” => “Media Manager”, sau đó nhấn “Create Folder” trên thanh công cụ.

2. Nhập tên thư mục và nhấn “Create Folder”.

Tạo thư mục mới để lưu trữ hình ảnh

Bây giờ bạn đã có một thư mục mới trong Media Manager.

Thư mục“aboutmysite” trong Media Manager

Page 58: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

58

Tải lên hình ảnh

Bây giờ bạn hãy tải những hình ảnh vào trong thư mục “aboutmysite” mà bạn vừa tạo.

1. Nhấn vào thư mục “aboutmysite”, sau đó nhấn vào nút “Upload” màu xanh.

Nhấn “Upload”

2. Tiếp theo, nhấn “Choose files” để duyệt các tập tin hình ảnh.

Chọn các tập tin

3. Chọn tập tin hình ảnh bạn muốn tải lên. Bây giờ bạn chỉ có thể chọn một tập tin cho mỗi lần tải lên.

Chúng tôi sẽ cho bạn thấy cách để chọn nhiều tập tin để tải lên cùng một lúc sau.

Page 59: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

59

Chọn hình ảnh

4. Nhấn nút “Start Upload” để upload hình ảnh.

Bắt đầu tải hình ảnh lên

Bây giờ, hình ảnh mới của bạn đã được tải lên trong thư mục “aboutmysite”.

Page 60: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

60

Hình ảnh hiển thị trong thư mục “aboutmysite”

Với cách này, mỗi lần làm bạn chỉ có thể tải lên một ảnh. Cách này rất tốn thời gian và công sức nếu bạn cần tải

nhiều ảnh lên. Rất may, có một cách khác cho phép tải lên nhiều tập tin một lúc - chức năng flash uploader.

Bạn chú ý rằng cách này yêu cầu bạn cài đặt Flash Player trên máy tính của bạn trước. Hãy thử với cách này

nhé.

1. Trong Media Manager, nhấn “Options” trên thanh công cụ.

Nhấn nút “Options”

Page 61: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

61

2. Trong trang “Media Manager Options”, thiết lập tham số “Enable flash uploader” là “Yes” và nhấn

“Save & Close”.

Bật tính năng flash uploader

Page 62: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

62

3. Trở lại màn hình chính như hình bên dưới. Bây giờ bạn hãy nhấn “Browse files” để tìm đến nơi chứa tập

tin bạn muốn tải lên.

Duyệt tới tập tin

4. Để chọn nhiều tập tin, dùng chuột kéo chọn tất cả hoặc giữ phím “CTRL” và nhấn lần lượt lên các tập

tin bạn muốn chọn, sau đó nhấn “Open”.

Chọn ảnh

Page 63: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

63

5. Nhấn chọn nút “Start Upload” và chờ cho tới khi quá trình tải lên hoàn tất.

Tải các ảnh lên

Bây giờ bạn đã có các hình ảnh trong thư mục.

Các ảnh mới được tải lên

Page 64: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

64

Thêm ảnh vào bài viết

Sau khi tải các hình ảnh được tải lên server, bạn có thể thêm chúng vào trong bài viết của bạn. Hãy thử với

bài viết“About my site”.

1. Sau khi mở bài viết, bạn trỏ chuột tới một điểm của đoạn văn mà bạn muốn chèn hình ảnh vào và nhấn

nút “Image” bên dưới khung soạn thảo.

Thêm ảnh vào trong văn bản

Page 65: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

65

2. Chọn ảnh để thêm vào văn bản.

Mở thư mục hình ảnh

Page 66: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

66

3. Nhập phần miêu tả ảnh (Image Description) và tiêu đề ảnh (Image Title) và nhấn nút “Insert” phía trên

của hình để hoàn tất việc chèn ảnh.

Chọn hình ảnh bằng cách nhấn vào nó sau đó điền các thông tin cần thiết

Page 67: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

67

4. Kiểm tra lại xem ảnh đã được chèn vào bài viết chưa.

Một hình ảnh được chèn vào bài viết

Bây giờ, nếu bạn thấy ảnh to quá, nhỏ quá hoặc chưa được đặt đúng ý bạn, bạn có thể thay đổi kích thước ảnh

hoặc căn lề. Nhấn vào hình ảnh sau đó nhấn vào nút “Insert/edit image” trong phần tùy chỉnh định dạng phía

trên khung soạn thảo bài viết để chỉnh sửa nó.

Nút chỉnh sửa/chèn hình ảnh

Một màn hình pop-up sẽ hiển thị. Tại đây bạn có thể chỉnh sửa hình ảnh như bạn muốn. Ví dụ, thử thay đổi kích

thước và canh lên sang phải (“Right”), sau đó nhấn nút “Update” bên dưới.

Page 68: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

68

Chỉnh sửa ảnh

Nhấn nút “Save & Close” trên thanh công cụ trong “Article Manager” và ra ngoài front-end để xem bài viết

sau khi được chèn mới hình ảnh.

Page 69: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

69

Bài viết với hình ảnh trong website

Page 70: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

70

Thêm các liên kết

Thêm liên kết nội bộ

Trong nhiều bài viết, bạn cần các liên kết nội bộ (Kết nối với các bài viết khác trên website của bạn). Những liên

kết này không chỉ giúp ích cho những người đọc bài viết mà còn tốt cho cả việc tối ưu hóa công cụ tìm kiếm

(Search Engine Optimization hay SEO). Hãy xem cách tạo các liên kết nội bộ trong một bài viết dưới đây.

1. Mở bài viết bạn muốn thêm liên kết nội bộ.

2. Chọn đoạn văn bản bạn muốn liên kết.

3. Nhấn vào nút “Article” bên dưới trình soạn thảo bài viết

Chèn một liên kết vào trong bài viết

4. Bây giờ bạn sẽ nhìn thấy một cửa sổ pop-up chứa danh sách tất cả các bài viết của bạn. Tìm bài viết bạn

muốn liên kết tới và sau đó nhấn chọn lên tiêu đề của bài viết đó.

Chọn bài viết tương ứng

Page 71: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

71

Kết quả là, tiêu đề của bài viết đã chọn được sử dụng như một đoạn liên kết.

Liên kết mới trong đoạn văn bản

Bạn có thể thay đổi liên kết đoạn văn bản trên giống như đoạn văn bản cũ.

Đoạn liên kết sau khi được chỉnh sửa

Page 72: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

72

5. Nhấn “Save” và truy cập đến phần front-end để xem bài viết với liên kết mới tạo.

Bài viết với liên kết trong front-end

Nếu bạn muốn chỉnh sửa một liên kết, bạn chỉ cần chọn nó và nhấn vào biểu tượng “Insert/edit link” giống

như hình bên dưới.

Page 73: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

73

Chỉnh sửa liên kết

Hoặc bạn có thể bỏ liên kết từ đoạn văn bản bằng cách nhấn vào biều tượng “Unlink”.

Bỏ liên kết trong bài viết

Page 74: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

74

Thêm các liên kết bên ngoài

Trong phần trước bạn đã học cách tạo các liên kết nội bộ, những liên kết này sẽ kết nối tới các bài viết khác trên

website của bạn. Trong phần này, bạn sẽ biết cách làm thể nào để tạo các liên kết bên ngoài đến bất kỳ website nào

bạn muốn trên Internet.

1. Chọn đoạn văn mà bạn muốn gán liên kết đến, sau đó nhấn vào biểu tượng “Insert/edit link”.

Thêm liên kết bên ngoài

Một cửa sổ pop-up sẽ hiển thị bên dưới:

Thêm một liên kết bên ngoài

Page 75: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

75

2. Nhập vào giá trị cho 4 tham số trong hình bao gồm:

Link URL

Địa chỉ liên kết bạn muốn gán.

Target

Có hai tùy chọn cho bạn ở đây: Mở liên kết ngay trong cùng một cửa sổ (“Open link in the same

window”) và Mở liên kết trong một cửa sổ mới ( “Open link in a new window”). Nếu bạn chọn “Not

set”, liên kết sẽ được mở trong cùng một cửa sổ)

Title

Nhập một mô tả ngắn cho liên kết.

Class

Là người mới làm quen với Joomla!, bạn cứ đặt giá trị “Not set” (Ngoài ra có hai tùy chọn khác là

“Caption” và “System Page break”)

3. Nhấn “Insert” để chèn liên kết này. Sau đó bạn có thể xem đoạn văn bản đã được liên kết tới website

bên ngoài.

Văn bản được liên kết

Page 76: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

76

Thêm “Page Break” và “Read More”

Trong trường hợp những bài viết có nội dung dài, có thể bạn sẽ muốn chia bài viết thành những những phần

nhỏ riêng biệt. Với Joomla! Bạn có hai tùy chọn để làm việc này.

1. Page Break

Page Break (hay “Phân Trang”) giúp chia bài viết thành các phần riêng biệt như Trang 1, Trang 2, Trang

3, v.v. Page breaks rất có ý cho những bài viết có nội dung dài.

2. Read More

Read More (hay “Đọc Thêm”) giúp chia một bài viết đầy đủ thành hai đoạn: Một đoạn giới thiệu và phần

còn lại của bài viết. Nếu bạn muốn đọc nốt phần còn lại của bài viết, bạn phải nhấn vào liên kết “Read

More”.

Bây giờ chúng ta sẽ học cách thêm Page Break và Read More.

Thêm một “Page Break”

1. Đặt con trỏ vào nơi mà bạn muốn chia bài viết.

2. Nhấn nút “Page Break” bên dưới trình soạn thảo bài viết.

Thêm một page break

Page 77: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

77

3. Thêm tiêu đề bạn muốn đưa vào trang mới trong trường “Page Title” và nhấn “Insert

Page Break”.

Thêm một Page Break

4. Đã xong, bây giờ bạn sẽ thấy một dòng các dấi chấm hiển thị trong bài viết của bạn như trong hình bên

dưới.

Dòng chấm hiển thị một page break

5. Nhấn “Save”.

Page 78: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

78

6. Xem kết quả trên front-end của bạn. Bạn sẽ thấy một danh sách bên cạnh bài viết – bạn chỉ cần nhấn lên

tiêu đề hoặc “Next” để xem trang chứa các phần văn bản khác.

Thêm mới page break trong website

Chú thích:

Bạn có thể thêm nhiều page breaks vào bài viết.

Bạn có thể xóa môt page break bằng cách mở bài viết (trong phần back-end), đặt trỏ chuột vào phần

cuối đường chấm của page break và nhấn phím “Backspace”.

Page 79: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

79

Thêm một liên kết “Read More”

Thêm một liên kết “Read More” khá giống với thêm một page break (phân trang).

1. Đưa con trỏ văn bản tới vị trí bên trong bài viết nơi mà bạn muốn chia phần mở đầu và phần nội dung

chính.

2. Nhấn nút “Read More” bên dưới trình soạn thảo bài viết.

Chèn một liên kết Read more

Bạn sẽ thấy một dòng chấm đỏ như bên dưới.

Đường chấm đỏ “Read more”

3. Nhấn “Save” để hoàn tất.

Bây giờ bài viết của bạn đã có một liên kết “Read more” ở front-end. Bạn chỉ cần nhấn vào nút “Read

more…” để đọc đầy đủ bài viết.

Page 80: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

80

Bài viết với liên kết “Read more”

Page 81: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

81

Bước 4: Tùy chỉnh giao diện website của bạn

với Joomla! template

Chúng ta đã hoàn tất việc chuẩn bị nội dung. Bây giờ là lúc quan tâm đến giao diện của một website.

Joomla! template là gì?

Như đã đề cập trước đó, một template quản lý việc hiển thị đồ họa website của bạn. Nó quyết định bố cục, màu

sắc, kiểu chữ, đồ họa cùng nhiều thành phần khác để tạo nên sự khác biệt cho mỗi website. Có hai loại

templates: “Site template” cho phần hiển thị tại front-end của website và “Administrator template” cho phần

hiển thị tại back-end (Phần quản trị) của website.

Site template

Site template quyết định giao diện ở front-end của một website – phần mà khách viếng thăm nhìn thấy được.

Một Site template

Thông thường, bạn sẽ làm việc với các Site templates nhiều hơn các Administrator template, để tạo nên giao

diện hợp lý cho website của bạn.

Page 82: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

82

Administrator template

Administrator template quyết định giao diện back-end (Phần Quản trị) của một website.

Một Administrator template

Nếu bạn đang xây dựng một website cho một mình bạn bạn thì việc thay đổi giao diện ở phần quản trị không

quan trọng lắm. Nhưng khi bạn xây dựng website cho khách hàng, bạn có thể cần tùy chỉnh phần giao diện này

cho phù hợp với khách hàng.

Page 83: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

83

Chọn Joomla! template

Nguồn Template

Cách nhanh và dễ nhất để thiết kế giao diện cho website của bạn là sử dụng các Joomla! template có sẵn. Có rất

nhiều templates cho bạn trên Internet.

Nguồn templates miễn phí

Cộng đồng Joomla! cung cấp hàng ngàn templates miễn phí cho bạn lựa chọn. Các bạn có thể lựa chọn từ

những nguồn sau:

http://www.joomla24.com/

http://www.joomlaos.de/

http://www.bestofjoomla.com

Nguồn templates có trả phí

Nếu ngân sách của bạn cho phép, bạn có thể mua cho mình một template, chúng tôi khuyên bạn nên mua những

templates này tại các nhà cung cấp Joomla! templates như:

http://www.joomlart.com

http://www.rockettheme.com

http://www.joomlashine.com/

http://www.yootheme.com

http://www.gavick.com

Các nguồn template khác trên Internet

Bạn có thể tìm kiếm trên Google với các từ khóa: “Joomla Templates” hoặc “template for Joomla” và bạn sẽ

thấy có đến 60 triệu kết quả được trả về!

Page 84: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

84

Các tiêu chuẩn để chọn lựa Template

Có rất nhiều Joomla! template để bạn lựa chọn. Đây là một vài tiêu chuẩn có thể giúp cho bạn tìm cho mình

một template vừa ý.

Tính tương thích

Template hỗ trợ phiển bản Joomla! nào? Bạn cần chọn cho mình một template hỗ trợ Joomla! 3.x

Phải trả phí hay miễn phí

Bạn muốn một template chất lượng tốt và được hỗ trợ hay bạn eo hẹp về tài chính và chỉ cần một

template miễn phí? Thông thường, các templates trả phí linh hoạt hơn, chất lượng cao hơn, có nhiều tài

liệu hướng dẫn hơn và được hỗ trợ tốt hơn là template miễn phí.

Tài liệu hướng dẫn sử dụng

Tài liệu hướng dẫn sử dụng có tốt không? Tài liệu này có giúp bạn hiểu rõ hơn về các tính năng của

template không? Nó có giúp bạn tùy chỉnh template không?

Hỗ trợ

Template có được hỗ trợ không? Bạn có thể được hỗ trợ như thế nào? – Qua diễn đàn, hệ thống hỗ trợ qua

ticke, v.v.? Thời gian bạn nhận được câu trả lời là bao lâu? 12 giờ, 24 giờ hay phải nhiều ngày sau?

Thiết kế

Khi nhìn và cảm nhận website, bạn có thấy nó đúng như mình mong muốn không? Nếu nó giống là

thiết kế đó, bạn sẽ không mất nhiều thời gian để tùy chỉnh. Nếu không, bạn cần kiểm tra xem nó có

dễ tùy chỉnh theo ý bạn không?

Các tính năng

Các templates chuyên nghiệp cung cấp khá nhiều tính năng trong khi trong phần lớn các template miễn

phí, các tính năng bị hạn chế khá nhiều.

Nếu bạn là cá nhân hay người sử dụng thông thường thì một template miễn phí sự lựa chọn phù hợp. Tuy nhiên

nếu bạn đang tạo website cho công việc hay kinh doanh thì bạn nên mua một template trả phí phí từ những nhà

cung cấp chuyên nghiệp. Đừng nghĩ rằng cách này lãng phí tiền, vì ngoài “code” và phần thiết kế chất lượng

cao hơn ra, bạn có còn được nhiều tài liệu hướng dẫn và sự hỗ trợ hữu ích khác nữa. Thời gian mà bạn tiết kiệm

được sẽ xứng đáng với số tiền bạn bỏ ra.

Page 85: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

85

Cài đặt Joomla! template

Sau khi chọn cho mình được một mẫu Joomla! template thích hợp rồi, bây giờ chúng ta sẽ cài đặt nó.

1. Vào “Extensions” => “Extension Manager”

Extensions => Extension Manager

2. Nhấn “Browse…”, tìm tập tin template mà bạn đã tải về, sau đó nhấn “Upload & Install”. Tiếp theo bạn

sẽ nhận được thông báo rằng template đã được cài đặt thành công.

Duyệt tới tập tin template từ máy tính của bạn

3. Bây giờ bạn đã có một template mới được cài đặt, hãy dùng nó cho website của bạn. Bạn vào “Extensions”

=> “Template Manager”

Page 86: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

86

Chọn “Template Manager”

4. Chọn template mà bạn muốn dùng, sau đó từ top menu bên trái chọn biểu tượng “Make Default” để nó

được chọn mặc định cho website Joomla! của bạn.

Chọn “Make Default”

Page 87: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

87

5. Bây giờ bạn có thể xem lại tổng quan thiết kế ở phần front-end bằng cách nhấn vào tên website ở phía trên

bên trái trong phần Quản trị.

Nhấn vào tên website để xem phần thiết kế front-end

Page 88: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

88

Tạo giao diện đa phong cách để gán tới các danh mục

Bạn có thể dùng các template khác nhau trên các trang khác nhau trong website của bạn.

Trong website này, hầu hết các trang dùng Beez2, ngoại trừ một trang sử dụng Beez3

Ví dụ, bạn có một website đang dùng template Protostar, bạn muốn một trang trong website này dùng template

Beez3. Bạn có thể thực hiện điều này dễ dàng bằng cách làm theo các bước bên dưới:

Page 89: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

89

Tạo mới một danh mục ở Top menu có tên là Beez3: Vào Menus -> Main Menu -> Add New Menu. Bạn có

thể chọn bất kỳ mục menu nào bạn muốn, ví dụ chúng ta chọn danh mục loại “ Single article”, đặt tiêu đề danh

mục là “Beez3”, Chọn bài viết “Getting Started” sau đó lưu menu này lại.

Tạo danh mục “Beez3”

Sau đó bạn vào Extensions -> Template Manager -> Beez3. Tại đây, trong phần “Menus assignment”, bạn

chọn danh mục Beez3.

Chọn danh mục “Beez3”

Bây giờ bạn lưu lại menu và tới phần front-end để xem kết quả.

Chú ý:

Bạn chỉ có thể gán một template vào một danh mục. Nếu bạn gán từ hai template trờ lên thì chỉ có template mới

nhất được áp dụng.

Page 90: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

90

Bước 5: Sắp xếp modules ở các vị trí

Chú ý: Bạn có thể thực hiện việc này dễ dàng với JSN PowerAdmin và tính năng quản lý các modules trực

quan của nó.

Joomla! module và Joomla! position là gì?

Như đã đề cập trước đó, một module thực hiện một nhiệm vụ đơn giản nào đó và hiển thị nội dung trong một

khối thông tin nhỏ trên trang. Mỗi một module nằm trong một vị trí đặc biệt, ví dụ module “Latest Article” và

“Login Form” nằm ở bên trái. Mỗi một vị trí được thiết kế để sử dụng trong một phần bố cục của trang, như vị

trí “left” được đặt ở phía bên trái của trang chính. Các template có thể có nhiều vị trí khác nhau được bố trí ở

những nơi khác nhau trên một trang.

Đây là một cách khác để bạn hình dung vể khái niệm này. Cứ xem website của bạn như một bức tường, trên

bức tường đó, có những tấm bảng (module positions) được treo ở những vị trí khác nhau. Trên mỗi tấm bảng,

có những tờ giấy nhớ (modules) được ghim lại. Bạn thấy đấy, vậy là bạn có một bức tường dán đầy giấy nhớ

(modules) được sắp xếp trên một cái bảng (positions) treo trên tường.

Có hai loại modules là: “Site module” dùng cho phần front-end và “Administrator module” dùng cho phần

quản trị back-end.

Site modules tại front-end

Page 91: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

91

Làm thế nào bạn có thể nhìn thấy được vị trí của các module trong một template?

Sẽ rất khó để xem được tất cả những vị trí module trong một template khi chỉ nhìn vào một website. Rất may,

Joomla! cung cấp cho bạn một công cụ để có thể thấy được tất cả các vị trí đó. Hướng dẫn sau giúp bạn sử

dụng nó:

1. Vào “Extensions” => “Template Manager”.

2. Trong phần Template Manager, nhấn biểu tượng “Options” trên thanh công cụ.

3. Tiếp theo, thiết lập tham số của “Preview Module Positions” thành “Enabled” và nhấn “Save & Close”.

Bật tính năng xem trước vị trí của module

4. Bây giờ, nhấn vào thẻ “Template”.

Nhấn vào thẻ Template

5. Những template đã cài đặt dược hiển thị trên màn hình. Bạn kéo chuột xuống template Beez3 và nhấn

Preview để xem các vị trí module của template này.

Page 92: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

92

Nhấn Preview

6. Tất cả các vị trí module của template sẽ được hiển thị giống như hình bên dưới.

Page 93: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

93

Các vị trí Module của trang

Bây giờ bạn có thể thấy được tất cả các vị trí module của template. Việc này sẽ giúp bạn chọn đúng vị trí bạn

cần khi thêm mới một module.

Page 94: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

94

Thêm mới một module

Bây giờ bạn đã khá quen thuộc với khái niệm về Joomla! Module và Joomla! Position rồi, hãy tiếp tục với phần

tạo mới một module cho website của bạn.

Làm quen với những modules mặc định

Mặc định Joomla! cung cấp cho chúng ta khá nhiều modules để dùng, hãy xem qua nhé:

Module người dùng (User modules)

Các module được thiết kế cho việc trình bày và dịch vụ người dùng.

Who’s online

Module này hiển thị số khách và thành viên đang truy cập website của bạn.

Latest Users

Module này hiển thị những thành viên đã đăng ký mới nhất.

Login

Module này hiển thị một form đăng nhập với tên, mật khẩu và một vài liên kết khác như đăng ký hay lấy

lại mật khẩu.

Module nội dung (Content modules)

Các module được thiết kế để trình bày bài viết.

Latest News

Module này hiển thị một danh sách các bài viết đã được đăng.

Most Read Content

Module này hiển thị danh sách các bài viết được đăng và có số lượt xem cao.

Article - News flash

Module tin nhanh sẽ hiển thị một số lượng bài viết nhất định trong một chuyên mục cụ thể nào đó.

Article - Related Articles

Module này hiển thị các bài viết khác liên quan đến nội dung bài viết đang được xem.

Archive Articles

Module này hiển thị một danh sách các bài viết được lưu trữ trong tháng.

Article categories

Module này sẽ hiển thị các chuyên mục con của một chuyên mục cha.

Articles category

Module này cho phép bạn hiển thị các bài viết trong một chuyên mục.

Page 95: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

95

Module hiển thị (Display modules)

Các module được thiết kế cho việc hiển thị nội dung phong phú hơn.

Custom HTML

Cho phép bạn tạo những đoạn HTML có thể tùy chỉnh theo ý của bạn. Module này dùng với trình soạn

thảo WYSIWYG.

Feed display

Module này cho phép hiển thị một nguồn cấp dữ liệu web. Xem thêm tại đây.

Footer

Module này hiển thị thông tin bản quyền Joomla!.

Random image

Module này hiển thị một hình ảnh ngẫu nhiên nào đó từ thư mục ảnh mà bạn đã chọn.

Weblinks

Module này hiển thị danh sách các liên kết trong một chuyên mục.

Banner

Module banner cho phép bạn sử dụng để hiển thị các biển ngữ trong phần “Banners Component”.

Module tiện ích (Utility modules)

Các modules được thiết kế để thực hiện một nhiệm vụ nhỏ nào đó.

Smart Search Module

Module này dùng cho việc tìm kiếm bằng cách dùng Smart Search component.

Wrapper

Module này hiển thị một cửa sổ iFrame đến vị trí đặc biệt nào đó.

Language switcher

Module này hiển thị một danh sách các ngôn ngữ có sẵn cho việc chuyển đổi nội dung sang ngôn ngữ

khác.

Search

Module này sẽ hiển thị một hộp thoại tìm kiếm.

Thống kê

Module thông kê, module này thống kê thông tin về server của bạn, thành viên website, bài viết, các liên

kết, etc.

Syndicate Feeds

Module Syndicate sẽ hiển thị liên kết cho phép thành viên nhận thông tin từ website của bạn.

Page 96: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

96

Module tiện ích (Utility modules)

Các module này được thiết kế nhằm hiển thị điều hướng webite.

Menu

Module này hiển thị một danh mục trên website.

Breadcrumbs

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết được mình đang ở trang nào

và từ đó có thể di chuyển thuận lợi từ trang này trang khác trong 1 website.

Thêm mới một module

Bây giờ, hãy xem cách thêm mới một module.

1. Vào “Extensions” => “Module Manager”, sau đó chọn “New” trên thanh công cụ.

Nhấn “New” để thêm mới một module

Page 97: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

97

2. Trong cửa sổ pop-up, chọn module bạn muốn thêm. Ví dụ bạn muốn thêm một module đăng nhập

(“Login”) để cho phép thành viên đăng nhập vào website.

Chọn module “Login”

Page 98: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

98

3. Bây giờ bạn chỉ cần nhập thông tin cho module mới của mình. Đừng quên chọn vị trí mà bạn muốn

module này hiển thị trên web site.

Nhập thông tin cho module

4. Cuối cùng, nhấn vào “Save & Close” để hoàn tất quá trình. Bây giờ các bạn truy cập front-end của

website và xem kết quả!

Module đăng nhập trên website

Bạn có thể thêm nhiều module với cách làm tương tự.

Page 99: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

99

Cấu hình cài đặt các modules

Sắp xếp thứ tự các modules

Bây giờ bạn đã biết rằng tất cả các modules được đặt trong một vị trí như thế nào rồi, vậy giờ chúng ta sẽ sắp

xếp các module này bằng chức năng kéo thả (drag and drop). Cách làm như sau:

1. Vào “Module Manager”.

2. Nhấn vào biểu tượng để kéo và thả module vào vị trí mới.

Nhấn để kéo thả module vào vị trí mới.

Page 100: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

100

Bước 6: Mở rộng chức năng của website với

Joomla! extensions

Như đã đề cập trước đó, Các thành phần mở rộng của Joomla!(extentions) là những phần mềm đặc biệt được

viết để để tích hợp vào Joomla! nhằm tăng cường cũng như mở rộng chức năng cho website. Ví dụ nếu bạn

muốn có một slideshow hình ảnh, bộ sưu tập Videos hay Form liên hệ với nhiều chức năng nâng cao hơn, thì

bạn cần phải cài đặt các extensions cho những mục đích tương ứng. Để thêm thông tin về Joomla! Extensions,

bạn vui lòng coi lại phần Các thành phần mở rộng (Extensions) đã được đề cập trước đó.

Mặc định thì Joomla! đã được đóng gói kèm khá nhiều extensions đủ đế thực hiện những chức năng cơ bản.

Banners

Extension này giúp cho việc quản lý và hiển thị các biểu ngữ.

Contacts

Extension này giúp bạn quản lý liên lạc và hiển thị thông tin liên hệ.

Newsfeeds

Extension này giúp cho việc quản lý và hiển thị RSS.

Redirect

Extension này giúp quản lý chuyển hướng các URL.

Weblinks

Extension này giúp quản lý và trình bày các liên kết.

Hãy xem kỹ hơn một chút về một trong các extensions mở rộng của Joomla! để hiểu hơn về cách thức làm việc

của nó với Joomla!.

Page 101: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

101

Làm việc với thành phần mở rộng (Extensions) mặc định “Contacts”

Trong phần này, chúng ta sẽ học làm thể nào để sử dụng extension “Contacts” của Joomla! Extension này cho

phép bạn tạo các biểu mẫu (form) liên hệ để mọi người (khách, thành viên) có thể gửi email tới bạn.

Tạo chuyên mục liên hệ

Chúng ta cần tạo các danh sách liên hệ trước khi thành viên có thể gửi tới cho chúng ta email thông qua biểu

mẫu liên hệ nào đó. Nhưng để tổ chức phần liên hệ tốt hơn, chúng ta cần tạo các chuyên mục liên hệ trước.

1. Vào “Components” => “Contacts” => “Categories”

Chọn các chuyên mục liên hệ

2. Tiếp theo, chọn “New” trên thanh công cụ để tạo mới một mục liên hệ.

Chọn “New” để tạo một mục liên hệ mới

3. Sau đó, điền tiêu đề cho mục liên hệ của bạn, ví dụ “Website Administrators”, và lưu lại bằng cách nhấn

vào “Save & Close”.

Page 102: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

102

Mục liên hệ mới

Page 103: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

103

Tạo mới một liên hệ

Khi mục liên hệ đã được tạo xong, bạn có thể tạo các liên hệ riêng lẻ mà bạn muốn.

1. Các bạn vào “Components” => “Contacts” => “Contacts”

Nhấn vào danh mục con "Contacts"

2. Tiếp theo, nhấn vào “New” trên thanh công cụ để tạo mới liên hệ.

Nhấn “New” để tạo một liên hệ mới

3. Sau đó, điền thông tin vào các trường trong phần “Edit Contact”:

Name

Điền tên liên hệ - Có thể là tên của bạn.

Category

Chọn chuyên mục liên hệ mà bạn đã tạo trước đó.

Page 104: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

104

Nhập thông tin liên hệ

4. Tiếp theo, trong thẻ “Contact Details”, điền địa chỉ email liên hệ trong phần “Email”. Đây là tham số

rất quan trong vì sau đó tất cả các thông tin liên hệ để được gửi đến địa chỉ email này.

Nhập email liên hệ

5. Cuối cùng, nhấn “Save & Close” để lưu lại liên hệ này.

Page 105: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

105

Tạo một danh mục con để hiển thị biểu mẫu liên hệ

Bây giờ bạn đã tạo một biểu mẫu liên hệ để gửi liên hệ tới nó, lúc này hãy tạo một form cho thành viên để họ

có thể gửi liên hệ được cho bạn.

1. Vào “Menus” => “Main Menu” => “Add new menu items”

Thêm mới một danh mục con

2. Tiếp đó, nhấn “Select” để chọn loại danh mục con.

Nhấn chọn loại danh mục con

Page 106: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

106

3. Tiếp, chọn “Single Contact”.

Chọn “Single Contact”

Page 107: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

107

4. Tiếp theo, bạn cần chọn mẫu liên hệ mà bạn muốn bằng cách nhấn vào “Select”.

Nhấn “Select”

5. Sau đó nhấn vào liên hệ bạn đã tạo trước đó.

Nhấn để chọn liên hệ đã tạo trước đó

Page 108: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

108

6. Điền tiêu đề cho “Menu Title” như bạn muốn, ví dụ “Contact”.

Điền tiêu đề trong “Menu Title”

7. Cuối cùng, nhấn “Save & Close” để lưu lại menu item này.

Page 109: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

109

Bây giờ, hãy truy cập front-end của website để xem kết quả. Phần “Main Menu” đã có thêm một mục mới là

“Contact”. Nhấn vào và bạn sẽ thấy biểu mẫu liên hệ xuất hiện.

Biểu mẫu liên hệ trên website

Chúng ta đã thêm mới một form liên hệ cơ bản cho website. Để tùy chỉnh thêm, bạn có thể sử dụng một số

lựa chọn có sẵn.

Page 110: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

110

Tùy chình thêm

Vào “Contacts” hay “Categories” và nhấn vào biểu tượng “Options” trên thanh công cụ.

Nhấn vào "Options"

Page 111: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

111

Ở đây bạn có thể cấu hình tất cả các tham số bạn cần.

Các tham số của biểu mẫu liên hệ

Page 112: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

112

Thêm mới Extension

Các Joomla! extensions mặc định phù hợp cho những người mới bắt đầu, nhưng sau một thời gian làm quen

với Joomla!, bạn có thể cảm thấy chúng chưa đủ. Trong quá trình phát triển web site, bạn sẽ muốn thêm nhiều

chức năng nữa mà những thành phần mở rộng mặc định đã có sẵn không thể mang lại. Trong phần này, chúng

ta sẽ xem xem những Extensions gì bạn có thể thêm vào website và làm thế nào để thực hiện điều đó.

Xác định Extension sẽ được cài đặt

Thông thường mỗi một website đều có mục đích riêng của nó và đương nhiên cũng không có sẵn danh sách

những Extensions mà nó cần phải cài đặt. Tuy nhiên, có những loại Extensions mà các website nên có, ví dụ,

bộ sưu tập ảnh (image gallery), bộ sưu tập videos (video gallery), xây dựng biểu mẫu (form building), tích hợp

với mạng xã hội, hiển thị trên các thiết bị di động, v.v. Có rất nhiều bài viết nhằm giải quyết vấn đề này và

dưới đây là một số trong những bài viết hữu ích:Joomlashine extensions – JSN PowerAdmin, JSN Uniform

và JSN ImageShow: Chúng được phát triển để đáp ứng những yêu cầu thông dụng cho các website. Những

Extensions này nhận được khá nhiều lời khen ngợi từ những người sử dụng Joomla vì chúng dễ dùng và hiệu

quả.

Top 10 Joomla! extensions - Brian Teeman: Danh sách các tiêu chí chọn Joomla! extensions của Brian.

Featured extensions on JED

My top ten Joomla! extensions - Kristoffer Sandven: Những extensions ưa thích của một Joomla!

blogger nổi tiếng – Kristoffer Sandven cho cả phần front-end và back-end.

My Must have Joomla! Extensions - Anthony Olsen: Một danh sách Extensions giúp xây dựng phần lõi

Joomla! mạnh hơn. Bạn nên kiểm tra danh sách để đảm bảo rằng những Extensions này hỗ trợ cho

Joomla! 3.x.

Joomla! 3.x extensions on JED: Toàn bộ extension ở đây đều được kiểm tra kĩ càng bởi đội ngũ JED

trước khi giới thiệu cho người dùng. Bạn cũng nên kiểm tra qua số lượt đánh giá và bình luận của người

dùng để chọn ra extensions tốt nhất mà bạn mong muốn.

Page 113: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

113

JSN PowerAdmin – Một extension giúp đơn giản hóa giao diện quản trị back-end

JSN Uniform – Một extension giúp tạo và quản lý nhiều loại biểu mẫu.

Page 114: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

114

Tìm kiếm những Extension hữu ích

Nơi mà bạn có thể tìm cho mình những extensions hữu ích là Joomla! Extensions Directory (JED). Nó là một

nguồn tài nguyên lớn với hàng ngàn Joomla!extensions được chia sẵn vào các chuyên mục chức năng của nó.

Joomla! Extensions Directory

Tất cả các extensions có phần đánh giá và bình luận riêng, bạn cũng có thể xem và đưa ra ý kiến của bạn về

extensions này. Mục này được điều hành bởi một đội ngũ chuyên nghiệp và bạn có thể tin tưởng những thông

tin được đăng tại đây.

Page 115: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

115

Cài extensions mới

Sau khi chọn và tải extensions cần thiết cho website của bạn, bạn cần biết làm thế nào để cài đặt chúng và làm

cho chúng làm việc trên website của bạn.

1. Vào “Extensions”=>“ExtensionManager”

2. Tiếp theo, nhấn “Browse” để chọn gói Joomla! extension bạn đã tải về.

NhấnBrowse

3. Sau đó, nhấn “Upload&Install” để tải lên và cài đặt tập tin này vào website của bạn.

Nhấn“Upload &Install”

Page 116: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

116

Joomla! sẽ tự động đưa extension này vào đúng chỗ của nó.Ví dụ, nếu extensions là một component, bạn sẽ thấy

nó trong danh mục“Components”; nếu extension này là một module, bạn sẽ tìm thấy nó trong “Module

Manager”.

JSN UniForm trong Components

Gỡ bỏ extensions

Nếu bạn thấy một extension không giúp gì cho bạn, bạn nên gỡ bỏ nó:

1. Vào “Extensions”=>“ExtensionManager” và nhấn vào mục “Manage”.

2. Nhập tên đầy đủ hoặc một phần tên của extension vào trường “Filter” và nhấn “Search” icon.

3. Chọn extension mà bạn muốn gỡ bỏ và nhấn “Uninstall” trên thanh công cụ.

Gỡ bỏ extension

Page 117: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

117

Bước 7: Quản lý website với JSN PowerAdmin

Bạn đã có được một website Joomla! sau khi thực hiện 6 bước ở trên. Bây giờ, có thể bạn cần cập nhật nội dung

hàng ngày hoặc hàng tháng: chỉnh sửa nội dung đã đăng, tạo mới một danh mục hay module…

Những việc này, bạn không cần phải thực hiện toàn bộ các bước và thao tác như chúng tôi đã trình bày trước

đó. Đây là lúc để tiết lộ một bí mật: JSN PowerAdmin. JSN PowerAdmin là một extension Quản trị back-end

được tạo ra để giúp quản lý website Joomla! của bạn dễ dàng hơn bao giờ hết - với các chức năng Tìm kiếm

Spotlight (Spotlight Search), Quản lý Site (Site Manager), Quản lý mẫu Template (Template styles

Manager) và nhiều hơn nữa.

Những tính năng nổi bật của JSN PowerAdmin

Page 118: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

118

Quản lý site (Site Manager): Quản lý ba phần chính trong website của bạn bao gồm: Danh mục

(Menu), Component và Modules trong một vùng.

Site Manager

Tìm kiếm Spotlight (Spotlight Search): Điểm nhấn tìm kiếm (hình dưới bạn có thể thấy từ “joomla”

được bôi vàng toàn bộ, đó gọi là Spotlight).

Spotlight Search với danh sách kết quả có được

Page 119: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

119

Quản lý mẫu template (Template Style Manager): Bạn có thể sửa, đặt làm mặc định, sao chép, xóa

hay gỡ bỏ template dễ dàng.

Quản lý các mẫu template

JSN PowerAdmin hoàn toàn MIỄN PHÍ Bạn chỉ cần tải về và cài đặt ở back-end của website theo hướng dẫn

trong phần “Cài extensions mới”

Tải JSN PowerAdmin miễn phí

Page 120: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

120

Quản lý website Joomla! với Site Manager

Sẽ mất khá nhiều thời gian khi bạn phải vào từng menu, module hay bài viết để chỉnh sửa chúng. Bây giờ, bạn

có thể quản lý nội dung website của bạn dễ dàng hơn, nhanh hơn với công cụ Quản lý Site: Bao gồm Menu,

Component và Modules trong một khu vực.

To access Site Manager, click “Components” -> “JSN PowerAdmin” -> “Site Manager”.

Quản lý site bao gồm Menu, Component và Modules panel

Tiện lợi hơn, bạn có thể điều chỉnh kích thước của 3 phần này nếu bạn muốn. Bạn chỉ cần kéo thanh ngăn cách

giữa 2 phần sang trái hoặc sang phải để phóng to hay thu gọn lại phần đó. Ở đây, toàn bộ những thay đổi này sẽ

được tự động lưu lại.

Quản lý Danh Mục

Page 121: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

121

Các danh mục con ở phần front-end

Bạn có thể quản lý danh mục và danh mục con dễ dáng với thẻ MENU trong Site Manager.

Quản lý tất cả các danh mục và danh mục con

Page 122: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

122

Xem các danh mục ẩn/hiện:

Bạn có thể nhìn thấy tất cả danh mục được hiển thị.Những mục không được hiển thị sẽ bị ẩn đi. Để hiển

thị hay ẩn các mục này, bạn nhấn vào biểu tượng ô vuông ở phía trên bên phải.

Nhấn vào biểu tượng ô vuông để hiển thị những danh mục ẩn

Nhấn vào biểu tượng ô vuông để không hiển thị những danh mục ẩn

Page 123: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

123

Tạo mới một danh mục / danh mục con:

Thêm một danh mục và một danh mục con mới

Sửa danh mục hiện tại / các danh mục con:

Sửa danh mục hiện tại hoặc danh mục con

Page 124: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

124

Kéo và thả để di chuyển các mục con trong một danh mục:

Kéo mục danh mục con và thả nó đến một vị trí khác

Tùy chỉnh các danh mục con:

Bạn cũng có thể Ẩn (Unpublish), Cài đặt trên trang chủ (Set as home), Chiếm quyền sử dụng

(Check in) danh mục con, v.v.

Quản lý tất cả các danh mục hay danh mục con

Page 125: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

125

Quản lý nội dung

Phần COMPONENT hiển thị tất cả nội dung của danh mục bạn đã chọn. Nó cho phép bạn sửa các thành phần,

hiển thị hay ẩn các mục mà bạn muốn.

Nhấn“Select”để sửa một bài viết

Xem các mục nội dung:

Nhấn vào biểu tượng bên dưới để hiển thị/không hiển thị các thành phần ẩn trên trang.

Nhấn hiển thị hay không hiển thị các mục ẩn

Page 126: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

126

Sửa các bài viết / chuyên mục:

Giờ đây, bạn có thể sửa một bài viết nhanh hơn sau khi bạn chọn nó. Nhấn vào tiêu đề nội dung để

hiển thị các tùy chọn bên dưới:

Edit article: Thay đổi nội dung bài viết.

Hide element/ Show element: Nhấn để hiện hay không hiện các thành phần ẩn với hai tùy

chọn “For all pages globally” hoặc “For this page only”.

Enable link/ Disable link: Nhấn để hiển thị các liên kết được kích hoạt hay không kích hoạt

với hai tùy chọn “For all pages globally” hay “For this page only”.

o For all pages globally: Thay đổi được áp dụng cho tất cả các thành phần trên tất cả

các trang của website.

o For this page only: Thay đổi được áp dụng cho riêng trang này.

Sửa bài viết, hiển thị hay ẩn các chi tiết và liên kết trong một bài viết

Page 127: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

127

Cách sửa một chuyên mục tương tự như cách sửa một bài viết ở trên.

Sửa chuyên mục hoặc ẩn các chi tiết trong một chuyên mục

Page 128: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

128

Quản lý các Modules

Trong phần MODULES, bạn có thể quản lý toàn bộ modules của template mặc định hiện tại.

Modules trong phần front-end

Page 129: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

129

Xem các modules:

Bạn có thể nhìn thấy các các modules được hiển thị ở đây. Nhưng bạn có thể hoặc không thể nhìn thấy

các module không được hiển thị và các vị trí có các module (hoặc không có module). Bạn có thể quản lý

những mục này bằng cách nhấn vào biểu tượng ô vuông ở góc trên bên phải và đánh dấu vào ô

“Modules”, “Positions” hay cả hai.

Nhấn để hiển thị hoặc ẩn các modules và vị trí

Page 130: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

130

Tạo một module mới:

Nhấn vào bất kỳ vị trí nào và thêm một modulemới

Xem vị trí của các modules

Bạn có thể nhấn vào một vị trí module và chọn “View position” để xem tất cả các vị trí của template.

Nhấn vào vị trí bất kỳ để xem vị trí của template mặc định

Page 131: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

131

Sửa các modules hiện tại:

Với một module bất kỳ, bạn có thể Sửa (Edit), Thay đổi vị trí (Change position), Ẩn (Unpublish) ...

Với các module đã bị chiếm quyền sử dụng (Checked in), bạn cần chiếm quyền sử dụng lại trước khi

chỉnh sửa chúng.

Sửa các modules

Thay đổi vị trí module với toàn bộ vị trí được hiển thị của template

Page 132: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

132

Kéo và thả để di chuyển các vị trí module.

Kéo và thả một module tới vị trí mới

Page 133: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

133

Truy cập nhanh các mục bất kỳ với Spotlight Search

Bạn cần phải nhấn khá nhiều lần để tìm kiếm cho phần front-end trong back-end của Joomla!. Spotlight

Search giúp bạn tìm kiếm các mục trong website của bạn và truy cập chúng nhanh hơn:

Trong phần front-end, sao chép tiêu đề của nội dung mà bạn muốn chỉnh sửa.

Tới phần back-end, dán tiêu đề vào ô Spotlight Search ở góc trên bên phải của bảng quản trị

admin.

Bạn sẽ nhận được tất cả các kết quả từ các chuyên mục khác nhau ngay lập tức. Bạn chỉ cần chọn

đúng mục mong muốn để chỉnh sửa.

Kết quả sẽ được hiển thị ngay lập tức

Page 134: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

134

Nhấn vào mục bạn muốn để có thể truy cập ngay lập tức tới trang đó. Tại đây, bạn có thể thay đổi nội dung

giống như cách thông thường bạn vẫn làm.

Truy cập tức thì tới trang tùy chỉnh

Page 135: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

135

Quản lý các kiểu template với Template Style Manager

JSN PowerAdmin cung cấp cho bạn một cách truy cập nhanh chóng tới tất cả các mẫu templates đã được cài

đặt. Và bạn có thể thực hiển một số thao tác cơ bản trên một template như sửa (Edit), chọn làm mặc định

(Make Default), sao chép làm hai (Duplicate), xóa (Delete) và gỡ bỏ (Uninstall) nhanh chóng với một vài cú

nhấp chuột.

Hãy xem làm thế nào để thay đổi template mặc định.

Hiện tại, Template ở front-end mặc định là Beez3

Vào “Extensions” => “Template manager” và nhấn “Template Styles”.

Chọn “Template Styles”

Page 136: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

136

Tiếp theo, trong cửa sổ này, bạn sẽ thấy tất cả các template đã được cài, bao gồm cả site templates và admin

templates. Template mặc định được đánh dấu nổi bật với màu vàng.

Quản lý các mẫu Template

Page 137: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

137

Nhấn trên template bạn muốn thiết lập là mặc định và chọn “Make Default”. Ví dụ, ở đây chúng ta

chọn Protostar.

Nhấn chọn "Make Default"

Cuối cùng, nhấn“Close” để thoát khỏi cửa sổ.

Page 138: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

138

Bây giờ, ra ngoài phần front-end của website và xem kết quả.Template bây giờ là Protostar.

Protostar đã được chọn là template mặc định

Page 139: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

139

Những tính năng khác

Truy cập nhanh tới các mục đã chỉnh sửa trước đó

Tất cả các mục bạn đã cấu hình trước đó sẽ được lưu trữ trong History. Bạn có thể truy cập chúng chỉ với vài

cú nhấp chuột.

Nhấn vào biểu tượng Đồng hồ phía bên phải bênh cạnh ô Spotlight search.

Nhấn vào biểu tượng Đồng hồ

Nhấn vào mục bạn muốn truy cập tới.

Nhấn vào mục bạn đã chỉnh sửa trước đó

Bạn sẽ được chuyển tới mục đó.

Page 140: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

140

Truy cập nhanh vào Profile của thành viên

Thông thường, là một người quản trị, bạn muốn kiểm tra tin nhắn, profile của bạn hay đơn giản là thời gian còn

lại trong phiên làm việc của bạn. Để vào user profile, bạn:

Tìm biểu tượng hình người trên đầu thanh công cụ gần biểu tượng đồng hồ. Phần màu xanh đại diện cho

tỷ lệ phần trăm của thời gian còn lại trong phiên của bạn.

Biểu tượng hình người

Di chuột vào biểu tượng và nhấn vào Profile trong phần danh mục con. Một cửa sổ mới sẽ hiển thị ra

cho phép bạn chỉnh sửa hồ sơ của bạn.

Nhấn “Profile” để đi tới trang cho thành viên

Page 141: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

141

Trang thiết lập hồ sơ (Profile)

Quản trị Danh mục nâng cao

Một lúc nào đó bạn có thể muốn gỡ bỏ một vài extension. Không cần phải vào “Extension Manager” theo

cách thông thường, bạn có thể gỡ bỏ chúng với chức năng Gỡ bỏ nhanh (Quick Uninstall). Nó làm việc với

một vài exentions mặc định của Joomla! (Banners, Contacts...) và tất cả các extension của bên thứ ba trên

website Joomla! của bạn.

Page 142: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

142

Gỡ bỏ nhanh một extension

Page 143: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

143

Cấu hình JSN Power Admin

Bạn có thể quản lý phần back-end Joomla! theo cách mà bạn thích với trang “Configuration” của JSN Power

Admin. Tại đây, bạn có thể cấu hình logo và liên kết menu, vùng tìm kiếm hay số lượng chỉnh sửa được hiển

thị; tắt tính năng gỡ bỏ nhanh hoặc hỗ trợ quản lý các thành phần mở rộng, v.v.

Vào “Component” => “JSN PowerAdmin” và nhấn “Configuration”

Vào trang Configuration của JSN PowerAdmin

Page 144: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

144

Bạn có thể cấu hình theo ý mình trong trang “Configuration”.

Trang "Configuration"

Page 145: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

145

“Joomla! 2.5 Made Easy” – Phiên bản trước của Joomla! 3.x Made Easy (Thiết kế

website thật dễ dàng với Joomla! 3.x)

Cuốn e-book này (“Joomla! 3.x Made Easy” – “Thiết kế website thật dễ dàng với Joomla! 3.x”) là bản cập

nhật từ phiên bản trước - Joomla! 2.5 Made Easy, đã có hơn 50.000+ lượt tải về.

Nếu bạn muốn xây dựng một website trên một phiên bản Joomla! ổn định, bạn nên chọn Joomla! 2.5 (nó được

hỗ trợ cho tới mùa xuân năm 2014) và cuốn cẩm nang bỏ túi Joomla! 2.5 Made Easyđược khuyên dùng vì nó

sẽ giúp bạn từng bước làm chủ Joomla! .

Joomla! 2.5 Made Easy,viết bởiJoomlaShine Team

93 trang

Ngôn ngữ: tiếng Anh, tiếng Đức, tiếng Đan Mạch

Cuốn sách có sẵn các ngôn ngữ tiếng Anh, tiếng Đức và tiếng Đan Mạch. Bạn có thể tải nó miễn phí.

Page 146: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

146

Kết luận

Một cuốn sách tốt rất có giá trị và chúng tôi hi vọng bạn cũng nghĩ thế khi đọc cuốn sách này. Toàn bộ kiến

thức về Joomla! 3.x của chúng tôi đã được biên tập cẩn thận để mạng lại cho bạn 7 chương với những thông tin

hữu ích nhằm giúp bạn từng bước tạo cho mình một website với Joomla! 3.x. Sau khi đọc xong cuốn sách này,

bạn sẽ biết được hết những khía cạnh cơ bản của Joomla! để có thể xây dựng hoàn tất một website: Từ làm

thế nào để cài đặt nó cho đến việc làm thế nào để làm việc với nó.

Tâm nguyện của đội ngũ JoomlaShine là mong muốn chia sẽ những điều tốt nhất đến với độc giả thông qua

cuốn sách này. Đừng quên chia sẽ những gì mà bạn đã học được từ cuốn sách cho người khác.Việc mang lại

cho bạn đọc những kiến thức có giá trị không chỉ là mục đích mà còn là phần thưởng cho chúng tôi.

Mặc dù đã cố gắng hết sức nhưng những sai sót là điều không thể tránh khỏi. Chúng tôi xin ghi nhận những ý

kiến và đóng góp từ phía độc giả để làm cho cuốn sách trở lên hoàn thiện hơn!

Page 147: Hướng dẫn sử dụng Joomla 3.0

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

147

Tham khảo

Ra mắt cuối tháng10/2012, Joomla! 3 - In 10 Easy Steps được viết bởi Hagen Graff là một cuốn sách tốt cho

những người mới bắt đầu. Vói những thông tin chi tiết về Joomla! 3.x, tôi bảo đảm bạn sẽ có được nhiều kiến

thức để giúp bạn xây dựng một website như ý mình. Cuốn sách này được xuất bản với nhiều ngôn ngữ khác

nhau như tiếng Anh, tiếng Đức và tiếng Pháp, vậy bạn có thể chọn một phiên bản tương ứng cho mình. Cuốn

sách này được tải và chia sẻ miễn phí.

Bạn có thể vào trang Blog chính thức của JoomlaShine ( Joomlashineblog) hoặc xem qua kênh Youtube để học

thêm về Joomla! cũng như cập nhật những thông tin mới nhất về Joomla! Không chỉ lý thú mà còn hữu ích,

những chủ đề về Joomla! mà có lẽ bạn sẽ không muốn bỏ lõ. Bạn có thể để lại lời bình luận bên dưới mỗi bài

viết – chúng tôi đánh giá cao điều này

Cuối cùng, lời khuyên chúng tôi đưa ra về một vài website học tập tốt mà chúng tôi nghĩ có thể bạn nên tham

khảo như:

http://joomlaviet.info/

http://docs.joomla.org/

http://www.joomlatutorials.com/

http://www.joomlablogger.net/

http://www.ostraining.com/blog/joomla/

http://www.theartofjoomla.com/

http://www.youtube.com/user/Joomla

http://www.joomla-wiki.de/dokumentation/Joomla!_Wiki

http://www.joomlaportal.de/forum.php

http://www.joomlaspanish.org/foros/

http://www.joomla.it/mediawiki/index.php/Pagina_principale