Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Tạo Portfolio đa bố cục với WordPress

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Caitlyn Cat Tien (you can also view the original English article)

Wordpress, như một hệ thống quản lý nội dung, thường được sử dụng để tạo các trang web Portfolio. Với sự phát triển của thiết kế giao diện người dùng và các chức năng, một xu hướng mới đã xuất hiện: hiển thị các mục Portfolio theo các bố cục khác nhau. Hướng dẫn này mô tả chi tiết quá trình tạo phần Portfolio chuyên dụng trong phần backend của WordPress và sử dụng jQuery và CSS3 để hiển thị Portfolio một cách đẳng cấp.


Trong hướng dẫn này, chúng ta sẽ sử dụng rộng rãi các tính năng mạnh mẽ của WordPress, chẳng hạn như bài đăng tùy chỉnh, phân loại tùy chỉnh và chúng ta cũng sẽ viết một chức năng để lấy các trích đoạn tùy chỉnh của riêng mình.


Bước 1 - Cài đặt Wordpress và Khởi tạo Theme.

Bước đầu tiên trong việc tạo trang web Portfolio của chúng ta là cài đặt Wordpress. Đây là một tác vụ đơn giản và thậm chí tốt hơn, hầu hết các máy chủ webđều cung cấp trình cài đặt chỉ với một lần nhấp chuột. Tuy nhiên, nếu bạn chưa quen với điều này, đây là một hướng dẫn tuyệt vời để giúp bạn cài đặt.

Sau khi cài đặt hoàn tất, tiếp theo chúng ta sẽ tạo theme tùy chỉnh mà nó sẽ hiển thị Portfolio của chúng ta. Có nhiều phương thức khác nhau để tạo theme tùy chỉnh. Một số người thích tạo các mẫu trống mới, trong khi những người khác chọn cách tạo theme con của mẫu TwentyTen mới. Trong hướng dẫn này, chúng ta sẽ sử dụng theme Starker, của Elliot Jay Stocks. Đó là một theme hoàn toàn trống không có kiểu dáng; đó là một cơ sở tuyệt vời để xây dựng theme của chúng ta. Chỉnh sửa tập tin Styles.css và thay đổi tên của theme được tham chiếu ở trên cùng. Để cài đặt theme này, chỉ cần dán thư mục theme đó vào thư mục wp-content > themes. Sau khi theme này được cài đặt, bạn có thể kích hoạt nó bằng cách vào trang theme đó.


Bước 2 - Lập kế hoạch cho bố cục

Trang web Portfolio của chúng ta sẽ không chứa nhiều dữ liệu. Một trang web Portfolio cơ bản chứa hình ảnh của các dự án, một số thẻ để xác định các dự án và mô tả ngắn về từng dự án. Theme đa bố cục sẽ hoạt động theo cách người dùng có thể chọn giữa bố cục dạng lưới và danh sách. Giống như nhiều trang web có nhiều bố cục có sẵn, chúng ta sẽ không tải một trang khác khi người dùng nhấp chuột vào chế độ xem danh sách hoặc chế độ xem lưới. Thay vào đó, chúng ta sẽ sử dụng AJAX để tải một cách không đồng bộ trong trình xem mới. Đây là thiết kế cơ bản về cách trang web Portfolio của chúng ta sẽ xuất hiện trong chế độ lưới:

Khi người dùng nhấp chuột vào điều khiển chế độ xem danh sách, toàn bộ bố cục sẽ thay đổi mượt mà thành một chế độ xem danh sách chứa tiêu đề của dự án, các thẻ được liên kết với nó và mô tả ngắn.


Bước 3 - Thiết lập backend

Đối với Portfolio của chúng ta, chúng ta cần phải đăng ký một kiểu bài đăng tùy chỉnh, được gọi là "project (dự án)". Chúng ta có thể tùy chỉnh mọi khía cạnh của một bài đăng WordPress. Ví dụ: chúng ta có thể thay đổi các nhãn liên quan, chọn các tính năng khác nhau cho bài đăng như bình luận, hình thu nhỏ, đoạn trích, v.v.

Để thực hiện một bài đăng tùy chỉnh, hãy chỉnh sửa tập tin functions.php nằm trong thư mục theme. Nó chứa rất nhiều mã được xác định trước, vì theme Starkers trống cung cấp một số chức năng của mẫu TwentyTen mặc định. Đừng sợ hay bối rối; bạn có thể nối thêm đoạn mã sau ở dưới cùng hoặc trên cùng của tập tin functions.php.

Đừng để bất kỳ khoảng trống nào ở cuối tập tin functions.php.

Chúng ta nối chức năng tùy chỉnh của mình với hành động khởi tạo (init) theo cách sau:

Phương thức project_custom_init này sẽ được sử dụng để đăng ký loại bài đăng tùy chỉnh trong cơ sở dữ liệu WordPress.

Bạn có thể tìm hiểu chi tiết về phương thức này liên quan đến việc đăng ký loại bài đăng tùy chỉnh tại đây.

Phương thức register_post_type yêu cầu tên cho bài đăng tùy chỉnh và một nhóm đối số, xác định các đặc điểm của bài đăng tùy chỉnh. Đầu tiên, chúng ta cần xác định nhãn cho bài đăng tùy chỉnh. Các nhãn này sẽ được sử dụng cho bài đăng tùy chỉnh trong phần quản trị của WordPress.

Sau khi chúng ta đã xác định nhãn, chúng ta cần xác định nhóm đối số cho loại bài đăng tùy chỉnh. Cácc nhãn được xác định trước đó cũng sẽ là một đối số. Khi các đối số được xác định, chúng ta đăng ký loại bài đăng tùy chỉnh là "project ".

Tạo tin nhắn tùy chỉnh cho bài đăng "Project"

Chúng ta cũng có thể tùy chọn thêm thông điệp tùy chỉnh cho loại bài đăng tùy chỉnh. Các thông báo này sẽ được hiển thị trong bảng điều khiển WordPress khi chúng ta chỉnh sửa hoặc cập nhật bài đăng tùy chỉnh. Chúng ta có thể làm điều này bằng cách tạo bộ lọc cho bài đăng được cập nhật theo cách sau:

Đăng ký phân loại tùy chỉnh

Tiếp theo chúng ta cần xác định phân loại tùy chỉnh cho các thẻ được sử dụng với từng mục Portfolio. Bạn có thể tìm hiểu thêm về phương thức phân loại đăng ký tại đây.

Quay trở lại bảng điều khiển WordPress của bạn và mở cài đặt phương tiện từ tab settings. Tại đây, bạn phải đặt kích thước mặc định cho hình thu nhỏ hình ảnh Portfolio. Bạn cũng sẽ nhận thấy trong thanh bên rằng loại bài đăng tùy chỉnh "Project" đã được đăng ký thành công, cùng với phân loại tùy chỉnh, "tags". Chúng ta có thể đăng ký kích thước hình thu nhỏ mặc định bằng phương thức set_post_thumbnail, nhưng tôi sẽ trình bày một cách khác để đạt được điều này. Bạn có thể tìm hiểu thêm về cách đặt kích thước hình thu nhỏ của bài viết theo chương trình tại đây.

Tạo các mục demo Portfolio

Tạo một số mục Portfolio demo bằng cách vào projects và nhấp chuột vào add new. Chúng ta yêu cầu một tiêu đề cho dự án, nội dung và hình thu nhỏ. Chúng ta có thể thấy rằng một phần thẻ cũng đã xuất hiện và xác nhận rằng phân loại tùy chỉnh của chúng ta đã được đăng ký thành công. Cũng thêm một số thẻ cho các mục Portfolio.


Bước 4: Code và tạo kiểu cho mẫu

Code mẫu tĩnh

Để tạo theme, trước tiên chúng ta sẽ tạo một mẫu HTML / CSS3 tĩnh cho trang web này. Điều này phân tách hai nhiệm vụ làm cho trang web trông phù hợp với thiết kế và tìm nạp nội dung từ cơ sở dữ liệu. Code theme này một cách trực tiếp đôi khi có thể gây nhầm lẫn cho người mới bắt đầu - đặc biệt, nếu có nhiều nội dung hiển thị trong theme này. Tạo ba thư mục, được đặt tên là
"css", "images" và "js" một cách tương ứng. Cấu trúc chung cho khu vực nội dung chính sẽ như thế này:

Tạo kiểu cho mẫu

Kiểu dáng mẫu phụ thuộc vào bạn. Bạn có thể thử nghiệm với các màu sắc và hình ảnh khác nhau cho phù hợp với nhu cầu của bạn. Nhưng đối với mẫu này, chúng ta sẽ tạo ra một theme phủ bụi tối màu và sử dụng một số CSS3 thú vị để đạt được các hiệu ứng di chuột tinh tế và trong suốt. Việc cắt các thiết kế này thành hình ảnh là nhỏ. Vì vậy, tôi sẽ không đi qua chi tiết ở đây.

Kiểu dáng cơ bản cho container chính và các điều khiển bố cục như sau

Sau đây là các kiểu chung cho danh sách dự án. Sau này chúng ta sẽ thực hiện tạo kiểu cụ thể cho từng chế độ bố cục lưới và chế độ bố cục danh sách tùy thuộc vào class hiện tại của danh sách folio này.

Cũng lưu ý rằng chúng ta không sử dụng phương thức độ mờ tổng thể để đạt được độ trong suốt bằng CSS3. Sử dụng phương thức độ mờ cũng ảnh hưởng đến container con của container mẹ khi áp dụng độ mờ. Thay vào đó, chúng ta sẽ sử dụng phương thức RGBa để thêm màu nền vào container và sử dụng giá trị alpha để kiểm soát độ trong suốt của container đó.

Bạn có thể đọc thêm về Thuộc tính RGBa trong bài viết tuyệt vời này.

Điều này không ảnh hưởng đến độ trong suốt của các thành phần con. Chúng ta cũng cần tạo mã CSS cụ thể của IE để hỗ trợ độ trong suốt alpha.

Trong cấu trúc HTML, bạn sẽ nhận thấy rằng có một class được đưa vào danh sách Portfolio.

Về cơ bản, class "grid" được sử dụng để hiển thị danh sách trong chế độ xem lưới và class "list" được sử dụng để hiển thị danh sách trong chế độ xem danh sách. Trong chế độ lưới, tất cả nội dung bổ sung được ẩn khỏi người dùng và trong chế độ danh sách, tất cả nội dung được hiển thị cho người dùng. Chúng ta có hai nhóm kiểu riêng biệt cho mỗi chế độ. Các kiểu cho chế độ lưới như sau:

Danh sách các kiểu chế độ như sau. Tại bất kỳ thời điểm nào, chỉ có một trong các kiểu lưới hoặc danh sách được kích hoạt.

Sử dụng jQuery để thêm hiệu ứng

Tiếp theo chúng ta sẽ sử dụng jQuery UI để thay đổi class của danh sách folio liên quan đến nút bố cục được người dùng nhấp chuột vào. Chúng ta sẽ phát hiện các sự kiện nhấp chuột của các nút điều khiển bố cục, tìm nạp class hiện tại và class mới sẽ được kích hoạt, sau đó sử dụng phương thức class add và remove để thay đổi các class đó. Chúng ta cũng có một nhóm các tham số xác định tốc độ của các sự kiện đang diễn ra.


Bước 5 Tích hợp với Theme WordPress

Bây giờ chúng ta đã hoàn thành phiên bản tĩnh của trang web này, chúng ta có thể tích hợp nó với theme WordPress trong vài phút. Tất cả những gì chúng ta cần làm là vòng qua các bài đăng bằng cách sử dụng một đối tượng wp_query với một truy vấn cho loại bài đăng tùy chỉnh. Sau đó, chúng ta đặt nội dung ở vị trí tương ứng trong mẫu đó.

Chỉnh sửa header.php

Trước tiên, chúng ta cần sửa đổi mẫu header.php và bao gồm các tập tin JavaScript tùy chỉnh của chúng ta. Trong hướng dẫn này, chúng ta sẽ bao gồm jQuery bằng phiên bản CDN của Google. Chúng ta sẽ hủy đăng ký jQuery do WordPress cung cấp và đăng ký phiên bản jQuery CDN của Google. Dán đoạn mã sau vào tập tin functions.php.

Di chuyển các thư mục css, js và images - mà bạn đã tạo trước đây cho mẫu tĩnh - vào thư mục theme WordPress. Chèn tập tin tùy chỉnh giao diện người dùng jQuery và tập tin script chính trong tiêu đề. Hãy chắc chắn rằng nó được chèn bên dưới phương thức wp_head.

Tạo mẫu chính

Bây giờ, bạn có thể tạo một mẫu khác trong theme này - ví dụ: page-home.php - hoặc bạn có thể sửa đổi index.php đã có trong thư mục theme. Nếu bạn chọn phương thức cũ, thì:

  • Tạo một trang
  • Thiết lập mẫu của trang đó làm mẫu bạn vừa tạo.
  • Chuyển đến cài đặt đọc trong tab settings.
  • Chọn trang chủ dưới dạng tĩnh.
  • Chọn trang mà bạn vừa tạo làm trang chủ.

Trước tiên, mẫu này sẽ chứa tiêu đề mà bạn có thể gọi bằng phương thức get_header (), sau đó là nội dung chính mà bạn sẽ mã hóa trong chính mẫu đó. Cuối cùng, ở phần chân trang, bạn có thể đưa vào, thông qua phương thức get_footer ().

Đoạn mã sau trình bày cách bạn có thể tạo một truy vấn tùy chỉnh bằng cách sử dụng đối tượng wp_query.

Chúng ta sẽ sử dụng một biến count để đếm số lượng các mục trong danh sách đó. Chúng ta cần điều này bởi vì chúng ta sẽ chỉ giữ bốn mục trong mỗi hàng và gán một class 'rightmost' cho mọi thành phần trong danh sách thứ tư. Class "rightmost" loại bỏ mọi lề phải cho các thành phần danh sách. Ngoài ra, trong tập tin CSS của chúng ta, có thể sử dụng bộ chọn li: nth-child (4n).

Đoạn mã sau cho thấy cách chúng ta có thể lặp qua các bài đăng và chèn nội dung, theo yêu cầu.

Bên trong vòng lặp, chúng ta chèn nội dung theo cách thông thường của WordPress, tất nhiên là sử dụng đối tượng $loop wp_query. Đoạn mã sau cho thấy cách chúng ta có thể tìm nạp hình thu nhỏ của bài đăng dự án và chèn nó vào mẫu. Ghi chú thích hợp về cách chúng ta sử dụng biến $count để chèn class "rightmost" vào mỗi thành phần danh sách thứ tư.

Bây giờ đến phần nội dung nơi chúng ta cần chèn tiêu đề, thẻ, mô tả ngắn và tìm nạp đoạn trích cho bài đăng bằng một phương thức trích dẫn tùy chỉnh. Chèn tiêu đề khá dễ dàng, cũng như các thẻ. Hãy nhớ rằng, trước đây chúng ta đã tạo một phân loại tùy chỉnh theo tên của các thẻ.

Bạn sẽ nhận thấy rằng chúng ta không sử dụng phương thức the_excerpt () chung do WordPress cung cấp. Thay vào đó, chúng ta đang xác định phương thức tùy chỉnh của riêng mình bằng cách thêm một số bộ lọc. Phương thức trích đoạn chung trả về độ dài đoạn trích lớn hơn chúng ta yêu cầu. Do đó, phiên bản tùy chỉnh này. Chúng ta cũng sửa đổi văn bản 'Continue Reading...' được thêm vào cuối đoạn trích mặc định và thay thế nó bằng 'Read More'. Đoạn mã sau đây phục vụ cho mục đích của chúng ta. Phương pháp trích dẫn tùy chỉnh này rất có ích cho nhiều tình huống.


Bước 6 Tổng kết

Phương pháp tạo Portfolio đa bố cục ở trên khá đơn giản và sử dụng các thủ thuật CSS và jQuery cơ bản để đạt được kết quả này. Thậm chí tốt hơn, những kỹ thuật này có thể được áp dụng cho một loạt các dự án khác nhau. Các kỹ thuật khác trong hướng dẫn này, như các loại bài đăng tùy chỉnh, phân loại tùy chỉnh và thêm bộ lọc vào phương thức trích dẫn, cũng có thể được sử dụng theo nhiều cách sáng tạo khác!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.