Tại sao nên sử dụng các trường tùy chỉnh trong WordPress?

Trường tùy chỉnh trong WordPress là các bit dữ liệu tùy ý mà bạn có thể áp dụng cho Bài đăng, Trang và Loại bài đăng tùy chỉnh trong WordPress. Siêu dữ liệu ở dạng các cặp khóa/giá trị. Ví dụ

• Chìa khóa.

  <blockquote>
    <?php
      echo get_post_meta($post->ID, 'main-pullquote', true);
    ?>
  </blockquote>

  0 / Giá trị.

  <blockquote>
    <?php
      echo get_post_meta($post->ID, 'main-pullquote', true);
    ?>
  </blockquote>

  1
• Chìa khóa.

  <blockquote>
    <?php
      echo get_post_meta($post->ID, 'main-pullquote', true);
    ?>
  </blockquote>

  2 / Giá trị.

  <blockquote>
    <?php
      echo get_post_meta($post->ID, 'main-pullquote', true);
    ?>
  </blockquote>

  3
• Chìa khóa.

  <blockquote>
    <?php
      echo get_post_meta($post->ID, 'main-pullquote', true);
    ?>
  </blockquote>

  4 / Giá trị.

  <blockquote>
    <?php
      echo get_post_meta($post->ID, 'main-pullquote', true);
    ?>
  </blockquote>

  5

WordPress có tài liệu riêng về tính năng này, vì vậy tôi không cố sao chép nó. Tôi chỉ muốn cho bạn thấy về cơ bản các trường tùy chỉnh trong WordPress là gì, cách chúng hoạt động, cách sử dụng chúng và một số trường hợp sử dụng từ kinh nghiệm cá nhân của tôi

Mục lục

Cách thêm/chỉnh sửa/xóa trường tùy chỉnh trong WordPress

Giao diện người dùng cho các trường tùy chỉnh trong WordPress trông như thế này

Nếu bạn không nhìn thấy nó, có thể bạn cần vào menu ba chấm, Tùy chọn, sau đó tìm công tắc cho Trường tùy chỉnh và bật nó lên

Để thêm Trường tùy chỉnh, hãy nhập Khóa (có nhãn là “Tên”) và Giá trị, sau đó nhấp vào Thêm trường tùy chỉnh

Sau khi được thêm, bạn có thể xóa hoặc cập nhật nó từ các nút bên dưới Khóa/Tên

Sau khi bạn đã sử dụng Trường tùy chỉnh, các phím sẽ tạo thành một menu thả xuống để lựa chọn dễ dàng hơn

Tại sao nên sử dụng Trường tùy chỉnh?

Các trường tùy chỉnh, cùng với các loại bài đăng tùy chỉnh, là những gì làm cho WordPress trở thành một CMS vượt trội thay vì bị giới hạn trong một nền tảng viết blog đơn giản

Ở đây trên Thủ thuật CSS, tin hay không tùy bạn, chúng tôi sử dụng hơn 100 Trường tùy chỉnh để thực hiện những việc khác nhau trên trang web này. Chúng tôi có xu hướng tiếp cận chúng cho những thứ tương đối đơn giản và thật tuyệt vì đây là tính năng cốt lõi của WordPress sẽ tiếp tục hoạt động mãi mãi mà không phải lo lắng quá nhiều về khả năng tương thích hoặc nợ kỹ thuật khó xử

Ý tưởng lớn là mở ra các khả năng tạo khuôn mẫu. Hãy tưởng tượng bạn có một trang danh sách bất động sản có

• Địa chỉ nhà
• Giá niêm yết
• phòng ngủ
• phòng tắm
• vân vân

Với các trường tùy chỉnh, bạn có sẵn tất cả thông tin đó dưới dạng các khối dữ liệu nhỏ kín đáo mà bạn có thể lặp lại (i. e. hiển thị) thành một mẫu trang bất cứ nơi nào bạn cần. Điều đó linh hoạt hơn nhiều so với việc có tất cả dữ liệu đó trong chính nội dung bài đăng, ngay cả với Trình chỉnh sửa khối

Các ví dụ về trường hợp sử dụng Trường tùy chỉnh WordPress

Trường tùy chỉnh trong WordPress có thể được sử dụng cho rất nhiều thứ khác nhau. Nhưng hãy xem năm trường hợp sử dụng thực tế mà chúng tôi đã triển khai ở đây trên CSS-Tricks

1. Hiển thị thông tin bổ sung

Giả sử bạn đang xuất bản một video và muốn có sẵn thời gian chạy của video đó để hiển thị. Điều đó thật dễ dàng như lưu

<blockquote>
  <?php
    echo get_post_meta($post->ID, 'main-pullquote', true);
  ?>
</blockquote>

<blockquote>
  <?php
    echo get_post_meta($post->ID, 'main-pullquote', true);
  ?>
</blockquote>

2. Ẩn/Hiển thị nội dung/Tính năng khác nhau

Giả sử bạn muốn đôi khi có thể thu gọn khu vực Nhận xét trên các bài đăng blog khác nhau. Bạn có thể đặt trường tùy chỉnh có tên là

<blockquote>
  <?php
    echo get_post_meta($post->ID, 'main-pullquote', true);
  ?>
</blockquote>

<blockquote>
  <?php
    echo get_post_meta($post->ID, 'main-pullquote', true);
  ?>
</blockquote>

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

<?php if (get_post_meta($post->ID, 'should_toggle_comments', true)) { ?>
<details class="open-all-comments">
  <summary>Toggle All Comments (there are a lot!)</summary>
  <?php } ?>

    <ol class="commentlist" id="commentlist">
      <?php wp_list_comments('type=comment&avatar_size=512&callback=csstricks_comment'); ?>
    </ol>

  <?php if (get_post_meta($post->ID, 'should_toggle_comments', true)) { ?>
  </details>
<?php } ?>

3. báo giá kéo đặc biệt

Giả sử bạn có kho lưu trữ Danh mục đặc biệt hiển thị một nhóm bài đăng có cùng danh mục, sau đó sử dụng mẫu tùy chỉnh cho danh mục đó, chẳng hạn như

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

<blockquote>
  <?php
    echo get_post_meta($post->ID, 'main-pullquote', true);
  ?>
</blockquote>

Đó là những gì chúng tôi làm cho loạt bài cuối năm hàng năm của mình

4. Tùy chỉnh nguồn cấp RSS

Chúng tôi xây dựng một vài nguồn cấp RSS hoàn toàn tùy chỉnh tại đây trên Thủ thuật CSS khác với những gì WordPress cung cấp ngay lập tức — một cho video và một cho bản tin. Nguồn cấp dữ liệu video đặc biệt dựa vào một số Trường tùy chỉnh WordPress để xuất dữ liệu đặc biệt cần thiết để làm cho nguồn cấp dữ liệu hoạt động như một nguồn cấp dữ liệu cho podcast video của chúng tôi

5. Ẩn/Hiện tác giả

Các bài đăng được tài trợ của chúng tôi ở đây trên CSS-Tricks đôi khi được viết giống như một thông báo từ một công ty. Chúng được viết như vậy có mục đích và có thể đã được viết bởi nhiều người vào thời điểm nó thực sự được xuất bản. Một bài đăng như thế không nhất thiết phải là “của” ai đó. Nhưng đôi khi các bài đăng được tài trợ chắc chắn được tác giả bởi một người cụ thể, thậm chí đôi khi ở ngôi thứ nhất, điều này sẽ thật kỳ lạ nếu không hiển thị tên tác giả. Đó là lý do tại sao chúng tôi sử dụng trường tùy chỉnh

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

Trên đây là một phần của mẫu. Chúng tôi luôn đánh dấu một bài đăng được tài trợ là được tài trợ trong dòng tên tác giả (ví dụ), nhưng chỉ tùy ý chúng tôi hiển thị trực quan tác giả (ví dụ), được kiểm soát bởi một trường tùy chỉnh

Các API để hiển thị Trường tùy chỉnh trong WordPress

Thông thường nhất, bạn đang muốn hiển thị giá trị của một trường

<?php echo get_post_meta($post->ID, 'mood', true); ?>

Điều đó

<blockquote>
  <?php
    echo get_post_meta($post->ID, 'main-pullquote', true);
  ?>
</blockquote>

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

<?php $songs = get_post_meta($post->ID, 'songs', false); ?>
<h3>This post inspired by:</h3>
<ul>
  <?php foreach($songs as $song) {
    echo '<li>'.$song.'</li>';
  } ?>
</ul>

Nếu bạn muốn loại bỏ tất cả chúng (có lẽ chủ yếu là hữu ích để gỡ lỗi), bạn có thể làm điều đó như thế này

<?php the_meta(); ?>

Mặc dù vậy, lưu ý rằng điều này bỏ qua các trường tùy chỉnh bắt đầu bằng dấu gạch dưới (

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

Truy vấn các trường tùy chỉnh trong WordPress

Giả sử bạn muốn truy vấn tất cả các bài đăng có một số trường tùy chỉnh cụ thể. Điều đó là khả thi

<?php
$the_query = new WP_Query(array(
  'meta_key' => 'example_field_name'
  'meta_value' => 'example_field_value' // as a string! 
));

if ($the_query->have_posts()) {
  while ($the_query->have_posts()) {
    $the_query->the_post();
    echo '<div>' . get_the_title() . '</div>';
  }
}

wp_reset_postdata();

Ví dụ trên sẽ chạy một truy vấn cho các bài đăng có cả trường tùy chỉnh là

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

<?php echo get_post_meta($post->ID, 'mood', true); ?>

Còn rất nhiều điều bạn có thể làm ở đây. Bạn có thể sử dụng so sánh, bạn có thể nhận các giá trị dưới dạng số và thậm chí truy vấn nhiều trường cùng một lúc. Chúng tôi trình bày chi tiết tất cả những điều đó trong Vòng lặp tùy chỉnh/Truy vấn dựa trên các trường tùy chỉnh

Giới hạn các trường tùy chỉnh trong menu thả xuống Tên

Trình đơn thả xuống giao diện người dùng cho các Trường tùy chỉnh hiện có trong WordPress được giới hạn ở khoảng 30 trường. Vì vậy, nếu bạn có hơn 100 phím khác nhau, menu thả xuống sẽ bị cắt tùy ý. Bạn có thể tăng con số đó bằng bộ lọc trong

<?php echo get_post_meta($post->ID, 'mood', true); ?>

function customfield_limit_increase( $limit ) {
  $limit = 150;
  return $limit;
}
add_filter( 'postmeta_form_limit', 'customfield_limit_increase' );

Bất kỳ mối quan tâm nào khác về Trình chỉnh sửa khối?

Mối quan tâm chính là khi bạn hoàn toàn không thấy giao diện người dùng trường tùy chỉnh. Chúng tôi đã đề cập đến cách bật lại tính năng này (vì tính năng này có thể bị tắt theo mặc định), vì vậy hãy luôn kiểm tra xem. Plugin Trường tùy chỉnh nâng cao cũng tắt tính năng này, vì vậy nếu bạn đang sử dụng plugin đó, hãy lưu ý rằng có một dòng bên dưới giúp bật lại tính năng này (trong trường hợp bạn sử dụng cả hai, như chúng tôi vẫn làm)

Tôi không chắc có cách tiêu chuẩn nào để hiển thị giá trị của trường tùy chỉnh trong một khối trong trình chỉnh sửa khối hay không. Nếu bạn biết một cách rõ ràng,

Mối quan hệ với các trường tùy chỉnh nâng cao

Giao diện người dùng cho các Trường tùy chỉnh gốc trong WordPress khá… kém hiệu quả. Nó không lạ mắt, nó có các cạnh thô (ví dụ: chúng tôi thấy rằng Trường tùy chỉnh có một cách kỳ lạ để tự sao chép trên nhiều lần lưu bài đăng). Có vẻ như Trường tùy chỉnh, trong khi bản địa, là một tính năng đặc biệt hạng nhất của WordPress

Trường tùy chỉnh nâng cao (ACF) thay đổi đáng kể điều đó. Tinh thần vẫn vậy. đính kèm dữ liệu vào nội dung. Nhưng thay vì giao diện khóa-giá trị dựa trên chuỗi đơn giản mà chúng tôi đã trình bày chi tiết, về cơ bản, bạn lập mô hình dữ liệu với các loại khác nhau và nó xây dựng giao diện người dùng tùy chỉnh thực sự đẹp mắt để bạn sử dụng để nhập dữ liệu đó, thậm chí tích hợp trực tiếp với Trình chỉnh sửa khối

Hãy tưởng tượng một trang web podcast trong đó mỗi bài đăng là một tập riêng lẻ. Trình chỉnh sửa khối có thể phù hợp với nội dung viết về tập phim, nhưng có lẽ không phải là ý tưởng hay cho tất cả siêu dữ liệu đi kèm với nó. Danh sách khách mời, thời lượng, vị trí file MP3, nhà tài trợ, link nhảy thời gian, v.v. Trường tùy chỉnh là tuyệt vời cho điều đó, nhưng vì có rất nhiều, bạn sẽ được Trường tùy chỉnh nâng cao phục vụ tốt tại đây thay vì sử dụng Trường tùy chỉnh gốc trong WordPress. Đây là một ví dụ thiết lập về những gì bạn nhận được khi chúng tôi thực hiện trên podcast ShopTalk Show

ACF, có thể nhằm khuyến khích sử dụng trực tiếp và không gây nhầm lẫn cho mọi người với giao diện Trường tùy chỉnh gốc, đã xóa giao diện Trường tùy chỉnh gốc. Nếu bạn giống chúng tôi và sử dụng cả hai loại trường, bạn sẽ cần đưa giao diện người dùng Trường tùy chỉnh gốc trở lại trình chỉnh sửa bài đăng với bộ lọc mà ACF cung cấp

add_filter('acf/settings/remove_wp_meta_box', '__return_false');

Nếu bạn hoàn toàn sử dụng Trường tùy chỉnh gốc trong WordPress, bạn sẽ muốn điều đó trong tệp

<?php echo get_post_meta($post->ID, 'mood', true); ?>

Lưu ý dành cho nhà phát triển plugin

Sử dụng kỹ thuật ẩn dấu gạch dưới

Một số plugin sử dụng API trường tùy chỉnh làm nơi lưu trữ dữ liệu cụ thể cho bài đăng. Tôi nghĩ điều đó không sao, nhưng tôi muốn đề nghị các nhà phát triển plugin luôn sử dụng tên trường tùy chỉnh có tiền tố gạch dưới và tiền tố plugin khi làm như vậy

Khi các trường tùy chỉnh bắt đầu bằng dấu gạch dưới, chúng không được hiển thị trong giao diện người dùng. Có nghĩa là đối với những người trong chúng ta, những người trực tiếp sử dụng Giao diện người dùng Trường tùy chỉnh, nó không bị lộn xộn với các trường được tạo bởi các plugin khác. Tất nhiên, ngoại lệ là nếu bạn muốn người dùng có thể kiểm soát những gì plugin thực hiện với các giá trị Trường tùy chỉnh. Trong trường hợp đó, tốt thôi, hãy để lại một vài trường không có tiền tố gạch dưới

Mục đích của trường tùy chỉnh là gì?

Trường tùy chỉnh trong trang web là gì?

Các trường tùy chỉnh nâng cao được sử dụng để làm gì?

Các trường tùy chỉnh trong Wooc Commerce là gì?