css 标题上的特色图片（页面和帖子）

Posted 2021-05-13

// Register a custom image size for hero image on static Pages and single Posts.
add_image_size( 'page-image', 1600, 400, 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 );

}

<?php

add_action( 'genesis_after_header', 'custom_page_image' );
/**
 * Show featured image (if present) below site header.
 */
function custom_page_image() {
    // if there is no featured image, abort.
    if ( ! has_post_thumbnail() ) {
        return;
    }

    // store entry header's HTML in a variable using output buffering.
    ob_start();
        do_action( 'genesis_entry_header' );
    $entry_header = ob_get_clean();

    // display the image and entry header.
    printf( '<div class="page-image" style="background-image: url(%s)">%s</div>', genesis_get_image( 'format=url&size=page-image' ), $entry_header );
}

add_action( 'genesis_before_entry', 'custom_remove_entry_header' );
/**
 * Remove all actions hooked to entry header (entry title, entry meta etc.) if there is a featured image.
 */
function custom_remove_entry_header() {
    // if there is no featured image, abort.
    if ( ! has_post_thumbnail() ) {
        return;
    }

    // remove entry actions hooked to entry header.
    remove_all_actions( 'genesis_entry_header' );
}

add_filter( 'genesis_post_info', 'custom_post_info_filter' );
/**
 * Replace `[post_author_posts_link]` shortcode with `[post_author_posts_link_outside_loop]` in the post info if there is a featured image.
 *
 * @param  string $post_info Existing post info
 * @return string            Modified post info
 */
function custom_post_info_filter( $post_info ) {
    if ( has_post_thumbnail() ) {
        $post_info = '[post_date] by [post_author_posts_link_outside_loop] [post_comments] [post_edit]';
    }

    return $post_info;
}

<?php

get_template_part( 'template', 'pageimage' );

genesis();

<?php

get_template_part( 'template', 'pageimage' );

genesis();

.page-image {
    padding: 100px 0;
    color: #fff; /* set your desired text color for entry title and entry meta here */
    background-position: center;
    background-size: cover;
}

.page-image .entry-header a {
    color: #fff; /* set your desired text color for links inside entry meta here */
}

.page-image + .site-inner .content {
    padding-top: 0;
}

.page-image .entry-header::after {
    border-bottom: 1px solid #fff; /* change the color here to match the `.page-image .entry-header` color above */
}

@media only screen and (min-width: 801px) {
    .page-image {
        margin-top: 73px;
    }
}

@media only screen and (max-width: 400px) {
    .page-image {
        padding: 60px 5%;
    }
}