ラガアイテムモール

MENU

  • ファッション
  • インテリア
  • エレクトロニクス
  • レゲエフード
  • イベント情報
  • パトワ語辞典
  • ブログ
ラガアイテムモール > ブログ記事 > フリーランス > コーディング > ワードプレス > コピペだけ!WordPressのページネイション(次へ、前へ)リンクをつけるコード
【1分解決】CSS から Sass に一発変換!
海外YOUTUBEの急上昇を見れるように切り替える方法

コピペだけ!WordPressのページネイション(次へ、前へ)リンクをつけるコード

投稿 : 2020/01/28 | 更新 : 2020/01/29

記事内によくある「次へ」「前へ」のボタン。
ページネーションと呼ぶものらしい。

これをWordPressで実現するのは超簡単!

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

と書くだけで、下記のように表示される。

« previous_post_link
Next Post Title »

僕のサイトではループ内に書かなくても奇跡的に動いていましたが、
本来はループ内に書いて使うらしい。

バリエーション色々

表示テキスト変更

<?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>  

« 前の記事へ
次の記事へ»

同じカテゴリ内の前や次の記事

<?php previous_post_link('« %link', '%title', TRUE); ?>
<?php next_post_link('%link »', '%title'); ?> 

« 同じカテゴリの前の記事タイトル
同じカテゴリの次の記事タイトル»

サムネイル付き

では、では、ここからが本番。

折角ならサムネイル付きでリンクを作成したいと色々探したのですが、上記のタグではどうやら画像を取得することができない様子・・・。

というわけで、下記のように落ち着きました。

【single.php】

※ループ内で動かしています。

    <div class="previous_next_post">

    <?php
    $prevPost = get_previous_post(); //前の記事データを取得
    if($prevPost){
        if ( has_post_thumbnail($prevPost->ID) ) {//前の記事にサムネイルがあったら
        $prevThumbnail = get_the_post_thumbnail( $prevPost->ID, array( 100, 100 ) ); //サムネイル取得
        previous_post_link( '%link', '<figure>' . $prevThumbnail . '</figure><p>%title</p>' ); //リンクと画像を出力
        } else {//サムネイルが無かったら
        echo '<a href="'.get_permalink($prevPost->ID).'"><figure><img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/noimg_300x225.png" /></figure><p>'.get_post( $prevPost->ID )->post_title.'</p></a>';//リンクとノーイメージ画像を出力
        }    
    }else{//前の記事が無かったら
        echo '<div class="none_article_l">&nbsp;</div>';//空っぽのスペースを出力
    }
    ?>
    <?php
    $nextPost = get_next_post(); //次の記事データを取得
    if($nextPost){
        if ( has_post_thumbnail($nextPost->ID) ) {//次の記事にサムネイルがあったら
        $nextThumbnail = get_the_post_thumbnail( $nextPost->ID, array( 100, 100 ) ); //サムネイル取得
        next_post_link( '%link', '<figure>' . $nextThumbnail . '</figure><p>%title</p>' ); //リンクと画像を出力
        }else{//サムネイルが無かったら
        echo '<a href="'.get_permalink($nextPost->ID).'"><figure><img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/noimg_300x225.png" /></figure><p>'.get_post( $nextPost->ID )->post_title.'</p></a>';       
        }
    }else{
        echo '<div class="none_article_r">&nbsp;</div>';//空っぽのスペースを出力
    }            
    ?>
    </div>

上記タグでCSSをそれっぽく設定してもらうと下記のように出力できます。

ページネーション

ページネーション

【参照】
テンプレートタグ/previous post link
テンプレートタグ/next post link

 

ってことで、もしもこの記事が誰かの助けになれたらいいな(←なれるかな?)
本日は、この辺で・・・。

Hasta la vista!
See you.

共有:

  • クリックして Twitter で共有 (新しいウィンドウで開きます)
  • Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)
  • クリックして Pocket でシェア (新しいウィンドウで開きます)
  • クリックして Pinterest で共有 (新しいウィンドウで開きます)
  • クリックして Tumblr で共有 (新しいウィンドウで開きます)

ブログランキングに参加しています!!クリックしてもらえると励みになります。

  • にほんブログ村
  • 人気ブログランキングへ

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RIMおすすめアイテム

メンズ 週間ランキング

1位
【3段階調温 加熱パネル9枚】 電熱ベスト バッテリー付 加熱ベスト 日本製繊維ヒーター ヒーター 電熱ジャケット ベスト 3段階調温 洗える ヒーターベスト 電熱ベスト 2020 usb 電気ベスト 洗える 電熱ウェア 発熱 防寒 M L XL 柔らかい
【3段階調温 加熱パネル9枚】 電熱ベスト バッテリー付 加熱ベスト 日本製繊維ヒーター ヒーター
6,980円(送料無料)
【6ヶ月保証】 日本製繊維ヒーター 電熱ベスト ヒーター 電熱ジャケット バッテリー付 ベスト ヒー
2位
AVIREX 公式通販・オンライン/DEPOT限定 |ミリタリー感溢れるカーキカラーを携え、大人気アウター今年も登場!!エムエーワン リモデル/MA-1 REMODEL(アビレックス アヴィレックス)メンズ 男性
AVIREX 公式通販・オンライン/DEPOT限定 |ミリタリー感溢れるカーキカラーを携え、大人気ア
42,900円(送料無料)
AVIREX/オフィシャルサイトミリタリー アメカジ カジュアル ファッション ブランド アウターフ
3位
【公式】チャンピオン【70%OFFセール】Champion プルオーバースウェットパーカー アクションスタイル(C3-R101)★セール品は商品不備以外 返品交換不可
【公式】チャンピオン【70%OFFセール】Champion プルオーバースウェットパーカー アクショ
3,135円(送料無料)
◆チャンピオン直営店セール◆今なら全品送料無料!
4位
ディッキーズ 874 オリジナル ワークパンツ レングス 30 32 DICKIES ORIGINAL WORK PANTS LENGTH 30・32 メンズ チノパンツ ズボン 長ズボン ボトムス ロング ウェア ストリート シンプル カジュアル アウトドア ワーク 作業服 定番
ディッキーズ 874 オリジナル ワークパンツ レングス 30 32 DICKIES ORIGINA
2,840円(送料別)
型崩れしにくい着心地バツグンのディッキーズの874ワークパンツ!
関連記事
WordPress W Mark
2020年最新版 : WordPressインストール手順 (ロリポップサーバー版)
セキュリティ警告
WordPressメディライブラリで画像がアップロードできない&SSLが混在するエラー発生
Breadcrumb NavXT
Breadcrumb NavXTが優秀すぎる
優秀すぎる!「css 2 sass/scss converter」
【1分解決】CSS から Sass に一発変換!
Jetpack by wordpress_error
【3分解決】WordPress WebSocket エラーを消す方法
【1分解決】CSS から Sass に一発変換!
海外YOUTUBEの急上昇を見れるように切り替える方法


    サイト内検索

人気 ブログ記事

ガンジャって本当はどんなもの?

更新 : 2020/02/18

ガンジャって本当はどんなもの?

  • その他
  • ジャマイカ関連知識
ZION(ザイオン)ってなんだろう?ZIONを調べてみた結果。

更新 : 2020/02/05

ZION(ザイオン)ってなんだろう?ZIONを調べてみた結果。

  • パトワ語
  • ジャマイカ関連知識
ネットで不評の光コラボを使ってますが、我が家は今のところ大丈夫です。笑

更新 : 2020/01/28

ネットで不評の光コラボを使ってますが、我が家は今のところ大丈夫です。笑

  • プライベート
超簡単!!スノーボードにワックスを掛けてみた。

公開 : 2015/10/21

超簡単!!スノーボードにワックスを掛けてみた。

  • リゾートバイト
  • スノーボード
  • エクストリームスポーツ
  • プライベート
5分で分かる。ボブマーリーの生涯

更新 : 2015/09/30

5分で分かる。ボブマーリーの生涯

  • ボブ・マーリー
  • ジャマイカ関連知識

ブログ記事カテゴリー

  • フリーランス (29)
    • デザイン (21)
      • イラストレーター (20)
      • アフターエフェクト (1)
    • コーディング (8)
      • ワードプレス (8)
  • ガジェット (27)
    • ヘッドホン&イヤホン&スピーカー (7)
    • カメラ (5)
      • GoPro (4)
    • その他 (3)
  • ミュージック (43)
    • ワールドミュージック (25)
    • ジャパレゲ (16)
    • HIPHOP (1)
    • その他 (1)
  • イベント情報 (15)
    • 海外イベント (2)
    • 国内イベント (13)
  • エクストリームスポーツ (11)
    • スノーボード (4)
    • スケートボード (5)
    • その他 (2)
  • ファッション (28)
    • レゲエ関連 (11)
    • 靴 (4)
    • ハロウィン (4)
    • その他 (10)
  • ラガ飯 (5)
    • レシピ (4)
    • その他 (1)
  • ジャマイカ関連知識 (19)
    • パトワ語 (3)
    • ボブ・マーリー (6)
    • その他 (10)
  • 海外ネタ (14)
    • 気になるニュース (11)
    • 海外ゴシップ (3)
  • プライベート (34)
    • youtube (2)
    • リゾートバイト (25)

ブログ記事タグ

Asahikawa ramen create video Hokkaido iTunes lavender Ramen Village youtube youtuber うまい話には罠がある かっこいいWEBパーツ これも経験 どうなることやら らーめん村 イラレデータ無料 カスタマーセンター シンプルデザイン シンプルフォームデザイン デザイン ドット ドットデザイン ドットデザインセット ハンバーガーボタンデザイン パワハラきよつけて フォーム フォームパーツ無料 ブラック企業 ベクター ベクター画像無料 マリファナ ユーチューバーへの レゲエシャーク 働く女性 入力する人 初めての 動画編集 北海道 友達と 商用利用可能 女性イラスト 彩の畑 旭川ラーメン 無料 白馬 背景素材 道のり

ブログ記事カテゴリー

  • カテゴリーなし

RIMごあいさつ

RaggaItemMall(ラガアイテムモール)はしがないイラストレーターの独り言サイトです。

MyAccount Twitter

  • 運営者情報
  • プライバシーポリシー
  • イベント情報投稿フォーム
  • お問い合わせ
Copyright © 2021 ラガアイテムモール All Right Reserved.