wordpress ループ外のタグ変更

初めまして。
ワードプレスの記事ループで、ループ内の○○番目のタグ/classを変更などはググれば見つかるのですが、
ループ外のタグやclassを変更する方法がわかりません。

具体的にやりたい事としては

1件目の記事の時は<ul class="a">
2件目の記事の時は<ul class="b"> ※class="a"からclass="b"に切り替わる
3件目以降は<ul> ※class="b"からclassなし切り替わる

イメージとしては以下のような形ですが、どのようにプログラムを書けばよいのかわかりません。

<?php if(have_posts()): ?>
<?php 
$counter++;
if ($counter <= 1){
echo '<ul class="a">';
}elseif($counter <= 2){
echo '<ul class="b">';
}else{
echo '<ul>';
}
while(have_posts()): the_post(); ?>
<li></li>
<?php endwhile; ?>
<?php endif; ?>
</ul>

どなたか正しいコードをご存じであれば教えて頂けませんでしょうか。
お手数おかけしますがよろしくお願い致します。

以下補足説明になります。

ループの中と外は以下のようなイメージになります。

<!-- ループの外 -->
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<!-- ループの中 -->
<?php endwhile; ?>
<?php endif; ?>
<!-- ループの外 -->

ループの中は当然ながら記事などの繰り返しになり、ループの外は<div>などで囲ってstaticなものとなります。そのループの外にある<div>を○○件目の時にclassを付与したいという事です。

例えば記事のループ処理で<ul></ul>タグなどを使用した場合、通常<ul></ul>は固定された状態となります。今回は<ul>を○○件目の時、class=""を付ける、などとしたいです。

<ul>(←1件目の時<ul class="a">,2件目の時<ul class="b">に切り替え,3件目以降<ul>に切り替え) <li></li> </ul>

以下のように並ぶのではなく、<ul>だけを切り替えたいという事です。

<ul class="a">
<li></li>
</ul>

<ul class="b">
<li></li>
</ul>

<ul>
<li></li>
</ul>

上手く説明できず申し訳ございません。

退会済みユーザー

2016/09/09 07:44

「ループ外のタグやclass」を変更したいということですが、ループ外というのは具体的にどういうものをさしているのでしょうか。もう少し詳しい情報やイメージを補足していただけると助かります。

退会済みユーザー

2016/09/09 08:01

出力されるHTMLコードのイメージがあるのであれば、それも書いていただければ。

退会済みユーザー

2016/09/09 08:28

できれば情報は、質問の本文の方に追記していただけますか？

退会済みユーザー

2016/09/09 08:44

アーカイブページ1ページにつき、投稿記事を1件ずつ表示したいということですか？

kei344

2016/09/09 08:57 編集

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「以下のように並ぶのではなく」ではないやりたいほうもHTMLで追記ください。

hiroakindo

2016/09/09 09:12

>mizさん 1ページにつき、12件を想定しています。 >kei344さん失礼しました。条件分岐でタグを切り替えたいという希望ですので、htmlだけで伝えるのが難しく、どう説明すればという感じですので、一旦この質問を締めたいと思います。改めて質問させて頂きます。ありがとうございました。

行動規範の内容に同意します

回答2件

PHP
1<?php 
2$counter = 0;
3if ( have_posts() ): while( have_posts() ): the_post();
4	$counter++;
5	if ( $counter === 1 ){
6		echo '<ul class="a">';
7	} elseif( $counter === 2 ) {
8		echo '</ul><ul class="b">';
9	} elseif( $counter === 3 ) {
10		echo '</ul><ul>';
11	} ?>
12<li></li>
13<?php endwhile; ?>
14</ul>
15<?php endif; ?>

追記：

PHP
1<?php 
2$counter = 1;
3$counter_local = 1;
4if ( have_posts() ): while( have_posts() ): the_post();
5	if ( $counter === 1 ){
6		echo '<ul class="a">';
7		$counter++;
8	} elseif ( $counter === 2 ) {
9		if ( $counter_local === 1 ) {
10			echo '</ul><ul class="b">';
11			$counter_local++;
12		} else if ( $counter_local === 2 ) {
13			$counter_local = 1;
14			$counter++;
15		}
16	} elseif ( $counter === 3 ) {
17		if ( $counter_local === 1 ) {
18			echo '</ul><ul>';
19		}
20		$counter++;
21	} ?>
22<li></li>
23<?php endwhile; ?>
24</ul>
25<?php endif; ?>

投稿2016/09/09 09:30

編集2016/09/10 07:10

kei344

総合スコア69458

hiroakindo

2016/09/10 06:50 編集

ご回答有難うございます。上記の場合出力表示は（3件表示とした場合）以下のようになります。 <ul class="a"> <li></li> </ul> <ul class="b"> <li></li> </ul> <ul> <li></li> </ul> 上記の出力ではなく、3件表示とした場合以下のような出力結果を希望しています。 1件目の時 <ul class="a"> <li></li> </ul> 2件目の時 <ul class="b">←class="a"から"b"に変更 <li></li> <li></li> </ul> 3件目の時 <ul>←class="b"からclassなしに変更 <li></li> <li></li> <li></li> </ul> ※本当は1ページに12件表示させます。なので3件目以降は<ul>のままで、<li></li>が12回表示されるイメージです。

kei344

2016/09/10 06:30

<li></li>の中身は記事ではないのですか？

hiroakindo

2016/09/10 06:36

はい、<li></li>の中身は記事です。例えば以下のようにしておきます。 <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

hiroakindo

2016/09/10 06:52

追記頂いたコードで試してみましたが、同じく以下のような表示結果でした。。お時間使って頂きありがとうございます。 <ul class="a"> <li></li> </ul> <ul class="b"> <li></li> </ul> <ul> <li></li> </ul>

kei344

2016/09/10 06:55

修正しておきました。

hiroakindo

2016/09/10 07:04

度々有難うございます。追記を修正頂いたコードを試してみましたが、出力結果は前回と変化なしでした。。

kei344

2016/09/10 07:10 編集

何度も済みませんが、修正したのでもう一度確認してみてください。

hiroakindo

2016/09/10 07:29 編集

こちらこそ何度も恐縮です。修正頂いたコードで、4件投稿した場合、以下の出力表示でした。 <ul class="a"> <li>タイトル</li> </ul> <ul class="b"> <li>タイトル</li> <li>タイトル</li> </ul> <ul> <li>タイトル</li> </ul> 意図が伝えきれていないと反省しております。。例えば「投稿が2件」だけの時は以下のように出力表示が希望です。<ul class="a"></ul>は非表示です。 <ul class="b"> <li>タイトル</li> <li>タイトル</li> </ul> この場合<ul>はclass="a"からclass="b"に変わっており、上記の出力結果のように <ul class="a"> <li>タイトル</li> </ul> は表示しません。 <ul></ul>で囲ったリストを3つ並べたいのではなく、<ul>のクラスだけ1件だけ投稿の時class="a"、2件だけ投稿の時class="b"、3件目以降はclassなし、と<ul>のクラスだけ変化させたいです。

kei344

2016/09/10 07:39

1件のときから必要数まで全部の組み合わせを把握できているのはあなただけなので、あとから「実はn件のときは･･･」と1個ずつ言われても。そういう条件は質問文に全通り追記されるのをお勧めします。やり方は特に変わらないので、ifとかカウント組み合わせてがんばってくださいな。

hiroakindo

2016/09/10 07:47

件数の条件は質問文から首尾一貫していたのですが、、大切なお時間を頂き有難うございました。自分で頑張ってみます！

kei344

2016/09/10 07:58

すいませんが、これがベストアンサーになるのは不適当なので、一度外し、ご自身で解決された際に回答欄にその方法を書き、それをもって解決済にされてはいかがでしょうか。単純に私の理解力がないだけなので、他の回答者が理解し、答えてくれる可能性もありますので、よろしくお願いします。

行動規範の内容に同意します

あ、もしかして表示する投稿全件数の内、1件目、2件目にクラスを付与したいということですか？

PHP
1<?php while(have_posts()): the_post(); ?>
2
3<?php
4	$now_paged = (get_query_var('paged')) ? (get_query_var('paged')-1) : (get_query_var('paged'));
5	$posts_per_page = get_option( 'posts_per_page' );
6	$current_post = $wp_query->current_post;
7	
8	// 記事が全件数のうちの何件目か
9	$counter = $now_paged * $posts_per_page + $current_post + 1;
10
11	if ($counter == 1){ 
12		echo '<ul class="a">'; 
13	}elseif($counter == 2){ 
14		echo '<ul class="b">'; 
15	}else{ 
16		echo '<ul>'; 
17	}
18?>
19
20<li><?php echo $counter; ?></li>
21</ul>
22<?php endwhile; ?>