続・WordPressの次の記事・前の記事のボタンをアイキャッチ付きにする方法 条件分岐編
先日書いた「WordPressの次の記事・前の記事のボタンをアイキャッチ付きにする方法」では次・前の記事が無い場合やアイキャッチが無い場合等の条件分岐処理まで入れておりませんでしたので、今回は条件分岐処理まで入れてみました。
目次
次・前の記事の有る無しで条件分岐処理する
次・前の記事の有る無しは単純にifで分岐させればOKですね。ちなみに先日の最終コードはこんな感じでした。これを元にifを追加して条件分岐処理を入れていきましょう。
ifを追加して条件分岐
これにifを追加して、次の記事の有る無しで条件分岐させるとこんな感じですね。これで記事が有る場合の処理と無い場合の処理が出来ました！
//ifを追加
//次の記事が有る場合
post_title ;?>
);?>)
//次の記事が無い場合
最新の記事だよ！
//ifを追加
//前の記事が有る場合
post_title ;?>
);?>)
//前の記事が無い場合
最後の記事だよ！
アイキャッチも有る場合と無い場合とで条件分岐させる
記事毎にアイキャッチをしっかり作る方は分岐させる必要は無いのですが、僕は面倒な時はアイキャッチ画像を用意しないので、アイキャッチの有る無しでも条件分岐を入れておきます。
アイキャッチの有る無しで条件分岐させるにはアイキャッチの画像URLをそのままechoせず、何か変数に入れてからifで分岐させるのでこんな感じですね。後は適当にDIVとか付けてコーディング＆スタイリングして頂ければOKです。
//ifを追加
//次の記事が有る場合
post_title ;?>
ID));?>
//ifを追加
//アイキャッチが有る場合
; ?>/images/no-thumb.jpg)
//代わりNOPHOTO的な画像
//次の記事が無い場合
最新の記事だよ！
//ifを追加
//前の記事が有る場合
post_title ;?>
ID));?>
//ifを追加
//アイキャッチが有る場合
//代わりNOPHOTO的な画像
//前の記事が無い場合
最後の記事だよ！
参考までにババッと書いたHTMLxCSS
簡単にHTMLとCSSで書いてみました。が、ちょっと微妙かもしれないので使う際は修正が必要かも。まぁ参考までに使ってみてください。
※画像が無い場合のno-thumb.jpgはご自身でご用意くださいね〜
//HTML
//CSS
#pagenavi {
width: 100%;
}
#pagenavi img {
width: 40%;
height: auto;
}
#pagenavi .endtitle {
font-size: 10px;
line-height: 40px;
text-align: center;
}
#pagenavi .nextpost {
width: 45%;
display: block;
float: right;
padding: 10px;
}
#pagenavi .nextpost .nexttitle {
width: 53%;
font-size: 10px;
float: left;
}
#pagenavi .nextpost img {
float: right;
margin-left: 15px;
}
#pagenavi .prevpost {
width: 45%;
display: block;
float: left;
padding: 10px;
}
#pagenavi .prevpost .prevtitle {
width: 53%;
font-size: 10px;
float: right;
}
#pagenavi .prevpost img {
float: left;
margin-right: 15px;
}
#pagenavi .saishin {
width: 50%;
float: right;
}
#pagenavi .saigo {
width: 50%;
float: left;
}
.clearfix {
width: 100%;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
SPONCERD
コメントはまだありません