Tiêu đề mục nhập, đoạn đầu tiên, Hình ảnh nổi bật phía trên nội dung còn lại và thanh bên trên các Bài đăng đơn lẻ trong Genesis

Trong nhóm Genesis Facebook, một người dùng đã hỏi một câu hỏi thú vị:

Làm thế nào bạn sẽ làm điều đó chính xác về mặt ngữ nghĩa với genesis?

Mặc dù bề ngoài điều này trông có vẻ đơn giản, nhưng nó thực sự rất khó khăn, đặc biệt là với điều kiện văn bản bên dưới tiêu đề là đoạn đầu tiên của nội dung Bài đăng và văn bản bên dưới hình ảnh nổi bật không được bao gồm đoạn đầu tiên.

Phương pháp 1: Ngắn gọn và được đề xuất

(Thêm vào ngày 19 tháng 1 năm 2016)

Lợi ích của việc sử dụng phương pháp này là dữ liệu có cấu trúc như dòng tiêu đề và ngày tháng. Đã xuất bản sẽ vẫn còn nguyên vẹn. Điều này có thể được kiểm tra tại Şema İşaretleme Test Aracı | Google Arama Merkezi  |  Google Developers. Xem nhận xét này để biết nền.

Ý tưởng là chèn hình ảnh nổi bật và thanh bên chính sau đoạn đầu tiên.

Bước 1

Thêm phần sau vào functions.php của chủ đề con :

// Register a custom image size for featured images on single Posts
add_image_size( 'post-single', 1080, 270, true );

Tạo lại hình thu nhỏ.

Bước 2

Tạo một tệp có tên single-post.php trong thư mục chủ đề con có như sau:

// Add "has-featured-image" body class if the post has a featured image
add_filter( 'body_class', 'sk_single_post_body_class' );
/**
* Adds a css class to the body element
*
* @param array $classes the current body classes
* @return array $classes modified classes
*/
function sk_single_post_body_class( $classes ) {

if ( has_post_thumbnail() ) {
$classes[] = 'has-featured-image';
}

return $classes;
}

add_action( 'get_header', 'sk_layout' );
function sk_layout() {

// if the post does not have a featured image, abort.
if ( ! has_post_thumbnail() ) {
return;
}

// force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// insert featured image and Primary sidebar
add_filter( 'the_content', sk_featured_image_sidebar, 20 );

}

// Function to insert featured image and Primary sidebar
function sk_featured_image_sidebar( $content ) {

// store the Primary sidebar's output in a variable using output buffering
ob_start();
get_sidebar(); // include the sidebar.php template file
$sidebar = ob_get_clean();

// insert featured image and Primary sidebar after the first paragraph
$content = preg_replace( '/<\/p>/', '</p>' . get_the_post_thumbnail( $post->ID, 'post-single' ) . $sidebar, $content, 1 );

return $content;

}

genesis();

Bước 3

Thêm phần sau vào style.css của chủ đề con :

.attachment-post-single {
	margin-bottom: 22px;
}

.single-post.has-featured-image .sidebar-primary {
	margin-left: 30px;
}

.single-post.has-featured-image .sidebar .widget {
	padding-top: 0;
	padding-bottom: 0;
}

.entry-content .sidebar ul {
	margin-left: 0;
}

.entry-content .sidebar ul > li {
	list-style-type: none;
	list-style-image: none;
}

Đó là nó.

Các Bài đăng đơn lẻ không có hình ảnh nổi bật sẽ tiếp tục xuất hiện bình thường (với thanh bên phải).

Phương pháp 2: Dài và không được khuyến nghị

Đây là kế hoạch hành động:

  • Tạo một shortcode tùy chỉnh trong tệp chức năng để xuất URL của trang tác giả cho tác giả mục nhập bên ngoài vòng lặp. Điều này là cần thiết vì nếu không tác giả được liên kết sẽ không xuất hiện vì chúng tôi sẽ hiển thị thông tin bài đăng bên ngoài vòng lặp.
  • Tạo một mẫu cho các Bài đăng đơn trong đó
    1. tiêu đề mục nhập có tiêu đề mục nhập và thông tin bài đăng được đặt lại vị trí trước nội dung
    2. một chức năng tùy chỉnh in đoạn đầu tiên của Bài đăng hiện tại được nối trước nội dung
    3. hình ảnh nổi bật được thiết lập để xuất hiện trước nội dung
    4. regex được sử dụng để tìm para đầu tiên trong nội dung của bài đăng và thay thế nó bằng một chuỗi trống
    5. sử dụng genesis_post_info bộ lọc hook để thay thế shortcode liên kết bài viết của tác giả bài đăng mặc định bằng post_author_posts_link_outside_loop shortcode tùy chỉnh

Mặc dù hướng dẫn đã được viết cho chủ đề con Genesis Sample, nó sẽ hoạt động với những điều chỉnh nhỏ trong bất kỳ chủ đề con nào của Genesis.

Bước 1

Thêm phần sau vào functions.php của chủ đề con :

// Register a custom image size for featured images on single Posts
add_image_size( 'post-single', 1200, 300, true );

// Create a shortcode that outputs the URL of author page for the entry author outside the loop
add_shortcode( 'post_author_posts_link_outside_loop', 'sk_post_author_posts_link_shortcode' );
/**
* Produces the author of the post (link to author archive).
*
* Supported shortcode attributes are:
* after (output after link, default is empty string),
* before (output before link, default is empty string).
*
* Output passes through 'genesis_post_author_posts_link_shortcode' filter before returning.
*
* @since 1.1.0
*
* @param array|string $atts Shortcode attributes. Empty string if no attributes.
* @return string Shortcode output
*/
function sk_post_author_posts_link_shortcode( $atts ) {

if ( ! is_singular() ) {
return;
}

$defaults = array(
'after' => '',
'before' => '',
);

$atts = shortcode_atts( $defaults, $atts, 'post_author_posts_link_outside_loop' );

global $post;
$author_id = $post->post_author;
$author = get_the_author_meta( 'display_name', $author_id );
$url = get_author_posts_url( $author_id );

if ( genesis_html5() ) {
$output = sprintf( '<span %s>', genesis_attr( 'entry-author' ) );
$output .= $atts['before'];
$output .= sprintf( '<a href="%s" %s>', $url, genesis_attr( 'entry-author-link' ) );
$output .= sprintf( '<span %s>', genesis_attr( 'entry-author-name' ) );
$output .= esc_html( $author );
$output .= '</span></a>' . $atts['after'] . '</span>';
} else {
$link = sprintf( '<a href="%s" rel="author">%s</a>', esc_url( $url ), esc_html( $author ) );
$output = sprintf( '<span class="author vcard">%2$s<span class="fn">%1$s</span>%3$s</span>', $link, $atts['before'], $atts['after'] );
}

return apply_filters( 'genesis_post_author_posts_link_shortcode', $output, $atts );

}

Tạo lại hình thu nhỏ.

Bước 2

Tạo một tệp có tên single-post.php trong thư mục chủ đề con có mã sau:

// Add opening div.single-post-top for entry header + first para
add_action( 'genesis_before_content', 'sk_single_post_top_opening' );
function sk_single_post_top_opening() {
echo '<div class="single-post-top">';
}

// Add entry header before content
add_action( 'genesis_before_content', 'genesis_entry_header_markup_open' );
add_action( 'genesis_before_content', 'genesis_do_post_title' );
add_action( 'genesis_before_content', 'genesis_post_info' );
add_action( 'genesis_before_content', 'genesis_entry_header_markup_close' );

// Show first para before content
add_action( 'genesis_before_content', 'get_first_paragraph' );
/**
* Echo first paragraph from the current post.
*
*/
function get_first_paragraph() {

global $post;

$content = wpautop( $post->post_content );

$str = substr( $content, 0, strpos( $content, '</p>' ) + 4 );

// To remove images from the first paragraph
// $str = preg_replace( '/<img[^>]+\>/i', '', $str );

echo '<div class="first-para">' . $str . '</div></div>';

}

// If featured image is present, show it before content
add_action( 'genesis_before_content', 'sk_featured_image' );
function sk_featured_image() {

if ( $image = genesis_get_image( 'format=url&size=post-single' ) ) {
printf( '<div class="featured-image-single"><img src="%s" alt="%s" /></div>', $image, the_title_attribute( 'echo=0' ) );

}

}

// Remove first para from the content
add_filter( 'the_content', sk_remove_first_para, 20 );
function sk_remove_first_para( $content ) {

$content = preg_replace( '/<p.*?<\/p>/s', '', $content, 1 );

return $content;

}

// Remove entry header from its default location
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );

// Customize entry meta in the entry header
add_filter( 'genesis_post_info', 'sp_post_info_filter' );
function sp_post_info_filter( $post_info ) {
$post_info = '[post_date] by [post_author_posts_link_outside_loop] [post_comments] [post_edit]';
return $post_info;
}

genesis();

Hình ảnh sau đây sẽ giúp bạn hiểu cách regex được đặt để khớp với para đầu tiên:

Bước 3

Thêm phần sau vào style.css của chủ đề con :

.single-post-top {
	padding: 50px 50px 22px 50px;
	overflow: hidden;
}

.single-post .content-sidebar-wrap {
	background-color: #fff;
	overflow: hidden;
	margin-bottom: 40px;
}

.featured-image-single img {
	vertical-align: top;
}

@media only screen and (max-width: 800px) {

	.single-post-top {
		padding: 0;
	}

	.featured-image-single {
		margin-bottom: 28px;
	}

}