- Trang chủ >>
- Công nghệ thông tin >>
- Web
TÌM HIỂU HTML,CSS và TEMLATES CHO WEBSITE mã NGUỒN mở WORDPREES
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.15 MB, 43 trang )
ĐẠI HỌC THÁI NGUYÊN
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG
BÁO CÁO THỰC TẬP CƠ SỞ
ĐỀ TÀI
TÌM HIỂU HTML,CSS VÀ TEMLATES CHO WEBSITE MÃ NGUỒN MỞ
WORDPREES
Giáo viên hướng dẫn
: Th.s Lê Văn Chung
Sinh viên thực hiên
: Chẩu Văn Hành
Lớp
: CNTT K12C
THÁI NGUYÊN, NĂM 2016
MỤC LỤC
LỜI NÓI ĐẦU
Hiện nay, công nghệ thông tin ngày càng phát triển. Với Template bạn thấy rằng nó được
ứng dụng trong các mã nguồn mở rất phổ biến như: WordPress … Template là những mẫu
layout được thiết kế sẵn, người dùng chỉ cần tải về chỉnh sửa một chút cho phù hợp các chức
năng là có thể đem vào sử dụng. Với các template có sẵn như thế này rất tiết kiệm được thời
gian và suy nghĩ. Ví dụ như các khung ảnh đã có sẵn bạn chỉ cần tải ảnh lên là xong, hoặc các
website đã được xây dựng hết kích thức phần nội dung, hình ảnh, sidebar,… bạn chỉ cần tải
thông tin lên là thành một trang website hoàn chỉnh. Tuy nhiên, sử dụng template cũng có những
hạn chế: do được thiết kế sẵn nên thường không thể đáp ứng hết được chức năng của người sử
dụng, khi được sửa chữa cũng khó hoàn hảo được như thiết kế từ đầu.
Tùy vào nhu cầu, mục đích thiết kế website của bạn mà chọn kiểu thiết kế layout từ đầu
hay sử dụng template có sẵn.
HTML cho phép nhà phát triển, lập trình web tạo ra các trang web có những tính năng ưu
việt hơn. Không những vậy, HTML còn đem đến cho người dùng những trải nghiệm về tốc độ
truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn.
HTML và CSS cũng làm cho các ứng dụng web và các trang website hấp dẫn hơn.
HTML có các tính năng mới được thêm vào việc giúp cho việc xây dựng ứng dụng website dễ
dàng hơn rất nhiều. Ngoài ra, HTML và CSS sẽ giúp các nhà thiết kế Website dễ dàng hơn trong
việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến Flash.
Đó là lý do em lựa chọn đè tài “Tìm hiểu HTML và CSS và Temlates cho website mã nguồn mở
Wordprees ”
CHƯƠNG 1: GIỚI THIỆU VỀ HTML VÀ CSS
1.GIỚI THIỆU VỀ HTML VÀ CSS.
1.1 Đinh nghĩa HTML.
HTML là viết tắt của cụm từ Hypertext Markup Language ( Hiểu nghĩa là "Ngôn ngữ
đánh dấu siêu văn bản bằng thẻ" ).
- HTML không phải là một ngôn ngữ lập trình máy tính mà nó là một ngôn ngữ sử dụng
các thẻ html để biểu diễn các trang web.
Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành
chuẩn năm 1994.
File HTML là 1 text file (file văn bản) có chứa các thẻ (tag).
File HTML sẽ có phần đuôi là .html
1.2 Các thành phần của thẻ HTML.
- Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong đó
bạn cũng có thể viết nhỏ hoặc viết hoa <html> và </html>). Nhờ có cặp TAG này mà Browser
biắt được đó là HTML - document để trình duyệt. Những chữ đó chỉ để dành riêng cho Browser,
người đọc chỉ nhận được những gì viết giữa cặp TAG <body> và</body>. Trong một document
html, chú thích được dùng như sau:
Một số điều cần lưu ý khi soạn thảo siêu văn bản bằng HTML:
- Nhiều dấu cách liền nhau cũng chỉ có tác dụng như một dấu cách. Phải sử dụng thẻ để
thể hiện nhiều dấu giãn cách liền nhau.
- Gõ Enter để xuống dòng được xem như một dấu cách, để xuống hàng thì phải sử dụng
thẻ tương ứng
- Có thể viết tên thẻ không phân biệt chữ in thường và in hoa.
1.3 Các thuộc tính của thẻ HTML.
- Những thẻ HTML đều có những thuộc tính riêng. Những thuộc tính này cung cấp thông tin về thành
-
phần HTML trên wedsite. Tag này xác định thành phần của trang HTML : <body>. Với một thuộc
tính thêm vào là bgcolor, bạn có thể báo cho trình duyệt biết rằng với màu nền là màu đỏ , giống
như sau : < body bglocor =” red” >
Thẻ này xác định dạng bảng HTML : <table> với một thuộc tính đường viền (border), bạn có
-
thể báo cho trình duyệt biết rằng bảng không có đường viền : <table border= 0>
Thuộc tính luôn luôn đi kèm một cặp như name/value : name= “value”( tên = “giá trị “ ) thuộc
tính luôn luôn được thêm vào thẻ mở đầu của thành phần HTML.
1.3.1 Cơ bản về các thẻ HTML.
- HTML có hàng trăm thẻ tag khác nhau. Việc học hết các thẻ html là không cần thiết.
Sau đây là các thẻ html thường dùng đã được tổng hợp.
Thẻ Headings
Headings được xác định với hai thẻ
và . xác định headings lớn nhất.
xác định headings bé nhất.
Cách viết
- HTML sẽ tự động thêm 1 dòng trắng trước sau mỗi heading.
Thẻ đoạn văn - Paragraph
Một trang HTML (như trang tin tức) được chia thành nhiều đoạn văn khác nhau, mỗi
đoạn được xác định bởi thẻ
xác định headings lớn nhất.
xác định headings bé nhất.
Cách viết
- HTML sẽ tự động thêm 1 dòng trắng trước sau mỗi heading.
Thẻ đoạn văn - Paragraph
Một trang HTML (như trang tin tức) được chia thành nhiều đoạn văn khác nhau, mỗi
đoạn được xác định bởi thẻ
Cách viết
- HTML sẽ tự động thêm 1 dòng trắng trước sau mỗi heading.
Thẻ đoạn văn - Paragraph
Một trang HTML (như trang tin tức) được chia thành nhiều đoạn văn khác nhau, mỗi
đoạn được xác định bởi thẻ
và thẻ
tự động xuống dòng khi hết một đoạn văn.
Cách viết:
Thẻ in đậm, in ngiêng, gạch dưới
Cách viết:
Thẻ xuống dòng – Line Breaks
Thẻ
được sử dụng khi bạn muốn kết thúc một dòng nhưng không muốn bắt đầu một
đoạn văn khác. Thẻ
sẽ tạo ra một lần xuống dòng khi bạn viết nó.
Cách viết:
Lời chú thich trong HTML
- Thẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML
- Một dòng chú thích sẽ dược bỏ qua bởi trình duyệt. Bạn có thể sử dụng chú thích để giải thích
-
về code của bạn, để sau này bạn có phải quay lại chỉnh sửa nó cũng dễ dàng hơn .
<!—chú thích ở trong này-- >
1.3.2 Các ký tự đặc biệt trong HTML.
Một vài ký tự tương đương nhu dấu nhỏ hơn <, có một ý nghĩa đặc biệt trong HTML, và
do đó không thể sử dụng như là chữ được. Do vậy để hiện thị được dấu nhỏ hơn < trong HTML
chúng tả phải sử dụng những kí tự đặc biệt. Bới vì dấu < xác định diểm bắt đầu của một thẻ
HTML. Nên nếu bạn muốn trình duyệt hiển thị ký tự đó bạn phải thêm vào code của nó những
kí tự đặc biệt
Mối ký tự đặc biết có 3 phần : Ký hiệu (&), tên của ký tự hoặc một dấu # và một dãy số
và cuối cùng là một dấu chấm phẩy;
Để hiển thị được dấu nhỏ hơn trong HTML bạn phải viết là < hoặc <
Cái hay của việc sử dụng tên thay vì sử dụng số là vì tên của nó thì dễ nhớ hơn
nhiều.Nhưng cái dở là không phải trình duyệt nào cũng hỗ trợ những tên mới này, trong khi đó
hầu hết các trình duyệt có thể nhận ra nó ở dạng số.
Nên chú ý rằng các ký tự đặc biệt phân biệt chữ hoa và chữ thường. Ví dụ sau đây sẽ giúp
bạn thực nghiệm với những kí tự đặc biệt. Lưu ý bạn rằng những kí tự này chỉ có trong trình
duyệt Internet Explorer
Non-breaking space
Ký tự được dùng nhiều nhất trong HTML có lẽ là nbsp (Non-breaking space)
1.3.4 Bảng HTML.
- Tạo vùng chứa bảng: <table> </table>
- Tạo hàng <tr> </tr>
- Tạo cột <td></td>
- Tạo ô tiêu đề <th> </th>
- Ví dụ 1: Sử dụng các thẻ tạo bảng hãy tạo bảng sau
Code:
<table border=’1’>
<tr>
<td> A </td>
<td> B </td>
</tr>
<tr>
<td> C </td>
<td> D</td>
</tr>
</table>
A
B
C
D
- Ví dụ 2:
A
B
C
<html>
<head><title>Demo Table</title></head>
<body>
<table border='1' width='200'>
<tr>
<td colspan='2'>A</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
HTML form và trường dữ liệu :
- Tạo form: Cú pháp: <form action=’a.php’ method=’POST’> </form>
+ Action: hành động sau khi ấn nút xử lý, dữ liệu sẽ được gửi tới trang theo hai phương thức
POST/GET
POST: gửi dữ liệu
GET: nhận dữ liệu
- Các loại input
+ <input type=’text’ name=’txtname’ size=’30’ />
Txtname là tên của textbox
+ <input type=’password’ name=’txtpass’ size=’30’ />
+ <input type=’radio’ name=’GT’ value=’1’ /> Nam
+ <input type=’radio’ name=’GT’ value=’2’ /> Nữ
Chú ý: tên của radio phải giống nhau
+ <input type=’checkbox’ name=’st1’ value=’on’ />PHP
+ <input type=’submit’ name=’ok’ value=’Register’ />
+ <input type=’reset’ name=’reset’ value=’Reset’ />
- <textarea name=’txtnote’ cols=’30’ rows=’4’></textarea>
2.GIỚI THIỆU VỀ CSS
2.1 Cơ bản về CSS.
Những khái niệm cơ bản
CSS định nghĩa (hay xác định) cách các thành phần html sẽ được hiển thị trên các trình
duyệt. Style cho các thành phần được lưu trong các file .css. Có thể tạo ra file .css một lần rồi sử
dụng nhiều lần trong các tài liệu web khác.
Vai trò của CSS và ứng dụng
CSS ra đời đã giải quyết được một vấn đề lớn, khi các thẻ như thẻ <font> và các thuộc
tính màu được thêm vào HTML 3.2, đã bắt đầu nảy sinh vấn đề cho các nhà phát triển web. Khi
phát triển mở rộng các website các thẻ <font> và thuộc tính color được thêm vào trong mọi
trang web đơn, điều đó dẫn đến tiến trình xử lý lâu hơn và tốn kém hơn. Để giải quyết vấn đề
này W3C (World Wide Web Consortium) đã tạo ra CSS. Bắt đầu từ HTML 4.0 tất cả các định
dạng có thể được tách ra khỏi file html và lưu vào một file.CSS riêng biệt. Ngày nay tất cả các
trình duyệt đều hỗ trợ css
2.2.1 Cấu trúc của CSS Cú pháp CSS:
Selector { property:value; }
Trong đó:
+ Selector: Các đối tượng dùng để áp dụng các thuộc tính trình bày. Nó là các tag HTML,
class hay id. Ví dụ: body, h2, p, img, #title, #content, .username,…
+ Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ: background-color,
font-family, color, padding, margin,…
Chú ý: Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính
cho một selector thì phải dùng một dấu; (chấm phẩy) để phân cách các thuộc tính. Tất cả các
thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector.
Chú thích trong CSS:
Cũng như nhiều ngôn ngữ web khác. Trong CSS, chúng ta cũng có thể viết chú thích cho
các đoạn code để dễ dàng tìm, sửa chữa trong những lần cập nhật sau. Chú thích trong CSS
được viết như sau /* Nội dung chú thích */
2.2.2 Các đặc tính cơ bản của CSS.
Với CSS mọi thứ trở nên đơn giản hơn, chúng ta có thể thiết kế một trang web nhẹ nhàng
và tận dụng ít các thẻ HTML, nhưng kiến trúc và bố cục website không hề đơn giản. Vì vậy
người học nên có sự tìm hiểu phối màu và thiết kế bố cục.
Tìm hiểu thuộc tính CSS Font và Text
Font:
+ Font-family:tahoma, arial, verdana;
+ Font-size: px, pt, em, cm ( font hiện tại 12px ~ 10pt)
+ Font-weight: 100-900, bold, bolder
+ Font-style: italic;
+ Font-variant: normal|small-caps|initial|inherit;
Ví dụ: font:italic bold 12px/30px Georgia, serif;
Text:
+ color:
Color:#FFFFFF;
Color:blue
+ Text-align: left, right, center, justify; căn dữ liệu ở dạng Text
+ Text-decoration: none, underline, overline, line-through
+ Line-height: px, pt khoảng cách giữa hai dòng
+ Letter-spacing: px, pt khoảng cách giữa hai ký tự
+ Text-transform: uppercase, lowercase, capitalize cho phép viết chữ hoa thường
Thuộc tính liên kết trong CSS
Thuộc tính liên kết trong css
<a href=’link’>Text</a>
+ Tất cả các liên kết đều:
+ Có màu xanh
+ Có gạch dưới
+ Link đã click vào thì sẽ có màu nâu
A{
// viết lệnh
}
Đặc tính đi bên cạch liên kết
A:hover{// đưa chuột vào liên kết
}
A:active{//click vào liên kết, khó nhận biết vì click sẽ rất nhanh
}
A:visited{//liên kết đã được click
}
Thuộc tính border và background trong CSS
Border:
+ Border-style: solid, dotted (nét chấm), dashed (gạch nối), double (đường viền đậm) //
định vị kiểu đường viên thường dùng để thiết kế layout
+ Border-color: green, blue, #EEEEEE // màu sắc của đường viền
+ Border-width:px, pt // độ lớn của đường viền
+ Border:1px solid green; // dạng viết gộp
+ Border-left:1px dotted red;
Background:
+ Background-color:red; định vị màu sắc
+ Background-image:URL(‘a.jpg’); hình nền
+ Background-repeat: no-repeat (không lặp), repeat (lặp cả tung độ và hoành độ), repeatx, repeat-y //
+ Background-attachment: fixed (nội dung thay đổi nhưng background không thay đổi ví
dụ như hai tấm hình ở bên các trang web về game hay tin tức), scroll (mặc định nhân bản nội
dung, nội dung sẽ lặp đi lặp lại) /
+ Background-position:
px , pt // dựa vào tọa độ
top center left right bottom // có thể kết hợp hai thuộc tính nhưng không kết hợp các thuộc tính
phủ định nhau
+ Viết gộp: Background: red url(‘a.jpg’) no-repeat top center fixed //fixed đi với norepeat
Tìm hiểu danh sách và thuộc tính display trong css
Danh sách:
<ol>, <ul> , <li>
<ul>
<li>Danh sach 1</li>
<li>Danh sach 2</li>
<li>Danh sach 3</li>
</ul>
Sử dụng danh sách để xây dựng menu
- List-style-type:none;// loại bỏ bullet
- List-style-image:URL(‘a.jpg’);// sử dụng biểu tượng bằng các tấm hình
- List-style-position:inside (thụt vào),outside (thò ra);// vị trí của danh sách
Display (hiển thị)
Display: none (dữ liệu bị ẩn), block (dữ liệu thành 1 khối), inline (đẩy dữ liệu ngang hàng
chỉ sử dụng tốt trên thẻ li). Thực tế block cho menu dọc, inline cho menu ngang.
Tìm hiểu thuộc tính position
Sau khi đã hiểu về các thuộc tính ở trên, tiếp tục ta sẽ tìm hiểu về khái niệm cao hơn là
position. Với thuộc tính này, chúng ta có thể sắp đặt, bố trí một vùng DIV ở bất kỳ đâu trên
layout một cách dễ dàng. Tuy nhiên, thuộc tính này đòi hỏi phải thật sự hiểu rõ các thuộc tính ở
trên và thực hành chúng thành thục trước khi muốn dùng position. (Cần tính toán chính xác tọa
độ và người dùng sử dụng các trình duyệt khác nhau, độ phân giải màn hình khác nhau)
Position:relative (Sử dụng bố trí tương đối), absolute (bố trí tuyệt đối); Trong thực tế hai
thuộc tính thường đi kèm với nhau, phối hợp với nhau.
Top: 100px
Left: 100px
Right:
Bottom:
Căn tọa độ của các vùng DIV.
CHƯƠNG 2: TEMPLATES VÀ WORDPREES.
1 Giới thiệu về Template.
1.1 Khái niệm Template.
Template là những mẫu layout được thiết kế sẵn, người dùng chỉ cần tải về chỉnh sửa một
chút cho phù hợp các chức năng là có thể đem vào sử dụng. Với các template có sẵn như thế này
rất tiết kiệm được thời gian và suy nghĩ. Ví dụ như các khung ảnh đã có sẵn bạn chỉ cần tải ảnh
lên là xong, hoặc các website đã được xây dựng hết kích thức phần nội dung, hình ảnh, sidebar,
… bạn chỉ cần tải thông tin lên là thành một trang website hoàn chỉnh.
Sử dụng template cũng có những hạn chế: do được thiết kế sẵn nên thường không thể đáp
ứng hết được chức năng của người sử dụng, khi được sửa chữa cũng khó hoàn hảo được như
thiết kế từ đầu.
Tùy vào nhu cầu, mục đích thiết kế website của bạn mà chọn kiểu thiết kế layout từ đầu
hay sử dụng template có sẵn.
1.2 Cấu trúc Template.
Một theme được hình thành bởi các template. Các template trong theme sẽ bao gồm các
tập tin như header.php, index.php, footer.php, sidebar.php, single.php,…Nhưng sẽ có một tập tin
bắt buộc nhưng không phải là template đó là functions.php.
Template ở đây bạn có thể hiểu nó như là một cái khuôn mẫu được định dạng sẵn nhằm
mục đích hiển thị nội dung trên website. Ví dụ bạn muốn tuỳ biến lại cách hiển thị nội dung của
Post thì sẽ sửa template single.php.
2. Giới thiệu về wordpress
2.1 Giới thiệu khái quát
WordPress là một mã nguồn web mở để quản trị nội dung (CMS – Content Management
System ).
WordPress được biết đến như một CMS miễn phí nhưng tốt, dễ sử dụng và phổ biến nhất
trên thế giới. Các so sánh đều cho thấy người dùng sử dụng CMS này cho việc lập các trang
web cá nhân đến các trang báo điện tử đồ sộ nhất như CNN, Dow John, Wall Street Journal... sử
dụng WordPress.
Được phát triển bằng nhiều ngôn ngữ (hỗ trợ tiếng việt).
Việc quản lý blog, quản lý các bài viết rất thuận tiện giống như các phần mềm thiết kế
website chuyên nghiệp.
WordPress hỗ trợ 3 GB để lưu trữ các tệp hình ảnh và văn bản.
Hệ thống Plugin phong phú và không ngừng cập nhật, ngoài ra người dùng có thể viết
Plugin hoặc tích hợp code vào Wordpress.
Có hệ thống Theme đồ sộ, nhiều theme chuyên nghiệp có khả năng SEO tốt.
Thống kê năm 2013 cho thấy có đến xấp xỉ 20% các trang web nằm trong top 10 triệu
trang web hàng đầu thế giới đang sử dụng WordPress.
Mọi người biết đến WordPress đơn giản là để viết Blog, để đăng tải thông tin của mình
lên mạng nhưng không đơn giản như vậy,
WordPress còn có chức năng như mọi Website khác.
Nó có thể làm site tin tức, đánh giá, bán hàng… thậm chí là… mạng xã hội.
Các bạn có thể ứng dụng wordpress để tạo cho mình 1 website trên nền wordpress , 1
website được tạo ra nhanh chóng đơn giản mà lại tiện cho việc quảng bá sản phẩm , thông
tin , kiến thức ….
WordPress được viết bằng ngôn ngữ lập trình PHP và sử dụng MySQL database.
WordPress là “con” của B2 / Cafelog, được xây dựng trên sự tiện dụng, cùng các định
dạng chuẩn của web.
Phiên bản mới nhất của WordPress tính đến tháng 1/2015 là 4.0.2. Rất nhiều Website nổi
tiếng đang sử dụng WordPress làm nền tảng để phát triển như CNN, ebay, bata,…
2.2 Lịch sử phát triển
WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog
với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã
phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất thế giới với gần 80 triệu trang
web được viết từ WordPress trên toàn thế giới.
Điểm ưu thế của Wordpress ở đây là nó hoàn toàn miễn phí và bạn có thể dùng nó để tạo
website đơn giản hoặc là website doanh nghiệp.
Chỉ cần lên trang chủ của WordPress down bản mới nhất về và cài đặt là bạn đã sở hữu 1
website có thể tùy biến rất dễ dàng, và yêu cầu của nó là phải có một máy chủ, 1 tên miền. Tuy
vậy WordPress vẫn có một dịch vụ hoàn toàn miễn phí mà không cần những thứ đó,
wordpress.com giải quyết vấn đề đó cho bạn với một số hạn chế đó là ít tùy biến, và phải lệ
thuộc vào máy chủ của WordPress (đăng bài spam sẽ bị khóa tài khoản ngay và luôn).
WordPress bắt đầu chỉ là một Blog nhưng đã phát triển rất mạnh đến ngày nay với đầy đủ
các tính năng chuyên nghiệp nhất nhờ vào hệ thống hàng ngàn plugin, widget và theme do chính
wordpress phát triển hoặc cộng đồng đóng góp cũng như các công ty thương mại.
WordPress được viết bằng ngôn ngữ PHP và hệ quản trị cơ sở dữ liệu phổ biến nhất hiện nay
MySQL, và được cấp phép theo GPLv2.
Kết lại một câu là WordPress là mã nguồn mà mình thích nhất bởi ở tính năng, tính dễ sử
dụng và đặc biệt là nó nhẹ.
2.3 Tính Năng
Wordpress CMS 4.5 bản gốc có các module cơ bản sau:
Đơn giản
Tính đơn giản giúp bạn nhanh chống có được nội dung và các xuất bản online. Không gì
khác ngoài việc bạn dựng website lên và xuất bản nội dung. WordPress được xây dựng để làm
cho điều đó xảy ra.
Mềm dẻo
Với WordPress, bạn có thể tạo ra bất kỳ loại trang web bạn muốn: một blog cá nhân hoặc
trang web, một photoblog, một trang web để kinh doanh, danh mục đầu tư chuyên nghiệp, một
trang web của chính phủ, một trang web tạp chí hoặc tin tức, một cộng đồng trực tuyến, thậm
chí là một mạng lưới các trang web. Bạn có thể làm cho trang web của bạn đẹp với theme
và plugins mở rộng. Bạn thậm chí có thể xây dựng ứng dụng của riêng bạn.
Xuất bản Dễ dàng
Nếu bạn đã từng tạo ra một tài liệu, bạn có thể vừa hít sáo vừa tạo ra nội dung với
WordPress. Bạn có thể tạo ra các bài viết và các trang, định dạng chúng một cách dễ dàng, chèn
phương hình ảnh/video và chỉ việc bấm vào các nút trực tiếp trên web.
Công cụ xuất bản
WordPress làm cho bạn dễ dàng quản lý nội dung của bạn. Tạo bản thảo, xuất bản theo
lịch trình và nhìn vào bản sửa đổi bài viết của bạn. Bài viết của bạn có thể public hoặc private và
có thể bảo vệ post và page bằng mật khẩu.
Quản lý người dùng
Mỏi loại người dùng truy cập vào website của bạn với nhiệm vụ khác nhau.
Administrators thì quản lý website, Editor quản lý nội dung, tác giả và cộng tác viên thì chịu
trách nhiệm viết nội dung, subscribers có thể quản lý profile của họ. Điều này giúp cho website
bạn có thể có sự tham gia của nhiều cộng tác viên, trong khi các người khác thì xem như là một
phần của cộng đồng.
Quản lý Media (hình ảnh, video,..)
Rất dễ dàng để bạn có thể tải một bức ảnh hoặc vidoe trong wordpress. Đơn giản bạn chỉ
cần kéo và thả video/hình ảnh vào công cụ upload và sau đó thêm vào website. Bạn có thể dễ
dàng thêm thuộc tính alt, title, captions và chèn bức ảnh từ galleries vào nội dung bài viết. Ngoài
ra còn có một công cụ chỉnh sửa ảnh và bạn có thể nghịch bức ảnh với nó.
Tuân thủ các tiêu chuẩn
Mỏi một đoạn mã của wordpress điều tuân thủ theo tiêu chuẩn của W3C. Điều này có
nghĩa trang web của bạn sẽ hoạt động tốt với các trình duyệt web hiện tại và vẫn duy trì khả
năng tương thích với các trình duyệt trong tương lai.
Hệ thống giao diện (Theme ) dễ sử dụng
Trong wordpress có 2 theme( giao diện) mặc định cho bạn. Ngoài ra wordpress còn cung
cấp cho bạn hàng ngàn theme khác để bạn có thể tải về và làm một website đẹp. Nếu bạn vẫn
không thích các theme của wordpress thì bạn có thể dễ dàng upload theme của bạn ( hoặc theme
bạn mua) và cài đặt vào website.
Plugin mở rộng
Mặc định wordpress đã cung cấp các tính năng đầy đủ cho người dùng cơ bản. Nhưng
nếu có nhu cầu mở rộng tính năng thì bạn có thể tải về và cài đặt hàng ngàn plugin khác của
wordpress : galleries, social networking, forums, social media widgets, spam protection,
calendars, fine-tune controls for search engine optimization và forms
Hệ thống Comment
Công cụ comment của WordPress cung cấp cho bạn mọi thứ bạn cần để làm một diễn đàn
đơn giản, để thảo luận và quản lý thảo luận.
Tối ưu hóa công cụ tìm kiếm
Người đứng đầu nhóm Googles web spam nói rằng wordpress là một lựa chọn tuyệt vời,
nó đã lo 80-90% của các cơ chế tối ưu hóa công cụ tìm kiếm cho bạn. Và muốn việc SEO tốt
hơn nửa thì cũng có rất nhiều plugin hỗ trợ cho bạn.
WordPress đa ngôn ngữ
WordPress đã hỗ trợ hơn 70 ngôn ngữ, nên nếu bạn định làm website với ngôn ngữ khác
tiếng anh thì việc này khá dễ dàng với wordpress.
Cài đặt và nâng cấp dễ dàng
WordPress đã luôn luôn dễ dàng để cài đặt và nâng cấp. Sử dụng một chương trình FTP,
bạn có thể tạo ra một cơ sở dữ liệu, tải lên WordPress sử dụng FTP, và chạy trình cài đặt. Nếu
bạn không quen dùng FTP ? Hiện tại rất nhiều hosting hỗ trợ việc cài đặt và cập nhật wordpress
thông qua giao diện rất đơn giản.
Công cụ Import
WordPress có sẵn công cụ import cho blogger, LiveJournal, Movable Type, TypePad,
Tumblr và WordPress.com. Nếu bạn đã sẵn sàng để chuyển sang wordpress, chúng tôi đã làm
cho nó dễ dàng với bạn.
Làm chủ dữ liệu của bạn
Các dịch vụ lưu trữ đến và đi, nếu bạn sử dụng một dịch vụ và nó bị đóng cửa thì bạn sẽ
gặp thiệt hại thế nào ? Nếu bạn đã bao giờ nhìn thấy các quảng cáo xuất hiện trên trang web của
bạn, bạn có thể đã từng khá khó chịu? Sử dụng WordPress có nghĩa là không ai có quyền truy
cập vào nội dung của bạn. Sở hữu dữ liệu của bạn, trang web của bạn, nội dung của bạn, dữ liệu
của bạn.
WordPress miễn phí
WordPress được cấp phép theo GPL. Bạn có thể tự do sử dụng WordPress theo bất kỳ
cách nào bạn chọn: cài đặt nó, sử dụng nó, sửa đổi nó, phân phối nó. WordPress được xây dựng
trên nền tảng là Phần mềm tự do.
Cộng đồng
Như là mã nguồn mở CMS phổ biến nhất trên web, WordPress có một cộng đồng sôi
động và hỗ trợ. Đặt một câu hỏi trên diễn đàn hỗ trợ và nhận được sự giúp đỡ từ một tình
nguyện viên, tham dự một WordCamp hoặc Meetup để tìm hiểu thêm về WordPress, đọc bài
viết blog và hướng dẫn về WordPress. Cộng đồng là trung tâm của WordPress, đó là điều làm
cho wordpress có ngày hôm nay.
Đóng góp
2.4 Ứng dụng
Wordpress được sử dụng ở nhiều website, từ những website cá nhân cho tới những hệ
thống website doanh nghiệp, nó cung cấp nhiều dịch vụ và ứng dụng nhờ khả năng tăng cường
tính năng bằng cách cài thêm các module, block... Trước đây, Wordpress chủ yếu được sử dụng
làm trang tin tức nhờ module News tích hợp sẵn trong Wordpress được viết rất công phu, nó lại
đặc biệt phù hợp với yêu cầu và đặc điểm sử dụng cho hệ thống tin tức. Kể từ phiên bản
Wordpress 4.1.1, đội ngũ phát triển Wordpress đã định nghĩa lại Wordpress, theo đó, Wordpress
được coi như phần mềm trực tuyến mà chức năng CMS chỉ là một module của Wordpress
Wordpress có thể dễ dàng cài đặt, dễ dàng quản lý kể cả với những người mới sử dụng do đó
thường được những đối tượng người dùng không chuyên ưa thích.
WordPress là một mã nguồn mở bằng ngôn ngữ PHP để hỗ trợ tạo blog cá nhân, và nó được rất
nhiều người sử dụng ủng hộ về tính dễ sử dụng, nhiều tính năng hữu ích. Qua thời gian, số
lượng người sử dụng tăng lên, các cộng tác viên là những lập trình viên cũng tham gia đông đảo
để phát triển mã nguồn WordPress có thêm những tính năng tuyệt vời.WordPress đã được xem
như là một hệ quản trị nội dung (CMS – Content Management System) vượt trội để hỗ trợ người
dùng tạo ra nhiều thể loại website khác nhau như blog :
Website tin tức
Website tạp chí
Website giới thiệu doanh nghiệp
Website bán hàng – thương mại điện tử
Website giáo dục, trường học
Website của gia đình, cá nhân, nhóm sở thích...
Thậm chí với các loại website có độ phức tạp cao như đặt phòng khách sạn, thuê xe, đăng
dự án bất động sản,…
Hầu như mọi hình thức website với quy mô nhỏ và vừa đều có thể triển khai trên nền
tảng WordPress.
3.Template cho wordpress
3.1 Cấu trúc
Một theme được hình thành bởi các template. Các template trong theme sẽ bao gồm các
tập tin như header.php, index.php, footer.php, sidebar.php, single.php,…Nhưng sẽ có một tập tin
bắt buộc nhưng không phải là template đó là functions.php.
Template ở đây bạn có thể hiểu nó như là một cái khuôn mẫu được định dạng sẵn nhằm
mục đích hiển thị nội dung trên website. Ví dụ bạn muốn tuỳ biến lại cách hiển thị nội dung của
Post thì sẽ sửa template single.php.
Mục lục nội dung
Cấu trúc template trong một theme
Style.css – Trái tim của theme
Functions.php – Bộ não của theme
Index.php – Template gốc của theme
Header.php – Phần đầu của theme
Footer.php – Phần chân trang của theme
Sidebar.php – Phần hiển thị sidebar
Các template khác trong theme
Template hiển thị trang lưu trữ
Template hiển thị trang nội dung
Template trang chủ
Template trang 404
Template trang kết quả tìm kiếm
Tài nguyên tham khảo
Tìm hiểu về Template Tag
Vòng lặp (Loop)
Hàm nối get_template_part()
Template Tags tổng hợp
Template Tags cho Post
Template Tags cho ảnh thumbnail của Post
Template Tags cho Category và Tag
Cấu trúc template trong một theme
Hiện nay các theme, ngoài việc họ sử dụng các template bắt buộc của WordPress hay
NukeViet thì họ còn sử dụng thêm các template thêm vào. Nên nếu bạn muốn hiểu cấu trúc
template chuẩn của WordPress thì hãy xem template của theme Twenty Fifteen. Bạn có thể xem
nó trong thư mục /wp-content/themes/twentyfifteen/.
Cấu trúc template của theme Twenty Fifteen
Style.css – Trái tim của theme
Tất cả các theme trong WordPress đều phải có tập tin style.css. Tập tin này không chỉ là
chứa các CSS trong theme mà nó còn có chức năng khai báo thông tin của theme như tên theme,
tên tác giả, số phiên bản,…nhằm có thể hiển thị trong khu vực Themes của WordPress. Nếu
theme bạn không có tập tin này thì theme của bạn không hợp lệ.
Functions.php – Bộ não của theme
Tập tin này tuy không thuộc template của theme nhưng nó sẽ có vai trò chứa những đoạn
mã PHP để khai báo các tính năng đặc biệt, hoặc sử dụng hàm add_theme_support() để khai báo
các tính năng trong theme. Bạn hãy nhớ một điều rằng, functions.php không phải là template
nên nó sẽ không hiển thị ra bên ngoài nhưng mà nó sẽ được thực thi, và tất cả code PHP trong
đây sẽ được thực thi khi website được tải ra.
Index.php – Template gốc của theme
Tập tin index.php không chỉ là template để sử dụng cho trang chủ, mà nó còn là template
gốc của website nếu như các template khác chưa được khai báo. Ví dụ nếu theme của bạn không
có tập tin single.php để làm template cho trang nội dung của Post, thì nó sẽ sử dụng tập tin
index.php để hiển thị. Các template khác cũng vậy.
Header.php – Phần đầu của theme
Template này không bắt buộc nhưng nên sử dụng để khai báo phần header của trang, bao
gồm các thẻ như<html>, <head>, <body>,…Và sau đó ở các template khác, chúng ta sẽ gọi nó
ra bằng template tagget_header().
Footer.php – Phần chân trang của theme
Nó cũng giống như header.php đó là được sử dụng để khai báo phần chân trang của
theme. Rồi sau đó ở các template khác ta sẽ gọi nó ra bằng get_footer().
Sidebar.php – Phần hiển thị sidebar
Bạn có thể khai báo sidebar trực tiếp vào các template khác với hàm dynamic_sidebar()
nhưng nếu bạn sử dụng sidebar ở nhiều template khác nhau thì bạn nên viết code hiển thị
sidebar vào tập tin sidebar.php. Rồi sau đó sẽ dùng hàm get_sidebar() để gọi template này ra.
Các template khác trong theme
Các template dưới đây nó sẽ không bắt buộc bạn phải tạo ra như 3 tập tin ở trên, nhưng
nó sẽ được sử dụng nếu bạn có khai báo. Template nào không khai báo thì nó sẽ sử dụng
template cấp cao hơn. Ví dụ nếu single-123.php không khai báo thì nó sẽ sử dụng single.php.
Template hiển thị trang lưu trữ
Template này sẽ sử dụng cho tất cả các trang lưu trữ trên website. Trang lưu trữ là các
trang phân loại bài viết như category, tag, custom taxonomy,…
Archive.php – Định dạng hiển thị cho toàn bộ trang lưu trữ trên website như lưu trữ theo
ngày tháng, category, tag, custom taxonomy,..
Category.php – Định dạng hiển thị cho toàn bộ category của website.
Category-tin-tuc.php – Định dạng hiển thị trang category có slug là tin-tuc.
Category-123.php – Định dạng hiển thị cho category mang ID 123.
Tag.php – Định dạng hiển thị toàn bộ tag của website.
Tag-tin-tuc.php – Định dạng hiển thị toàn bộ tag có slug là tin-tuc.
Tag-123.php – Định dạng hiển thị toàn bộ tag có ID là 123.
Author.php – Định dạng hiển thị cho trang toàn bộ các tác giả trong website.
Author-thachpham.php – Định dạng trang hiển thị tác giả tên thachpham.
Author-123.php – Định dạng trang hiển thị tác giả có ID là 123.
Archive-product.php – Định dạng trang hiển thị danh sách các bài viết thuộc post type
tên product.
Taxonomy-product-category.php – Định dạng trang hiển thị danh sách các bài viết thuộc
custom taxonomy tên product-category.
Template hiển thị trang nội dung
Template này sẽ định dạng cho trang hiển thị nội dung của Post hoặc Page hoặc
một Custom Post Type nào đó.
Single.php – Định dạng trang hiển thị nội dung của tất cả các Post.
Single-product.php – Định dạng trang hiển thị nội dung tất cả các post trong post type tên
product.
Single-hello.php – Định dạng trang hiển thị nội dung của post có slug là hello.
Single-123.php – Định dạng trang hiển thị nội dung của post mang ID là 123.
Page.php – Định dạng hiển thị toàn bộ Page trong website.
Page-123.php – Định dạng hiển thị page có ID là 123.
Template trang chủ.
Các template này sẽ được sử dụng cho việc định dạng hiển thị của trang chủ.
Index.php
Front-page.php
Template trang 404
Template này sẽ hiển thị lỗi 404 trong website, và nó chỉ có 1 tập tin duy nhất là 404.php.
Template trang kết quả tìm kiếm,
Khi sử dụng chức năng tìm kiếm trên website, kết quả tìm kiếm sẽ được hiển thị bằng
template search.php. Nếu search.php không tồn tại thì nó sẽ dùng archive.php.
3.2 Lập trình
WordPress không còn xa lạ gì nữa với lập trình viên PHP trên thế giới nói chung và ở
Việt Nam nói riêng. Với danh hiệu là một CMS được sử dụng nhiều nhất trong lĩnh vực làm
website blog, thương mại điện tử vừa và nhỏ nên ai cũng muốn có thể tự mình nắm bắt CMS
này.
Thường khi nói về lập trình WordPress thì khái niệm “lập trình theme WordPress” luôn
là từ khóa đầu tiên mà bạn sẽ phải tìm hiểu bởi WordPress là một CMS đã được tổ chức chặt chẽ
nên các lập trình viên phải lập trình tuân thủ theo hệ thống API mà nó đã cung cấp. Tuy nhiên
khi bạn biết lập trình theme thì bạn chỉ đang ở mức căn bản thôi bởi vì bạn mới học cách sử
dụng API chứ chưa thể tự viết ra những modules cho riêng mình.
