Hướng dẫn cơ bản về trường tùy chỉnh (Custom field) WordPress

Tất tần tật những mẹo và thủ thuật không thể bỏ lỡ về trường tùy chỉnh (Custom field) WordPress

Trường tùy chỉnh (Custom Field) là một tính năng hữu ích của WordPress cho phép bạn thêm những dữ liệu, thông tin bổ sung khác nhau vào các bài đăng và trang WordPress của bạn.

Rất nhiều plugin và theme WordPress phổ biến sử dụng các trường tùy chỉnh để lưu trữ dữ liệu quan trọng. Bạn cũng có thể sử dụng các trường tùy chỉnh để lưu trữ dữ liệu của riêng bạn và sau đó sử dụng chúng trên trang web của mình.

Trong bài viết này, chúng tôi sẽ hướng dẫn cho bạn cách sử dụng các trường tùy chỉnh WordPress cùng với một số mẹo, thủ thuật vô cùng hữu dụng.

Vì hướng dẫn này tương đối dài, chúng tôi đã tạo một mục lục ngay bên dưới giúp bạn điều hướng dễ dàng hơn.

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

Các trường tùy chỉnh WordPress là metadata được sử dụng để thêm thông tin bổ sung liên quan đến bài đăng hoặc trang mà bạn đang chỉnh sửa.

Theo mặc định, khi bạn viết một bài đăng, trang mới hoặc bất kỳ loại nội dung nào, WordPress sẽ lưu nó vào hai khu vực.

Khu vực đầu tiên chính là phần nội dung mà bạn thêm bằng trình soạn thảo editor.

Khu vực thứ hai là thông tin về nội dung cụ thể đó. Ví dụ như tiêu đề, tác giả, ngày, thời gian,… Những thông tin này của bài viết được gọi là metadata.

WordPress tự động thêm tất cả các metadata cần thiết vào mỗi bài đăng hoặc trang bạn tạo.

Bạn cũng có thể tạo và lưu trữ metadata 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 bị ẩn trên màn hình chỉnh sửa bài đăng. Để xem các tùy chọn này, bạn cần nhấp vào menu ba chấm (…) ở góc trên bên phải màn hình và chọn ‘Options’ từ menu thả xuống.

Thao tác này sẽ bật lên một cửa sổ, bạn cần kiểm tra tùy chọn ‘Custom fields‘ trong Advanced Panels. Sau đó, nhấp vào nút ‘Enable & Reload’ để tải lại trình soạn thảo bài đăng.

Sau khi trình soạn thảo bài đăng tải lại, bạn có thể thấy bản Custom fields ngay bên dưới trình soạn thảo.

Các trường tùy chỉnh có thể được sử dụng để thêm bất kỳ thông tin nào liên quan đến bài đăng, trang hoặc bất cứ loại nội dung nào. Thông tin meta này có thể được hiển thị trong theme của bạn.

Tuy nhiên, để làm được điều đó, bạn sẽ cần chỉnh sửa các file theme WordPress của mình.

Đây là lý do tại sao hướng dẫn này được khuyến nghị cho những người dùng đã quen thuộc với việc chỉnh sửa các file theme. Nó cũng hữu ích cho các developer WordPress khao khát muốn tìm hiểu cách khai thác các trường tùy chỉnh trong các theme hoặc plugin của riêng họ.

Ở phần tiếp theo, chúng ta hãy cùng tìm hiểu cách thêm và sử dụng các trường tùy chỉnh trong WordPress.

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

Trước 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 Custom field.

Sau đó, bạn cần đặt tên cho trường tùy chỉnh và nhập giá trị của nó. Nhấp vào nút Add Custom Field để lưu lại.

Trường sẽ được lưu và hiển thị trong hộp như hình bên dưới:

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

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

Hiển thị trường tùy chỉnh trong theme WordPress

Để hiển thị trường tùy chỉnh trên trang web của bạn, bạn sẽ cần chỉnh sửa các file theme WordPress. Nếu bạn chưa từng 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 code trong WordPress.

Trước tiên, bạn sẽ cần tìm file theme mà bạn cần chỉnh sửa để hiển thị trường tùy chỉnh của mình. Nếu bạn muốn hiển thị chúng trên một trang bài viết. Bạn sẽ cần chỉnh sửa tệp single.php hoặc content-single.php.

Bạn sẽ cần nhập đoạn code trường tùy chỉnh bên trong vòng lặp WordPress. Tìm dòng giống như thế này:

1
<?php while ( have_posts() ) : the_post(); ?>

Hãy bảo rằng bạn đã thêm đoạn code của mình trước dòng sau:

1
<?php endwhile; // end of the loop. ?>

Bây giờ bạn cần thêm đoạn code này vào file theme của bạn:

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

Đừng quên thay thế key bằng tên của trường tùy chỉnh. Ví dụ, chúng tôi đã sử dụng đoạn code này trong demo theme của mình:

1
<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

Bây giờ bạn có thể lưu các thay đổi và truy cập vào bài đăng nơi bạn đã thêm trường tùy chỉnh để xem nó hiển thị ra sao.

Như vậy, bạn đã biết cách thêm trường tùy chỉnh vào trong tất cả các bài đăng WordPress khác của bạn.

Bạn chỉ cần tạo một bài viết mới hoặc chỉnh sửa một bài hiện có. Chuyển đến hộp Custom fields, chọn trường tùy chỉnh của bạn từ menu thả xuống và nhập giá trị của nó.

Nhấp vào nút ‘Add Custom Field‘ để 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.

Không thể tìm thấy trường tùy chỉnh trong menu thả xuống trên màn hình chỉnh sửa bài

Theo mặc định, WordPress chỉ tải 30 trường tùy chỉnh ở form này.

Nếu bạn đang sử dụng các theme và plugin WordPress có dử dụng các trường tùy chỉnh, có khả năng chúng sẽ xuất hiện đầu tiên trong menu thả xuống và bạn sẽ không thể thấy trường tùy chỉnh mới tạo của mình.

Để khắc phục vấn đề này, bạn sẽ cần phải thêm đoạn code sau vào file functions.php trong theme của bạn hoặc một plugin dành riêng cho trang.

1
2
3
4
add_filter( 'postmeta_form_limit', 'meta_limit_increase' );
function meta_limit_increase( $limit ) {
    return 50;
}

Đoạn code ở trên sẽ thay đổi giới hạn đó thành 50. Nếu bạn vẫn không thể thấy trường tùy chỉnh của mình thì hãy thử tăng giới hạn đó hơn nữa.

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

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

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

Để thuận tiện hơn, bạn nên tạo một giai diện người dùng, để mọi người chỉ đơn giản điền vào một form là có thể thêm giá trị vào các trường tùy chỉnh.

Rất nhiều plugin WordPress phổ biến đã làm như vậy. Ví dụ: hộp tiêu đề SEO và mô tả meta bên trong plugin All in One SEO cũng là một hộp meta tùy chỉnh:

Cách dễ nhất để tạo giao diện người dùng cho trường tùy chỉnh là sử dụng plugin Advanced Custom Field .

Thêm trường tùy chỉnh bằng plugin Advanced Custom Fields

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Advanced Custom Field. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin trong WordPress.

Khi kích hoạt, bạn cần truy cập trang Custom Fields » Field Groups và nhấp vào nút Add new.

Field groups giống như một vùng chứa một bộ nhiều trường tùy chỉnh. Cho phép bạn thêm bảng điều khiển cho nhiều trương tùy chỉnh khác nhau.

Bây giờ, bạn cần cung cấp một tiêu đề cho nhóm trường của bạn và sau đó nhấp vào nút ‘Add Field‘.

Bây giờ bạn có thể đặt tên cho trường tùy chỉnh của mình và chọn loại trường. Advanced Custom Fields cho phép bạn tạo tất cả các loại trường bao gồm văn bản, tải lên hình ảnh, số, thả xuống, checkbox,…

Cuộn xuống và bạn sẽ thấy thêm các tùy chọn khác. Bạn có thể thay đổi chúng theo yêu cầu của riêng bạn.

Bạn có thể thêm nhiều trường hơn nữa vào field group của bạn nếu muốn. Khi bạn đã hoàn tất, nhấp vào nút Publish để lưu các thay đổi của bạn.

Bây giờ bạn có thể chỉnh sửa một bài đăng hoặc tạo một bài mới và bạn sẽ thấy một bảng điều khiển mới cho các trường tùy chỉnh của bạn bên dưới trình chỉnh sửa nội dung.

Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách thêm hộp meta tùy chỉnh trong các bài đăng WordPress.

Ẩn các trường tùy chỉnh không có nội dung

Chúng ta đã đề cập đến cách tạo một trường tùy chỉnh và hiển thị nó trong theme của bạn.

Bây giờ hãy xem cách kiểm tra các trường tùy chỉnh trước khi hiển thị, để bạn xem thử chúng có nội dung bên trong hay không.

Để làm điều đó, chúng tôi sẽ sửa đổi đoạn code sau để kiểm tra xem trường tùy chỉnh của bạn có trống hay không.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$mood = get_post_meta($post->ID, 'Mood', true);
if ($mood) { ?>
<p>Today's Mood: <? echo $mood; ?></p>
<?php
} else {
// do nothing;
}
?>

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

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

Các trường tùy chỉnh có thể được tái sử dụng trong cùng một bài để 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.

Tuy nhiên, đoạn code chúng ta đã sử dụng trong các 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 code. Bạn sẽ cần thêm đoạn code sau vào file theme của mình:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$mood = get_post_meta($post->ID, 'Mood', false);
if( count( $mood ) != 0 ) { ?>
<p>Today's Mood:</p>
<ul>
<?php foreach($mood as $mood) {
            echo '<li>'.$mood.'</li>';
            }
            ?>
</ul>
<?php
} else {
// do nothing;
}
?>

Đừng quên thay thế Mood 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 ta đã thay đổi tham số cuối cùng của hàm get_post_metathành false. Tham số này xác định xem hàm có trả về một giá trị hay không. Đặt nó thành false cho phép nó trả về dữ liệu dưới dạng một biến, sau đó chúng ta sẽ hiển thị nó trong một vòng lập foreach.

Hiển thị bài viết với Custom Key riêng

WordPress cho phép bạn hiển thị các bài đăng với custom key và giá trị của chúng. Ví dụ: nếu bạn đang cố gắng 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 custom key cụ thể, bạn có thể sử dụng lớp WP_Query để truy vấn các bài đăng phù hợp với các trường đó.

Bạn có thể sử dụng đoạn code sau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$args = array(
    'meta_key'   => 'Mood',
    'meta_value' => 'Happy'
);
$the_query = new WP_Query( $args );
<?php
// the query
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
    <!-- the loop -->
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
    <?php endwhile; ?>
    <!-- end of the loop -->
    <!-- pagination here -->
    <?php wp_reset_postdata(); ?>
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Đừng quên thay thế tham số meta_keyvà meta_value với các giá trị của riêng bạn.

Thêm tên tác giả khách bằng trường tùy chỉnh

Bạn muốn đang tải một bài đăng của khác nhưng không muốn tạo thêm hồ sơ người dung? Bạn có thể dễ dàng thêm tên tác giả khách bằng cách sử dụng trường tùy chỉnh.

Đầu tiên, bạn cần phải thêm đoạn code sau vào file functions.php theme hoặc một plugin dành riêng cho trang.

1
2
3
4
5
6
7
8
9
add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );
function guest_author_name( $name ) {
global $post;
$author = get_post_meta( $post->ID, 'guest-author', true );
if ( $author )
$name = $author;
return $name;
}

Đoạn code này sẽ kích hoạt bộ lọc the_authorvà get_the_author_display_name trong WordPress.

Chức năng đầu tiên kiểm tra tên trường tác giả khách. Nếu trường đó có nội dung, nó sẽ thay thế tên tác giả bằng tên tác giả khách.

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

Để biết chi tiết, hãy xem bài viết của chúng tôi về cách viết lại tên tác giả khách với các trường tùy chỉnh trong WordPress.

Hiển thị tên Cộng tác viên bằng trường tùy chỉnh

Trên nhiều trang blog và trang tin tức phổ biến, các cộng tác viên đóng vai trò quan trọng. 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.

Plugin Co-Authors Plus sẽ giúp bạn giải quyết vấn đề này. Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách thêm nhiều tác giả trên một bài đăng WordPress .

Ngoài ra, bạn có thể thêm tên cộng tác viên dưới dạng trường tùy chỉnh.

Trước tiên, bạn cần chỉnh sửa bài đăng mà 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 Custom field và thêm tên tác giả làm trường tùy chỉnh đồng tác giả.

Bây giờ thêm đoạn mã này vào các file theme của bạn.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$coauthors = get_post_meta($post->ID, 'co-author', false);
if( count( $coauthors ) != 0 ) { ?>
<ul class="coauthors">
<li>Contributors</li>
<?php foreach($coauthors as $coauthors) { ?>
           <?php echo '<li>'.$coauthors.'</li>' ;
            }
            ?>
</ul>
<?php
} else {
// do nothing;
}
?>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.coauthors ul {
display:inline;
}
.coauthors li {
display:inline;
list-style:none;
}
.coauthors li:after {
content:","
}
.coauthors li:last-child:after {
    content: "";
}
.coauthors li:first-child:after {
    content: ":";
}

Đây là cách tên cộng tác viên hiển thị trên trang web demo của chúng tôi.

 

Hiển thị các trường tùy chỉnh bên ngoài vòng lặp trong WordPress

Chúng ta đã tìm hiểu cách hiển thị các trường tùy chỉnh trong nội dung của bạn. Bước tiếp theo, chúng ta sẽ khám phá cách hiển thị các trường tùy chỉnh bên ngoài vòng lập WordPress, ví dụ như trên sidebar của một bài viết cụ thể nào đó.

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

1
2
3
4
5
6
<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

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

Hiển thị Header, Footer, Sidebar bằng trường tùy chỉnh

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

Sử dụng trường tùy chỉnh cũng là một trong những phương pháp dễ dàng để bạn hiển thị các sidebar, header, footer khác nhau cho các trang khác nhau trên trang web của mình.

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

Bây giờ bạn cần chỉnh sửa các file theme WordPress của mình như file single.php nếu bạn muốn hiển thị thanh bên tùy chỉnh. Bạn sẽ tìm kiếm đoạn code sau:

1
<?php get_sidebar(); ?>

Thay thế dòng trên bằng đoạn code mã sau đây:

1
2
3
4
5
6
7
<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

Đoạn code này chỉ đơn giản là tìm trường tùy chỉnh sidebar và sau đó hiển thị nó trong theme của bạn. Ví dụ nếu bạn thêm wpbpage làm trường tùy chỉnh sidebar, đoạn mã trên sẽ tìm tệp sidebar-wpbpage.php để hiển thị.

Bạn sẽ cần tạo tệp sidebar-wpbpage.php trong thư mục theme của mình. Bạn có thể sao chép đoạn code từ file sidebar.php của theme để làm điểm bắt đầu.

Tạo nội dung RSS Feed với trường tùy chỉnh

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

Trước tiên, bạn cần phải thêm đoạn code sau vào file functions.php trong theme của bạn hoặc một plugin dành riêng cho trang.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function wpbeginner_postrss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) {
if($coolcustom !== '') {
$content = $content."<br /><br /><div>".$coolcustom."</div>
";
}
else {
$content = $content;
}
}
return $content;
}
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

Bây giờ chỉ cần tạo một trường tùy chỉnh có tên 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ứ nội dung gì.

Tạo tiêu đề RSS Feed với trường tùy chỉnh

Đôi khi bạn có thể muốn thêm văn bản bổ sung vào tiêu đề bài đăng cho người dùng RSS Feed. Ví dụ như bạn đang xuất bản một bài đăng được tài trợ hoặc một bài đăng của khách.

Trước tiên, bạn thêm đoạn code sau vào của file functions.php trong theme của bạn hoặc plugin dành riêng cho trang.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function wpbeginner_titlerss($content) {
global $wp_query;
$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: '.$content;
}
elseif ($spost !== ''){
$content = 'Sponsored Post: '.$content;
}
else {
$content = $content;
}
return $content;
}
add_filter('the_title_rss', 'wpbeginner_titlerss');

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

Nếu bất kỳ trường nào trong hai trường tùy chỉnh này được tìm thấy với giá trị là true. Đoạn code này sẽ thêm văn bản phù hợp vào trước tiêu đề. Kỹ thuật này có thể được sử dụng theo nhiều cách khác nhau để phù hợp với nhu cầu của bạn.

Bạn muốn tìm hiểu thêm vê các mẹo RSS feed khác? Hãy tìm đọc hướng dẫn của chúng tôi về cách thêm nội dung và thao tác với RSS Feed WordPress của bạn .

Đặt ngày hết hạn cho bài viết trong WordPress bằ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 bạn? Điều này có ích trong các tình huống khi bạn muốn xuất bản nội dung chỉ 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.

Bạn có thể làm điều đó bằng cách xóa nội dung bài đăng hoặc sử dụng plugin như Post Expirator.

Ngoài ra, bạn cũng có thể sử dụng các trường tùy chỉnh để tự động thông báo hết hạn cho các bài đăng sau một thời gian cụ thể.

Bạn sẽ cần chỉnh sửa các file theme của mình và thêm chỉnh sửa vào vòng lặp WordPress như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
if (have_posts()) :
while (have_posts()) : the_post();
$expirationtime = get_post_meta($post->ID, "expiration", false);
if( count( $expirationtime ) != '' ) {
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}
$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween >= 0 ) {
echo 'This post will expire on ' .$expirestring.'';
the_content();
} else {
echo "Sorry this post expired!"
}
} else {
the_content();
}
endwhile;
endif;
?>

Lưu ý: Bạn sẽ cần chỉnh sửa đoạn code này để phù hợp với theme của bạn.

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. Đảm bảo bạn thêm thời gian ở định dạng mm/dd/yyyy 00:00:00.

Tạo phong cách bài viết cá nhân bằng trường tùy chỉnh

Bạn muốn thay đổi giao diện của một bài đăng cá nhân bằng CSS? WordPress tự động chỉ định mỗi bài đăng một lớp riêng của nó 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 mình và sau đó sử dụng chúng để tạo kiểu bài viết khác nhau.

Trước tiên, bạn cần chỉnh sửa một bài đăng mà bạn muốn tạo phong cách khác biệt. Đi đến hộp Custom Fields và trường tùy chỉnh trường post-class.

Tiếp theo, bạn cần chỉnh sửa các file theme WordPress của mình và thêm đoạn code này vào đầu vòng lặp WordPress.

1
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Bây giờ bạn cần tìm một dòng có hàm post_group (). Đây là cách nó nhìn trong theme demo của chúng tôi:

1
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

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

1
<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

Bây giờ nếu bạn kiểm tra mã nguồn của bài đăng bằng công cụ Inspect, bạn sẽ thấy lớp CSS trường tùy chỉnh của bạn đã thay đổi.

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

Chúng tôi hy vọng bài viết này đã giúp bạn hiểu thêm về các trường tùy chỉnh WordPress. Bạn cũng có thể tìm xem thêm hướng dẫn cơ bản từng bước tăng tốc độ và hiệu suất WordPress cho người mới bắt đầu của chúng tôi.

Nếu bạn thích bài viết này, vui lòng đăng ký YouTube Channel của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên TwitterFacebook.