シンプル・フラットな「前の記事」「次の記事」を実装するカスタマイズ。

Blog

投稿日: 2021.06.05 更新日: 2021.06.05

Seiji Aihara

musician / tax accountant

WordPressでシンプルでフラットなデザインの「前の記事」「次の記事」をプラグインなしで実装するカスタマイズ方法です。

1. functions.phpにコードを追加
2. single.phpで呼び出す
3. cssでデザインを整える

functions.phpにコードを追加

functions.phpに以下のコードを追加します。

※functions.phpを編集するときは、必ずバックアップをとってから行うか、ローカル環境で行ってください。

//////////////////////////////// 前の記事・次の記事/////////////////////////////////////////////////

if ( !function_exists( 'post_adjacent_nav' ) ) :
function post_adjacent_nav() {
$html = '';


$prev_post = get_adjacent_post( false, '', true );
if ( !empty( $prev_post ) ) {
if ( has_post_thumbnail( $prev_post->ID ) ) {
$prev_post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $prev_post->ID ), 'thumbnail' );
$prev_post_image = $prev_post_thumb[0];
} else {
$prev_post_image = get_template_directory_uri() . '/images/no-image.gif';
}


$html .= '<div class="adjacent-nav-prev">' . "\n";
$html .= '<a href="' . get_permalink( $prev_post->ID ) .'">' . "\n";
$html .= '<div class="prev-next-img" style="background-image: url(' . $prev_post_image . ')"><div class="prev-label">Prev</div></div>' . "\n";
$html .= '<div class="adjacent-right">' . "\n";
$html .= '<p class="prev-title">' . get_the_title( $prev_post->ID ) . '</p>' . "\n";
$html .= '</div>' . "\n";
$html .= '</a>' . "\n";
$html .= '</div>' . "\n";
} else {
$html .= '<div class="adjacent-nav-next-none"><a href="' . esc_url( home_url( '/' ) ) . '"><p>back to HOME</p></a></div>' . "\n";
}


$next_post = get_adjacent_post( false, '', false );
if ( !empty( $next_post ) ) {
if ( has_post_thumbnail( $next_post->ID ) ) {
$next_post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $next_post->ID ), 'thumbnail' );
$next_post_image = $next_post_thumb[0];
} else {
$next_post_image = get_template_directory_uri() . '/images/no-image.gif';
}


$html .= '<div class="adjacent-nav-next">' . "\n";
$html .= '<a href="' . get_permalink( $next_post->ID ) .'">' . "\n";
$html .= '<div class="adjacent-right">' . "\n";
$html .= '<p class="next-title">' . get_the_title( $next_post->ID ) . '</p>' . "\n";
$html .= '</div>' . "\n";
$html .= '<div class="prev-next-img" style="background-image: url(' . $next_post_image . ')"><div class="next-label">Next</div></div>' . "\n";
$html .= '</a>' . "\n";
$html .= '</div>' . "\n";
} else {
$html .= '<div class="adjacent-nav-next-none"><a href="' . esc_url( home_url( '/' ) ) . '"><p>back to HOME</p></a></div>' . "\n";
}
?>
<nav class="adjacent-nav">
<?php echo $html; ?>
</nav>
<?php
}
endif;

■【無料】メルマガ「ひとり仕事の自由帳」

■セルフマガジン『好きなことで自由に生きる。』無料送付

single.phpで呼び出す

single.phpに以下のコードを追加することで、記事ページで「前の記事」「次の記事」が表示されます。

次のコードをsingle.phpの「前の記事」「次の記事」を表示させたい部分に追加してください。

<!--前の記事・次の記事 -->
<?php post_adjacent_nav(); ?>

cssでデザインを整える

cssでデザインを整えます。

当ブログのデザインのコードは以下のようになっています。

「前の記事」や「次の記事」がないとき（一番最初と最後の記事）はトップページへのリンクが表示されます。

/* 前の記事・次の記事 */
.prev-label {
margin: .5rem .5rem .5rem .5rem;
font-style: italic;
color: #fff;
font-family: 'Open Sans',"Helvetica Neue","Helvetica",'Avenir','Avenir Next Condensed', sans-serif;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}


.next-label {
margin: .5rem .5rem .5rem .5rem;
text-align: right;
font-style: italic;
color: #fff;
font-family: 'Open Sans',"Helvetica Neue","Helvetica",'Avenir','Avenir Next Condensed', sans-serif;
z-index: 2;
position: absolute;
top: 0;
right: 0;
}


.prev-next-title {
margin: 0 1rem;
font-size: .85rem;
}


.adjacent-right .prev-title,.adjacent-right .next-title {
padding: 0 5%;
font-size: .9rem;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
width: 90%;
text-align: left;
color: #454545;
line-height: 1.7;
overflow: hidden;
text-overflow: ellipsis;
}


.adjacent-nav-next-none {
text-align: center;
display: block;
align-items: center;
}


.adjacent-nav-next-none a {
position: relative;
text-decoration: none;
color: #777777;
font-size: 1.1rem;
transition: ease-in-out, .2s;
height: 100%;
width: 100%;
display: block;
text-align: center;
}


.adjacent-nav-next-none a p {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
font-style: italic;
font-family: 'Open Sans', sans-serif;
text-decoration: none;
color: #777777;
font-size: 1.1rem;
margin: 0;
}


.adjacent-nav-next-none a:hover {
opacity: .6;
cursor: pointer;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}



/* Responsive */
@media ( min-width: 600px) {
.adjacent-nav {
display: flex;
width: 100%;
height: 6rem;
margin-top: 100px;
}
}


.adjacent-nav-prev,.adjacent-nav-next,.adjacent-nav-prev-none,.adjacent-nav-next-none {
width: 49.5%;
height: auto;
display: block;
background-color: #f1f1f1;
}


.adjacent-nav-prev,.adjacent-nav-prev-none {
margin-right: .5%;
}


.adjacent-nav-next,.adjacent-nav-next-none {
margin-left: .5%;
}


.adjacent-nav-prev a,.adjacent-nav-next a {
flex: 1;
height: 100%;
display: flex;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-decoration: none;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
overflow: hidden;
}


.adjacent-nav-prev a:hover,.adjacent-nav-next a:hover {
cursor: pointer;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}


.prev-next-link a,
.prev-next-link a:first-child {
border: none;
}


.next-link {
text-align: right;
}


.adjacent-right {
width: 65%;
position: relative;
}


/* Images */
.prev-next-img {
height: 100%;
width: 35%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
object-fit: cover;
position: relative;
}


.prev-next-img::before {
background: rgba(0,0,0,0.4);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
z-index: 1;
}


@media(max-width: 599px) {
.adjacent-nav {
display: block;
width: 100%;
margin-top: 100px;
}


.adjacent-nav-prev,.adjacent-nav-next,.adjacent-nav-prev-none,.adjacent-nav-next-none {
width: 100%;
height: 6rem;
display: block;
background-color: #f1f1f1;
}


.adjacent-nav-prev,.adjacent-nav-prev-none {
margin-right: 0;
}


.adjacent-nav-next,.adjacent-nav-next-none {
margin-left: 0;
margin-top: 10px;
}


.adjacent-nav-prev a,.adjacent-nav-next a {
flex: 1;
height: 100%;
display: flex;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-decoration: none;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
overflow: hidden;
}


.adjacent-nav-prev a:hover,.adjacent-nav-next a:hover {
cursor: pointer;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}


.prev-next-link a,
.prev-next-link a:first-child {
border: none;
}
.next-link {
text-align: right;
}
}

スマホでは2列、パソコン、タブレットでは1列で表示されます。

マウスホバー時にはカード型に浮き上がります。

フォントはGoogle Fontsを使っていますが、フォントや色はお好みで調整してください。

意外とかぶらないデザインかと思いますので、よろしければ是非。

サービスメニュー

■個別コンサルティング

■【無料】メルマガ「ひとり仕事の自由帳」

■セルフマガジン『好きなことで自由に生きる。』無料送付

Postscript執筆後記

DCコミックの映画が好きで、最近は良く観ています。
ジャスティス・リーグのザック・スナイダーズ・カットって4時間半なんですね…！
気になりますが、見るタイミングを選びそうです。

Something New一日一新

ブログ末尾にサービスメニュー表示
ブログ冒頭にプロフィールアイコン
Scan&Goアプリインストール

＼本を出版しました／

詳しく見る

詳しく見る

＼セルフマガジン無料送付／

詳しく見る

Seiji Aihara / 相原征爾

お金・時間・やりがいなどのバランスを取り人生を楽しむことをサポートする税理士・ミュージシャン・ひとり社長。
ブログ「FAVPRESSO」では生き方・ミニマリズム・ひとり仕事の効率化・音楽・おすすめアイテムなどについて発信。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援・デザインに関するコンサルティング・アコギの初め方サポートなど。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。
名刺、ロゴ、WordPressテーマ、本の表紙から音楽まで自作する、自称超クリエイティブ。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書　【Amazon】著書一覧