Trong bài này bạn sẽ học cách sử dụng theme GeneratePress, một trong các theme được giới chuyên gia cũng như người dùng thông thường đánh giá rất cao.
Theme GeneratePress có hai phiên bản miễn phí và cao cấp (có phí trả hàng năm). Bài viết này sẽ hướng dẫn sử dụng bản cao cấp để tận dụng hết các tính năng của giao diện.
Đầu tiên bạn cài và kích hoạt theme GeneratePress qua giao diện quản trị:
Khi bạn mua bản cao cấp của GeneratePress, bạn sẽ được cung cấp plugin để hỗ trợ, bạn cài plugin này:
Sau đó vào Appearance > GeneratePress để kích hoạt mã bản quyền:
Tiếp đến, bạn kéo xuống dưới và kích hoạt tất cả các modules bằng cách click vào nút Activate, cái này sẽ kích hoạt tất cả các tính năng cao cấp của theme GeneratePress:
OK, giờ chúng ta sẽ đi vào các phần chính.
1. Tạo menu chính cho website
Bạn vào Appearance > Menus, nhập tên menu ở chỗ Menu Name (tên bất kỳ bạn thích). Chọn vị trí ở chỗ Display location.
Với menu chính, chúng ta nhập như sau (tick chọn chỗ primary menu và off canvas menu):
Sau đó thêm nội dung cho menu chính, bằng cách bổ sung chuyên mục / categories (cái này nằm ở cột bên phải):
Thêm trang (page) vào menu chính:
Bạn có thể sắp xếp lại các mục trong menu nếu cần, bằng cách click chuột và kéo nó các mục lên và xuống, thao tác xong thì Save Menu:
Kết quả là bạn sẽ thấy menu chính được hiển thị ra bên ngoài website:
Bạn có thể thêm một bài Post cụ thể vào menu thông qua lựa chọn Posts ở Add menu items, bạn cũng có thể thêm một link cụ thể bất kỳ (trong hay ngoài website đều được, nhưng với menu chính thường là trong, để người dùng không đi ra ngoài website của bạn) ở phần Custom Links:
- URL: nhập link của cụ thể của liên kết.
- Nhập nhãn cho link đó khi nó hiển thị trên Menu.
2. Tạo menu phụ
Trong GeneratePress, menu phụ sẽ xuất hiện ở trên cùng, kích cỡ nhỏ hơn, màu nền đen mờ.
Thường menu phụ dùng để chứa các liên kết mà chúng không được quan trọng như các mục trong menu chính.
Tạo menu phụ:
Thao tác thêm các mục thì cũng giống menu chính.
Các website mới ít khi phải thêm menu phụ, vì thường chưa có nhiều mục. Nhưng bạn cũng nên biết để có thể dùng khi cần.
Menu phụ hiện ra bên ngoài như thế này:
3. Chỉnh sửa tên website và tagline
Để làm điều này, bạn vào Appearance > Customize > Site Identity:
Đây là khu vực bạn có thể:
- Điều chỉnh tiêu đề của website.
- Điều chỉnh tagline, ẩn hiện nó theo mong muốn.
- Thêm logo.
- Thêm Site Icon (favicon của website).
4. Điều chỉnh bố cục của website
Còn gọi là layout của trang web. Bạn vào Appearance > Customize > Layout.
Ở đây có rất nhiều thông tin chúng ta có thể điều chỉnh.
A. Container
Cái này quy định chiều rộng chung của website cũng như các khoảng cách lề giữa chúng.
- Container Width: chiều rộng của phần nội dung. Mặc định là 1200px. Chiều rộng này bao gồm cả phần nội dung của bài, lẫn phần sidebar (cột trái hoặc phải) nếu có. Trong ví dụ của tôi, tôi điều chỉnh nó xuống 1100px cho phù hợp với độ rộng đang có của ảnh đại diện.
- Separating Space: là khoảng cách giữa các thành phần header, content, sidebar và footer. Mặc định là 20px, và đây là lựa chọn tốt, bạn nào muốn tăng hoặc giảm thêm chút ít thì điều chỉnh.
- Content Separator: điều chỉnh khoảng cách giữa ảnh đại diện, tiêu đề và các thông tin meta của bài (tác giả, ngày xuất bản, chuyên mục, thẻ tag). Mặc định là 2 em. Đây cũng là lựa chọn tốt. Nói thêm em là đơn vị tương đối, không phải tuyệt đối giống như px. 1 em tương đương với giá trị font-size của thẻ cha trong trường hợp áp dụng thuộc tính font-size cho thẻ con, và tương đương với chính font-size của thẻ đó nếu áp dụng kích cỡ thuộc tính như chiều rộng. Như vậy 2 em trong trường hợp này nghĩa là khoảng cách sẽ là 2 lần kích cỡ font-size trong phần nội dung. Vì là áp dụng tương đối nên khi bạn tăng giảm kích cỡ chữ, khoảng cách tuyệt đối cũng tăng giảm theo mà không cần phải điều chỉnh lại nữa, đấy là cái lợi ích của em.
- Content Padding: quy định lề bên trong cho phần nội dung chính (bao gồm cả khu vực bình luận), mặc định là 40px. Nó quy định lề của 4 chiều: trên (top), phải (right), đáy (bottom), trái (left). Bạn điều chỉnh sẽ thấy ngay kết quả. Mặc định để 40 cũng tốt, thường không phải điều chỉnh gì phần này.
B. Header
Dùng để điều chỉnh bố cục của Header.
Bạn vào Appearance > Customize > Header để điều chỉnh.
- Header Presets: dùng để điều chỉnh vị trí tương đối giữa tiêu đề và phần menu chính. Có nhiều lựa chọn, bạn cứ thử xem cái nào thấy thích thì chọn.
- Header Width: điều chỉnh độ rộng của header, mặc định Full nghĩa là sẽ đầy màn hình, tràn ra 2 bên. Nếu để là Contained, thì chiều rộng của header sẽ bằng với chiều rộng của website (chiều rộng Container Width trong Container).
- Inner Header Width: điều chỉnh độ rộng bên trong của header. Mặc định Contained sẽ để chiều rộng bằng với chiều rộng của website, khi đó tên website và menu sẽ nằm trọn vẹn trong chiều rộng. Nếu để Full nó sẽ tràn ra 2 bên đầy màn hình, trường hợp Full sẽ phù hợp khi bạn có menu dài, mà ở lựa chọn mặc định bị thiếu không gian.
- Header Padding: lề của header, dùng để điều chỉnh khoảng cách giữa lề trong header và tiêu đề website, menu chính.
- Nếu bạn tick vào Use Navigation as Header. Thì các tùy chọn trên không còn nữa, đây là tùy chọn nhanh cho header, trông nó cũng ổn, bạn nào thích thì dùng, còn chọn kỹ thì cách trên vẫn kỹ hơn.
Tùy chọn Header ở trên sẽ được áp dụng cho cả máy bàn và di động. Bạn nào muốn tùy chỉnh sâu header hơn cho di động thì vào phần Mobile Header ngay bên dưới và chọn ON.
Nếu chưa có Logo thì chỗ Branding Type chọn Site Title để nó hiện tên website ra.
Nếu muốn menu luôn hiện ở trên đầu khi người dùng cuộn chuột thì ở chỗ Sticky bạn để ON.
C. Primary Navigation
Phần này, chúng ta sẽ điều chỉnh menu chính.
Bạn vào Appearance > Customize > Primary Navigation.
- Mobile Menu Breakpoint: nó quy định chiều rộng của thiết bị mà menu của website sẽ được điều chỉnh về như dạng menu như trên di động. Cái này có thể hữu ích khi bạn có menu dài, và do vậy nó chỉ đẹp trên màn hình rộng, như máy bàn, laptop, còn trên thiết bị nhỏ hơn chút như máy tính bảng, menu bị hiển thị thành 2 hàng, trông không được đẹp lắm như thế này:
- Bạn sẽ điều chỉnh hiện tượng này bằng cách tăng chiều rộng mà nó cần chuyển thành menu kiểu di động, ví dụ 900px, kết quả không còn hiện tượng menu chính dàn 2 hàng nữa:
- Cái Navigation Drop Point là một cách khác để làm giảm ảnh hưởng dàn 2 hàng của menu chính. Ở đây bạn quy định chiều rộng mà dưới mức đó thì menu chính sẽ chuyển xuống dưới chứ không cùng hàng với logo hoặc tiêu đề nữa. Nhờ chuyển xuống dưới mà không gian theo chiều rộng lớn hơn, và do vậy menu không bị dàn thành 2 hàng. Con số này cần lớn hơn Mobile Menu Breakpoint thì mới có ý nghĩa.
- Ví dụ khi không thiết lập, menu trở thành 2 hàng trên màn hình nhỏ (kiểu máy tính bảng, nếu là di động thì không sao, vì đã có menu kiểu di động rồi):
- Khi điều chỉnh:
- Như vậy là cả Navigation Drop Point và Mobile Menu Breakpoint đều dùng để điều chỉnh cách hiển thị của menu chính khi xem trên màn hình không phải kích cỡ lý tưởng, điểm khác nhau của chúng là gì? Một cái khắc phục hiện tượng này bằng cách chuyển menu xuống dưới tiêu đề site, còn một cái thì chuyển nó thành menu dạng di động. Bạn kết hợp cả 2 được, cho tối ưu, miễn là giá trị của Navigation Drop Point nên lớn hơn giá trị của Mobile Menu Breakpoint.
- Phần Navigation Dropdown: dùng để điều chỉnh menu xổ. Mặc định là hover, nghĩa là khi di chuyển chuột đến là menu xổ ra bên dưới. Các lựa chọn khác là Click thì yêu cầu chúng ta cần phải click vào thì nó mới xổ ra.
- Dropdown Direction: dùng để điều chỉnh hướng của menu xổ ra, giờ là từ phải qua trái hay từ trái qua phải, cái này bạn cứ thử sẽ nhìn thấy rõ nhất.
- Enable navigation search modal: cái này khi được bật sẽ bổ sung nút tìm kiếm vào menu. Nhìn chung chức năng tìm kiếm tuy ít dùng, nhưng vẫn hữu ích và không tốn không gian đáng kể, do vậy nên bật sẽ tốt hơn.
- Các tùy chọn cuối cùng là Menu Item Width, Menu Item Height dùng để điều chỉnh độ rộng và chiều cao của các mục trong menu chính. Còn Sub-Menu Item Height và Sub-Menu Width được dùng để điều chỉnh độ rộng và chiều cao của menu phụ. Cái này các bạn thực hành luôn sẽ thấy rõ hơn. Những điều chỉnh này sẽ ảnh hưởng đến chiều cao của header, khoảng cách giữa các thành phần nằm trên menu.
D. Secondary Navigation
Phần này, chúng ta sẽ điều chỉnh menu phụ.
Bạn vào Appearance > Customize > Secondary Navigation.
- Mobile Menu Label: nhãn, tên của menu hiển thị trên di động. Bạn có thể điều chỉnh cái này thành bất cứ tên nào bạn muốn, bỏ trống để không hiển thị tên.
- Navigation Width: chiều rộng của menu phụ, nó cũng có 2 lựa chọn mà ý nghĩa các bạn đã biết, Full và Container. Mặc định là Full trông sẽ đẹp hơn.
- Inner Navigation Width: cũng tương tự với 2 tùy chọn Full và Container. Nếu là Full menu sẽ tràn ra gần kích cỡ tối đa của màn hình, còn Container thì chỉ lấy độ rộng của phần nội dung chính website, cũng là độ rộng mà chúng ta thiết lập ở phần layout.
- Navigation Alignment: tức là menu sẽ bắt đầu từ trái qua phải hay từ phải qua trái. Mặc định là Right. Cũng có lựa chọn Center để căn menu ra chính giữa.
- Navigation Location: vị trí của menu phụ, có nhiều lựa chọn gồm trên (mặc định), dưới header, hoặc cho vào sidebar (trái hoặc phải).
- Dropdown Direction: liên quan đến hướng của menu xổ ra.
- Cá tùy chọn cuối như Menu Item Width, Height, Sub-Menu Item Height cũng có ý nghĩa tương tự các tùy chọn cho menu chính, tức là dùng để điều chỉnh khoảng cách, độ rộng, chiều cao của các phần tử nằm trong menu phụ.
E. Sticky Navigation
Phần này, chúng ta sẽ điều chỉnh menu luôn bám ở trên đầu website khi người dùng cuộn chuột. Nó có thể hữu ích trên một số kiểu trang mà bạn muốn người dùng lúc nào cũng có thể click vào menu trong quá trình đọc bài.
Bạn vào Appearance > Customize > Sticky Navigation.
- Mặc định là Off, muốn bật tính năng này, bạn chọn On, tính năng này sẽ có cả trên di động và máy bàn. Nếu chỉ muốn bật tính năng này trên máy bàn mà không bật trên các thiết bị còn lại thì chọn là Desktop only. Bật tắt tính năng này trên mobile thì bạn đã học cách bật tắt ở phần Appearance > Customize > Header.
- Transition: nói về việc menu xuất hiện với hiệu ứng thế nào, cái này chỉ liên quan tí chút đến thẩm mỹ, và nó thể hiện hiệu ứng rất nhanh nên cũng không quá quan trọng, bạn có thể thử các tùy chọn để xem kiểu nào bạn thấy thích nhất.
- Sticky Navigation Logo: nếu website có Logo và bạn muốn nó cũng hiện ra kèm menu khi cuộn chuột thì bạn đưa vào đây.
- Menu Item Height: điều chỉnh chiều cao của menu bám trên cùng ở phần này. Đơn vị là px.
F. Off Canvas Panel
Chức năng này có thể hữu dụng trên mobile với cách hiển thị menu khi được click vào với nhiều hiệu ứng hơn mặc định. Bạn có thể chọn Mobile only và test các hình thức xuất hiện khác nhau của nó. Tôi khá thích style Overlay.
G. Sidebar
Phần này là tùy chọn liên quan đến sidebar, tức là cột phải hoặc trái (thường là phải).
Bạn vào Appearance > Customize > Sidebar.
Tùy chọn mặc định là Content / Sidebar sẽ khiến nội dung ở bên trái, và Sidebar ở bên tay phải.
Các tùy chọn:
- Sidebar Layout: cái này sẽ ảnh hưởng đến sidebar trên trang định dạng page, bạn chỉ cần quan tâm đến 2 tùy chọn Content / Sidebar và Content (no sidebars). Nếu chọn Content (no sidebar) thì sẽ chỉ có phần nội dung chính của trang mà không có sidebar nữa.
- Blog Sidebar Layout: tùy chọn này sẽ ảnh hưởng sidebar của trang chuyên mục.
- Single Post Sidebar Layout: tùy chọn này ảnh hưởng đến sidebar của trang định dạng post.
- Widget Padding: điều chỉnh lề trong của sidebar, mặc định 40px cũng khá ổn.
- Right Sidebar Width: chiều rộng của sidebar cột phải so với chiều rộng của website, mặc định là 30%. Chúng ta dùng sidebar cột phải nên nếu bạn muốn điều chỉnh độ rộng thì thay đổi con số này ở đây.
- Left Sidebar Width: cũng có ý nghĩa tương tự, nhưng là dành cho cột trái nếu bạn dùng.
H. Blog
Phần này bạn sẽ điều chỉnh cách hiển thị nội dung trên trang chuyên mục và trang post, page.
Bạn vào Appearance > Customize > Blog.
Ở Content, chỗ Archive là điều chỉnh cách hiển thị văn bản khi ở trang chuyên mục (category):
- Excerp: là lấy trích đoạn cho bài viết hiển thị ở trang chuyên mục, đây là lựa chọn mặc định, nên chọn. Full content thì nó sẽ hiển thị toàn bộ nội dung bài trong trang chuyên mục luôn, đây là lựa chọn tệ trong 99% website.
- Excerp word count: số lượng từ lấy trích đoạn, mặc định là 55. Bạn có thể tăng, giảm con số này theo ý muốn, ví dụ tôi chuyển thành 30.
- Read more label: bạn chuyển ‘Read more’ thành ‘Đọc thêm’ để Việt hóa.
- Display read more as button: chuyển ‘Đọc thêm’ thành dạng nút bấm / button. Nếu thích thì bạn tick chọn, không thì bỏ chọn.
- Display post date: hiển thị ngày xuất bản bài. Mặc định tick chọn, bạn nào không muốn hiển thị thì bỏ chọn.
- Display post author: hiển thị thông tin tác giả.
- Display post categories: hiển thị thông tin chuyên mục của bài.
- Display post tags: hiển thị các tag của bài.
- Display comment count: hiển thị số lượng bình luận.
- Use infinite scroll: hiển thị bài viết theo kiểu cuộn chuột vô tận, thay vì phân thành các trang.
Vẫn ở Content, bạn chuyển sang tab Single để điều chỉnh cách hiển thị khi người dùng click vào xem một bài post cụ thể. Nó cũng có các tùy chọn hiển thị tương tự (tác giả, ngày xuất bản, thẻ tag, chuyên mục). Riêng cái Display post navigation, nghĩa là các bài viết cũ hơn và mới hơn theo thứ tự thời gian so với bài đang đọc. Bạn nào không muốn hiển thị cái này thì tắt đi.
Bây giờ chúng ta sẽ chuyển qua phần điều chỉnh cách hiển thị ảnh đại diện trong trang chuyên mục và bài post, page cụ thể. Bạn kéo xuống dưới chỗ Featured Images để thay đổi các thông tin này.
Ở Archive, tức là trang chuyên mục, bạn có các tùy chọn sau:
- Display featured images: hiển thị ảnh đại diện, mặc định bật, nếu tắt, ảnh đại diện sẽ không hiển thị ở trang chuyên mục nữa. Nên để như mặc định để trang chuyên mục được sinh động.
- Display padding around images: nghĩa là có lề xung quanh ảnh. Nếu bỏ chọn, ảnh nó sẽ tràn ra hai bên. Bạn tick thử để biết hiệu ứng rồi tùy chọn hay không. Tuy nhiên ảnh cần đủ lớn mới thấy hiệu ứng này.
- Location: vị trí của ảnh, có 2 tùy chọn là trên (Above Title) và dưới tiêu đề bài (Below Title).
- Alignment: nghĩa là căn ảnh, mặc định là giữa (center), bạn có thể chuyển sang căn trái (left) hoặc phải (right).
- Media Attachment Size: tùy chọn liên quan đến kích cỡ của ảnh đại diện hiển thị ra ở trang chuyên mục. Bình thường bạn để full để ảnh đúng vừa khung nội dung là đẹp nhất. 2 tùy chọn bên dưới là Width và Height nếu bạn muốn chỉ định chiều rộng và chiều cao cụ thể, thường thì không cần sử dụng chúng.
- Columns: liên quan đến việc chia cột ở trang chuyên mục. Bình thường là 1 cột, khi bạn tick chọn bạn có thể chuyển trang chuyên mục thành 2, 3, 4, 5 cột. Nếu có ý định chia cột, thì tầm 2, 3 cột là được, chia nhiều hơn thường quá nhỏ. Khi chia cột có thể bạn nên tăng chiều rộng nội dung lên. Ví dụ để lên 1200px thay vì 1000 hoặc 1100px.
- Khi chia cột có thêm tùy chọn Display posts in masonry grid để hiển thị các bài viết xen kẽ, trông sẽ đẹp hơn, đỡ lộ các khoảng trắng dư thừa. Tùy chọn Make first post featured sẽ làm bài đầu tiên trong chuyên mục trông nổi bật hơn.
Đối với ảnh đại diện ở post và page, bạn click vào tab tương ứng và sẽ có các tùy chọn tương tự. Chỉ khác là, giờ bạn có thêm tùy chọn đưa ảnh lên hẳn ngoài khung nội dung (Above Content Area), khá thích hợp cho bạn nào sử dụng các ảnh đại diện có kích thước lớn. Còn ảnh kích thước vừa phải thì nên chọn dưới hoặc trên tiêu đề sẽ đẹp hơn.
I. Footer
- Footer Width: điều chỉnh độ rộng của cả footer. Ý nghĩa tương tự với cái header. Mặc định để Full.
- Inner Footer Width: độ rộng của footer bên trong. Mặc định để Contained sẽ đẹp hơn, trừ khi bạn có phần nội dụng footer dài hoặc nhiều mục thì để Full cho có thêm không gian
- Footer Widgets: số lượng widget ở footer.
- Back to Top Button: để bạn thêm nút lên đầu trang. Nút rất tiện nếu website của bạn hay có các bài dài.
- Footer Widget Area Padding: lề của widget ở footer.
- Footer Padding: lề trong của footer.
- Copyright: để bạn điền thông tin bản quyền cho website, ví dụ:
%copy%2020 –%current_year%| Tên website của bạn | Website được tạo bởi Tên của bạn. - Cái
%current_year%để hiển thị năm hiện tại một cách tự động. - Cái
%copy%để hiển thị biểu tượng bản quyền.