Skip to content

Instantly share code, notes, and snippets.

@gatespace
Last active February 10, 2017 03:52
Show Gist options
  • Select an option

  • Save gatespace/fc05853d2b9c52fe96a3bfbb00406417 to your computer and use it in GitHub Desktop.

Select an option

Save gatespace/fc05853d2b9c52fe96a3bfbb00406417 to your computer and use it in GitHub Desktop.
WordPress 投稿の前後記事へのリンクにアイキャッチ画像を使う ref: http://qiita.com/gatespace/items/34b9c71378bbfc20b6f0
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
display: block;
color: white;
background: #353c3f;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
opacity: 0.9;
}
.post-navigation .nav-previous .link-text,
.post-navigation .nav-next .link-text {
padding: 20px;
display: block;
rgba(0, 0, 0, 0.5);
}
<?php
if ( ! function_exists( 'my_post_navigation' ) ) :
/**
* Display navigation to next/previous set of posts when applicable.
*/
function my_post_navigation() {
$post_nav_html = '';
// ダミー画像用意しておく
$prev_post_img = get_template_directory_uri() . '/images/dummy.png';
$next_post_img = get_template_directory_uri() . '/images/dummy.png';
$prev_post = get_adjacent_post( false, '', true );
if ( is_a( $prev_post, 'WP_Post' ) ) {
if ( has_post_thumbnail( $prev_post->ID ) ) {
$prev_post_img = wp_get_attachment_image_src( get_post_thumbnail_id( $prev_post->ID ), 'large' );
$prev_post_img = $prev_post_img[0];
}
$post_nav_html .= '<div class="nav-previous">' . "\n";
$post_nav_html .= '<a href="' . get_permalink( $prev_post->ID ) . '" rel="prev" style="background-image:url(' . $prev_post_img . ')"><span class="link-text"><span class="adjacent-text">Previous</span><br>' . get_the_title( $prev_post->ID ) . '</span></a>';
$post_nav_html .= '</div>' . "\n";
}
$next_post = get_adjacent_post( false, '', false );
if ( is_a( $next_post, 'WP_Post' ) ) {
if ( has_post_thumbnail( $next_post->ID ) ) {
$next_post_img = wp_get_attachment_image_src( get_post_thumbnail_id( $next_post->ID ), 'large' );
$next_post_img = $next_post_img[0];
}
$post_nav_html .= '<div class="nav-previous">' . "\n";
$post_nav_html .= '<a href="' . get_permalink( $next_post->ID ) . '" rel="prev" style="background-image:url(' . $next_post_img . ')"><span class="link-text"><span class="adjacent-text">Next</span><br>' . get_the_title( $next_post->ID ) . '</a></span>';
$post_nav_html .= '</div>' . "\n";
}
if ( ! empty( $post_nav_html ) ) :
?>
<nav class="navigation post-navigation" role="navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Post navigation', 'mytheme' ); ?></h2>
<div class="nav-links">
<?php echo $post_nav_html; ?>
</div><!-- .links -->
</nav><!-- .navigation -->
<?php
endif;
}
endif;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment