Build homepage bằng trang tĩnh trên WordPress

[Note: Trải nghiệm tốt nhất khi dùng web hoặc trình duyệt trên điện thoại]

Mấy hôm trước mình vừa update trang chủ của blog với một giao diện mới mẻ và chỉnh chu hơn, bản thân cũng thấy đây là bước đầu để chú tâm thêm mặt hình ảnh, hướng tới việc viết lâu dài và xây dựng portfolio cá nhân. Ôi con đường content marketing, copywriter còn xa lắm và cũng chưa có gì chắc chắn nhưng mình sẽ viết cho đến khi nào mình không thể viết nữa TT.

Đây là ngôi nhà mới của mình: https://mintkth3112.wordpress.com/ (domain từ thuở 2017 ngốc nghếch, từng là tên IG của mình thôi, khi nào thành blogger chuyên nghiệp xin hứa mua miền .com hoặc .vn)

Để xây dựng một trang chủ hay “gương mặt thương hiệu” áp dụng cho bất cứ blog nào, mình đã đơn giản hóa bằng 3 bước dưới đây.

1. Lên ý tưởng về content, category, visual

Mình luôn bắt đầu từ ý tưởng, sau khi tham khảo và thử các giao diện của WordPress, mình chọn được mẫu phù hợp và bắt tay vào customize trang.

Theme hiện tại mình sử dụng

Tiếp theo, list ra những chuyên mục cho bài viết, vì mình cũng đăng một số post rồi nên túm nó vào các mục cũng dễ dàng. Nhưng đừng lo khi mới lập WordPress và chưa có hình dung cụ thể, mọi người luôn có thể chỉnh sửa/bổ sung những chuyên mục này sau khi có số lượng bài viết nhất định.

Về visual/hình ảnh tương lai của homepage, mọi người có thể tìm kiếm mẫu giao diện của WordPress hoặc xem thêm ở một số trang như Squarespace, từ đó hình dung ra bố cục blog của mình.

2. Tạo trang nháp

Thanh công cụ

Sau khi draft sương sương ý tưởng cho blog, hãy bắt tay vào tạo một site page. Chú ý, một trang khác với một bài viết (một trang có thể bao gồm nhiều bài viết). Ở mục My Life -> Trang -> Thêm trang mới.

Để tận dụng hết tài nguyên của WordPress, khi thêm block (ấn biểu tượng dấu “+” ở một dòng của vùng soạn thảo) hãy chọn Browse all. Hoặc cách khác là ấn dấu “+” ở thanh công cụ trên cùng (ảnh minh họa) để xem toàn bộ các lựa chọn. Một block có thể là text, media, widget,… vô cùng đa dạng. Bên cạnh block là mục pattern có rất nhiều mẫu bố cục phục vụ các mục đích khác nhau.


Trong homepage cá nhân, mình đã sử dụng một số block và để dễ hình dung mình sẽ demo ngay sau đây.

POST CAROUSEL

Block này phù hợp để giới thiệu những bài viết mới nhất hoặc show ra những bài post nổi bật nhất của bạn. Block cho phép lựa chọn số lượng bài hiển thị và có chế độ tự động chuyển slide. Để block kéo dài toàn bộ chiều ngang của trang thì hãy chỉnh căn lề và chọn “tràn khung”.

LAYOUT GRID/COLUMNS

Cả hai lựa chọn này đều chia block thành các cột với tỉ lệ tùy chỉnh. Để được kết quả như bên dưới thì mình chọn block cover cho mỗi cột, sau đó chèn nút (buttons) ở trên nền. Ở các nút mình chèn link dẫn tới các chuyên mục nên khi ấn vào sẽ được chuyển hướng sang bài viết thuộc chuyên mục đó.

PULLQUOTE

Pullquote đơn giản là block để trích dẫn và mình cũng khá ưng thiết kế của block này. Ngoài ra có nhiều block khác với mục đích tương tự như “quote” hay “verse”.

If boyhood and youth are but vanity, must it not be our ambition to become men?

Vincent Van Gogh

COVER

Đây là block cover nhưng thay vì để mặc định, mình chọn “fixed background” thì ảnh sẽ cố định và khi di chuyển trang sẽ thấy một phần hình ảnh. Mọi người có thể điều chỉnh độ trong suốt (opacity), độ rộng của ảnh, chèn màu lên ảnh (overlay color) và chèn các block khác nhau. Cá nhân mình thích sự aesthetic của block này lắm o (> ω <) o

MỘT SỐ BLOCK HAY HO KHÁC

  • Lastest Instagram Posts: liên kết tài khoản IG với WordPress và chia sẻ các post mới nhất.
  • Social Icons: Kho icon rất đa dạng, đủ các nền tảng để mọi người gắn link dẫn đến profile cá nhân. Ở đây mình chỉ minh họa biểu tượng kèm link một trang web ngẫu nhiên.
  • Subscription Form: một CTA block để người đọc điền email nhận thông báo về trang của bạn, nó tương tự hành động follow blog, tuy nhiên block này sẽ hữu ích với những ai không có tài khoản WordPress mà vẫn muốn theo dõi bạn.

  • Spacer: Một block vô cùng tiện dụng và dạo gần đây mình cũng xài thường xuyên. Khi muốn ngăn cách giữa các block sát nhau hoặc tạo khoảng trống cho một vùng nào đó thì Spacer là cách đơn giản và hiệu quả nhất.

  • Search: Hộp tìm kiếm để người đọc có thể tra nhanh những bài viết trên blog hoặc nhập từ khóa họ quan tâm xem có post nào trùng khớp không. Chúng mình lập blog với mong muốn mọi người ghé đọc nên hãy ưu tiên và nhìn từ góc độ một reader để tối ưu blog nhé.
  • Query Loop: Một block cho phép hiển thị các post theo một type nhất định, có thể sắp xếp theo thời gian hoặc alphabet. Block này thích hợp để giới thiệu các bài viết, gần giống với block Post Carousel ở bên trên.

3. Đăng trang, chuyển homepage về trang tĩnh

Sau khi đã hoàn thành việc xây dựng homepage, mọi người có thể preview để chắc chắn hơn và chỉnh sửa nếu cần. Chọn “Đăng” hay “Public” để công khai trang.

Tiếp theo có 2 cách để đặt trang vừa tạo trở thành homepage.

  • Cách 1: Truy cập Giao diện -> Tùy chỉnh -> Cài đặt trang chủ -> Bố cục trang chủ -> Trang tĩnh
    Tiếp theo trong hộp thả homepage ấn chọn trang vừa tạo. Ở mục trang tập hợp bài viết, lập 1 trang mới (tên bất kỳ) để dẫn link đến nơi lưu trữ tất cả bài viết. Lưu tùy chỉnh và kiểm tra trang chủ của blog.
  • Cách 2: Vào mục Cài đặt -> Đọc. Ở phần Tùy chọn hiển thị xem Bố cục trang chủ -> Trang tĩnh và thực hiện tương tự cách 1. Nhớ kéo xuống dưới cùng để lưu thay đổi nhé.

Tạm kết

Xây dựng homepage hay blog không quá khó khăn với những tài nguyên sẵn có trên nền tảng WordPress phải không? Hiện tại mình sử dụng WordPress hoàn toàn miễn phí.

Blog là một nơi thể hiện cá tính cá nhân rõ ràng nên mọi người sẽ cần dành một chút thời gian để tìm được mood and tone, visual hay concept phù hợp với bản thân. Còn rất nhiều điều thú vị về WordPress mà mình chưa thể nói hết nhưng mình sẽ để lại cho mọi người tự khám phá nghe.

Qua bài viết này, mình mong đã giúp mọi người tiếp cận với WordPress dễ dàng hơn, và điều quan trọng đằng sau trang homepage này chính là khơi gợi niềm yêu thích với con chữ của mọi người đó.

Many thanks for my beloved readers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s