Thêm và tạo kiểu cho các định dạng bài đăng trong Chủ đề con Genesis của bạn

Hướng dẫn này sẽ chỉ cho bạn cách thêm và tạo kiểu cho các định dạng bài đăng trong chủ đề con Genesis của bạn.
Vậy các định dạng bài đăng là gì?
Định dạng bài đăng là một phần thông tin meta có thể được chủ đề sử dụng để tùy chỉnh cách trình bày bài đăng của nó.

WordPress Codex


Nhưng thực sự, việc thêm các định dạng bài đăng vào trang web WordPress của bạn chỉ cho phép bạn dễ dàng tạo kiểu cho các bài đăng khác nhau. Một số nền tảng khác, chẳng hạn như Tumblr thực hiện điều này tự động. Chủ đề WordPress mặc định Twenty Thirteen được tạo kiểu bằng cách sử dụng các định dạng bài đăng.

Thêm hỗ trợ chủ đề

Mở functions.php chủ đề con Genesis của bạn trong một trình soạn thảo văn bản. Thêm mã bên dưới.
<?php // Remove this line before adding to functions.php

// Add support for post formats
add_theme_support( ‘post-formats’, array(
‘aside’,
‘audio’,
‘chat’,
‘gallery’,
‘image’,
‘link’,
‘quote’,
‘status’,
‘video’
) )


Nếu bạn biết rằng bạn sẽ không bao giờ sử dụng một trong những định dạng này, chẳng hạn như “trạng thái”, bạn có thể xóa nó.
Nếu bạn muốn sử dụng hình ảnh để xác định các bài đăng khác nhau của mình, bạn cũng sẽ cần thêm những thứ sau:

<?php // Remove this line before adding to functions.php
// Add support for post format images
add_theme_support( 'genesis-post-format-images' );

Bạn không cần dòng cuối cùng này, nếu bạn chỉ muốn tạo kiểu nền cho bài đăng của mình với các màu khác nhau hoặc nếu bạn muốn sử dụng biểu tượng phông chữ, thay vì hình ảnh hoặc biểu tượng hình ảnh.

Thêm hình ảnh

Bạn sẽ muốn thêm một số biểu tượng vào thư mục này trong chủ đề con của mình: images/post-formats/

Vì vậy, nếu chủ đề con của bạn là Lifestyle Pro, bạn sẽ thêm thư mục hình ảnh (định dạng bài đăng):
/wp-content/themes/lifestyle-pro/images/post-formats/

Bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích, miễn là chúng được thêm vào /images/post-formats/ thư mục và miễn là chúng sử dụng cùng tên tệp với bản gốc.

Thêm một bài viết mới

Khi bạn đã thêm mã và thư mục biểu tượng hình ảnh, bạn có thể chuyển đến màn hình thêm bài đăng mới. Trên thanh bên phải, bạn sẽ thấy một khu vực mới có tên là Định dạng. Bạn có thể chọn định dạng của bài đăng, ví dụ, trích dẫn hoặc video.

Bây giờ hãy nhìn vào blog của bạn. Các biểu tượng hình ảnh sẽ nằm ngay phía trên tiêu đề bài đăng.

Thêm một số kiểu

Bạn có thể tạo kiểu cho các biểu tượng hình ảnh theo ý muốn. Ví dụ, bạn có thể di chuyển chúng sang bên trái. Thêm CSS này vào Giao diện> Tùy chỉnh> CSS bổ sung.
/* Align icon over left border */
img.post-format-image {
	display: block;
	margin-left: -90px;
}
Nếu bạn muốn căn giữa các biểu tượng hình ảnh, bạn có thể sử dụng:
/* Center icon above title */
img.post-format-image {
	display: block;
	margin: 0 auto 30px auto;
}
Hoặc bạn có thể di chuyển chúng sang trái ở kích thước màn hình lớn hơn và căn giữa chúng trên màn hình nhỏ hơn, như sau:
/* Align icon over left border */
img.post-format-image {
	display: block;
	margin-left: -90px;
}

@media only screen and (max-width: 960px) {
/* Center icon above title */
img.post-format-image {
display: block;
margin: 0 auto 30px auto;
}
}

Sử dụng Dashicons thay vì biểu tượng hình ảnh

Bạn cũng có thể sử dụng dashicons để tạo kiểu cho các định dạng bài đăng của mình. Đối với tùy chọn kiểu này, bạn không cần thêm dòng bổ sung hỗ trợ chủ đề cho hình ảnh định dạng bài đăng trong functions.php của bạn: add_theme_support( 'genesis-post-format-images' );

Enqueue Dashicons

Nhiều chủ đề con của Genesis đã có sẵn các dashicon. Nếu không, bạn sẽ cần làm theo một hướng dẫn khác để sắp xếp các dashicon.

Đối với hướng dẫn này, tôi đã thêm các dashicon vào đầu mỗi bài đăng trên blog và các bài đăng đơn lẻ (không phải trang). (Xem hình ảnh ở đầu bài đăng.) Biểu tượng mặc định của “\ f464” (bút chì) được sử dụng trong trường hợp không có định dạng bài đăng nào được chọn. Ngoài ra còn có các dashicons khác mà bạn có thể chọn cho từng định dạng và mặc định.

Thêm CSS

/* CSS to Add Top Border with Dashicon */
.blog .entry:first-of-type,
.page-template-page_blog .entry:first-of-type,
.single .entry:first-of-type {
	margin-top: 40px;
}

.blog .entry,
.page-template-page_blog .entry,
.single .entry {
border-top: 1px solid #ccc;
position: relative;
margin-bottom: 80px;
}

.blog .entry:before,
.page-template-page_blog .entry:before,
.single .entry:before {
background-color: #f5f5f5;
border: 2px solid #ccc;
border-radius: 50%;
color: #999;
content: “\f464”; /* adds dashicon */
display: block;
-webkit-font-smoothing: antialiased;
font: normal 48px/1 ‘dashicons’;
height: 60px;
line-height: 60px;
position: absolute;
top: -30px;
left: 50%;
margin-left: -30px;
text-align: center;
width: 60px;
}


Sau đó, bạn sẽ cần thêm CSS cho từng định dạng.

.format-aside.entry:before {
	content: "\f123";
}

.format-audio.entry:before {
	content: "\f127";
}

.format-chat.entry:before {
	content: "\f125";
}

.format-gallery.entry:before {
	content: "\f161";
}

.format-image.entry:before {
	content: "\f128";
}

.format-link.entry:before {
	content: "\f103";
}

.format-quote.entry:before {
	content: "\f122";
}

.format-status.entry:before {
	content: "\f130";
}

.format-video.entry:before {
	content: "\f126";
}

Thêm Dashicons trước tiêu đề mục nhập

Bạn có thể thêm các dashicons ngay trước tiêu đề, thay vì ở đầu bài đăng.

Bạn sẽ sử dụng CSS bên dưới.

/* Add dashicons before titles */
.entry-title {
    display: inline-block;
}

.entry-title:before {
    color: #999;
    content: "\f464"; /*adds dashicon */
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 42px/1 'dashicons';
    margin-right: 10px;
    position: relative;
      top: 5px;
}

.format-aside .entry-title:before {
    content: "\f123";
}

.format-audio .entry-title:before {
    content: "\f127";
}

.format-chat .entry-title:before{
    content: "\f125";
}

.format-gallery .entry-title:before {
    content: "\f161";
}

.format-image .entry-title:before {
    content: "\f128";
}

.format-link .entry-title:before {
    content: "\f103";
}

.format-quote .entry-title:before {
    content: "\f122";
}

.format-status .entry-title:before {
    content: "\f130";
}

.format-video .entry-title:before {
    content: "\f126";
}

Lưu ý rằng CSS ở trên sẽ thêm một dashicon vào tất cả các bài đăng và tiêu đề trang của bạn . Nếu bạn chỉ muốn thêm chúng vào tiêu đề cho các bài đăng trên blog và các trang đơn lẻ, bạn sẽ sử dụng:

.blog .entry-title,
.page-template-page_blog .entry-title,
.single .entry-title

thay vì .entry-title

.blog .entry-title:before,
.page-template-page_blog .entry-title:before,
.single .entry-title:before

thay vì .entry-title:before

Vì vậy, có rất nhiều cách để thêm các định dạng bài đăng vào chủ đề con Genesis của bạn và tạo kiểu cho chúng.

*** Cập nhật để phân biệt giữa bài viết và trang.