続・WordPressの次の記事・前の記事のボタンをアイキャッチ付きにする方法 条件分岐編

先日書いた「WordPressの次の記事・前の記事のボタンをアイキャッチ付きにする方法」では次・前の記事が無い場合やアイキャッチが無い場合等の条件分岐処理まで入れておりませんでしたので、今回は条件分岐処理まで入れてみました。

次・前の記事の有る無しで条件分岐処理する

次・前の記事の有る無しは単純にifで分岐させればOKですね。ちなみに先日の最終コードはこんな感じでした。これを元にifを追加して条件分岐処理を入れていきましょう。

ifを追加して条件分岐

これにifを追加して、次の記事の有る無しで条件分岐させるとこんな感じですね。これで記事が有る場合の処理と無い場合の処理が出来ました!


アイキャッチも有る場合と無い場合とで条件分岐させる

記事毎にアイキャッチをしっかり作る方は分岐させる必要は無いのですが、僕は面倒な時はアイキャッチ画像を用意しないので、アイキャッチの有る無しでも条件分岐を入れておきます。

アイキャッチの有る無しで条件分岐させるにはアイキャッチの画像URLをそのままechoせず、何か変数に入れてからifで分岐させるのでこんな感じですね。後は適当にDIVとか付けてコーディング&スタイリングして頂ければOKです。

参考までにババッと書いた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

コメントはまだありません


※承認後に反映されます