Sunday, July 17, 2016

Hướng dẫn thiết kế website bằng WordPress chi tiết

Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn các bạn tự thiết kế website bằng WordPress chi tiết

Bài hướng dẫn rất chi tiết, có hình ảnh minh họa rất sinh động và rõ ràng ^^


Để thiết kế website bằng WordPress bạn cần có:
  • 1 Domain để tạo website
  • 1 Web Hosting để chưa nội dung của website đó (và chứa nhiều website khác của bạn)
Nếu bạn nào chưa có Hosting, Domain thì xem bài dưới nhé ^^
Để bắt đầu, bạn hãy đăng nhập vào phần quản trị Hosting của bạn,  bạn vào Godaddy để đăng nhập


 Chọn mục Web Hosting ...


Bạn vào mục Manage để vào cấu hình website


Sau khi vào phần quản trị, bạn chọn WordPress để tạo website mới



Bấm Install this application để cài đặt WordPress


Trong phần Location

  • Domain: bạn chọn Domain để tạo website
  • Directory: bạn xóa nó đi, ko cần điền gì cả



Trong phần Version

  • Version: chọn Version mới nhất
  • Language: chọn English
  • Các mục còn lại ko cần thay đổi gì, cứ để mặc định



Trong phần Settings, bạn khai báo thông tin người quản trị

  • Administrator Username: điền admin
  • Administrator Password: điền mật khẩu của bạn vào
  • Administrator Email: điền email của bạn vào
  • Website Title: điền tên website của bạn vào (sau này vẫn có thể thay đổi được)
  • Website Tagline: điền mô tả cho website của bạn
  • Two-Factor Authentication: mục này ko cần thiết, bạn tick  vào ô "Do not enable two-factor authentication"
  • Limit Login Attempts: mục này cũng ko cần thiết, bạn tick vào ô "No, do not limit failed login attempts"



Bấm Install để cài đặt


Quá trình cài đặt website diễn ra chỉ 1 vài phút thôi

Sau khi cài đặt xong, bạn có thể bấm vào đường link website để xem trước website cơ bản chưa cấu hình gì hết.

Để quản lý và cài đặt website thì bạn vào trang quản trị bằng đường  link: tên domain/wp-admin


Trang website cơ bản trên WordPress chưa được cấu hình gì cả ^^


Tiến hành đăng nhập vào trang quản trị bằng đường  link: tên domain/wp-admin với User Name và Password mà bạn đã cài đặt lúc nãy


Cấu hình cơ bản cho website WordPress

Ðầu tiên, trong mục Dashboard, bạn bấm No thanks, I'm good để bỏ nó đi


Trong quá trình cài đặt bạn có thể vừa cài đặt vừa theo dõi kết quả của mình bằg cách đưa chuột đến tên website và chọn Visit Site (nên mở tab mới để dễ quản lý và thuận tiện trong quá trình cài đặt website)


Để cấu hình cơ bản cho website WordPres bạn vào Settings --> General


Trong mục General Settings, bạn có thể thay đổi lại Site Title, Tagline ...

Nói chung mục này ko có gì quan trọng để cấu hình cả ^^


Cấu hình đường link bài viết website WordPress

Trong phần quản trị --> Settings --> Permalinks

Trong phần Permalink Settings này có nhiều kiểu/dạng đường link bài viết để bạn lựa chọn cấu hình cho website của bạn.
Bạn có thể chọn đường link bài viết có ngày tháng như Blogspot/Blogger. Tuy nhiên để tối uu SEO cho website cũng nhu bài viết thì bạn nên chọn Post name. Sau này các bài viết của bạn sẽ có đường link rất bắt mắt và chuyên nghiệp (website WordPress hơn hẵn Blogspot/Blogger ở điểm này)

Bấm Save Changes để hoàn tất


Khi bạn mới tạo website thì mặc định sẽ có những bài viết cơ bản cũng như các trang Page mặc định, chúng ta hãy xóa chúng đi

Trong phần quản trị --> Posts -->chọn Trash để xóa

Tương tự, bạn vào Pages -->chọn Trash để xóa



Đổi giao diện cho website WordPress

Trong phần quản trị --> Appearance --> Themes

WordPress có sẵn 3 Thems mẫu cho bạn chọn. bạn thích mẫu Themes nào thì bấm Live Preview để xem trước, nếu ưng ý thì bấm Activate để chọn

Nếu bạn ko thích 3 mẫu có sẵn này thì bạn bấm Add New để chọn các Themes khác. WordPress có sẵn hàng ngàn mẫu Themes để bạn lựa chọn để thiết kế cho website của mình.


Bạn có thể  vào Popular để chọn những Themes phổ biết nhất


Bấm Details & Preview để xem trước. Bấm Install để chọn


Ví dụ Sơn Nguyễn sẽ chọn mẫu Themes này để huơgns dẫn các bạn cách tự thiết kế website bằng WordPress --> Bấm Install để chọn


Bấm Activate để hoàn tất


Bạn tự kiểm tra thành quả nhé ^^


Cài đặt các Plugins cho website

Sau khi đổi giao diện cho website của bạn rồi thì tiến hành cái các Plugins cho website của bạn. Cách làm như sau:

Trong phần quản trị --> Plugins --> Add New


Plugins cần cài đặt đầu tiên là Contact Form 7 để tạo Form Liên hệ cho website (bạn vào Search để tìm cho nhanh)

Bấm Install Now để cài đặt


Bấm Activate Plugin để hoàn tất


Sau khi Plugin Contact Form 7 được cài đặt xong thì bạn có thêm menu Contact trong phần quản trị --> Add New để tạo Form Contact


Chọn ngôn ngữ Vietnamese --> Add New


Đặt tiêu đề cho Form (chỉ là tên tiêu đề thôi, ko quan trọng lắm)

Trong mục Form đã có sẵn đầy đủ các trường thông tin, bạn ko cần làm gì cả:

  • Tên của bạn (bắt buộc
  • Địa chỉ Email (bắt buộc)
  • Tiêu đề
  • Thông điệp
  • Nút "Gửi đi"



Trong mục Mail bạn cấu hình cho nó để khi khách hàng nhập thông tin theo Form ở trên thì sẽ gửi về  Email của bạn (phần này cũng tự động cấu hình cho bạn nên bạn ko phải làm gì cả)

Bấm Save để hoàn tất


Sau đó bạn Copy đoạn code vừa tạo ...


Trong phần quản trị --> Pages --> Add New để tạo trang Liên hệ


Tiến hành tạo trang mới

  • Tiêu đề: Liên hệ
  • Nội dung: Bạn paste đoạn code vừa nãy vào (có thể viết thêm 1 số nội dung khác nếu muốn)

Bấm Publish để hoàn tất


Vậy là bạn đã có trang Liên hệ.

Hãy tự kiểm tra thành quả của mình nhé ^^


Trang Liên hệ đã có đầy đủ các trường thông tin...


Để tạo các trang khác thì bạn làm tương tự nhé: vào Pages --> Add New --> tạo nội dung

Nếu bạn thiết kế website về bất động sản thì bạn tạo thêm các Trang: Tổng quan, Vị trí, Tiện ích, Mặt bằng, Thanh toán, Hình ảnh, Tiến độ, Tin tức ...

Nếu bạn thiết kế website bán hàng online thì bạn tạo thêm các trang: Giới thiệu, sản phẩm 1, sản phẩm 2, Hướng dẫn mua hàng, Hướng dẫn thanh toán, Tin tức ....

Quy trình tạo 1 trang trong WordPress rất đơn giản, bạn chỉ cần thực hiện theo 5 bước như hình phía dưới là OK

vào Pages --> Add New --> đặt tiêu đề cho Trang--> Soạn nội dung (soạn và định dạng như Word, thêm hình ảnh, video ...) --> Publish để hoàn tất


Thêm hình ảnh vào bài viết website WordPress

Để thêm hình ảnh vào bài viết, trong phần soạn thảo nội dung bạn chọn Add Media


Trong mục Insert Media --> Upload Files --> Select Files để Up hình từ máy tính của bạn

Hoặc bạn copy đường link hình ảnh, sau đó vào Add Media --> Insert from URL --> paste đường link hình ảnh vào là xong (bạn cũng có thể áp dụng cách này để chèn Video vào bài viết)

Hình ảnh sẽ tự động Uplpoad lên Hosting


Luu ý: trong mục Attachment Display Settings:

  • Link To: chọn None để hình ảnh ko liên kết đến đâu hết
  • Size: nên chọn Full Size để hình ảnh hiển thị lớn trong bài viết




Bấm Insert into page để đưa hình ảnh vào bài viết

Sau khi hoàn chỉnh bài viết xong, bạn bấm Publish để hoàn tất


Tạo các bài viết cho website WordPress

Để tạo các bài viết quảng bá sản phẩm, các bài viết Tin tức liên quan đến sản phẩm bạn đang kinh doanh,bạn vào phần quản trị --> Posts --> Add New để tạo bài viết mới

Bạn làm tương tự như khi tạo Page (tiêu đề, nội dung, hình ảnh, video ....)


Quy trình tạo 1 bài viết mới trong WordPress rất đơn giản, bạn chỉ cần thực hiện theo 5 bước như hình phía dưới là OK

vào Posts --> Add New --> đặt tiêu đề cho bài viết --> Soạn nội dung (soạn và định dạng như Word, thêm hình ảnh, video ...) --> Publish để hoàn tất


Tạo Categories/Danh mục cho website WordPress

Thông thường website sẽ có rất nhiều bài viết. Mỗi bài viết sẽ thuộc 1 Danh mục sản phẩm, dự án nào đó. Và để quản lý các bài viết dễ dàng theo từng mục bạn nên tạo ra các Categories cho các bài viết
Ví dụ: khi thiết kế website bất động sản sẽ có nhiều bài viết liên quan đến nhiều dự án khác nhau --> bạn tạo Categories cho từng bài viết theo từng dự án
Thiết kế website bán hàng sẽ có nhiều bài viết liên quan đến nhiều sản phẩm khác nhau --> bạn tạo Categories cho từng bài viết theo từng loại sản phẩm

Để tạo Categries, trong phần soạn thảo bài viết, bạn bấm vào + Add New Category --> chọn tên cho Categories (tên dự án, tên loại sản phẩm ...) --> Add New Categories --> tick chọn bài viết vào Categories

Sau này mỗi khi post bài mới, bạn chỉ cần tick bài viết đó vào Categories tương ứng là xong

Ps: 1 bài viết có thể nằm trong nhiều Categories khác nhau. tuy nhiên, để tránh lộn xộn gây khó khăn cho khách hàng trong quá trình tìm hiểu thông tin, 1 bài viết bạn nên add vào 1 vài Categories thôi, ko nên add vào nhiều


Ngoài ra bạn có thể đặt thêm các Tags cho bài viết (đây cũng là 1 dạng bạn đặt từ khóa cho bài viết). Mỗi bài viết có thể đặt nhiều Tags được


Sau khi hoàn chỉnh bài viết xong, bạn bấm Publish để hoàn tất

Cấu hình sidebar cho website WordPress

Để cấu hình lại các thanh bên (Sidebar) cho website WordPress bạn làm như sau:

Trong phần quản trị --> Appearance --> Widgets


Tiến hành chỉnh sửa các Widgets sẵn có. Bạn bấm vào từng Widget, đổi lại tên cho widget rồi bấm Save. Với những Widget ko cần thiết thì bạn Xóa nó đi

Bạn cũng có thể kéo từng Widgets để sắp xếp theo thứ tự mong muốn


Đặt lại tên cho Widget


Recent Posts = Bài viết mới nhất

Nên chọn hiển thị 10 bài viết


Widget nào ko cần thiết thì xóa nó đi


Với Categories thì tick chọn thêm số bài viết hiện của Categories/Danh mục đó để khách hàng tiện theo dõi


Vào trang chủ để xem thành quả nhé ^^

Thêm banner vào sidebar website WordPress

Ðể thêm các banner vào sidebar để làm quảng cáo, hoặc để số Hotline bán hàng bạn làm như sau:

Trong phần quản trị --> Posts --> Add New để tạo 1 bài viết mới

Bạn ko cần đặt tiêu đề làm gì, chỉ cần Upload 1 hình ảnh lên thôi (chọn size Medium), viết thông tin số Hotline vào, định dạng cho nó, canh chỉnh tất cả ra chính giữa. Sau khi định dạng hoàn chỉnh đẹp đẻ xong, bạn chuyển bài viết qua chế độ Text --> Copy toàn bộ đoạn mã code lại...


Tiếp theo bạn vào Appearance --> Widgets --> kéo Widgets Text vào bên sidebar --> paste đoạn mã code lúc nãy vào phần nội dung

Bấm Save để hoàn tất


Bạn tự kiểm tra thành quả nhé ^^

Ðưa Categories lên phần Menu website WordPress

Trong phần quản trị --> Appearance --> Menu --> Create Menu


Để add những Categories lên Menu của trang web bạn chọn Categories --> tick vào từng Categories mà bạn muốn hiển thị trên Menu trang chủ (Bấm View All để hiển thị toàn bộ Categories để dễ dàng chọn lựa)

Sau khi chọn xong, bấm Add to Menu

Bạn có thể kéo để sắp xếp lại Menu theo ý muốn

Bạn nhớ tick ô Primary Menu để chúng trở thành Menu chính

Bấm Save Menu để hoàn tất


Bạn tự kiểm tra kết quả nhé ^^

Nhu vậy khi add Categories lên phần Menu của trang web, thì khách hàng sẽ dễ dàng truy cập vào từng loại sản phẩm hơn, chỉ cần click vào 1 Categories nào đó thì các bài viết liên quan đến cùng 1 loại sản phẩm, cùng 1 dự án bất động sản thuộc Categories đó sẽ cùng xuất hiện theo danh sách

Tạo menu "Tin tức" cho website WordPress

Để tạo menu Tin tức cho website thì bạn cần có các bài viết thuộc Categories có tên là "Tin tức"

Trong phần quản trị --> Posts --> Add New để tạo bài viết mới.

Tạo Categories với tên Tin tức cho bài viết, các bài viết sau chỉ cần tick vào Categories Tin tức là xong

Ðưa Categories "Tin tức" lên Menu website WordPress

Trong phần quản trị --> Appearance --> Menu --> add Categories Tin tức vào Menu --> kéo sắp xếp lại vị trí --> Bấm Save Menu --> Xem kết quả ...

Chọn trang hiển thị đầu tiên của website WordPress

Khi truy cập vào website thì mặc định Trang chủ sẽ là các bài viết mới nhất sẽ xuất hiện đầu tiên. Tuy nhiên, bạn muốn khi khách hàng truy cập vào website của bạn thì sẽ thấy 1 trang nào đó do bạn chỉ định thay cho Trang chủ. Ví dụ: bạn đang có 1 chương trình khuyến mãi, 1 loại mặt hàng mới, 1 sản phẩm mới, 1 dự án mới ... và bạn muốn khi khách truy cập vào website của bạn thì trang giới thiệu về dự án đó, sản phẩm đó, chương trình đó sẽ xuất hiện đầu tiên thay cho Trang chủ. Để thực hiện điều này, bạn làm như sau:

Trong phần quản trị --> Settings --> Reading

Mục Front page dispaly --> tick chọn A satic page và chọn trang mà bạn muốn hiển thị chính khi truy cập vào website

Bấm Save Changes để hoàn tất

Bạn tự kiểm tra kết quả nhé ^^


Thêm các nút liên kết, chia sẽ qua mạng xã hội Facebook, Tweeter, G+... vào website WordPress

Trong phần quản trị --> Plugins --> Add New --> cài đặt Digg Digg (vào ô tìm kiếm tìm cho nhanh nhé) --> Bấm Install Now --> Activate Plugin



Sau khi cài Plugin Digg Digg xong sẽ có menu Digg Digg trong phần quản trị --> bạn vào cấu hình Floating Display --> tick ô Enable Floating Display --> Save Changes để hoàn tất ...



Bạn tự kiểm tra kết quả nhé ^^

Như vậy về cơ bản là bạn đã tự mình thiết kế website bằng WordPress rồi đấy ^^

Thời gian tới Nguyễn Trường Sơn sẽ cố gắng thu xếp thời gian để hướng dẫn  cụ thể hơn vào từng loại website về bất động sản, website về bán hàng online ....

Chúc các bạn thành công!!!

Hãy chia sẽ cảm xúc của bạn khi lần đầu làm chuyện ấy nhé ^^

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 15: Tổng hợp 10 trang cung cấp Template Blogspot đẹp, miễn phí cho Blogspot
Bài 16: Hướng dẫn đăng ký tên miền miễn phí cho Blogspot
Bài sau >>>