Hướng dẫn tùy biến page trong theme genesis

Có một bạn trên facebook hỏi tôi rằng:

Có cách nào tùy biết các trang page (trang tĩnh trong genesis theme) mà theo bố cục bao gồm các (Tiêu đề, breadcrumbs, ảnh đại diện, nội dung đoạn trích…) bên trên cùng của trang không?

Trong bài này, tôi chia sẻ cách thêm một phần có breadcrumbs, tiêu đề và đoạn trích trên hình ảnh bên trái và hình ảnh đại diện ở bên dưới tiêu đề trên các trang tĩnh giống như một bài viết trong theme genesis vậy.

Xem thêm:
Hướng dẫn kích hoạt và tùy biến breadcrumbs trong genesis framework
Làm thế nào để hiển thị ảnh đại diện trong bài viết genesis framework
Hướng dẫn hiển thị author box trên tất cả các trang lưu trữ genesis framework.
Hướng dẫn Genesis Framework – Thêm widget dưới bài đăng
Tổng hợp code tùy chỉnh Author box Genesis Framework

Bài viết Hướng dẫn tùy biến page trong theme genesis

Bước 1: cài đặt và kích hoạt plugin AJAX Thumbnail Rebuild.

Bước 2: Thêm đoạn mã sau vào cuối cùng file functions.php trong thư mục child theme.

// Enables the Excerpt meta box in Page edit screen.
 function wpcodex_add_excerpt_support_for_pages() {
 add_post_type_support( 'page', 'excerpt' );
 }
 add_action( 'init', 'wpcodex_add_excerpt_support_for_pages' );

// Register a custom image size for featured images on Pages
 add_image_size( 'page-featured', 560, 175, true );

Bước 3: Tạo một file mới tên page.php.

Dán toàn bộ code bên dưới, rồi lưu lại.

<?php

add_action( 'genesis_after_header', 'sk_featured_section_pages' );
function sk_featured_section_pages() { ?>

<div class="featured-section">
 <div class="wrap">
 <div class="one-half first">
 <?php genesis_do_breadcrumbs();
 genesis_do_post_title();
 the_excerpt(); ?>
 </div>
 <div class="one-half">
 <?php genesis_image( 'size=page-featured' ); ?>
 </div>
 </div>
 </div>

<?php }

// Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

// Remove entry header
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

// Modify breadcrumb arguments
add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );
function sp_breadcrumb_args( $args ) {

$args['sep'] = ' > ';
 $args['labels']['prefix'] = '';

return $args;

}

genesis();

Bước 4: Trang trí nội dung bằng CSS.

Dán mã CSS bên dưới vào style.css.

.featured-section {
 padding: 30px 0;
 background-color: #ededed;
 border-bottom: 1px solid #d2d2d2;
 }

.featured-section .breadcrumb {
 margin-bottom: 10px;
 }

.featured-section .entry-title {
 margin-bottom: 20px;
 }

Lưu lại và bạn sẽ thấy kết quả như bên dưới.