Bài này sẽ tương đối dài nên mình sẽ chia ra thành 3 bài nhỏ để thực hiện nhé
Bài 1 : Cấu hình cơ bản + cài đặt header và footer
Bài 2 : Tạo trang chủ
Bài 3 : Cài đặt trang tin tức – shop và liên hệ
BẮT ĐẦU NÀO
Mình sẽ bắt đầu từ phần cài đặt nhé. và cài đặt ở trên localhost.
Giao diện demo : Bán Quần áo trẻ em
Đầu tiên : Bạn tải wordpress mới nhất ở trang chủ https://wordpress.org và giải nén ra ở thư mục cài đặt nằm trong /xampp/htdocs/….
Mình đả giải nén và đổi tên rồi nha “Banquanao“, với Flatsome bạn copy vào trong thư mục Theme của wordpress và giải nén ra nhé.
Vậy là được rồi , những theme còn lại không cần dùng tới bạn có thể xóa đi cho nhẹ, cả file flatsome.zip và wordpress.zip phía trên cũng xóa đi nhé, không có dùng tới nữa.
Một lưu ý là bạn nên làm việc với Child theme Flatsome chứ không nên chỉnh sửa trong thư mục gốc của nó bởi vì thư mục gốc có rất nhiều thành phần + với việc nâng cấp sau này rẽ rất khó khăn. Nếu trong File theme của bạn có file Child theme thì bạn copy vào trong này luôn < sau khi cài đặt chỉ cần kích hoạt child theme và làm việc được luôn >, còn nếu ko có thì bạn có thể tạo ra nó trong quá trình cài đặt Theme cũng được.
Tạo cơ sở dữ liệu cài đặt: Localhost/phpmyadmin -> tạo csdl với tên “banquanao” -> Kiểu utf8_unicode_ci
Cài đặt wordpress +theme flatsome
Xong bước chuẩn bị. tiếp theo là bạn vào với đường dẫn Localhost/…<thumuc>../banquanao để bắt đầu cài đặt và sử dụng nhé. Ở đây nến bạn để ở thử mục gốc của /xampp/htdocs/ <hoặc thư mục gốc của host ảo trỏ tới> thì bạn gõ là localhost/banquanao là được thôi nhé.
Bắt đầu cài đặt, vào theo đường link trên bạn vào sẽ thấy như hình đầu tiên
Như vậy là đúng nhé . Bạn chon Ngôn ngữ Tiếng Việt vào chọn tiếp tục vào để thực hiện cấu hình Cơ sở dữ liệu nhé.
Ở đây quan trọng 2 cái là Tên Database là tên mình tạo lúc trước “Banquanao” Tên người dùng mặc định là Root.Mật khẩu để trống nhé. Còn lại thì để mắc đi là ok rồi.
Nếu muốn thay đổi tiền tố bảng thì bạn nhớ phải có một gạch chân “_” sau cùng nhé ví dụ “tp_“.
Gửi vào tiếp tục cài đặt tới phần thông tin bạn Lưu ý 3 trường là Tên Người dùng , Mật khẩu , Email còn lại có thể thay đổi sau này dễ dàng nhé. Xong các thông tin bạn nhấn vài đặt nhé. Máy của mình thì quá trình cài đặt chưa tới 30 giây nữa. Cuôi cùng là đăng nhập để sử dụng thôi
Nếu lúc trước bạn xóa đi mấy cái theme kia thì bây giờ nó sẻ báo vậy, bạn chỉ cần kích hoạt Theme Flatsome và cài đặt là được, không có vấn để gì nhé. Nhấn vào Kích hoạt theme :
Bạn tiến hành cái bước cài đặt nhé, cái nào không hiểu bạn có thể xem qua bài Cấu hình và cài đặt Flatsome nhé
OK. Sau khi cài xong
Bước này tới đây là xong rồi nhé.Trong quá trình cài đặt bạn nên cài tất cả các Plugin của theme nếu làm theme bán hàng nhé, còn nếu trang của bạn không bán cái gì thì không nên cài mấy cái Woocommerce làm gì cho nặng trang web cả. Còn nếu bạn bỏ qua học Kích hoạt bằng Child Theme Thì bạn có thể cài lại chúng trong mục Giao diện -> Install Plugin.
Cái này là để chuyển đổi giữa 2 chế độ làm việc nhé, bạn chỉ cần Click vào thì nó sẽ chuyển qua chế độ còn lại.
Cấu hình đầu tiên
Về cấu hình đầu tiên, mình cũng đã nói rất chi tiết rồi, nên ở đây mình sẽ nói riêng cho cấu hình của trang này nhé.
Trên menu bên trái bạn vào phần cài đăt vào đi qua các mục một lượt xem có thể cái đặt thêm gì cho trang web của mình hay không, ví dụ bạn có thể thay đổi Tên Website và Khẩu kiệu Website ở phần Tổng quan …
Đương đẫn tĩnh -> Tiêu đề bài viêt (cho nó đẹp)
Ở Phần đọc Bạn chọn Một trang tĩnh Thay có Bài viết mới rồi chọn trang bạn sẽ cho hiển thị ở trang chủ nhé. Ở đây mình tạo một trang tên là Trang chủ và chọn vào mục này ( Trang-> Thêm trang mới để tạo trang nha). Lưu ý là nên chon Template ( Thuộc tính trang ) Page Full Width để làm trang chủ nha,
Giành cho ai chưa cài được Woocommerce nhé!!.
Cấu hình chung cho Flatsome
Từ menu -> Chọn Flatsome >Theme Options
Style:
| Color | Font |
Tạo các trang và danh mục(Thêm bài viết và sản phẩm)
Tạo trang <Từ thanh menu bên trái Chọn Trang>> Thêm trang mới > Bạn tạo một số trang cơ bản như Trang chủ, Liên hệ, Giới thiệu, Chính sách bán hàng, Bảo hành ….
Thêm bài viết < Từ menu trái > Bài viết >> Bài viết mới > Bạn thêm tầm 4-5 bài để làm Demo là được.
Thêm Chuyên mục ( Bài viêt ) >>Chuyên mục > Bạn có thểm thêm một chuyên mục Tin Tưc để lưu trữ bài biết.
Thêm Danh mục ( Sản phẩm ) Sản phẩm >> Danh mục > Thêm một số danh mục thời trang cho trẻ vào như :giày, mũ, bao tay, quần áo, đồ bộ, váy ……
Thêm sản phẩm : Bạn thêm vào mỗi số sản phẩm để làm demo tầm 10 sản phẩm : Sản phẩm>> Thêm mới.
Những mục trên mình không đưa hình ảnh vào bởi vì mình đã có bài viết liên quan hướng dẫn chi tiết rồi, hơn nữa cũng rất dễ dàng, bạn có thể tự làm nhé
Tạo menu
Sau khi đã có các trang và chuyên mục bạn tạo menu với những thứ mới tạo ra, ở đây mình tạo một Main menu >> menu chính của trang và một top menu chứa một số thông tin điều hướng khác nhé,
Main menu
Topbar Menu
Vây là xong tiếp theo sẽ bắt đầu cấu hình phần Header của trang.
Tạo header
Để bắt đầu >> Flatsome >> Theme Options >> Header:
Kéo các thành phần ở khung số 1 vào khung số 2 Kết quả ở khung số 3 : những thành phần không cần ở trong khung số 2 mà bạn ko cần thì kéo xuống khung số 1 là được nhé. Bạn cũng có thể kéo qua lại các thành phần trong khung số 2. Trang web của mình cần các thành phần như trên.
Tiếp theo chúng ta sẽ cấu hình các thành phần trang khung số 2 nhe.
Logo
Click vào biểu tượng logo trong khung số 2 để cài đặt
Ngoai Tên Website và khẩu hiểu bạn có thể cài đặt ở phần trước rồi, ở đây bạn chọn vào Logo image > select file để chọn file logo cho mình, Logo position vị trí hiển thị bên trái hay ở giữa của Header main. Ngoài ra còn có Logo image > Light version Hiện thị khi nền là màu tối. Logo container width độ rông >> chọn lên khoảng 300px. Bạn cũng có thể chọn Biểu thượng site ở phía dưới nữa.
Top bar
Vào Header >> Top Bar cấu hình màu nền, độ rộng của thanh và Nav Color, Navigation Style như nhưng hình nhé.
Contact Bạn cỏ thể vào cấu hình nhanh bằng chắc Click vào biểu tương trong khung số 2 là được, Social icon cũng tương tự, bạn cài đặt thông tin của mình vào , và Link trong Social icon, nếu xóa Link đi thì nó ko hiện Biểu tượng ra nữa nhé.
Top Bar Menu thì bạn cấu hình hiển thị ở phần cài đặt menu trong giao diện nhé
Header main:
Cấu hình Header >> Header main
Các bước cầu hình thì như trên hình là được. Kết quả mình được cái này,
Header Bottom
Ở đây mình chỉ có một Main menu, chúng ta vào >> Header >> Header Bottom
Các thành phần khác:
- Header Mobile Menu / Overlay
- Sticky Header >> chỉ Check vào Header bottom thôi
- Dropdowm Style : Một số tùy chọ cho menu sổ xuống ( Sub menu )
Như vậy là đã hoàn thành xong phần tạo Header rồi, tiếp theo là Footer nhé
Tạo footer
Phần này chúng ta chia Footer thành 4 côt, hiển thị thông tin lần luợt là :
- Thông tin cửa hành
- Menu về chính sách bán hàng
- Bài viết nổi bật
- Tài khoản
Trong Flatsome>> Theme Options >> Footer:
Hình 1: Chọn màu và số cột cho phần chân trang có thể thêm backgroud bằng Image.
Hình 2: Hiển thị thông tin Copyright @ Tuy Phong.
Hình 3: Đây là khung hiển thị phía trên Footer 1 và phía dưới phần Absolute footer bạn có thể thêm thông tin vào.
Menu bên trái >> Giao diện>> Widget>> cấu hình cho phần footer 1 nhé.
Kéo vào trong vùng 4 khối giống như trông hình.
Với Html tuy chỉnh bản có thể thay bằng Văn bản sẽ dễ dàng thêm văn bản hiển thị ra hơn nhé.
Chúng ta kết thúc bài 1 này ở đây nhé. Bài sau chúng ta sẽ đi vào xây dựng trang chủ cho website của mình
Đây là kết quả của chúng ta trong bài này
