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

Sử dụng các custom post type để tạo một portfolio ấn tượng

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Hoàn toàn có khả năng sự bổ sung tốt nhất cho WordPress 3.0 là các custom post type (tùy chỉnh). Điều này đã biến WordPress từ một CMS có thể quản lý các trang và bài đăng thành có thể quản lý mọi thứ mà người dùng có thể nghĩ ra một cách khá dễ dàng. Bạn không còn phải thêm các custom field vào các bài đăng - bạn có thể thêm hỗ trợ cấp cao cho các type của riêng bạn, tạo các file theme cho trang và khu vực quản trị. Một trong những điều đầu tiên tôi làm bằng cách dùng các custom post type là tân trang portfolio của mình và hôm nay tôi sẽ cho bạn thấy tôi đã làm thế nào!

Gần đây chúng tôi đã cho bạn thấy một vài công cụ ngắn gọn để tạo các custom post type "tức thì". Hôm nay chúng ta sẽ nói đến việc thực sự xây dựng một dự án bằng cách sử dụng CPT ngay từ đầu ... Chúng tôi sẽ làm mọi thứ từ việc tạo custom type - đến tạo kiểu cho dự án để sử dụng trong theme. CSS (và CSS3!) Tôi sử dụng phải đủ thông dụng cho hầu hết các theme, nhưng trong trường hợp này thì không, hãy thoải mái thay đổi nó! Điều này dự định sẽ như một khởi đầu cho tất cả mọi người, vì vậy hãy thoải mái sáng tạo!


Bắt đầu bằng vài suy nghĩ

Điều đầu tiên cần lưu ý là khi tạo Custom Post Type, chúng tôi có một vài chọn lựa về cách chúng tôi muốn tiếp cận chúng; Hai triển khai chính bạn có thể xem xét là:

  1. Là một phần của theme hiện tại (thường thông qua file functions.php)
  2. Là plugin độc lập riêng nó.

Có những ưu và nhược điểm đối với mỗi chọn lựa. Trong hướng dẫn này, vì chúng tôi đang tích hợp với theme của mình, chúng tôi sẽ biến nó thành một phần của theme, gọi mọi thứ chúng tôi cần thông qua file.php.

Lưu ý của nhà phát triển: Bởi vì chúng tôi sẽ xây dựng điều này trực tiếp vào theme của chúng tôi, điều đó không có nghĩa rằng đây là phương pháp phù hợp với bạn ... hãy cân nhắc việc sử dụng sau cùng cho theme của bạn. Nếu có khả năng rằng người dùng của bạn sẽ chuyển đổi theme trong tương lai hoặc bạn sẽ phát hành theme của mình dưới dạng sản phẩm công cộng hoặc sản phẩm cao cấp cho nhiều người sử dụng, có thể bạn sẽ muốn xây dựng custom post type của mình như một file độc lập mà mọi người có thể dùng mà không cần hiểu rõ quá nhiều code của bạn.

Chỉ cần nghĩ về điều đó theo cách này, nếu theme của bạn là thứ duy nhất đang tải custom post type của bạn và khi bạn thay đổi theme, dữ liệu custom post type sẽ không thể sử dụng được; Nó sẽ vẫn tồn tại trên cơ sở dữ liệu, nhưng nó sẽ không hiển thị trong các theme mới theo bất kỳ cách nào. Đôi khi điều này là không thể nếu bạn thực sự xem xét lại toàn bộ một theme để sử dụng CPT bằng cách bao gồm nhiều chỉnh sửa và các template, nhưng ít nhất hãy cân nhắc điều người dùng có thể cần làm để duy trì sử dụng dữ liệu của họ trong thời gian dài.

Hãy bắt đầu nào!


Kết quả chúng ta sẽ tạo ra

Bước 1 Thiết lập

Như tôi đã nói ở trên, chúng tôi sẽ thêm nó vào theme hiện tại của chúng tôi (tôi đang sử dụng theme tùy chỉnh của riêng tôi), vì vậy điều đầu tiên chúng tôi cần làm là vào theme của chúng tôi và mở file functions.php. Chúng tôi sẽ đưa code của custom post type của mình vào một file khác (chỉ để dễ đọc và quản lý hơn), vì vậy chúng tôi sẽ gọi file đó ở đầu file functions của chúng tôi:

Bây giờ chúng tôi sẽ thêm hai file vào theme của mình: portfolio-type.php và portfolio.css. Bạn cũng có thể đoán ra tất cả CSS của chúng tôi cho type mới sẽ có trong file sau.


Bước 2 Đăng ký một type mới

Thumbnail & hỗ trợ ảnh Feature

Trước khi chúng tôi đăng ký một type mới, chúng tôi cần bổ sung hỗ trợ cho một phần không thể thiếu của các hình ảnh giới thiệu của portfolio. Sau khi thêm các thẻ php mở và đóng vào portfolio-type.php, hãy bổ sung code sau:

Những dòng code này, sau khi kiểm tra để đảm bảo cài đặt cụ thể của bạn hỗ trợ thumbnail của bài đăng, sẽ bổ sung chúng vào theme hiện tại của bạn, sau đó thiết lập vài kích thước mặc định. set_post_thumbnail_size() sẽ như tên của nó dùng xét kích thước mặc định cho thumbnail. Dòng tiếp theo add_image_size() sẽ tạo một hình ảnh khác mà chúng ta có thể gọi là 'screen-shot' (ảnh chụp màn hình), kích thước là 720x540. Chúng tôi sẽ sử dụng những hình ảnh này khi hiển thị portfolio của mình.

Tạo một post type (kiểu bài) mới 

Ngay đây là nơi phép màu xảy ra - bây giờ chúng tôi sẽ cho WordPress biết về kiểu bài đăng mới của chúng tôi. Bổ sung code sau đây vào portfolio-type.php:

Dòng đầu tiên ở đây là một hook trong WordPress sẽ gọi hàm của chúng tôi portfolio_register() khi khởi tạo. Hàm này tự thiết lập một mảng các đối số để gửi cùng với custom post type của chúng tôi. Đáng chú ý nhất là chúng tôi đang thiết lập label cho quản trị viên của mình, cung cấp cho kiểu này tất cả các khả năng của một bài đăng tiêu chuẩn WordPress, cho phép viết lại URL (đối với các permalinks đẹp) và thêm hỗ trợ cho các field: title, editor, và ảnh feature. Bạn có thể đọc thêm về tất cả các đối số cho register_post_type() tại đây.

Sau khi thiết lập mảng đối số ($args), chúng ta truyền nó vào cùng với tên của kiểu cho hàm register_post_type().

Bổ sung một custom taxonomy

Điều cuối cùng chúng ta sẽ làm trong phần này là tạo một custom taxonomy cho kiểu mới của chúng tôi. Bổ sung dòng code sau vào file portfolio-type.php của bạn:

Dòng này sẽ tạo ra taxonomy mới 'project-type' và áp dụng nó cho kiểu bài 'portfolio'. Bạn có thể đọc thêm về register_taxonomy() tại đây.


Bước 3 Thêm custom field

Tạo một custom field box

Chúng tôi sẽ không có nhiều loại custom post type mà không phải bổ sung thông tin để thêm vào bài viết. Chúng tôi sẽ thêm thông tin đó dưới dạng custom field. Cụ thể, chúng tôi sẽ thêm một field bổ sung cho một liên kết để biết thêm thông tin về dự án hoặc cho chính dự án. Bổ sung code sau vào file portfolio-type.php của bạn:


Code này sẽ tạo hộp "Project Options" mà chúng ta thấy ở đây.

Đầu tiên chúng tôi sử dụng WordPress hook admin_init để gọi hàm portfolio_meta_box() khi quản trị viên WordPress được tạo. Hàm của chúng tôi sẽ thêm một box khác vào kiểu portfolio của chúng tôi, nội dung có thể là bất cứ gì. Nội dung đưa vào box nằm ở đối số thứ 3, đó là hàm callback. Trong trường hợp này, hàm của chúng tôi được đặt tên là portfolio_meta_options().

Trong portfolio_meta_options() chúng tôi sẽ tạo một field cho biểu mẫu được sử dụng để lấy liên kết của dự án. Điều đầu tiên chúng tôi làm là lấy mảng toàn cục $post để chúng tôi có thể lấy các custom field cho bất kỳ bài đăng nào chúng tôi đang chỉnh sửa. Trong dòng tiếp theo, chúng tôi đang kiểm tra để đảm bảo WordPress hiện không lưu các bài đăng hoặc các custom field; nếu nó đang lưu, thì có thẻ chúng tôi thấy các kết quả không chính xác khi chúng tôi lấy custom data.

Nếu WordPress không lưu, chúng tôi sẽ lấy các custom field cho bài đăng hiện tại và tạo field cho biểu mẫu bằng thông tin đó. $custom là kết quả trả về từ get_post_custom() là một mảng 2D trong đó khóa có tên là field của form do chúng ta tự đặt tên. Hãy nhìn vào ô text box cho liên kết. Bạn sẽ nhận thấy rằng tên phù hợp với index chúng ta gọi trong mảng $custom của chúng tôi. Bạn cũng sẽ nhận thấy rằng chúng tôi không có biểu mẫu hoặc nút submit riêng. Field này được bổ sung vào biểu mẫu dùng để chỉnh sửa toàn bộ bài đăng.

Mặc dù chúng tôi chỉ tạo một biễu mẫu ở đây, nhưng rõ ràng bạn có thể tạo bao nhiêu tùy thích.

Lưu dữ liệu tùy chỉnh

Bây giờ chúng tôi đã tạo custom meta box (siêu dữ liệu tùy biến) của mình, đã đến lúc tạo một hàm để lưu thông tin. Bổ sung các dòng code sau vào file portfolio-type.php của bạn:

Đầu tiên, như thường lệ, chúng ta có hook của mình - lần này để gọi hàm của chúng ta khi bài đăng được lưu. Trong chính hàm này, lần nữa chúng ta lấy mảng $post để có thể lấy ID của bài đăng và kiểm tra xem bài đăng có lưu tự động hay không. Nếu chúng tôi không bao gồm dòng này, chúng tôi sẽ mất dữ liệu, vì vậy điều quan trọng là chúng tôi giữ nó ở đó.

Nếu bài đăng không cập nhật, chúng tôi sẽ lưu các custom field bằng cách sử dụng update_post_meta(), gửi post id, tên của custom field và giá trị mới.


Đây là kết quả từ cả kit và caboodle!

Bước 4 Tùy chỉnh các cột quản trị

Ở đây chúng tôi sẽ tùy chỉnh danh sách hiển thị tất cả các dự án của chúng tôi. Bổ sung code sau vào file portfolio-type.php của bạn:


Đây là danh sách Project mới đã sửa đổi của chúng tôi.

Sau hook cho hàm đầu tiên (project_edit_columns()), chúng tôi thực hiện một điều khá thú vị trong việc chỉnh sửa các cột. WordPress đặt các cột cho danh sách hiển thị của kiểu bài đăng thành một mảng có một khóa và một giá trị. Chúng ta tạo các cặp khóa - giá trị trong hàm này. Trong hàm tiếp theo (project_custom_columns()), chúng tôi sử dụng câu lệnh switch để lấy khóa và sau đó hiển thị thông tin chúng tôi muốn dựa trên nó. Như bạn có thể thấy, giống như trong phần trước, chúng ta có mảng $post toàn cục để chúng ta có thể lấy ID của bài đăng để hiển thị chính xác bất kỳ thông tin tùy chỉnh nào, như liên kết và taxonomy (phân loại) của chúng tôi.

Bạn có thể nhận thấy rằng số lượng các trường hợp không khớp với số lượng cột trong mảng mảng $columns của chúng tôi. Đó là vì đối với một số khóa nhất định, như cb và title, WordPress có các giá trị mặc định mà chúng tôi không muốn thay đổi.


Bước 5 Thêm một số hàm hiển thị

Trước khi chúng tôi tạo một trang template, tôi muốn cung cấp cho bạn một số hàm tôi đưa vào để hiển thị các dự án đúng. Mở file functions.php của bạn và bổ sung 3 thành phần sau:

Hai cặp hook/function đầu tiên rất thông dụng trong WordPress - đơn giản chúng chỉ thay đổi độ dài của đoạn trích và dấu hiệu "more text" mà tôi đã thay thế chỉ bằng một khoảng trắng. Xin lưu ý rằng điều này sẽ xảy ra với tất cả các bài đăng, không chỉ bài đăng portfolio và nếu bạn đang sử dụng một theme phụ thì nó có thể không hoạt động.

Hàm tùy chỉnh, portfolio_thumbnail_url() lấy ID của bài đăng làm đối số và lấy phiên bản chụp màn hình của hình ảnh chúng tôi đã tải lên. Chúng tôi sẽ gọi nó trong trang template của chúng tôi, vì vậy hãy chú ý đến nó!


Bước 6 Tạo trang template

Bây giờ chúng ta đã có tất cả các custom post type trong phần quản trị, đã đến lúc tạo một trang của theme để chúng ta có thể hiển thị chúng. Để thực hiện điều này, chúng tôi sẽ tạo một template có tên là "Portfolio" và sau đó gán template cho một trang trong WordPress. Mặc dù chúng tôi cũng có thể tạo archives-portfolio.php để thực hiện điều tương tự, chúng tôi sẽ không thể thêm trang đó vào menu từ phần quản trị của WordPress, vì vậy cách này là tốt nhất. Giữ nguyên các quy ước đặt tên  theo WordPress, tạo một file mới có tên page-portfolio.php và thêm code sau đây:


Code này sẽ tạo ra template 'Portfolio'.

Một vài dòng thiết lập các phần quan trọng nhất của trang. Dòng đầu tiên cho WordPress biết rằng đây là một trang template nên có tên là "Portfolio". Sau đó, sau khi gọi header của theme, chúng tôi thiết lập truy vấn để lấy 9 bài đăng mới nhất của portfolio. Việc tiếp theo cần làm là hiển thị chúng. Thêm code này vào file page-portfolio.php của bạn:

Bạn sẽ nhận thấy một vài điều ở đây: đầu tiên, sau khi chúng ta bước vào vòng lặp, chúng ta cần cắt bớt các ký tự '"' không liên quan khỏi tiêu đề và nội dung của chúng ta bằng str_ireplace(). Tôi không chắc chắn chính xác tại sao chúng xuất hiện ở đây, nhưng tôi có thể nói đây là một bước cần thiết. Bạn cũng nên chú ý rằng chúng tôi đang sử dụng lightbox. Mặc dù chúng tôi có thể tự thêm nó (tôi có thể khuyên dùng thế nếu đây là một plugin), vì chúng tôi đang sửa đổi theme của riêng mình, chúng tôi có thể tải xuống một trong nhiều plugin lightbox có sẵn trong repo của WordPress. Chỉ cần chọn cái mà bạn ưa thích!

Bên cạnh đó, điều này có vẻ quen thuộc với bất kỳ ai đã làm việc với vòng lặp WordPress. Điều chúng tôi đang làm ở đây là tạo các block với hình thu nhỏ và mô tả của chúng tôi, liên kết đến (sử dụng lightbox) ảnh chụp màn hình cho từng cái trong số 9 dự án. Tôi không bao gồm các liên kết đến các trang khác (trong trường hợp bạn có hơn 9 dự án) vì tôi chỉ muốn người dùng của mình xem 9 dự án mới nhất. Bạn có thể cho phép người dùng truy cập các bài đăng khác bằng post_nav_link(), nếu bạn chọn.

Cũng nên lưu ý rằng tôi đã xóa liên kết mặc định 'more link' của WordPress vì nó được liên kết đến một trang bài đăng riêng lẻ và tôi muốn sử dụng lightbox, vì vậy tôi đã tự xây dựng cho riêng mình.


Bước 7 Tạo portfolio type của chúng tôi

Đây là phần thú vị: khiến cho portfolio type của chúng tôi trong đẹp mắt. Đây là  CSS mà tôi đã thêm vào - bạn có thể thêm vào cuối style.css của bạn hoặc vào file portfolio.css vừa được tạo của chúng tôi. Chỉ cần chắc chắn sử dụng @import để gọi portfolio.css ở đầu style.css của theme của bạn (nó sẽ không hiệu quả ở chỗ nào khác):

Nếu bạn tham khảo trang template của chúng tôi, bạn sẽ thấy rằng mỗi dự án được bao bọc trong một div gọi là "item", hiện chúng tôi áp dụng CSS vào đó. Vì không có hai theme giống nhau, bạn có thể phải điều chỉnh CSS của riêng mình một chút, nhưng đây là khởi đầu tốt đẹp cho bạn. Tôi cũng đã bao gồm một class cho phần tự xóa bỏ các float. Đây là một kỹ thuật tôi biết được từ Dan Cederholm và tôi nghĩ rằng nó tốt hơn so với phương pháp tiêu chuẩn "clearfix" khi xóa các nội dung sau khi float các div.


Tổng kết

Thế đấy! Bây giờ bạn có một portfolio đơn giản bằng cách sử dụng các custom post type. Mặc dù điều này được xây dựng nhằm phục vụ nhu cầu của tôi và tôi muốn mọi thứ đơn giản, nhưng khả năng này là vô tận vì bạn có thể điều chỉnh nó để phù hợp với bất kỳ loại portfolio nào bạn có (viết / bài viết, chụp ảnh, thiết kế đồ họa, v.v.). Nếu bạn không muốn sử dụng lightbox để hiển thị một dự án riêng lẻ, bạn cũng có thể tạo một trang theme với tên single-portfolio.php, file này sau đó sẽ áp dụng code trong từng dự án riêng lẻ, giống như single.php dành cho các bài đăng trên blog.

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.