XeoryBaseに「前の記事」「次の記事」リンクを実装する方法

どうもタスです。

ブログ記事を書くことはとても大事だと思うのですが、外観も大事ですよね。

見た目がカッコ良かったり、可愛いと思えるような、自分好みであればブログライフはさらに充実するはずです。

そこで、今回はデザインのカスタマイズをします。

個別の記事ページ下部に「前の記事」「次の記事」リンクを実装する方法です。

この記事の目次

1 実装するにあたり参考にしたサイト
2 記事どおりにやってみたけど失敗した
3 修正して正常に表示されたことを確認
4 まとめ
5 その他のXeoryBaseカスタマイズ記事

実装するにあたり参考にしたサイト

実装と言っても、一から自分でコーディングしたわけではなく、以下のサイトを参考にさせて頂きました。

Webクリエイターボックス

とっても丁寧に解説されていて、見るだけで勉強になるサイトです。

その中で、「Flexboxを使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装」という記事があるので、この内容をもとに僕のブログに適用してみました。

この記事をもとに実装するので、まずは一読してくださいね。

記事どおりにやってみたけど失敗した

Webクリエイターボックスさんに掲載されているとおり行ったのですが、ちょっと失敗してしまいました。

もしかすると、情報が古いままなのかもしれません。

とはいえ、有益な情報には変わりないので、Webクリエイターボックスさんにはとてもとても感謝しております！

では、まずはWebクリエイターボックスさんで紹介されている内容をお話しします。

style.cssへの適用

まずは、CSSを「style.css」に全適用します。

モバイル用リンク作成
レスポンシブ対応
サムネイル画像入り

※矢印は付けませんでした。今度、SVGに挑戦します。

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━
-- ┃2018-06-15
-- ┃　Flexboxを使ってレスポンシブ対応の「前の記事」
-- ┃　「次の記事」リンクを実装
-- ┗━━━━━━━━━━━━━━━━━━━━━━━━
---------- start*/
/* モバイル用リンクを作成 */
.prev-next-link a {
  border-bottom: 1px #ddd solid;
  display: block;
  text-decoration: none;
  padding: 14px 40px;
  color: #0bd;
}
.prev-next-link a:hover {
  background-color: #f6f6f6;
}
.prev-next-link a:first-child {
  border-top: 1px #ddd solid;
}
.prev-next-label {
  font-size: .825rem;
  color: #000;
  margin-bottom: 10px;
}

/* レスポンシブ対応(大きい画面用) */
@media ( min-width: 600px) {
  .prev-next-link {
    display: flex;
  }
  .prev-next-link a {
    flex: 1;
  }
  .prev-next-link a,
  .prev-next-link a:first-child {
    border: none;
  }
  .next-link {
    text-align: right;
  }
}

/* サムネイル */
.thumb-wrap {
  display: flex;
}
.thumb-wrap p {
  margin: 0 0 0 16px;
}
.thumb-wrap img {
  width: 80px;
  height: 100%;
}
/*-------- end*/

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━

-- ┃2018-06-15

-- ┃　Flexboxを使ってレスポンシブ対応の「前の記事」

-- ┃　「次の記事」リンクを実装

-- ┗━━━━━━━━━━━━━━━━━━━━━━━━

---------- start*/

/* モバイル用リンクを作成 */

.prev-next-link a {

border-bottom: 1px #ddd solid;

display: block;

text-decoration: none;

padding: 14px 40px;

color: #0bd;

}

.prev-next-link a:hover {

background-color: #f6f6f6;

}

.prev-next-link a:first-child {

border-top: 1px #ddd solid;

}

.prev-next-label {

font-size: .825rem;

color: #000;

margin-bottom: 10px;

}

/* レスポンシブ対応(大きい画面用) */

@media ( min-width: 600px) {

.prev-next-link {

display: flex;

}

.prev-next-link a {

flex: 1;

}

.prev-next-link a,

.prev-next-link a:first-child {

border: none;

}

.next-link {

text-align: right;

}

/* サムネイル */

.thumb-wrap {

display: flex;

}

.thumb-wrap p {

margin: 0 0 0 16px;

}

.thumb-wrap img {

width: 80px;

height: 100%;

}

/*-------- end*/

single.phpへの適用

次に、個別の記事ページ下部に「前の記事」「次の記事」リンクを反映します。

僕は記事外に表示したかったので、『</article>』直下に挿入しました（全くカスタマイズしていない状態であれば、95行目にあります）。

<?php
$prevPost = get_adjacent_post(true, '', true); // 前の記事を取得
$nextPost = get_adjacent_post(true, '', false); // 次の記事を取得
$prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(80,80) ); // 前の記事のサムネイル画像を取得
$nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(80,80) ); // 次の記事のサムネイル画像を取得
 
if( $prevPost || $nextPost ){ // 前の記事か次の記事のどちらかが存在しているなら
    echo '<div class="prev-next-link">';
    previous_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', true );
    next_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$nextThumbnail.'<p>%title</p></div>', true );
    echo '</div>';
} ?>

<?php

$prevPost = get_adjacent_post(true, '', true); // 前の記事を取得

$nextPost = get_adjacent_post(true, '', false); // 次の記事を取得

$prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(80,80) ); // 前の記事のサムネイル画像を取得

$nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(80,80) ); // 次の記事のサムネイル画像を取得

if( $prevPost || $nextPost ){ // 前の記事か次の記事のどちらかが存在しているなら

echo '<div class="prev-next-link">';

previous_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', true );

next_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$nextThumbnail.'<p>%title</p></div>', true );

echo '</div>';

} ?>

functions.phpへの適用

次に、テーマ関数ファイルに以下の関数を追加します。

追加位置はどこでも構いません。

add_filter('next_post_link', 'next_post_link_attributes');
add_filter('previous_post_link', 'prev_post_link_attributes');
 
function next_post_link_attributes($output) {
    $injection = 'class="next-link"';
    return str_replace('<a href=', '<a '.$injection.' href=', $output);
}
function prev_post_link_attributes($output) {
    $injection = 'class="prev-link"';
    return str_replace('<a href=', '<a '.$injection.' href=', $output);
}

add_filter('next_post_link', 'next_post_link_attributes');

add_filter('previous_post_link', 'prev_post_link_attributes');

function next_post_link_attributes($output) {

$injection = 'class="next-link"';

return str_replace('<a href=', '<a '.$injection.' href=', $output);

}

function prev_post_link_attributes($output) {

$injection = 'class="prev-link"';

return str_replace('<a href=', '<a '.$injection.' href=', $output);

}

完成したので画面表示で確認する

以下の画像は、「Windows10で外付けHDDを停止させない3つの方法」の記事のページ下部の状態です。

確認したところ、以下の内容を修正するべきと判断しました。

両リンクとも「前のページ」になっている。
前のページと次のページは、同一カテゴリ内の記事に対してリンクが張られている。

簡単に終わるかと思いきや、人生早々上手くは行きません。

修正して正常に表示されたことを確認

ということで、一つずつ修正を行いました。

プログラム経験はあるものの、PHPは触ったことないし、CSSも経験に乏しい状態なので、苦戦しましたね…

でも、頑張ったけどね、うん、頑張った。

1.「前のページ」表記を「次のページ」に修正

これは簡単ですね。

previous_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', true );
next_post_link( '%link', '<p class="prev-next-label">次の記事</p><div class="thumb-wrap">'.$nextThumbnail.'<p>%title</p></div>', true );

1 2	previous_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', true ); next_post_link( '%link', '<p class="prev-next-label">次の記事</p><div class="thumb-wrap">'.$nextThumbnail.'<p>%title</p></div>', true );

2.前のページと次のページをカテゴリ関係なしに移動できるリンクに修正する

これが結構大変でした。

結論としては、single.phpについて以下の修正が必要です。

get_adjacent_post関数に渡すパラメータを修正
previous_post_link関数に渡すパラメータを修正
next_post_link関数に渡すパラメータを修正

参考にしたサイトは、

get_adjacent_post関数に渡すパラメータを修正

関数リファレンス/get adjacent post - WordPress Codex 日本語版

wpdocs.osdn.jp

【WordPress】現在の投稿の隣接する投稿の情報を取得するget_adjacent_post()のあ...

WordPressで現在の投稿の隣接する投稿の情報を取得するget_adjacent_postの使い方を説明します。

ホームページ制作・アプリ開発のハウツーをよ...

previous_post_link関数に渡すパラメータを修正

テンプレートタグ/previous post link - WordPress Codex 日本語版

wpdocs.osdn.jp

WordPressで「前の記事へ」、「次の記事へ」をカスタマイズする方法 - よつば手帖

WordPressのテーマ制作はベースとなるものを自分で作っ…

よつば手帖

になります。

まずは、get_adjacent_post関数に渡すパラメータを修正します。

最初に指定するパラメータを「true」から「false」に変更します。

そうすることで、カテゴリを無視して最新の情報を取得するようになります。

get_adjacent_post(false, '', true); // 前の記事を取得
get_adjacent_post(false, '', false); // 次の記事を取得

1 2	get_adjacent_post(false, '', true); // 前の記事を取得 get_adjacent_post(false, '', false); // 次の記事を取得

次に、previous_post_link関数とnext_post_link関数に渡すパラメータを修正します。

こちらも同様に、最後の指定するパラメータを「true」から「false」に変更することで、カテゴリを無視して最新の情報を取得するようになります。

previous_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', false );
next_post_link( '%link', '<p class="prev-next-label">次の記事</p><div class="thumb-wrap">'.$nextThumbnail.'<p>%title</p></div>', false );

1 2	previous_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', false ); next_post_link( '%link', '<p class="prev-next-label">次の記事</p><div class="thumb-wrap">'.$nextThumbnail.'<p>%title</p></div>', false );