Trường tùy chỉnh WordPress 101: Mẹo, Tricks và Hacks

Bao giờ tự hỏi những lĩnh vực tùy chỉnh trong WordPress là gì? Bạn muốn tìm hiểu thêm về các trường tùy chỉnh hoạt động như thế nào? Trong bài này, chúng tôi sẽ chỉ cho bạn cách sử dụng các trường tùy chỉnh của WordPress với các mẹo, thủ thuật, và các hacks.

Trường tùy chỉnh 101

Vì đây là một bài viết dài, chúng tôi đã thêm vào bảng mục lục để điều hướng dễ dàng hơn.

Trường tùy chỉnh WordPress là gì?

Trường tùy chỉnh WordPress là siêu dữ liệu được sử dụng để thêm thông tin bổ sung liên quan đến bài đăng hoặc trang như tiêu đề, tên tác giả, ngày tháng / thời gian, v.v …

Theo mặc định, khi bạn viết bài đăng mới, trang hoặc bất kỳ loại nội dung nào, WordPress sẽ lưu nó vào hai vùng khác nhau. Phần đầu tiên là nội dung của nội dung mà bạn thêm bằng trình chỉnh sửa bài đăng.

Phần thứ hai là thông tin về nội dung cụ thể đó. Ví dụ: tiêu đề, tác giả, ngày tháng, thời gian và hơn thế nữa. Bit thông tin này của bài viết được gọi là siêu dữ liệu.

WordPress tự động thêm tất cả các siêu dữ liệu yêu cầu vào mỗi bài đăng hoặc trang bạn tạo. WordPress cũng cho phép người dùng lưu siêu dữ liệu tùy chỉnh của riêng mình bằng cách sử dụng các trường tùy chỉnh.

Theo mặc định, tùy chọn trường tùy chỉnh được ẩn trên màn hình chỉnh sửa bài đăng. Để xem nó, bạn cần phải bấm vào nút ‘Tùy chọn màn hình’ ở trên cùng và sau đó kiểm tra tuỳ chọn lĩnh vực tùy chọn.

Hiển thị hộp meta các trường tùy chỉnh

Cuộn xuống một chút, và bạn sẽ có thể xem hộp meta lĩnh vực tùy chỉnh bên dưới trình soạn thảo bài đăng.

Hộp meta hộp tùy chỉnh trên màn hình soạn thảo bài trong WordPress

Các trường tùy chỉnh có thể được sử dụng để thêm bất kỳ thông tin nào có liên quan đến bài đăng, trang hoặc bất kỳ loại nội dung nào. Thông tin meta này có thể được hiển thị trong chủ đề của bạn. Tuy nhiên, để làm điều đó bạn sẽ cần phải chỉnh sửa các tập tin chủ đề WordPress của bạn.

Đây là lý do tại sao hướng dẫn này được khuyến cáo cho người dùng quen với việc chỉnh sửa các tệp chủ đề. Nó cũng rất hữu ích cho các nhà phát triển WordPress mong muốn, những người muốn học cách sử dụng đúng các lĩnh vực tùy chỉnh trong các chủ đề hoặc plugin của riêng họ.

Có nói rằng, chúng ta hãy xem làm thế nào để thêm và sử dụng các lĩnh vực tùy chỉnh trong WordPress.

Thêm trường tùy chỉnh trong WordPress

Đầu tiên bạn cần chỉnh sửa bài đăng hoặc trang mà bạn muốn thêm trường tùy chỉnh và đi đến hộp meta các trường tùy chỉnh.

Thêm trường tùy chỉnh

Tiếp theo, bạn cần phải cung cấp tên cho trường tùy chỉnh và sau đó nhập giá trị của nó. Nhấp vào nút Thêm trường tùy chỉnh để lưu.

Trường sẽ được lưu trữ và hiển thị trong hộp meta trường tùy chỉnh như sau:

Trường tùy chỉnh đã lưu

Bạn có thể chỉnh sửa trường tùy chỉnh bất kỳ lúc nào bạn muốn và sau đó nhấp vào nút cập nhật để lưu các thay đổi của bạn. Bạn cũng có thể xóa nó nếu cần.

Bây giờ, bạn có thể lưu bài đăng của mình để lưu các thiết lập trường tùy chỉnh.

Hiển thị trường tùy chỉnh trong WordPress Chủ đề

Để hiển thị trường tùy chỉnh của bạn trên trang web của bạn, bạn cần phải chỉnh sửa tệp tin chủ đề WordPress của mình. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của chúng tôi về cách sao chép và dán mã trong WordPress.

Đầu tiên, bạn cần phải tìm tệp chủ đề bạn cần để chỉnh sửa để hiển thị trường tùy chỉnh. Lý tưởng nhất là bạn muốn hiển thị nó trên một trang bài đăng. Bạn sẽ cần chỉnh sửa tệp single.php hoặc content-single.php.

Bạn sẽ cần phải nhập mã của trường tùy chỉnh bên trong vòng lặp WordPress. Hãy tìm dòng giống như sau:

Bạn muốn chắc chắn rằng bạn thêm mã của bạn trước dòng sau:

Bây giờ bạn cần thêm mã này vào tệp chủ đề của bạn:

ID, 'key', true);  ?> 

Đừng quên thay thế khóa với tên của trường tùy chỉnh của bạn. Ví dụ: chúng tôi đã sử dụng mã này trong chủ đề giới thiệu của chúng tôi:

Tâm trạng hôm nay: ID, 'Mood', đúng); ?>

Bây giờ bạn có thể lưu các thay đổi của bạn và truy cập bài đăng nơi bạn đã thêm trường tùy chỉnh để xem nó đang hoạt động.

Dữ liệu trường tùy chỉnh được hiển thị trong một chủ đề WordPress

Bây giờ bạn có thể sử dụng trường tùy chỉnh này trong tất cả các bài đăng WordPress khác của bạn. Đơn giản chỉ cần tạo một bài mới hoặc chỉnh sửa một cái hiện tại. Chuyển đến ô meta hộp tùy chỉnh và chọn trường tùy chỉnh của bạn từ trình đơn thả xuống và nhập giá trị của nó.

Chọn và sử dụng lại trường tùy chỉnh

Nhấp vào nút ‘Thêm trường tùy chỉnh’ để lưu các thay đổi của bạn và sau đó xuất bản hoặc cập nhật bài đăng của bạn.

Tạo giao diện người dùng cho các trường tùy chỉnh

Như bạn thấy, khi bạn thêm trường tùy chỉnh, bạn sẽ phải chọn trường và nhập giá trị mỗi lần bạn viết một bài đăng.

Nếu bạn có nhiều lĩnh vực tùy chỉnh hoặc nhiều người sử dụng viết trên trang web của bạn, thì đây không phải là một giải pháp rất lý tưởng.

Nó sẽ không được tốt đẹp nếu bạn có thể tạo ra một giao diện người dùng, nơi người dùng có thể điền vào một mẫu để thêm các giá trị vào các lĩnh vực tùy chỉnh của bạn?

Đây là những gì mà nhiều plugin phổ biến đã làm. Ví dụ: tiêu đề SEO và hộp mô tả meta bên trong plugin Yoast SEO là một hộp meta tùy chỉnh:

Hộp meta tùy chỉnh được sử dụng trong Yoast SEO

Cách dễ nhất để thực hiện việc này là sử dụng plugin Tùy chỉnh trường nâng cao. Nó cho phép bạn tạo các trường tùy chỉnh, nhóm chúng và hiển thị chúng trong một hộp meta tùy chỉnh trên các trang chỉnh sửa bài của bạn trong WordPress.

Để có hướng dẫn chi tiết từng bước

Ẩn các trường tùy chỉnh trống với tuyên bố có điều kiện

Trong ví dụ trên, chúng tôi đã chỉ cho bạn cách tạo trường tùy chỉnh và hiển thị nó trong chủ đề của bạn.

Bây giờ, hãy xem cách kiểm tra xem trường tùy chỉnh không trống trước khi hiển thị không. Để làm điều đó, chúng tôi sẽ sửa đổi mã của chúng tôi để kiểm tra xem trường có dữ liệu trong đó.

ID, 'Mood', đúng);

 nếu (tâm trạng $) {?> 

Tâm trạng hôm nay: echo $ tâm trạng; ?>

Đừng quên thay thế Tâm trạng bằng tên trường tùy chỉnh của riêng bạn.

Thêm nhiều giá trị vào một trường tùy chỉnh

Trường tùy chỉnh có thể được sử dụng lại trong cùng một bài đăng để thêm nhiều giá trị. Bạn chỉ cần chọn nó một lần nữa và thêm một giá trị khác.

Thêm nhiều giá trị vào một trường tùy chỉnh

Tuy nhiên, mã chúng tôi đã sử dụng trong ví dụ trên sẽ chỉ có thể hiển thị một giá trị duy nhất.

Để hiển thị tất cả các giá trị của một trường tùy chỉnh, chúng ta cần sửa đổi mã và làm cho nó trả về dữ liệu trong một mảng. Bạn sẽ cần thêm mã sau vào tệp chủ đề của bạn:

ID, 'Mood', sai);
 if (count ($ mood)! = 0) {?> 

Tâm trạng hôm nay:

    ‘Tâm trạng $. “;
    }
    ?>

Đừng quên thay thế Tâm trạng bằng tên trường tùy chỉnh của riêng bạn.

Trong ví dụ này, bạn sẽ nhận thấy rằng chúng tôi đã thay đổi tham số cuối cùng của get_post_meta chức năng để sai. Tham số này định nghĩa xem hàm có trả lại một giá trị hay không. Đặt nó thành false cho phép nó trả lại dữ liệu như một mảng, mà chúng ta sẽ hiển thị trong một vòng lặp foreach.

Hiển thị các bài đăng với Khóa tùy chỉnh cụ thể

WordPress cho phép bạn hiển thị các bài viết với các phím tùy chỉnh và các giá trị của chúng. Ví dụ: nếu bạn đang cố tạo một trang lưu trữ tùy chỉnh để hiển thị tất cả các bài đăng với các phím tùy chỉnh cụ thể thì bạn có thể sử dụng lớp WP_Query để truy vấn các bài viết phù hợp với các trường đó.

Bạn có thể sử dụng mã sau đây như là một điểm khởi đầu.

$ args = mảng (
 'meta_key' => 'Tâm trạng',
 'meta_value' => 'Hạnh phúc'
 );
 $ the_query = new WP_Query ($ args); have_posts ():?> 
	have_posts (): $ the_query-> the_post ();  ?> 

Đừng quên thay các tham số meta_key và meta_value bằng các giá trị của riêng bạn.

Thêm Tên Tác giả Vị trí Sử dụng Trường Tùy chỉnh

Bạn có muốn thêm một bài đăng khách nhưng không muốn thêm một hồ sơ người dùng mới chỉ để thêm một bài đăng? Một cách dễ dàng hơn để làm điều đó là thêm tên tác giả khách mời làm trường tùy chỉnh.

Trước tiên, bạn cần phải thêm mã sau vào tệp tin functions.php của chủ đề hoặc plugin dành riêng cho trang web.

add_filter ('the_author', 'guest_author_name');
 add_filter ('get_the_author_display_name', 'guest_author_name');
 chức năng guest_author_name ($ name) {
 bài đăng toàn cầu $;
 $ tác giả = get_post_meta ($ post-> ID, 'khách-tác giả', đúng);
 nếu ($ tác giả)
 $ tên = $ tác giả;
 return $ name;
 } 

Mã này nối một hàm để tác giả get_the_author_display_name bộ lọc trong WordPress. Chức năng đầu tiên kiểm tra tên tác giả khách mời. Nếu nó tồn tại, thì nó sẽ thay thế tên tác giả bằng tên tác giả khách mời.

Bây giờ bạn sẽ cần phải chỉnh sửa bài đăng nơi bạn muốn hiển thị tên tác giả khách. Chuyển đến hộp meta lĩnh vực tùy chỉnh và thêm tên tác giả khách của bạn.

Thêm trường tùy chỉnh của tác giả

Để biết chi tiết

Hiển thị cộng tác viên cho một bài viết bằng cách sử dụng trường tùy chỉnh

Trên nhiều blog và các trang tin tức phổ biến, nhiều tác giả đóng góp một bài báo. Tuy nhiên, WordPress chỉ cho phép một tác giả duy nhất được liên kết với một bài đăng.

Một cách để giải quyết vấn đề này là sử dụng plugin Co-Authors Plus. Để tìm hiểu thêm

Một cách khác để làm điều đó là thêm các cộng tác viên làm trường tùy chỉnh.

Đầu tiên bạn cần chỉnh sửa bài viết nơi bạn muốn hiển thị đồng tác giả hoặc cộng tác viên. Cuộn xuống hộp meta lĩnh vực tùy chỉnh và thêm tên tác giả làm trường tùy chỉnh đồng tác giả.

Thêm đồng tác giả làm trường tùy chỉnh

Bây giờ thêm mã này vào các tệp chủ đề mà bạn muốn hiển thị đồng tác giả.


ID, 'đồng tác giả', sai);
 if (count ($ coauthors)! = 0) {?> 
  • Người đóng góp
  • ‘. $ Coauthors. “;
    }
    ?>

Để hiển thị tên tác giả được phân cách bằng dấu phẩy, bạn có thể thêm CSS tùy chỉnh sau đây

.coauthors ul {
 Hiển thị nội dòng;
 }
 .coauthors li {
 Hiển thị nội dòng;
 danh sách-phong cách: không có;
 }
 .coauthors li: sau khi {
 Nội dung:","
 }
 .coauthors li: last-child: after {
     Nội dung: "";
 }
 .coauthors li: first-child: after {
     Nội dung: ":";
 } 

Đây là cách nó nhìn vào trang web demo của chúng tôi.

Đồng tác giả được hiển thị bằng các trường tùy chỉnh

Hiển thị trường tùy chỉnh bên ngoài Loop trong WordPress

Cho đến nay chúng tôi đã giới thiệu cho bạn tất cả các ví dụ về các lĩnh vực tùy chỉnh được hiển thị bên trong vòng lặp WordPress. Điều gì sẽ xảy ra nếu bạn cần hiển thị chúng ở bên ngoài vòng lặp? Ví dụ: trong thanh bên của một bài đăng.

Để hiển thị các trường tùy chỉnh bên ngoài vòng lặp WordPress thêm mã sau:

post-> ID;
 echo get_post_meta ($ postid, 'key', true);
 wp_reset_query ();
 ?> 

Đừng quên thay thế khóa bằng tên trường tùy chỉnh của bạn.

Hiển thị Tiêu đề, Chân trang Tuỳ chỉnh, Sử dụng các trường Tùy chỉnh

Thông thường hầu hết các chủ đề WordPress đều sử dụng tiêu đề, chân trang và thanh bên trên cùng một trang. Có nhiều cách để hiển thị các thanh bên, đầu trang hoặc chân trang khác nhau cho các trang khác nhau trên trang web của bạn.

Một cách để thực hiện việc này là sử dụng các trường tùy chỉnh. Chỉnh sửa bài đăng hoặc trang mà bạn muốn hiển thị một thanh bên khác và sau đó thêm thanh bên cạnh làm trường tùy chỉnh.

Thêm thanh bên tùy chỉnh vào bài đăng sử dụng các trường tùy chỉnh

Bây giờ bạn cần chỉnh sửa các tệp tin chủ đề WordPress của bạn như single.php nơi bạn muốn hiển thị thanh bên tùy chỉnh. Bạn sẽ tìm kiếm mã sau:

Thay thế dòng này bằng mã sau:

post-> ID;
 $ sidebar = get_post_meta ($ postid, "sidebar", true);
 get_sidebar (thanh bên $);
 wp_reset_query ();
 ?> 

Mã này chỉ cần tìm trường tùy chỉnh thanh bên và sau đó hiển thị nó trong chủ đề của bạn. Ví dụ: nếu bạn thêm wpbpage làm trường tùy chỉnh thanh bên cạnh của bạn, thì mã sẽ tìm tệp tin sidebar-wpbpage.php để hiển thị.

Bạn sẽ cần phải tạo tệp sidebar-wpbpage.php trong thư mục chủ đề của bạn. Bạn có thể sao chép mã từ tệp tin sidebar.php của chủ đề như một điểm bắt đầu.

Thao tác nguồn cấp dữ liệu RSS Nội dung với các trường tùy chỉnh

Bạn muốn hiển thị dữ liệu meta bổ sung hoặc nội dung cho người dùng nguồn cấp dữ liệu RSS? Sử dụng các trường tùy chỉnh bạn có thể thao tác nguồn cấp dữ liệu WordPress RSS của bạn và thêm nội dung tùy chỉnh vào nguồn cấp dữ liệu của bạn.

Đầu tiên, bạn cần thêm mã sau vào tệp functions.php của chủ đề hoặc một plugin dành riêng cho trang web.

chức năng site_postrss ($ nội dung) {
 $ wp_query toàn cầu;
 $ postid = $ wp_query-> post-> ID;
 $ coolcustom = get_post_meta ($ postid, 'coolcustom', đúng);
 if (is_feed ()) {
 if ($ coolcustom! == '') {
 nội dung $ = $ nội dung. " 

". $ coolcustom." "; } else { $ nội dung = $ nội dung; } } trở lại nội dung $; } add_filter ('the_excerpt_rss', 'site_postrss'); add_filter ('the_content', 'site_postrss');

Bây giờ chỉ cần tạo một trường tùy chỉnh được gọi là “coolcustom” và thêm bất kỳ giá trị nào bạn thích. Bạn có thể sử dụng nó để hiển thị quảng cáo, hình ảnh, văn bản, hoặc bất cứ thứ gì bạn muốn.

Thao tác Tiêu đề Nguồn cấp dữ liệu RSS với trường Tùy chỉnh

Đôi khi bạn có thể muốn thêm văn bản thêm vào tiêu đề bài đăng cho người dùng nguồn cấp dữ liệu RSS. Ví dụ: nếu bạn đang xuất bản bài đăng được tài trợ hoặc bài đăng của khách.

Đầu tiên bạn thêm mã sau vào tệp tin functions.php của chủ đề hoặc một plugin dành cho trang web.

chức năng site_titlerss ($ nội dung) {
 $ wp_query toàn cầu;
 $ postid = $ wp_query-> post-> ID;
 $ gpost = get_post_meta ($ postid, 'guest_post', true);
 $ spost = get_post_meta ($ postid, 'sponsored_post', true);

 if ($ gpost! == '') {
 $ content = 'Guest Post:'. $ nội dung;
 }
 elseif ($ spost! == '') {
 $ content = 'Bài đăng được tài trợ:'. $ nội dung;
 }
 else {
 $ nội dung = $ nội dung;
 }
 trở lại nội dung $;
 }
 add_filter ('the_title_rss', 'site_titlerss'); 

Tiếp theo, bạn cần chỉnh sửa bài viết nơi bạn muốn hiển thị văn bản bổ sung trong trường tiêu đề và thêm guest_post và sponsorored_post trong các trường tùy chỉnh.

Các lĩnh vực tùy chỉnh của nhà tài trợ và khách mời

Nếu bất kỳ trong hai lĩnh vực tùy chỉnh được tìm thấy với một giá trị “true”, sau đó nó sẽ thêm văn bản thích hợp trước tiêu đề. Kỹ thuật này có thể được sử dụng theo những cách khác nhau để phù hợp với bất cứ điều gì bạn thích.

Bạn muốn tìm hiểu thêm các nguồn cấp dữ liệu RSS feed hacks?

Đặt Ngày hết hạn cho các bài đăng trong WordPress Sử dụng Trường Tùy chỉnh

Bạn muốn đặt ngày hết hạn cho một số bài đăng trên trang web WordPress của mình? Điều này hữu ích trong các tình huống khi bạn chỉ muốn xuất bản nội dung trong một khoảng thời gian cụ thể như chạy khảo sát hoặc cung cấp thời gian giới hạn.

Một cách để thực hiện việc này là xóa nội dung bài đăng theo cách thủ công hoặc bằng cách sử dụng plugin như trình đăng bài hết hạn.

Một cách khác để làm điều này là sử dụng các trường tùy chỉnh để tự động hết hạn các bài viết sau một thời gian cụ thể.

Bạn sẽ cần phải chỉnh sửa các tập tin chủ đề của bạn và thêm sửa đổi các WordPress loop như thế này:

ID, "hết hạn", sai);
 if (count ($ expirationtime)! = '') {
 if (is_array ($ expirationtime)) {
 $ expirestring = implode ($ expirationtime);
 }

 $ secondsbetween = strtotime ($ expirestring) -time ();
 if ($ secondsbetween> = 0) {
 echo 'Bài đăng này sẽ hết hạn vào'. $ expirestring. ';
 Nội dung();
 } else {
 echo "Xin lỗi bài đăng này hết hạn!"
 }
 } else {
 Nội dung();
 }
 cuối cùng;
 endif;
 ?> 

Lưu ý: Bạn sẽ cần chỉnh sửa mã này để phù hợp với chủ đề của mình.

Sau khi thêm mã này, bạn có thể thêm trường tùy chỉnh hết hạn vào bài đăng bạn muốn hết hạn. Đảm bảo bạn thêm thời gian theo định dạng này mm / dd / yyyy 00:00:00 .

Thêm trường tùy chỉnh hết hạn vào một bài đăng WordPress

Kiểu bài viết riêng lẻ Sử dụng Trường tùy chỉnh

Bạn muốn thay đổi giao diện của một bài cá nhân sử dụng CSS? WordPress sẽ tự động gán cho mỗi bài viết một lớp học riêng mà bạn có thể sử dụng để thêm CSS tùy chỉnh.

Tuy nhiên, bằng cách sử dụng các trường tùy chỉnh bạn có thể thêm các lớp tùy chỉnh của riêng bạn và sau đó sử dụng chúng để bài viết theo phong cách khác nhau.

Đầu tiên bạn cần chỉnh sửa bài đăng mà bạn muốn cách khác. Chuyển đến hộp trường tuỳ chỉnh và trường tùy chỉnh sau lớp.

Trường tùy chỉnh lớp đăng

Tiếp theo, bạn cần phải chỉnh sửa tệp tin chủ đề WordPress và thêm mã này vào đầu vòng lặp WordPress.

ID, 'post-class');  ?> 

Bây giờ bạn cần tìm một dòng với chức năng post_class (). Đây là cách nó nhìn trong chủ đề demo của chúng tôi:

>

Thay đổi dòng này để bao gồm giá trị trường tùy chỉnh của bạn, như sau:

>

Bây giờ nếu bạn kiểm tra mã nguồn của bài viết bằng công cụ Inspect, thì bạn sẽ thấy trường CSS của bạn được thêm vào lớp đăng bài.

Tuỳ chỉnh trường bài đăng

Bây giờ bạn có thể sử dụng lớp CSS này để thêm CSS tùy chỉnh và cách bài viết của bạn một cách khác.

Đó là tất cả