Sử dụng GeneratePress được coi là một sự khởi đầu tốt của bất kỳ Blogger hoặc người mới làm Website bằng WordPress.
Khi mới bước chân vào lĩnh vực này mình biết bạn sẽ đối diện nhiều với kỹ thuật, và mình biết bạn sẽ không mặn mà lắm. Đó là lý do bạn cần hạn chế tối thiểu kỹ thuật phức tạp nhưng vẫn có đủ cơ sở để phát triển.
Theme GeneratePress là một trong số đó, đi kèm với các ưu điểm như nhẹ, tải nhanh, chuẩn SEO và khả năng tùy biến cao.
Tất cả tinh hoa của theme WordPress đều được gói gọn trong này.
Đó là lý do tại sao nó rất được lòng những newbie mới tập làm web, và trong hướng dẫn này mình sẽ chỉ bạn sử dụng GeneratePress, đồng thời cũng lấy nó làm ví dụ cho những bạn mới dùng WordPress tìm hiểu về cách tùy biến (customize).
Sau bài viết này mình tin rằng bạn có thể tự tay tùy biến một website với giao diện đẹp, gọn gàng và có được những trải nghiệm tốt cho độc giả.
Đi thôi!
GeneratePress là gì mà “hot” thế?
GeneratePress là một theme WordPress được thiết kế với tiêu chí “Less is more” – ít hơn nhưng chất lượng hơn. Nó không có quá nhiều tính năng rườm rà, mà tập trung vào những gì cần thiết nhất để tạo nên một website nhanh, nhẹ, ổn định và dễ dàng tùy chỉnh.
Ở thời điểm bài viết này nó đã có hơn 600k lượt cài đặt và 1388 đánh giá 5 sao từ người dùng.
Tại sao nên sử dụng GeneratePress?
Khi dùng GeneratePress bạn sẽ có rất nhiều lợi ích như:
- Tốc độ nhanh: GeneratePress được tối ưu hóa để tải trang cực nhanh, giúp người dùng có trải nghiệm tốt hơn và tăng thứ hạng SEO cho website của bạn.
- Kích thước nhẹ: Dung lượng theme rất nhỏ, không làm nặng website của bạn, giúp tiết kiệm tài nguyên máy chủ.
- Biến hóa linh hoạt: GeneratePress có khả năng tùy biến cực cao, cho phép bạn tạo ra giao diện website theo ý thích mà không cần biết code. Đặc biệt giao diện tùy biến tích hợp luôn trong customize mặc định của WordPress giúp tiện lợi và dễ học tập cho người mới.
- Tốt cho SEO: Cấu trúc code của GeneratePress được tối ưu hóa cho SEO, giúp website của bạn dễ dàng được các công cụ tìm kiếm như Google “để mắt” đến.
- Cộng đồng hỗ trợ nhiệt tình: GeneratePress có một cộng đồng người dùng khá đông đảo và đội ngũ hỗ trợ luôn sẵn sàng giải đáp mọi thắc mắc của bạn.
Cài đặt GeneratePress
Phần này mình nói sơ qua vì bài viết hướng dẫn cài đặt theme WordPress mình đã nói rất kỹ rồi.
Để cài đặt GeneratePress, hãy đăng nhập vào trang Dashboard WordPress của bạn và đi tới Appearance> Themes. Tiếp theo nhấp vào nút “Add New”, sau đó gõ tên bên ô tìm kiếm.
Tiếp tục nhấn Install và Active nó.
Cấu hình GeneratePress
Sau khi kích hoạt GeneratePress, bạn hãy đi tới Themes -> Customize.
Bây giờ bạn sẽ được mở sang giao diện tùy chỉnh theme WordPress, tại đây cho phép bạn tùy chỉnh các cài đặt khác nhau liên quan đến hiển thị như tải logo, favicon, bố cục, font chữ, màu sắc,…
Để bạn có thêm hứng thú thì dưới đây là kết quả mà bạn sẽ có làm được trên chính Blog của bạn khi hiểu rõ về các tùy chọn trong customize này.
Lưu ý rằng: Mỗi theme WordPress sẽ có số lượng tùy chỉnh khác nhau và không cái nào giống cái nào. Sau này bạn có cài một theme khác GeneratePress thì cũng đừng thắc mắc tại sao cái này có nhưng cái kia lại không nhé!
Site Identity
Đây là khu vực cho phép bạn tùy chỉnh các yếu tố cơ bản của Blog gồm:
- Site Title: Tiêu đề của Blog.
- Tagline: Khẩu hiệu của Blog.
- Logo: Cho phép tải logo của bạn lên. Nó thường xuất hiện ở phần đầu trang.
- Site icon: Đây là cái biểu tượng nhỏ xuất hiện trên các tab trình duyệt. Ví dụ giờ bạn dùng máy tính thì nhìn lên tab này sẽ thấy logo của mình.
Về cơ bản thì phần này liên quan đến yếu tố thương hiệu cá nhân của bạn nên cứ thoải mái làm, những thay đổi của bạn sẽ được hiển thị ngay trên màn hình.
Layout
Layout là bố cục tổng thể của một giao diện WordPress, để dễ dàng nắm bắt hơn bạn hãy xem dưới đây là cấu trúc cơ bản của một Blog.
Container
Chú ý tới Container width vì đây chính là chiều rộng của giao diện khi hiển thị trên máy tính. Thông thường mình sẽ setup nó tầm 1080px hoặc 1200px.
Container layout và container text thì bạn có thể thử xem cái nào vừa mắt với mình thì chọn.
Header
Header là phần trên cùng trang web của bạn và thường chứa logo, menu và có thể là nút search hoặc share.
Với GeneratePress nó cho phép bạn tùy chỉnh tiêu đề với nhiều yếu tố khác nhau.
- Header Presets: Vị trí các thành phần của header
- Header Width: Chiều rộng của header
- Inner Header Width: Chiều rộng tiêu đề bên trong của header
- Header Alignment: Căn lề header.
Primary Navigation
Đây là phần GeneratePress cho phép bạn chỉnh các yếu tố liên quan đến điều hướng (hay còn gọi là menu) của Blog.
- Navigation Location: Vị trí của menu, nó sẽ phụ thuộc vào vị trí header mà bạn đã chọn ở trên.
- Navigation Drop Point: Nên để mặc định.
- Navigation Dropdown: Các tùy chọn hiển thị menu con, cái này bạn chọn cái nào cũng được, tùy sở thích thôi chứ không có gì quan trọng.
- Dropdown Direction: Tương tự trên
- Enable navigation search modal: Nên tick vào để bật nút search giúp website trông chuyên nghiệp và mọi người dễ dàng tìm kiếm hơn.
Sidebar
Phần này là nơi bạn kiểm soát các bố cục của Blog có thanh bên hay không gồm các tùy chọn:
- Content/sidebar: Một bên content một bên sidebar.
- Content (no sidebar): Không có sidebar (ví dụ trang bạn đang đọc này).
- Sidebar/Content/sidebar: Bố cục gồm 2 khung nội dung 2 bên và nội dung chính ở giữa. (chỉ phù hợp cho site tin tức).
- Sidebar/sidebar/Content: Hầu như không ai dùng cái này.
- Content/Sidebar/sidebar: Cũng hầu như không ai dùng.
Bên cạnh đó bạn có thể kiểm soát trên các dạng nội dung.
Sidebar Layout: Thiết lập tổng thể toàn site. Ví dụ bạn muốn mặc định mọi thiết kế của website là một bên content một bên sidebar thì chọn Content/sidebar.
Blog Sidebar Layout: Bố cục sidebar mặc định chỉ dành cho trang tổng hợp bài đăng.
Single Post Sidebar Layout: Bố cục sidebar mặc định chỉ dành cho các bài đăng Blog. Như mình thì để mặc định là no sidebar luôn.
=> Cái hay của GeneratPress là trong mỗi trang hoặc bài đăng Blog bạn có thể chọn lại bố cục chỉ áp dụng cho trang đó. Điều này giúp bạn linh hoạt hơn trong cách trình bày và bố trí nội dung.
Footer
Đây là phần cho phép bạn kiểm soát chân trang của website.
Các tùy chọn cấu hình bao gồm:
- Footer Width, Inner Footer Width: 2 cái này thì y như phần header thôi. Bạn nên để giống header width.
- Footer Widgets: Số lượng các cột tiện ích được tạo ra, thường thì nên chọn 2-4 là đẹp. Mình thì trung thành với 3.
- Back to Top Button: Nút để quay lên đầu trang (nên bật).
Blog
Cái này thì mặc định là except để nó ngắn gọn. Sau này nếu có điều kiện dùng bản Premium thì sẽ có rất nhiều tùy chọn hay ho cho bạn.
Okay vậy cơ bản là xong bố cục.
Tiếp theo bạn cần biết cách làm cho website của bạn lung linh hơn trong mắt mọi người.
Sử dụng màu trên GeneratePress
Tương tự như Layout hãy nhấp vào phần Colors.
Bây giờ bạn sẽ thấy rất nhiều tùy chọn nhưng trước tiên hãy làm quen với Global Colors, đây được hiểu đơn giản là các màu sắc tổng thể của trang. Điều này có nghĩa là bạn sẽ chọn một số màu thường dùng và sử dụng thường xuyên trong quá trình thiết kế.
Theo mặc định thì GeneratePress cho bạn một bộ màu rất chuẩn, bạn chỉ cần thay đổi màu cuối cùng là màu xanh theo một màu bạn thích là được.
Ví dụ mình đổi thành màu cam thì một số yếu tố như link sẽ đổi theo.
Ngoài ra bên dưới bạn còn thấy rất nhiều lựa chọn thay đổi màu ở các vị trí và phần tử khác nhau, sau đây mình sẽ giải thích ra cho bạn dễ hiểu và tự vọc.
- Body: Các thành phần chính.
- Top Bar: Thanh đầu trang.
- Background: Màu nền.
- Text: Liên quan đến các yếu tố về văn bản.
- Link: Liên kết.
- Header: Phần đầu trang.
- Primary Navigation: Màu sắc của các điều hướng.
- Buttons: Nút.
- Content: Màu sắc phần nội dung chính.
- Forms: Các biểu mẫu.
- Sidebar Widgets: Màu của các thanh bên.
- Footer Widgets: Màu của các tiện ích.
- Footer Bar: Thanh chân trang.
- Back to Top: Nút chuyển hướng đầu trang.
- Search Modal: Nút search.
Với mỗi tùy chọn trên khi nhấp vào bạn sẽ thấy một bảng màu và các màu global đã có sẵn, do đó bạn chỉ việc nhấp vào thay vì phải dán mã. Đó là lý do tại sao mình nói rất kỹ về global.
Nên nhớ yếu tố nào mà có 2 tùy chọn màu thì bên trái là màu bình thường, bên phải là màu khi bạn rê chuột vào nó sẽ thay đổi.
Tùy chỉnh Font chữ
Cuối cùng chúng ta sẽ tìm hiểu về Font chữ, bạn hãy nhấp vào mục Typography.
Bây giờ bạn có 2 tùy chọn:
Font Manager: Nhấp vào nút add font. Sau đó tìm font chữ mà bạn yêu thích. Nếu bạn không biết tìm font ở đâu đẹp thì vào Google Font tìm nha.
Typography Manager: Tại đây bạn có thể quản lý font chữ trên nhiều vị trí khác nhau.
Ví dụ mình muốn tiêu đề của bài đăng Blog được in đậm và và kích thước 45px chẳng hạn.
Ngoài ra bạn cũng có thể tùy chỉnh thông số trên từng loại thiết bị.
Lấy ví dụ font chữ trên luôn, trong quá trình thiết lập bạn sẽ thấy một biểu tượng máy tính, tablet, di động. Chỉ cần nhấp vào thiết bị tương ứng và chỉnh thông số.
Ví dụ tiêu đề trên là 45px nhưng nếu hiển thị trên di động thì nó quá lớn, do đó bạn cần chỉnh nhỏ lại là 32px.
Okay, tùy biến theme WordPress cơ bản cũng chỉ loanh quanh mấy cái từ bố cục, màu sắc và font chữ thôi. Mình đã gợi ý cho bạn chức năng của từng cái rồi, nhiệm vụ của bạn là cứ vọc, khi nào thấy nó ưng ý là được, cơ bản thì bạn mò nhiều thì tự nhiên bạn sẽ tùy biến nó đẹp.
Menu
Đây là nơi cho phép bạn tùy chỉnh các item sẽ hiển thị trên các điều hướng. Ví dụ ở Blog này khi ở đầu trang bạn sẽ thấy một số văn bản liên kết. Để giúp bạn nắm rõ về menu mình đã có một hướng dẫn chi tiết tại đây.
Widget
Widget là các tiện ích được thêm vào những vị trí như sidebar hoặc footer, giúp bạn có thể trình bày nội dung đa dạng hơn như thêm các banner quảng cáo, bài viết phổ biến, giới thiệu,….
Cũng như menu bạn có thể xem hướng dẫn widget cho người mới để nắm bắt rõ ràng nhất.
Mở khóa sức mạnh của GenerarePress
Những gì mình vừa hướng dẫn cho bạn là phiên bản GeneretePress Free, ngoài ra họ còn một bản trả phí gọi là GP Premium.
Nó cung cấp rất nhiều các tiện ích bổ sung giúp bạn mở rộng chức năng của theme và cho phép bạn tạo một website mạnh mẽ với nhiều tùy chỉnh chuyên sâu hơn. Chẳng hạn như:
Site Library
Đây là thư viện các mẫu thiết kế được các chuyên gia xây dựng sẵn phục vụ nhiều mục đích và nhu cầu khác nhau.
Nhiệm vụ của bạn là chọn một mẫu, sau đó nhập vào website và chỉnh lại nội dung một chút để sử dụng.
Nhiều tùy chỉnh chuyên sâu hơn
Ở phần hướng dẫn sử dụng GeneratePress mình đã nói về các tùy chỉnh, tuy nhiên đó là cơ bản. Khi cài GP Premium bạn sẽ thấy các lựa chọn tùy chỉnh tăng lên rất nhiều, giúp bạn có thể kiểm soát thiết kế được linh hoạt hơn mà không còn bị bó buộc.
Ví dụ như với mục Blog ở trên bạn chỉ có một tùy chỉnh.
Nhưng khi cài GP Premium thì bạn sẽ có thêm nhiều tùy chọn như quyết định bố cục, vị trí sắp xếp hình ảnh, tiêu đề,…
Theme Builder
Sau này bạn sẽ nghe nói về thuật ngữ page builder dùng để nói đến một số plugin có tính năng kéo thả để tạo trang. Tuy nhiên với GeneratePress có một tính năng còn cao cấp hơn là Theme Builder.
Hiểu đơn giản, nó cho phép bạn tạo ra các thành phần riêng biệt của website sau đó ghép lại thành giao diện theo ý muốn của bạn.
Tuy nhiên, nếu bạn mới bắt đầu và ngân sách còn hạn hẹp, thì mình nghĩ phiên bản miễn phí của GeneratePress cũng đã đủ “xịn” để bạn tạo ra một website chuyên nghiệp rồi.
Lời kết
Vậy là mình đã chia sẻ cho bạn tất tần tật những điều về GeneratePress cơ bản và tùy biến. Hy vọng bài viết này sẽ giúp tự tin hơn trong việc cài đặt và sử dụng GeneratePress để tạo ra những Blog/website đẹp mắt.
Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại bình luận bên dưới. Mình sẽ cố gắng hỗ trợ bạn sớm nhất có thể.
Chúc bạn có được một giao diện Web ưng ý và bắt đầu hành trình kiếm tiền suôn sẻ.
Top 2 HOTSTING THIẾT KẾ TRANG WEBSITE TỐT NHẤT MÌNH ĐANG SỬ DỤNG
Top 1 Hostinger: XEM TẠI ĐÂY, Xem video này làm theo nếu bạn chọn mua hostinger(khuyên dùng #1) MÃ GIẢM GIÁ SINHGIANG
Top 2: : HostArmada: XEM TẠI ĐÂY
