Bạn có mệt mỏi với một trang web chậm và lỗi thời không thu hút đủ khách truy cập? Bạn có muốn cải thiện hiệu suất trang web và trải nghiệm người dùng của mình không?
Không cần tìm đâu xa hơn GeneratePress, theme WordPress nhẹ và linh hoạt đã gây bão trong thế giới thiết kế web nhiều năm qua.
Hướng dẫn toàn diện này sẽ chỉ cho bạn cách tận dụng tối đa sức mạnh của GeneratePress, từ việc tùy chỉnh thiết kế và bố cục trang web của bạn đến tối ưu hóa tốc độ và SEO của nó.
Với giao diện thân thiện với người dùng và các tính năng mạnh mẽ, GeneratePress là giải pháp hoàn hảo cho bất kỳ chủ sở hữu trang web nào muốn tăng cường sự hiện diện trực tuyến của mình.
Cho dù bạn là một blogger, chủ doanh nghiệp nhỏ hay trang web thương mại điện tử, hướng dẫn này sẽ trang bị cho bạn kiến thức và công cụ bạn cần để tối đa hóa tiềm năng trang web của mình và nổi bật trong thị trường trực tuyến đông đúc.
Được rồi? Hãy đi sâu vào và bắt đầu tạo một trang web vừa đẹp vừa nhanh và chuẩn SEO bằng cách sử dụng GeneratePress.
Lợi ích của việc sử dụng GeneratePress cho trang web của bạn
GeneratePress là một chủ đề WordPress nhẹ và mạnh mẽ cung cấp một loạt các lợi ích cho chủ sở hữu trang web. Dưới đây chỉ là một vài lý do tại sao bạn nên cân nhắc sử dụng GeneratePress cho trang web của mình:
1. Tốc độ và hiệu suất
Một trong những lợi thế lớn nhất của GeneratePress là thiết kế nhẹ, có nghĩa là thời gian tải trang web của bạn nhanh hơn. Thời gian tải trang web chậm có thể gây ra sự khó chịu lớn đối với khách truy cập, vì vậy một trang web nhanh là rất quan trọng cho trải nghiệm người dùng.
2. Khả năng tùy chỉnh
GeneratePress có khả năng tùy biến cao, cho phép bạn tạo một trang web độc đáo phản ánh thương hiệu và tầm nhìn của bạn.
Với giao diện thân thiện với người dùng, bạn có thể dễ dàng thay đổi bố cục, màu sắc, kiểu chữ,,.một cách dễ dàng mà không cần biết gì về lập trình.
3. Thiết kế đáp ứng
Trong bối cảnh phổ biến của các thiết bị di động kết nối mạng, có một trang web hiển thị đẹp trên tất cả các thiết bị là điều cần thiết. GeneratePress cung cấp thiết kế Responsive, có nghĩa là trang web của bạn sẽ tự động điều chỉnh để phù hợp với mọi kích thước màn hình, từ máy tính để bàn đến máy tính bảng đến điện thoại thông minh.
Điều này đảm bảo trải nghiệm người dùng liền mạch cho tất cả khách truy cập, bất kể họ truy cập trang web của bạn như thế nào.
Cài đặt GeneratePress
Để 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ó.
Nếu tới giờ mà bạn bạn còn chưa biết cụ thể cách cài theme WordrPress thì hãy bạn xem hướng dẫn chi tiết tại đây.
Cấu hình GeneratePress
Sau khi kích hoạt GeneratePress, bạn hãy đi tới Themes -> Customize.
Tại đây, bạn có thể tùy chỉnh các cài đặt khác nhau gồm như upload logo, favicon, như bố cục, font chữ chữ, màu sắc.
Nếu bạn chưa quen với giao diện tùy chỉnh này thì cũng không sao, hãy cùng mình làm quen trong phần bên dưới.
Hiểu giao diện GeneratePress
Trước khi bạn bắt đầu tùy chỉnh trang web của mình với GeneratePress, điều quan trọng là phải hiểu giao diện của nó. Dưới đây là các thành phần chính của tùy chỉnh giao diện GeneratePress.
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 website gồm:
- Site Title: Tiêu đề của website.
- Tagline: Khẩu hiệu của website.
- Logo: Cho phép tải logo của bạn lên
- Site icon: Cái biểu tượng nhỏ xuất hiện trên các tab trình duyệt.
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 theme WordPress và tùy chỉnh GeneratePress gồm có:
Container
Đâ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 của 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.
Privary Navigation
Đâu 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 website.
- 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 website 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.
Tiếp theo là 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 cái tiêu đề của bài đăng Blog được in đậm và và kích thước 45px chẳng hạn.
Okay, sử dụng 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 thôi, khi nào thấy nó ưng ý bạn là được,cơ bản thì bạn vọc nhiều thì tự nhiên bạn sẽ tùy biến nó đẹp.
Lần đầu thì mình chắc chắn nó sẽ không hoàn hảo rồi.
À ầm mình quên mất vụ chỉnh kích thước trên các 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 cho nó nhỏ lại.
Ví dụ 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 sử dụng GeneratePress cơ bản thì chỉ có bấy nhiêu thôi, chỉ cần bạn chịu khó vọc thì bạn sẽ có các thiết kế vừa mắt phục vụ công việc viết Blog và kiếm tiền Online.
Tùy chỉnh trang web của bạn bằng GeneratePress
Bây giờ bạn đã quen thuộc với giao diện GeneratePress, đã đến lúc bắt đầu tùy chỉnh trang web của bạn. Dưới đây là một số mẹo và phương pháp hay nhất để sử dụng GeneratePress tạo một trang web vừa đẹp vừa mạnh mẽ.
Tối ưu hóa trang web của bạn cho SEO
GeneratePress tích hợp rất tốt với các công cụ SEO trên thị trường, chẳng hạn như Schema Markup và tích hợp với các plugin SEO phổ biến như Rank Math hay Yoast.
Bằng cách sử dụng GeneratePress cùng các công cụ SEO này bạn có thể cải thiện thứ hạng công cụ tìm kiếm và thu hút nhiều traffic miễn phí từ Google hơn vào trang web của bạn. Tất nhiên cơ hội kiếm tiền sẽ nhiều hơn.
Sử dụng plugin trình tạo trang
Đối với hầu hết các website WordPress hiện nay, trang bị thêm một page builder là điều không thể thiếu nếu bạn muốn có những thiết kế đẹp mắt theo ý muốn mà không cần biết gì về lập trình.
May mắn cho bạn là GeneratePress tương thích với các plugin xây dựng trang phổ biến trên thị trường như Elementor và Thrive Architect và thậm chí Divi. Các plugin này sẽ cung cấp giao diện kéo và thả và một loạt các yếu tố thiết kế, giúp bạn dễ dàng tạo một trang web vừa đẹp vừa có chức năng cao
Thêm CSS tùy chỉnh
Nếu bạn có một số kỹ năng viết mã, bạn có thể thêm CSS tùy chỉnh vào trang web của mình để tùy chỉnh thêm thiết kế và bố cục của nó. GeneratePress cung cấp một khu vực tùy chỉnh CSS chuyên dụng, nơi bạn có thể thêm mã của riêng mình và xem các thay đổi trong thời gian thực.
Mẹo: Bạn có thể dùng ChatGPT hoặc các ứng dụng AI hỗ trợ quá trình chỉnh sửa bằng mã CSS.
Tăng sức mạnh với GP Premium
Ngoài GeneretePress Free thì họ còn một bản thương mại gọi là GP Premium, nó cung cấp một loạt 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 trang web mạnh mẽ với nhiều tùy chỉnh chuyên sâu hơn. Dưới đây là một số tiện ích bổ sung bạn sẽ nhận được khi dùng GP Premium.
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 phụ 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 mình đã nói thì bạn chỉ có một tùy chỉnh.
Nhưng khi có GP Premium thì bạn sẽ có thêm các tùy chọn như quyết định bố cục, vị trí sắp xếp hình ảnh, tiêu đề,…
Tính năng Hook
Hook là một tính năng mình vô cùng thích ở GeneratePress, bạn có thể hiểu đơn giản là các bố cục theme thường tuân theo một nguyên tắc cụ thể. Do đó nếu bạn muốn chèn một phần tử mới, ví dụ banner quảng cáo thì có rất ít lựa chọn.
Nhưng với tính năng hook của GP Premium hỗ trợ rất nhiều vị trí khác nhau cho bạn chèn, đặc biệt nếu bạn kết hợp với một plugin như Elementor Pro thì hầu như bất kỳ bố cục nào bạn cũng làm được mà không cần kinh nghiệm lập trình.
Mình cũng đã áp dụng tính năng hook này kết hợp với Thrive Leads để tạo ra cái form đăng ký cuối mỗi bài viết mà bạn thấy.
Ngoài ra bạn cũng có thể đọc bài đánh giá GeneratePress của mình để khám phá các tính năng của GP Premium cũng như thấy được sự mạnh mẽ của nó đến mức nào.
Các phương pháp để GeneratePress có tốc độ tải trang cao nhất
Mặc dù GeneratePress được coi là một trong những theme có tốc độ tải trang nhanh nhất hiện nay, tuy nhiên để tận dụng tối đa GeneratePress và tối ưu hóa trang web của bạn để có hiệu suất cao nhất, đây là một số phương pháp hay nhất để làm theo:
Tối ưu hóa hình ảnh của bạn
Hình ảnh lớn có thể làm chậm thời gian tải trang của bạn, vì vậy điều quan trọng là phải tối ưu hóa chúng cho web. Sử dụng một công cụ như Photoshop hoặc GIMP để thay đổi kích thước và nén hình ảnh của bạn trước khi tải chúng lên trang web của bạn.
Sử dụng plugin bộ nhớ đệm
Plugin bộ nhớ đệm có thể cải thiện tốc độ và hiệu suất trang web của bạn bằng cách lưu vào bộ nhớ đệm các tệp tĩnh và giảm tải máy chủ. Các plugin bộ nhớ đệm miễn phí phổ biến cho WordPress bao gồm WP Super Cache và W3 Total Cache.
Ngoài ra, nếu bạn có điều kiện hãy xem xét đến WP Rocket, đây là một plugin bộ nhớ đệm và tăng tốc WordPress tốt nhất mà mình dùng trong 5 năm nay.
Thu nhỏ mã của bạn
Giảm thiểu mã của bạn cũng có thể cải thiện tốc độ và hiệu suất trang web của bạn. Sử dụng một công cụ như WP Minify hoặc Autoptimize để giảm thiểu các tệp HTML, CSS và JavaScript của bạn.
Sử dụng CDN
Mạng phân phối nội dung (CDN) có thể cải thiện hơn nữa tốc độ và hiệu suất trang web của bạn bằng cách lưu vào bộ nhớ đệm nội dung trang web của bạn trên các máy chủ trên khắp thế giới. Các nhà cung cấp CDN phổ biến bao gồm Cloudflare và MaxCDN.
GeneratePress so với các theme WordPress và page Builder nổi tiếng khác
GeneratePress chỉ là một trong nhiều theme nổi tiếng trên thị trường, vậy mình sẽ nói qua một chút để bạn có thể so sánh chúng.
Divi
Divi là một theme và cũng là plugin xây dựng trang phổ biến cho WordPress cung cấp một loạt các yếu tố và tính năng thiết kế. Tuy nhiên, Divi có thể chậm và cồng kềnh, điều này có thể ảnh hưởng tiêu cực đến tốc độ và hiệu suất trang web của bạn.
Astra
Astra là một chủ đề WordPress nhẹ và có thể tùy chỉnh tương tự như GeneratePress. Mặc dù Astra cung cấp một số tính năng độc đáo, chẳng hạn như các mẫu được thiết kế sẵn cho WooCommerce, nhưng nó không thân thiện với người dùng như GeneratePress và có thể khó tùy chỉnh hơn.
Elementor Pro
Elementor Pro là một plugin xây dựng trang phổ biến cho WordPress cung cấp giao diện kéo và thả và một loạt các yếu tố thiết kế. Elementor Pro có một trình tạo chủ đề để bạn tạo ra một theme theo ý muốn của bạn nhưng điều này cần có kinh nghiệm, Tốt hơn hết bạn nên kết hợp nó với GeneratePress.
Kết thúc
Hy vọng qua hướng dẫn sử dụng GeneratePress này bạn đã hiểu được cách cài đặt và tùy biến giao diện cơ bản của GeneratePress. Mình nghĩ với giao diện thân thiện như vậy thì chắc chắc bạn sẽ rất dễ hiểu và mau chóng làm quen.
GeneratePress thực sự là một chủ đề WordPress mạnh mẽ và linh hoạt rất đáng để sử dụng. Cho dù bạn là blogger, chủ doanh nghiệp nhỏ hay trang web thương mại điện tử thì nó đều dư sức giúp bạn.
Đặc biệt Generatepress có ưu điểm về độ nhẹ và tốc độ tải đó là 2 yếu tố lớn ảnh hưởng đến SEO, và khi kết hợp với các plugin SEO như Rank Math hay Yoast bạn sẽ có nhiều cơ hội xếp hạng trên Google.
Đừng quên áp dụng các mẹo bổ sung của mình để có được một trang web với chất lượng cao nhất.
Chúc bạn sớm sử dụng GeneratePress thành thạo!