Chào các bạn, bài viết trước mình đã hướng dẫn các bạn Cài đặt và tùy chỉnh giao diện WordPress rồi phải không? Trong bài đó, mình cũng đã hướng dẫn các bạn tạo một Trình đơn Menu cơ bản rồi. Như vậy, nếu bạn nào thích viết blog, về cơ bản. Các bạn đã có thể bắt đầu viết blog được rồi! (chọn giao diện phù hợp cho Blog).

Tuy nhiên, như mình đã nói ban đầu, Series này mình chủ yếu muốn hướng dẫn các bạn Graphic Designer tạo một trang website Portfolio với mục đích chính là show thông tin cá nhân và sản phẩm thiết kế. Do đó, để phần bố cục, giao diện và tính năng hiển thị đúng như ý thì cần khá nhiều thời gian tìm giao diện phù hợp.

Giao diện nào phù hợp với một trang Portfolio?

Hiện nay có khá nhiều theme đẹp hỗ trợ hiển thị đầy đủ mọi tính năng cần thiết cho một website giới thiệu công ty, doanh nghiệp hoặc dịch vụ cá nhân. Các tính năng chính cần thiết nhất phải kể đến như: Giới thiệu, Dịch vụ, Portfolio, Khách hàng, Phản hồi, Liên hệ…  Các tính năng này có thể tắt đi hoặc bật lên chỉ bằng một thay đổi nhỏ trong phần Tùy chỉnh của Giao diện. Mình thường gọi đó là “Porfolio Theme” hoặc “Theme giới thiệu công ty”.

Những theme như thế rất được ưa chuộng vì chúng ta gần như không phải tùy biến gì nhiều. Chỉ đơn giản là thêm sửa nội dung đã được demo sẵn. Và mình rút ra được rất nhiều ưu điểm của các theme Portfolio kiểu này là:

• Đầy đủ những tính năng cần thiết nhất cho một website Portfolio Công ty hoặc Cá nhân.
• Rất dễ chỉnh sửa, mọi điều chỉnh hiển thị đều nằm trong các option của mục Giao diện > Tùy chỉnh.
• Đã được nhà phát triển tối ưu tốc độ, ít chức năng thừa.

Trong số đó, có một theme mình thấy khá ổn đó là “Total”  đang được sử dụng làm demo cho các bài viết trong Series này, cũng là giao diện của blog Ninh Bình Web mà các bạn đang theo dõi . Các bạn có thể cài đặt theme giống mình để học, hoặc có thể tìm những theme khác với những tính năng tương tự.

Tùy biến Giao diện Wordperss

Để tùy biến giao diện WordPress, bạn vào Giao diện > Tùy chỉnh và thực hiện các thao tác chỉnh sửa. Mỗi theme sẽ có những tùy chỉnh khác nhau. Về cơ bản, những phần tùy chỉnh cơ bản đã được mình hướng dẫn các bạn tại đây rồi. Riêng đối với giao diện “Total”, mình thấy có thêm sự xuất hiện của option “Home Sections”.

“Home Sections” (phần được khoanh màu xanh) chính là nơi chúng ta chỉnh sửa để xây dựng nội dung hiển thị cho trang chủ. Mình sẽ hướng dẫn các bạn thực hiện chỉnh sửa lần lượt từng section một nhé!

Home Slider

Section này cho phép chúng ta tạo một Slider dạng trượt ở trang chủ dựa vào Hình ảnh tiêu biểu (Feature image) của 3 trang bất kỳ được chọn. Trước đó, bạn phải tạo 3 trang, viết nội dung và chèn Hình ảnh tiêu biểu cho các trang đó (Lưu ý: hình ảnh nên để độ phân giải 1920x600px). Trong section Home Slider, bạn lần lượt chọn thứ tự xuất hiện trên Slider cho từng trang.

Sau khi chọn lần lượt các trang cho Slider, bạn nhấn “Lưu thay đổi” và thoát ra trang chủ để xem sự thay đổi nhé!

About Us Section

Disable Section: Nhấn tùy chọn này nếu muốn ẩn section About Us đi.

Select a Page: Section này lấy nội dung ở một trang nào đó để hiển thị. Bởi vậy, trước đó, bạn phải tạo một trang “Giới thiệu”, nhập nội dung cần thiết và chọn nó trong “Select a Page”.

Progress Bars: Các Section này các bạn có thể dùng thể hiện các kỹ năng phần mềm trong nghề Thiết kế đồ họa. Có tất cả 5 section, bạn có thể tắt từng section bằng cách chọn vào “Check to Disable”. Nhập tiêu đề (Title) và tỷ lệ phần trăm (Percentage) vào các ô tùy chọn tương ứng.

Right Image: Chèn ảnh cho phần bố cục bên phải. Kích thước ảnh: 500x600px. Nên chọn ảnh .png nền trắng để có bố cục đẹp nhất.

Replace Image by widget: Bạn chọn “Don’t replace“.

Như vậy, sau khi chỉnh sửa About Us section, mình đã có được một phần giới thiệu bản thân và show kỹ năng phần mềm khá là ổn như hình dưới đây:

Feature Section

Feature Section có thể được dùng để giới thiệu các dịch vụ chính mà bạn hay làm. Section này lấy Tiêu đề (Title) của 3 trang nào đó để tạo thành bố cục 3 cột với biểu tượng tùy chọn đi kèm.

Disable section: Nhấn tùy chọn này để tắt Feature Section.

Title: Tên của Section. Mình để là “Dịch vụ thiết kế đồ họa sáng tạo”.

Sub title: Phần mô tả của tiêu đề, có thể để phần dịch sang Tiếng Anh của tiêu đề chính cũng được.

Feature Page: Các Feature Page này lấy tiêu đề của các trang nào đó để hiển thị kèm icon tùy chỉnh. Trước đó, bạn phải tạo các trang với những dịch vụ của bạn. Chọn lần lượt từ Feature Page 1 đến Feature Page 3.

Chọn xong các tùy chọn, nhớ “Lưu lại” để thấy được sự thay đổi nhé. Như vậy, hoàn thiện section này, trang web của mình đã phần nào hiển thị đầy đủ hơn, nhiều nội dung hơn và bố cục dần hoàn thiện hơn rồi.

Portfolio Section

Phần này quan trọng nhất, chính là nơi để hiển thị các sản phẩm hoặc dự án thiết kế của các bạn. Phần này lấy Hình ảnh tiêu biểu (Feature Image) của các bài viết được chọn để hiển thị dạng Thumnail trực quan theo bố cục sau:

Như vậy, để Portfolio được đẹp, các bạn phải trau chuốt Hình ảnh tiêu biểu (Feature image) của bài viết một chút nhé! Portfolio section cho phép hiển thị theo thư mục. Do đó, bạn tạo một thư mục mới mang tên “Portfolio” và từ nay về sau! Có sản phẩm nào bạn chỉ cần Tạo bài viết, chèn ảnh tiêu biểu rồi đánh dấu bài viết đó vào đúng thư mục Portfolio thì nó sẽ hiển thị ra Trang chủ.

Disable Section: Nhấn chọn tùy chọn này để tắt hiển thị Portfolio Section ngoài trang chủ.

Title: Nhập tên của Portfolio. Các bạn có thể nhập là “Các dự án đã thực hiện”.

Subtitle: Nhập mô tả cho Portfolio.

Portfolio Category: Lựa chọn các Danh mục để hiển thị cho Portfolio. Nên phân danh mục thành các mảng thiết kế như Logo, Website, Print…

Service Section

Section này các bạn có thể dùng để tạo một phần để kêu gọi kiểu như “Lí do bạn chọn tôi“, hoặc “3 lí do chúng tôi là số 1“…

Disable Page: Chọn tùy chọn này để tắt hiển thị Service Section.

Section Title và Sub title: Bạn có thể nhập tiêu đề và mô tả theo nhu cầu của bạn.

Service Page: Các Service Page lấy tiêu đề của các trang bất kỳ để hiện thị dạng danh sách liệt kê khá đẹp lần lượt từ Service Page 1 đến Service Page 5.

Left Image: Tùy chọn hình ảnh hiển thị cho bố cục bên trái của Section.

Sau khi tùy chỉnh Section này, mình cũng được một bố cục khá hoàn chỉnh như hình dưới:

Team Section

Section này cho phép hiển thị tối đa 4 hình ảnh của các thành viên trong nhóm. Các hình ảnh này chính là Hình ảnh tiêu biểu của các Trang. Như vậy, để có thông tin hình ảnh của các thành viên. Trước đó bạn phải tạo các Trang giới thiệu từng thành viên một kèm theo hình ảnh tiêu biểu (Feature image).

Disable Section: Nhấn tùy chọn này để tắt hiển thị.

Title & Sub title: Bạn nhập tiêu đề và mô tả cho Section vừa tạo.

Team Member: Sử dụng mục “Select a Page” để chọn trang giới thiệu từng thành viên một, sau đó nhập địa chỉ mạng xã hội Facebook, Twitter và Google Plus vào các ô trống. Lần lượt làm như thế từ Team Member 1 đến Team Member 5.

Counter Section

Section này cho phép bạn hiển thị 4 bộ đếm số dựa theo thông tin bạn cung cấp. Ví dụ: Có 1050 khách hàng, 50 dự án đã thực hiện, 2000 công việc hỗ trợ…

Disable Section: Nhấn tùy chọn này để tắt hiển thị

Title & Sub title: Nhập tiêu đề và mô tả cho Section.

Section Background: Cho phép thay đổi hình ảnh nền cho Section.

Counter: Nhập tên, Số liệu và tùy chọn Icon cho phần đếm số của bạn, lần lượt làm từ Counter 1 đến Counter 4.

Testimonial Section

Section này dùng để hiển thị các lời bình luận hoặc lời đánh giá, nhận xét của khách hàng. Section này lấy hình ảnh đại diện (Feature image) của trang nào đó để hiển thị. Do đó, bạn cũng cần tạo trước 3-4 trang ghi những lời bình luận của từng người một kèm hình ảnh đại diện và chọn chúng trong “Select the Pages” nhé!

Disable Section: Nhấn tùy chọn này để tắt hiển thị.

Title & sub title: Nhập tiêu đề và mô tả cho section.

Sau khi chọn được Trang rồi, section sẽ hiển thị ngoài trang chủ như sau:

Blog Section

Section này dùng để hiển thị các bài viết được chọn theo danh mục để hiển thị. Phần này chú trọng vào các bài viết kiến thức, các bài chia sẻ hoặc kinh nghiệm nghề nghiệp của bạn…

Disable: Nhấn để tắt hiển thị section này.

Title & sub title: Nhập tiêu đề và mô tả cho phần section này.

Number of Post to show: Số bài viết hiển thị ra trang chủ, có tùy chọn 3, 6 và 9 bài.

Exclude Category from Blog Posts: Đánh dấu tích vào những danh mục bạn không muốn hiển thị bài viết ra trang chủ.

Clients Logo Section

Section này cho phép hiển thị Logo của đối tác theo bộ sưu tập, chạy liên tục theo chiều ngang của Section.

Disable Section: Nhấn để tắt hiển thị Section này.

Title & sub title: Nhập tiêu đề và mô tả cho Section.

Upload Clients Logos: Tải các logo của đối tác. Lưu ý: nên tải các logo sử dụng chung một kích thước, tải nhiều logo cùng một lúc được nhé các bạn.

Call to action Section

Section này cho phép bạn hiển thị các nút kêu gọi hành động kiểu như “Gọi cho tôi” hoặc “Kết bạn với tôi”.

Disable: Nhấn để tắt hiển thị section này.

Title & sub title: Nhập tiêu đề và mô tả cho section.

Button Text 1 & Button Link 1: Nhập tên và link cho nút bấm của bạn, thực hiện tương tự với Button Text 2 và Button Link 2.

Lời kết

Như vậy, mình đã hướng dẫn các bạn tùy chỉnh giao diện Wordpress để tạo trang Portfolio cực xin cho các bạn rồi phải không? Trong phần này, chúng ta đã hoàn thành được 80% bố cục rồi đấy. Trong những bài viết tiếp, mình sẽ hướng dẫn các bạn can thiệp vào CSS của theme để sửa font chữ và thay đổi màu sắc theo ý thích của các bạn. Chúc các bạn học tốt và làm tốt nhé!

Bài trước: Hướng dẫn cài đặt và tùy chỉnh giao diện WordPress

Bài tiếp: Chỉnh sửa giao diện WordPress bằng CSS trong Theme Editor