フォーラム

[解決済み] 3つの記事ごとの終わりに <br /> を挿入したい (9 件の投稿)

  1. cubecube
    メンバー
    3 years前の投稿 #

    <?php if (have_posts()):while (have_posts()):the_post();?>
    <div>
    	<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    	<?php the_content();?>
    </div>
    <br />
    <?php endwhile;endif;?>

    上記のコードで記事をループで挿入しているのですが、3つの記事ごとの終わりにBRタグを
    挿入したいのですが可能でしょうか?

    <div>
    	内容
    </div>
    <div>
    	内容
    </div>
    <div>
    	内容
    </div>
    <br />
    <div>
    	内容
    </div>

    みたいな感じにしたいのです。

    何か良い方法はあるでしょうか?
    よろしくお願いします。

    WordPress Version 2.5.1日本語版
    PHP Version 5.2.5
    MySQL Version 5.0.51a
    使用しているブラウザ Firefox3.0

  2. kvex
    メンバー
    3 years前の投稿 #

    提示されているコードには、毎記事ごとにBRが入っていますが、それを3つ毎にしたいのですか?
    それとも、これにさらにBRを入れたいのですか?

    <?php $flag = 0; ?>
    <?php if (have_posts()):while (have_posts()):the_post();?>
    <div>
    	<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    	<?php the_content();?>
    </div>
    <br />
    <?php if($flag++ == 3){?>
    <br />
    <?php $flag = 0;} ?>
    
    <?php endwhile;endif;?>

    これでいけるかな?

  3. cubecube
    メンバー
    3 years前の投稿 #

    まずい説明で申し訳ありませんでした。

    BRタグを3つ毎にしたかったのです。
    3を2にすることで、3つ毎に挿入することが出来ました。
    ありがとうございました。

  4. kvex
    メンバー
    3 years前の投稿 #

    あ、初期値が0だから1個多かったですね。
    とりあえず、解決してなによりです。

  5. IKEDA Yuriko
    常連回答者
    3 years前の投稿 #

    BRタグを3つ毎にしたかったのです。

    希望通りになった、という意味では解決かもしれませんが、これはテーマの作りによっては XHTML 文法違反になりますよ……。そもそも、br 要素で行間を調整しようとしているなら、それはあまり好ましいことではありません。
    やるんだったら、内容を囲む div 要素に 3 つめごとに何かクラスを入れるのがよさそうです。以下のコードは、4番目、7番目、11番目、... の記事に "section" という class を入れます。スタイルシートの方で、section クラスに対して margin-top を適当に設定してやれば、br 要素を使わなくても似たようなことができます。

    <?php
    $count = 0;
    if (have_posts()):while (have_posts()):the_post();
    if ($count >0 && $count % 3 == 0) {
    	$class = ' class="section"';
    } else {
    	$class = '';
    } ?>
    <div<?php echo $class;?>>
    	<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    	<?php the_content();?>
    </div>
    <?php endwhile;endif;?>
  6. IKEDA Yuriko
    常連回答者
    3 years前の投稿 #

    BRタグを3つ毎にしたかったのです。

    希望通りになった、という意味では解決かもしれませんが、これはテーマの作りによっては XHTML 文法違反になりますよ……。そもそも、br 要素で行間を調整しようとしているなら、それはあまり好ましいことではありません。
    やるんだったら、内容を囲む div 要素に 3 つめごとに何かクラスを入れるのがよさそうです。以下のコードは、4番目、7番目、11番目、... の記事に "section" という class を入れます。スタイルシートの方で、section クラスに対して margin-top を適当に設定してやれば、br 要素を使わなくても似たようなことができます。

    <?php
    $count = 0;
    if (have_posts()):while (have_posts()):the_post();
    if ($count >0 && $count % 3 == 0) {
    	$class = ' class="section"';
    } else {
    	$class = '';
    }
    $count++;
    ?>
    <div<?php echo $class;?>>
    	<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    	<?php the_content();?>
    </div>
    <?php endwhile;endif;?>
  7. cubecube
    メンバー
    3 years前の投稿 #

    lilyfan さん、ご意見ありがとうございます。

    行間を調整しようとしているなら、それはあまり好ましいことではありません。

    WordPressの話でなくなってしまうので恐縮ですが

    http://blog.webcreativepark.net/2007/07/26-010338.html

    見た目の参考としては、上記のサンプルページのように Div をブロックレベルに並べようとしています。
    javasctipt でないと高さまでは揃えられませんが
    Div class の CSS に

    float: left;
    width: ***px;

    そして
    lilyfan さんの書いてあるように
    4つの記事ごとに"section" という ID を作り
    その Div だけに

    clear: left;

    をあててあげれば、IE7とIE6以外のブラウザでは Div3つごとにブロック状に並んでくれます。

    色々とIE7とIE6でも出来るように試してみたのですが解決できず
    BRタグを入れるというスマートではない解決しか出来ませんでした。

    XHTML1.1 で制作しており、W3CのXHTMLバリデータで Valid にはなってます。

    CSSだけで解決できれば良いのですが、まだまだ実力が足りないようです。

  8. IKEDA Yuriko
    常連回答者
    3 years前の投稿 #

    色々とIE7とIE6でも出来るように試してみたのですが解決できず
    BRタグを入れるというスマートではない解決しか出来ませんでした。

    これは、各 div ブロックで height 指定してやらないとだめなんですよね。
    WordPress のダッシュボードも、ブロックを並べたデザインを使っていますが、高さがまちまちになって、目も当てられない状況になることがあります ;-)

    XHTML1.1 で制作しており、W3CのXHTMLバリデータで Valid にはなってます。

    全体をくるむ div 要素があれば valid になるので、そのへんはあまり心配していませんでした。「テーマの作りによっては」と限定をかけたのは、そのへんも考慮してです。

    CSSだけで解決できれば良いのですが、まだまだ実力が足りないようです。

    ブラウザーによって実装が多少違うので、このへんはテストを十分にやるしかないでしょう。まあ、「Web 標準に従わない IE が悪い」ことも多いのですが、IE はシェアが多いので無視できないのが辛いところです。
    個人的には、IE6 では問題があっても IE7 で OK ならば「IE6 は非対応」と言い切っていいと思いますが、運営ポリシーによってはそれが無理なこともあるでしょうし。

    # さすがに IE 5.5 以前は無視でいいと思います。セキュリティーパッチも出てないので、事実上使用禁止ですよね。

  9. cubecube
    メンバー
    3 years前の投稿 #

    これは、各 div ブロックで height 指定してやらないとだめなんですよね。

    ユーザーがフォントサイズを変更した場合に無理が出てきてしまいますよね。
    javascript を使えば解決するのですが、あまり使いたくないので難しいところです。

    個人的には、IE6 では問題があっても IE7 で OK ならば「IE6 は非対応」と言い切っていいと思います

    IE6 は非対応にしたいですねー。
    はやく、みんなが IE7 に移行してくれるといいんですけど。
    XML宣言をすると余計やっかいになりますし。

返信

ログイン しなければ投稿できません。

About this Topic

Tags

タグ はまだありません。