ワードプレス便利帳

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. この記事へのトラックバックはありません。

a

201710/24

プラグインを使わない絞り込み機能【未選択時はすべて表示したい】

Wordpressの検索機能について チェックボックスに1つもチェックをいれなかったら 絞り込まずに全部表示。 「絞り込みの入…

av

Welcartのカテゴリー管理・新規登録ページをカスタマイズする

ECサイトをWordpressで運用するときに使われる『Welcart』というプラグイン。 私はこのプラグインが使いにくくて仕方がないです…

gsvgadvg

20172/17

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

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

20161017154512

201610/17

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

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

bsfvgs1s

201610/6

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

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

ページ上部へ戻る