Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)

Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress và ứng dụng (Đồ án tốt nghiệp)

-o0o -ÁN T T NGHI P

I PHÒNG 2016

-o0o -CHO

Ngành: Công ngh Thông tin

Sinh viên th c hi n: Tr nh Doãn Khi n

Mã s sinh viên: 1212101001

tài: Tìm hi u k thu t làm giao di n cho h qu n tr n i dung Wordpress và ng

d ng.

1 N i dung và các yêu c u c n gi i quy t trong nhi m v tài t t nghi p

a N i dung:

- Tìm hi u v h qu n tr n i dung mã ngu n m WordPress.

- K thu t t o giao di i dùng cho WordPress.

- Qu n tr n i dung trang tin trên WordPress.

-b Các yêu c u c n gi i quy t

- Hi c m c tiêu và cách th c th c hi n.

2 Các s li u c n thi thi t k , tính toán

m th c t p

- Tìm hi u v h qu n tr n i dung mã ngu n m WordPress.

- K thu t t o giao di i dùng cho WordPress.

- Qu n tr n i dung trang tin trên WordPress.

n nhi m v

n H u Ngh

Tinh th c tài t t nghi p:

nhi m v tài t t nghi p)

m ghi b ng s và ch )

( Ký, ghi rõ h tên )

L I C

c h t em xin bày t lòng bi i v i Th.S u B môn Công ngh thông tin i h c Dân L p H t nhi u th i gian quý báu, tr c ti ng d n t , ch b o em trong su t quá trình làm lu t nghi p

Em xin chân thành c t c các th y cô giáo trong B môn Công nghthông tin - i Phòng, chân thành c y giáo, cô giáo tham gia gi ng d y và truy t nh ng ki n th c quý báu trong su t th i gian em h c t p

t c và ph n bi n lu a em giúp em hi u rõ mình nghiên c em có th hoàn thành lu n án này

Em xin c n H u Ngh Hi i h c Dân l p H i Phòng, Ban giám hi ng, B môn tin h c, các Phòng ban nhà

u ki n t t nh t trong su t th i gian h c t p và làm t t nghi p

Tuy có nhi u c g ng trong quá trình h c t p, trong th i gian th c t

M C L C

L I C 1

DANH M C HÌNH 4

GI I THI U 6

1: H QU N TR N I DUNG WORDPRESS 7

1.1 Gi i thi u mã ngu n m 7

1.1.1 Khái ni m mã ngu n m 7

1.1.2 Phân lo i ph n m m ngu n m 8

1.1.3 L i ích mã ngu n m 8

1.1.4 M t s lo i mã ngu n m ng g p 8

1.2 Tìm hi u v WordPress 11

1.2.1 Gi i thi u v h qu n tr n i dung WordPress 11

n phát tri n c a WordPress 12

1.2.3 Nh ng thành t u c a WordPress 14

1.2.4 Nh ng nét n i b t c a WordPress 15

C XÂY D NG T WORDPRESS 17

2.1 Nh ng yêu c t cho WordPress 17

t Wordpress trên Localhost 17

THU T T O GIAO DI I DÙNG TRONG WORDPRESS 25

3.1 Khái ni n v giao di i dùng trong WordPress (Theme Wordpress)25 3.2 C u trúc c a Theme WordPress 26

3.2.1 C c Theme WordPress 26

3.2.2 Theme Stylesheet 27

3.2.3 T p tin tùy ch n ch 27

3.2.4 Template files 28

3.2.6 Vòng l p (Loop) 32

3.3 Thi t k theme WordPress 33

ng thi t k Theme 33

3.3.2 T o c u trúc theme 34

3.3.3 Vi t code cho t p tin function.php 35

3.3.4 Vi t code cho t p tin header.php 38

3.3.5 Vi t code cho t p tin footer.php 40

3.3.6 Vi t code cho t p tin index.php 42

3.3.7 Vi t code cho t p tin content.php 43

3.3.8 Vi t code cho Post Format 46

3.3.9 Code cho t p tin single.php và page.php 48

3.2.10 Vi , trang tìm ki m và trang 404 49

3.3.11 Vi t code cho t p tin sidebar.php 52

3.3.12 Vi t CSS cho theme 52

CH N TR N I DUNG TRANG TIN TRÊN WORDPRESS 58

4.1 Các thành ph n trong trang qu n tr WordPress 58

4.1.1 Truy c p vào trang qu n tr WordPress 58

4.1.2 Các thành ph n trong DashBoard 59

4.2 Qu n tr website WordPress 60

t 60

4.2.2 T o Page 63

4.2.3 Thi t l p và qu n lý bình lu n 64

ng d n s d ng Widget 66

4.2.5 Làm vi c v i Menu trong WordPress 68

ng d n Plugin trong WordPress 72

4.2.7 Qu n tr i dùng (users) trên WordPress 74

ng d n m t 76

K T LU N 83

DANH M C HÌNH

Hình 1.2.1: WordPress thu m i thành l 11

Hình 2.2.1: Giao di n XAMPP 17

Hình 2.2.2: Giao di n phpMyadmin 18

Hình 2.2.3: Giao di n Database trong phpMyadmin 18

c sau khi gi i nén mã ngu n 18

Hình 2.2.5: Các t c mã ngu n c a WordPress 19

Hình 2.2.6: Mã ngu c website 19

Hình 2.2.7: Giao di n Database trong phpMyadmin 20

Hình 2.2.8: T o user account 20

Hình 2.2.9: T o database cùng v i user 21

Hình 2.2.10: Ch n ngôn ng t WordPress 21

Hình 2.2.11: Wordpress yêu c u nh p thông tin database 22

Hình 2.2.12: Nh p thông tin database 22

Hình 2.2.13: Thi t các thông tin quan tr ng c a website 23

t website thành công 23

Hình 2.2.15: Trang qu n tr c t 24

Hình 2.2.16: Trang ch website sau khi cài WordPress 24

Hình 3.2.1: C u trúc template trong Theme WordPress 28

Hình 3.2.2: B c c website d ki n 33

c ch a theme 35

Hình 3.2.4: Theme v a t o trong Giao di n c a trang Qu n tr 35

Hình 3.2.5: Thêm Menu cho website 40

Hình 3.2.6: Theme Widget cho sidebar 52

Hình 3.4.1: Trang ch website Công ngh 24h 56

Hình 3.4.2: M t bài vi t trong website Công ngh 24h 57

p vào trang qu n tr 58

Hình 4.1.2: Trang Qu n tr (DashBoard) 59

Hình 4.2.1: T o bài vi t m i 61

Hình 4.2.2: Khung so n th o bài vi t 61

Hình 4.2.3: Thêm th và chuyên m c cho bài vi t 62

Hình 4.2.4: Thêm i di n cho bài vi t 62

Hình 4.2.5: Ch n i di n cho bài vi t 63

t 63

Hình 4.2.7: Thêm trang m i 64

Hình 4.2.8: Khung bình lu n trong website 64

Hình 4.2.9: Bình lu n ch xét duy t 65

Hình 4.2.10: Duy t bình lu n 65

Hình 4.2.11: H nh th bình lu n không c n ch duy t 66

Hình 4.2.12: C m bình lu n nh y c m 66

Hình 4.2.13: Qu n lý wigdet 67

Hình 4.2.14: Thêm Widget 67

Hình 4.2.15: Lo i b widget 68

Hình 4.2.16: Thi t l p widget 68

Hình 4.2.17: Giao di n Menu 69

Hình 4.2.18: T o Menu 69

Hình 4.2.19: Thêm Trang vào Menu 70

Hình 4.2.20: Thêm Liên k t vào Menu 70

Hình 4.2.21: Thêm Chuyên m c vào Menu 71

Hình 4.2.22: T o Menu Location 71

Hình 4.2.23: Menu xu t hi n trên trang ch 72

Hình 4.2.23: Cài plugin m i 73

Hình 4.2.24: Danh sách plugin 73

Hình 4.2.25: Giao di t Plugin 74

Hình 4.2.26: Giao di i dùng m i 75

i dùng 75

t t ng quan 76

t Vi t 78

c 79

Hình 4.2.31: Trang khu v t -> th o lu n 80

Hình 4.2.32: Trang khu v c tùy ch nh Media 81

Hình 4.2.33: Trang khu v t - ng d 82

GI I THI U

Ph n m m ngu n m là ph n m m v i mã ngu c công b và s d ng m t

gi y phép ngu n m Gi y phép này cho phép b t c nghiên c u, thay

i, c i ti n ph n m m, sao chép và phân ph i ph n m m d i ho c

i mà không ph i tr ti n b n quy i l c

Thu t ng "ph n m m ngu n m i "mã ngu n

m Ngày nay có r t nhi u d ng m

g m: ph n c ng, ph n m m ngu n m , tài li u/h c li u m , thi t k m Ph n m m ngu n m phát tri n v i t khá cao, cho th y nó có nhi ng l so v

Vi t Nam mã ngu n m ng còn xa l Vi c s d ng và phát tri n mã ngu n m n c ta r c quan tâm, nó giúp gi m thi u ngu n tài chính khi chi tr b n quy n và nhi u l i ích khác Hi n nay, có r t nhi u s n ph m ngu n m c s d : WordPress, Joomla, Magento,

qu n tr n i dung mã ngu n m c quan tâm và s d ng r ng rãi b n, d s d c bi t là hoàn toàn mi n

t trong vi c s d ng WordPress làm website là vi c t o giao

di n theo yêu c án này c a em s nghiên c u k thu t t o giao di n

website lên trên Internet và qu n tr n i dung c a website

1: H QU N TR N I DUNG WORDPRESS

1.1 Gi i thi u mã ngu n m

1.1.1 Khái ni m mã ngu n m

Mã ngu n m (Open Source) là thu t ng ch các s n ph m ph n m m có mãngu n m Ph n m m ngu n m là các ph n m c cung c p d i d ng c mã và ngu n, không ch là mi n phí v giá mua mà ch y u là mi n phí v b n quy n Ng i dùng có quy n s i, c i ti n, phát tri n, nâng c p theo m t s nguyên t c chung quy

nh trong gi y phép ph n m m ngu n m mà không c n xin phép ai, u mà h

i v i các ph n mNhà cung c p ph n m m ngu n m có quy n yêu c u ng i dùng tr m t s chiphí v d ch v b o hành, hu n luy n, nâng c p, t v c là nh ng d ch v th c s

c hi ph c v ng i dùng, nh c bán các s n ph m ngu n m

vì nó là tài s n c a trí tu chung

M u ki n c áp d ng nh t là GPL: GNU General Public Licence c a

t ch c Free Software Foundation

u kho n phân ph i c a ph n m m mã ngu n m ph i tuân th các tiêuchu n sau:

- Gi y phép ph c giành riêng cho m t s n ph m.

nh ng ch n quy n không cho phép, v i Open Source ng i dùng

có th g p nhi u nhà cung c ng yêu c u c a mình

- H u h t các s n ph u có kh o m t tuy t v i, khi m t

v t n c tìm th y nó th c s n m m có b n quy n

- Các h th ng Open Source, nh t là các h th ng d a trên UNIX, th ng r t linh

ho c xây d ng t nhi u kh i th ng nh c miêu t c n k ,

r t d ng i dùng thay th nhi u ph n c a h th ng v i ph n có giao di n

t

- Có m t c ng h tr l n, không b ph thu c vào b t kì công ty nào

1.1.4 M t s lo i mã ngu n m ng g p

Hi n nay, trên th gi i có r t nhi u lo i ngu n m (hay còn g i là mã ngu n

m ) khác nhau, m i lo i ngu n m có m t ng d t s lo i ngu n m c s d ng r ng rãi:

- Ubuntu: là h u hành mã ngu n m dùng cho máy tính xách tay, máy

bàn và c máy ch , Ubuntu ch a t t c ng d ng c n thi t cho công vi c t i nhà, ng hay t

- Vbulletin: là mã ngu n m xây d ng các di c tuy c s d ng ph

bi n nh t hi n nay H u h t các di n t i Vi c xây d ng

b ng Vbulletin

- Apache Tomcat: là h th ng mã ngu n m c a hãng Apache Software, ng

d ng Apache Tomcat có th x c s lu ng l n các yêu c u bao g m ng

d ng web tr c tuy n, các gói d li a Server Client, tùy bi n ddàng theo nhu c u, quy mô c a t ng t ch c, doanh nghi p

- Linux: là m t h hi u hành mã ngu n m d c xây d ng b i LinusTorvalds Linux có m c tính c a m t h u hành hi i: h th

nhi n, b nh , t i theo nhu c u, qu n lý b nh , các module driver thi t b , video frame buffering, và m ng internet b ng giao

th c TCP/IP

- n m thay th cho Microsoft Office,

m c ng nh và có th c v i Microsoft Office

h thân thi n b ng Microsoft Office

- WordPress: là m t h qu n tr n i dung mã ngu n m c ng d thi t

k các websitte hay blog cá nhân

- Ngoài ra còn r t nhi u lo i mã ngu n m

WebGUI, OpenCMS, Fedora, Centos, Joomla, Xenforo,

Trên th ng ph n m m, có nhi u lo i gi y phép Có th chia các gi yphép này thành các lo i sau:

- Ph n m i (Commercial Software) Là ph n m m thu c b nquy n c a tác gi ho c nhà s n xu t, ch c cung c p d ng mã nh phân,

i dùng ph i mua và không có quy n phân ph i l i

- Ph n m m th nghi m gi i h n (Limited Trial Software) Là nh ng phiên b n

gi i h n c a các ph n m c cung c p mi n phí nh m m

th nghi m, gi i thi u s n ph i dùng quy nh mua Lo i

ph n m m này b gi i h n v i gian s d ng là 60 ngày)

l i các ph n m i d ng mã nh phân và mã ngu n V nguyên t c nhóm phát tri i dùng t do l y mã ngu n t kho mã ra

s a (g i là check- a vào l i kho mã mà k c h ki m tra c (g i -

- Ph n m m mã m ki u Apache (Open Source Apache-style) Ch p nh nngu n m ki i ngoài nhóm phát tri n xâm

nh p vào lõi c a mã n n (core codebase), t c phép th c hi n các

Ph n m m mã m ki u CopyLeft hay ki u Linux (Open Source CopyLeft, Linux-style) Ph n m m mã m ki c a Free Software Foundation FSF và GNU Gnu i ngh ch hoàn toàn v iCopyRight!) hay còn g i là gi y phép GPL (General Public Licence) là m t

c ti n quan tr ng t do hóa c a các gi y phép ph n m m Gi y phép GPL yêu c u không nh ng mã ngu n g c ph c phân ph i theo các

nh c a GPL mà m i s n ph m d n xu i tuân th GPL

1.2 Tìm hi u v WordPress

1.2.1 Gi i thi u v h qu n tr n i dung WordPress

WordPress là m t ph n m m ngu n m (Open Source Software c vi t b ng ngôn ng l p trình website PHP (Hypertext Preprocessor) và s d ng h qu n tr

d li u MySQL c ra m t l u tiên vào ngày 27/5/2003 b i tác

gi Matt Mullenweg và Mike Little

Hình 1.2.1: WordPress thu m i thành l

WordPress là m t mã ngu n m b ng ngôn ng h tr t o blog cá nhân

c r t nhi i s d ng ng h v tính d s d ng, nhi u ích Qua

th i gian, s i s d ng tác viên là nh ng l p trình viên

phát tri n mã ngu n WordPress có thêm nhtuy t v n 2016 c xem t h qu n tr n i dung (CMS Content Management System t tr h tr i dùng t o ra

nhi u th lo blog, website tin t c/t p chí, gi i thi u doanh nghi p, bán hàng n t , th m chí v i các lo ph c t p

t phòng khách s án b ng s H i hình

th c website v i quy mô nh và v u có th tri n khai trên n n t ng WordPress

không có ngh a là WordPress ch thích h p v i các d án nh , mà hi n nay có t i kho ng 25% website trong danh sách 100 website l n nh t th gi i s d ng

mã ngu n WordPress Ví d p chí TechCrunch, Mashable, CNN, BBC America, Variety, Sony Music, MTV News, Bata, Quartz

1.2 n phát tri n c a WordPress

- 2003 c ra m t l u b i Matt Mullenweg và Mike

- 2004 c gi i thi u v i phiên b n 1.2 (Mingus).

- 2005:

+ H th c gi i thi u phiên b n 1.5 (Strayhorn).

+ B nh m t n t i lâu (persistent caching) và m t giao di i dùng backend m i c ra m t trong phiên b n 2.0 (Duke).

- 2007:

+ M t giao di i dùng m i, t , chính t ki

m c gi i thi u trong phiên b n 2.1 (Ella).

+ Widget, h tr Atom t và t xu t hi n trong phiên b n 2.2

(Getz).

+ Tagging, c p nh t các thông báo và m t h th ng phân lo i (taxonomy) m

c gi i thi u trong phiên b n 2.3 (Dexter).

- 2008:

+ Phiên b n 2.5 (Brecker) c phát hành v i giao di n i dùng (UI)

qu n tr m i c thi t k b i Happy Cog và gi i thi u b u khi n và API shortcode

+ Phiên b n 2.6 (Tyner) c xây d ng trên 2.5 và gi i thi u

lu ng bình lu n (comment), phân trang và m t API m i qu n lý s ng l n,

+ Phiên b n 3.1 (Gershwin) gi i thi u post format và admin bar

+ Phiên b n 3.2 (Reinhardt) c i thi n

b n này nâng c p yêu c u t i thi PHP 5.2.4 và MySQL 5.0.15 và gi i thi u m t giao di n m nh m i v i tên là: "Twenty Eleven"

+ Phiên b n 3.3 (Sonny) ra m t giúp cho WordPress thân thi i

m i b u v i tin nh n chào m ng và con tr

+ Phiên b n 3.6 (Peterson) gi i thi u m t giao di n m nh m i v i tên là

"Twenty Thirteen", h tr Audio và Video d ng s n, c i thi n

Save và Post Locking

+ Phiên b n 3.7 (Basie) gi i thi u b n c p nh t t b o trì và c p nh t b o

m t ng h m nh m t kh u, k t qu tìm ki c c i thi n và h trtoàn c u t

+ Phiên b n 3.8 (Parker) gi i thi u thi t k qu n tr m i và giao di n m nh

m i: "Twenty Fourteen"

+ Phiên b n 4.2 (Powell) thêm h tr bi ng c m xúc, thêm h tr ký t m

r ng và chuy d li u t utf8 thành utf8-mb4

+ Phiên b n 4.3 (Billie) thêm h tr các bi ng trang web d ng s n và gi i thi nh d ng phím t t trong trình so n th o n

+ Phiên b n 4.4 (Clifford) thêm hình nh, bài nhúng và m t giao di n m nh

m i: "Twenty Sixteen"

- 2016: Hi n t i, phiên b n 4.5 (Coleman) thêm liên k t n i tuy n, thêm phím t t

nh d c Responsive trong Customizer

- Trong s 100% các website s d ng mã ngu n CMS, WordPress chi m 75%

- Phiên b n t t i ch sau kho ng hai tháng

- Mã ngu n WordPress hi ng 785 l p trình viên cùng h p tác phát tri n

- Ch tính các giao di n (hay còn g i là theme) mi n WordPress

hác nhau

1.2.4 Nh ng nét n i b t c a WordPress

- H th ng Plugin phong phú và không ng ng c p nh i dùng có

th vi t Plugin ho c tích h p code vào Wordpress

- c phát tri n b ng nhi u ngôn ng (h tr ti ng vi t)

- C p nh t phiên b n liên t c, c ng h tr l n

- Có h th s , nhi u theme chuyên nghi p có kh t

- Vi c qu n lý blog, qu n lý các bài vi t r t thu n ti n gi n m m thi t k website chuyên nghi p

- Th hi n các t p PDF, DOC, Powerpoint ngay trên n i dung bài vi c bi t tích h p s n Latex - công c so n th o công th c toán h i s d ng

có th vi t công th c toán h c ngay trên blog

- WordPress có 23 Widget ( ng d ng t ng kê s truy nh p blog, Các bài m i nh t, Các bài vi t n i b t nh t, Các comment m i nh t, Li t kê các chuyên m c, Li t kê các Trang, Danh sách các liên k t, Li t kê s bài vi t trong

blog s ng nên vi t v gì ti p theo

- Các comment có th duy t r i m i dung không phù h p có th xóa, n u cho là spam thì sau này IP g i

c n a

- Admin (ch blog) có th cho 35 c ng tác viên g i bài vào blog, có th phân quy n cho các c ng tác viên theo các c danh sách

cho b t kqua email vào blog mi n là admin cho h m a ch email bí m t c a

ch này có th i b t k lúc nào)

- li u nh m khôi ph c n i dung blog m t cách d dàng n u ch ng may blog b hack, và cung c p công c chuy n nhà t các blog khác sang blog WordPress.

T TRÊN MÁY WEBSITE

2.2 t Wordpress trên Localhost

T t, máy tính c n ph i cài s n h th ng Apache và MySQL Ví dtrên XAMPP:

Hình 2.2.1: Giao di n XAMPP

Hình 2.2.2: Giao di n phpMyadmin

Hình 2.2.3: Giao di n Database trong phpMyadmin

c 1: T i mã ngu n t website WordPress.org

c tiên, chúng ta t i phiên b n m i nh t c a mã ngu n WordPress t a

ch https://wordpress.org/latest.zip. chúng ta gi i nén t p tin này ra s c

m c mang

Hình 2.2.4 c sau khi gi i nén mã ngu n

c c a wordpress, chúng ta s th y có m t s c tên là

wp-admin, wp-includes, wp-content và m t s t p tin tên là index.php,

wp-config-sample.php t c t p tin c này là mã ngu n WordPress

Hình 2.2.5: Các t p tin c mã ngu n c a WordPress.

c 2: Copy mã ngu n WordPress vào Localhost

Copy toàn b t p tin c c website trong localhost (ví d : C:\xampp\htdocs\doankhien)

Hình 2.2.6: Mã ngu n wordpress trong c website

c 3: T o m i m t database

ch c WordPress thì localhost ph i có m

li u m t, các thi t l t o m t

database, chúng ta hãy truy c p vào localhost v ng d n:

http://localhost/phpmyadmin n vào menu Database

Hình 2.2.7: Giao di n Database trong phpMyadmin

User accounts, ch n Add user account

Hình 2.2.8: T o user account

T n nh ng thông tin sau :

- User name : Tên User c a database

- Password : M t kh u c a user

- ng là localhost

Create database with same name and grant all privileges

http://localhost/tên-webiste (Ví d : http://localhost/doankhien) Lúc này, giao di n

trình duy t c a website s hi n ra b ng ch n ngôn ng c t cho WordPress,

chúng ta ch n Ti ng Vi t và n Ti p t c.

Hình 2.2.10: Ch n ngôn ng t WordPress

Ti p theo, h th ng s nh c nh cho chúng ta i t p tin config-sample.php thành wp-

wp-n Th c hi wp-n wp-ngay ti p t t

Hình 2.2.11: Wordpress yêu c u nh p thông tin database

Ti p theo, chúng ta ti n hành nh p thông tin cho database

Hình 2.2.12: Nh p thông tin database

Ti p theo, chúng ta c n ph i thi t l p các thông tin quan tr

Tên c a website, tên tài kho n admin cùng m t kh Sau khi nh p xong hãy n nút

t WordPress.

Hình 2.2.13: Thi t các thông tin quan tr ng c a website

Cu i cùng, WordPress s thông t thành công Nh nvào nút p p vào b ng qu n tr WordPress

Hình 2.2.14 t website thành công

n trang qu n tr c a WordPress

Hình 2.2.15: Trang qu n tr c t

N u truy c p vào tên mi http://localhost/doankhien, s ra trang

ch c a website WordPress v i giao di n m nh

Hình 2.2.16: Trang ch website sau khi cài WordPress

Còn n u chúng ta mu n truy c p vào trang qu n tr Admin c a WordPress thì s

thêm /wp-admin ng d n thành http://localhost/doankhien/wp-admin

phép chúng ta i, ch nh s a giao di n M i website có m t theme riêng bi t Khi

m t nhà phát tri c m t theme t t, h có th bán nó trên th ng Hi n nay có hàng ngàn theme t mi n tr c rao bán trên internet Vi c ch n theme

s quy n hình th c, b c c giao di n c a chúng ta và vì v i dung

u tiên chúng ta c n quan tâm, l a ch n

c b t bu c có trong website c a chúng ta T t c nh ng công ty làm website b ng WordPress mu n ch nh s a giao di u ph i ph

m n 3 theme mi n phí là Twentyfifteen, Twentyfourteen, Twentythirteen tuy nhiên nh ng ph i

+ Thân thi n v i các công c tìm ki m

- Phân bi t theme WordPress

+

các

+ Theme Framework

- Các t p tin Template: ki m soát cách các trang web t o ra các thông tin t

d li u WordPress hi n th ra bên ngoài

- T p tin tùy ch n ch

Ngoài ra c theme còn c con ch a hình nh (n u có), các

t p tin javascrips (n u có)

3.2.2 Theme Stylesheet

Ngoài các thông tin v CSS cho theme, t p tin style.css còn còn có ch

khai báo thông tin c , s phiên b theme có

th hi n th trong khu v c Themes c a WordPress N u theme c a chúng ta không có

t p tin này thì theme s không h p l

Ví d :

/*

*Theme Name: Doan Khien

*Theme URI: https://congnghe24h.esy.es

*Author: Tr nh Doãn Khi n

*Phiên b n: 1.0

*License: GNU General Public License v2 or later

*License URI: http://www.gnu.org/licenses/gpl-2.0.html

*Tags: basic,two-colum,post-format

*Text Domain: doankhien

*Language Folder: /languages

*/

3.2.3 T p tin tùy ch n ch

M t theme c n s d ng m t t p các ch c con c a theme t tên là functions.php T p tin này tuy không thu c template c a

- Khai báo theme stylesheet và scrips

- Kích ho a idebars, Navigation Menus , Post

- c s d ng trong m t s t p tin template c a Theme

3.2.4 Template files

Các template có c s d ng khai báo khuôn m c nh

d ng s n nh m m n th n i dung trên website c xu i d ng HTML Các t p tin template c t o thành t HTML, PHP và các WordPress Template Tags

Hình 3.2.1: C u trúc template trong Theme WordPress

- index.php Template g c c a theme

T p tin index.php không ch s d ng cho trang ch , mà nó còn là template g c c a website n c khai báo Ví d n u theme c a chúng ta không có t p tin làm template cho trang n i dung

c a Post, thì nó s s d ng t p tin hi n th y

- header.php Ph u c a theme

Template này s d khai báo ph n header c a trang, bao g m các th m

<html>, <head>, các template khác, chúng ta s g i nó ra

b ng hàm get_header().

- footer.php Ph n chân trang c a theme

c s d khai báo ph n chân trang

c a theme R các template khác ta s g i nó ra b ng hàm get_footer().

- sidebar.php Ph n hi n th sidebar

Chúng ta có th khai báo sidebar tr c ti p vào các template khác v i

hàm dynamic_sidebar() u chúng ta s d ng sidebar nhi u template khác nhau thì chúng ta nên vi t code hi n th sidebar vào t p tin sidebar.php R

dùng hàm get_sidebar() g i template này ra

- Các template khác trong theme

s không b t bu c chúng ta ph i t t p tin

tr các template này s c s d ng n u chúng ta có khai báo Template nào không khai báo thì nó s s d ng template c n u single-123.php không khai báo thì nó s s d ng single.php

+ Template hi n th

Template này s s d ng cho t t c

là các trang phân lo i bài vi custom taxonomy

archive.php nh d ng hi n th cho toàn b trên website

theo ngày tháng, category (chuyên m c), tag (th ), 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-doankhien.php nh d ng trang hi n th tác gi tên doankhien.

+ 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

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

Khi s d ng ch 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 k t qu s dùng template

archive.php.

3.2.5 Template Tags

N u các t p tin template là nh ng t p tin i di n cho trang hi n th các thành

ph n trong website thì template tag là nh c s d hi n th m t thành

ph n c bi t trong template Các template tag chúng ta có th s d ng b ng cách l ng vào nh ng th nó hi n th

Các template tag là hàm PHP nên nó s ph c n m trong c p th <?php

+ get_header() N i t p tin header.php trong theme

+ get_sidebar() N i t p tin sidebar.php trong theme

+ get_footer() N i t p tin footer.php trong theme

+ bloginfo() & get_bloginfo() Hi n th thông tin c a website

+ wp_head() Hook m nh c hi n th các thành ph n trong th <head>

+ wp_footer() Hook m nh c s d ng footer

+ wp_nav_menu() Hi n th m t Menu Location

+ dynamic_sidebar() Hi n th m t sidebar

+ wp_link_pages()- H tr liên k ng trong m i bài vi t

- Template Tags cho Post

+ the_permalink() Hi n th ng d c a post (bài vi t) hi n t i

+ the_title() Hi n th post hi n t i trong truy v n.

+ the_content() Hi n th toàn b n i dung c a post hi n t i trong truy

v n

+ the_excerpt() Hi n th excerpt ho c m t ph u n i dung c a post

hi n t i trong truy v n

+ the_ID() Hi n th ID c a post hi n t i trong truy v n

+ the_tags() Hi n th các tag có trong post hi n t i trong truy v n

+ the_date() Hi n th n t i trong truy v n

+ the_category() Hi n th các category c a post hi n t i trong truy v n

+ post_class() Hi n th a post hi n t i trong

truy v n.

- Template Tags cho nh thumbnail c a Post

+ has_post_thumnail() Ki m tra xem post hi n t i trong truy v n có thi t

l p thumbnail (Featured Image) hay không

+ the_post_thumbnail() Hi n th nh i di n c a post hi n t i trong truy

v n

- Template Tags cho Category và Tag

+ category_description() Hi n th mô t c a category (chuyên m c)

+ tag_description() Hi n th mô t c a tag (th )

+ wp_dropdown_categories() Hi n th danh sách category v i d ng dropdown xu ng)

+ single_cat_title() Hi n th tên category trong truy v n

+ single_tag_title() Hi n th tên tag trong truy v n