ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する

ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。
しかしループ出力している場合、HTMLとして好きなタイミングで区切り線を挟むことはできませんがWP_Queryなどのループに一手間加えるだけで任意の個数ごとに区切り線を追加することができます。

a%ef%bc%92

ソースコード

 $paged ,
'post_type'   => 'post' , 
'posts_per_page' => -1
) ); ?>

have_posts() ):  while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
内容

//4こずつの時はrow_countを4で割る(4で割ったあまりがゼロのときだけ下線追加)

ポイントは、row_countという変数を用意して出力したコンテンツの数を数えていくこと。そして、4個ずつの場合、4番目の次、8番目の次にhrタグを挟み込みます。
4nという考え方もよいと思いますが、となるとそれとは別にもう一つnの変数を使用しないといけないので、今回は%で行いました。

横線だけではなく画像や文字なども定期的なタイミングで追加できると思いますので機会があれば使ってやってください。

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

bsfvgs1s

201610/6

WordPressの記事・固定ページを親ごとに出力する。

投稿・カスタム投稿・固定ページのループ出力について WordPressではquery_postsやWP_Queryなどのループを使うとペー…

20160801185626

20168/1

WordPressのtitleタグのデザインを変更する

WordPressの見出しに工夫を加える WordPressは用意されたテーマを使うにしろ、独自テーマを使うにしろ、共通したページのレイア…

160721_eye

『WP ULike』の見方

『WP ULike』の確認方法 前回のWordPressの独自のいいね機能『WP ULike』の続きで、もらったいいねに対するその数値の確…

ページ上部へ戻る