Làm thế nào để xây dựng một website bằng wordpress? (Phần 1)

Xin chào các bạn mình là Danh hôm nay mình xin hướng dẫn các bạn xây dựng 1 web site bằng WordPress không cần code một cách đơn giản, vì để gói tất cả vào 1 bài viết thì sẽ rất dài nên mình xin phép chia bài viết làm 2 phần. phần đầu mình sẽ hướng dẫn các bạn setup môi trường và tạo 1 thanh điều hướng (navbar).

Đầu tiên các bạn vào linh bên dưới để tải file xamp và file wordpress:

Tiếp theo các bạn giải nén file Xamp trước và cài như bình thường chỉ next và install thôi.

Tiếp theo các bạn vào ổ đĩa cài xamp ==> htdocs => giải nén file WordPress vào đây.

Tiếp theo các bạn mở ứng dụng xamp vừa cài vào máy sẽ có giao diện như thế này

Image display xamp
Image display xamp

Khi các bạn mở thành công được giao diện như thế này các bạn nhấn nút start ở 2 hàng trên cùng và chọn vào ô Admin đầu tiên sẽ hiện lên giao diện web.

page dashboard
page dashboard

Chúng ta kiểm tra xem file WordPress chúng ta đã giải nén và có thể thay đổi tên thư mục đó theo tên web ở đây mình đặt tên thư mục là anime-image 🙂

folder htdoc
folder htdoc

Quay lại với trang web, chúng ta sẽ thay đổi đường dẫn đến thư mục chúng ta vừa giải nén ở đây thư mục mình tên là anime-image. Mình sẽ thay đổi đường dẫn web là http://localhost/anime-image
và nhấn enter và sẽ hiện lên 1 giao diện như bên dưới.

wordpress install
wordpress install

Đã xong phần setup của xamp và giờ chúng ta sẽ setup tới WordPress.Chúng ta chọn ngôn ngữ xong chọn continue và chọn let’s go và sẽ hiện lên một giao diện chúng ta sẽ nhập vài thông tin vào. Tạm ngưng ở đâu chúng ta sẽ đi tạo database, ở giao diện app xamp các bạn chọn nút admin ở dòng thứ 2 sẽ mở ra một trang mới các bạn chọn new ở table name các bạn nhập tên project các bạn và create là xong, tiếp theo các bạn điền thông tin như hình bên dưới ô đầu tiên là tên database các bạn vừa tạo còn các ô khác các bạn nhập giống mình.

wordpress install
wordpress install

Nhập xong các bạn chọn submit và nếu đúng thì sẽ được như thế này các bạn chọn Run the installation.

wordpress install
wordpress install
wordpress install
wordpress install

Ở trang này các bạn sẽ tạo tài khoảng đăng nhập vào web của các bạn nên tài khoản và mật khẩu hãy nhớ kỹ nhé. Các bạn hãy điền đầy đủ thông tin và chọn tick vào và install và login vào xong hết thì sẽ hiển thị ra cho các bạn một giao diện như thế này.

page edit wordpress
page edit wordpress

Bắt đầu chọn theme để chỉnh sửa và cài tool để chỉnh sửa giao diện nhanh và đẹp hơn. Các bạn vào Appearance chọn theme có các mẫu có sẵn nếu không thích các bạn chọn add new để tải các theme khác khi các bạn tải theme khác thì sau khi tải xong thì nhớ active lên để sử dụng. và nhấn nút hình ngôi nhà phía trên bên trái tạo thêm tab mới để xem giao diện có sẵn. Trước khi vào việc thì chúng ta phải cài thêm một công cụ giúp chúng ta chỉnh sửa giao diện nhanh hơn, các bạn vào Plugins và chọn Add New và tìm công cụ tên là elementor có hình như bên dưới tải về active lên nhé!.

elementor tool
elementor tool

Bắt đầu vào phần đầu tiên của giao diện là phần Thanh điều hướng (navbar) các bạn khi khởi tạo giao diện sẽ rất tởm vì nó còn thiếu thì phần đầu tiên là Thanh điều hướng chúng ta phải chỉnh sửa nó đầu tiên. để tạo ra một thanh navbar bạn chỉ cần 1 logo nếu có và một hình ảnh làm backgound nếu cần.
Đầu tiên các bạn vào phần page tạo cho mình vài page nhằm mục đích hiển thị trên thanh navbar trang bạn muốn hướng đến.

pages manage
pages manage

Sau đó ở trang giao diện các bạn chọn vào customize ==> menus và bạn xóa cái cũ đi và create 1 menu mới.

sidebar edit UI
sidebar edit UI

Ở đây mình tạo menu có tên là navbar, các bạn chọn vào chính menu vừa tạo và chọn Add Items và chọn những page mà bạn đã tạo và lưu lại chọn publish, bắt đầu đi trang trí cho thanh navbar.

UI wordpress
UI wordpress
logo web
logo web

Các bạn rê chuột vào vị trí tên trang web sẽ hiện lên icon bút chì thì click chọn, đồng thời sẽ hiện ra 1 bảng công cụ rất rất là nhiều công cụ hỗ trợ bạn chỉ cần chọn vào và xem nội dung thay đổi như thế nào đã đúng ý bạn chưa nếu ưng rồi thì nhấn vào public cả phần menu cũng làm tương tự không khác tí nào cả đây là demo navbar của mình. Lưu ý các bạn khi tạo các trang hay các bài viết nên đặt tên có ý nghĩa tránh đặt tên vô nghĩa vì khi tìm lại sửa thì sẽ rất khó khăn.

sidebar eidt
sidebar eidt
navbar
navbar

Oke và như vậy là xong phần navbar trong phần sau mình sẽ hướng dẫn các bạn làm content trang trí footer.

Các bạn có bất kỳ thắc mắc và ý kiến đóng góp của các bạn là động lực để mình làm thêm những bài viết sau và hoàn chỉnh bài viết và cho mình biết bạn thấy thế nào về bài viết xin gửi email: danh@localhost mình xin cảm ơn.

Cựu học viên Ironhack Việt Nam – Hiện là full-stack Developer tại All Xone

 

 

Để lại một câu trả lời