Q&A
「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」をお書きください。また、出力したいHTMLの構造も追記願えますか？
Wordpressで自分用にテーマを作成しています。
記事を二列に表示したいのですが、うまくいきません。
以下の通り偶数番の記事と奇数番号の記事で分け、CSSでfloatなどで調整したのですが
うまく並びませんでした。。
このコードの改善方法、あるいはより良い方法などありましたら
ぜひ教えてください。
CSSも載せます。
css
1/* 記事 */ 2div#odd, div#even { 3 border: solid 1px #C71585; 4 padding:15px; 5 margin-bottom: 20px; 6 background-color: #C71585; 7 color: #ffffff; 8 width: 515px; 9 float: left; 10} 11 12div#odd h2, div#even h2{ 13 background-color: #C71585; 14 font-size:0.875em; 15 padding:10px; 16 margin: 0; 17 border: solid 1px #ffffff; 18} 19 /* background-image: url(titlebar.png); タイトルバーに写真を入れる */ 20div#odd h2 a, div#even h2 a { 21 text-decoration: none; 22 color: #ffffff; 23} 24 25div#even p,div#odd p { 26 font-size: 0.875em; 27 line-height: 1.6; 28 margin-top: 10px; 29} 30p.postinfo { 31 color: #FFFFFF; 32 text-align:right; 33 margin: 20px 0 0; 34 clear: both; 35} 36p.postinfo a { 37 color: #FFFFFF; 38} 39p.postinfo a:hover { 40 color: #000000; 41} 42p.readmore { 43 color: #000000; 44 text-align: left; 45 46}
--------追記--------
「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」
・何をしたときに
記事を二列に分けるために、is_odd_post()とis_even_post()を使って偶数番の記事と奇数番号の記事で分け、CSSでfloatなどで調整した
・どうなると思って
偶数記事 | 奇数記事
偶数記事 | 奇数記事
と表示される
・どうなったのか
偶数記事 |
偶数記事 | 奇数記事
と表示された
html
1<?php get_header(); ?> 2<head> 3 <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/style.css"> <!-- CSS Stylesheet --> 4</head> 5 6<!-- コンテンツ --> 7<!-- odd number --> 8<?php if(have_posts()): while(have_posts()): the_post(); ?> 9<?php if (is_odd_post()): ?> 10 <div id="odd"> 11 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 12 <p class="readmore"> 13 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 14 <?php echo the_break_excerpt() ?> 15 </p> 16 <p class="postinfo" > 17 <?php echo get_the_date(); ?> 18 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 19 </p> 20 </div> 21 <?php else: ?> 22 <div id="even"> 23 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 24 <p class="readmore"> 25 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 26 <?php echo the_break_excerpt() ?> 27 </p> 28 <p class="postinfo" > 29 <?php echo get_the_date(); ?> 30 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 31 </p> 32 </div> 33<?php endif; ?> 34 <?php endwhile; endif; ?> 35 <!-- end of odd number --> 36 <!-- even number --> 37 <?php if(have_posts()): while(have_posts()): the_post(); ?> 38<?php if (is_even_post()): ?> 39<div id="even"> 40 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 41 <p class="readmore"> 42 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 43 <?php echo the_break_excerpt() ?> 44 </p> 45 <p class="postinfo" > 46 <?php echo get_the_date(); ?> 47 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 48 </p> 49 </div> 50 <?php else: ?> 51 <div id="odd"> 52 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 53 <p class="readmore"> 54 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 55 <?php echo the_break_excerpt() ?> 56 </p> 57 <p class="postinfo" > 58 <?php echo get_the_date(); ?> 59 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 60 </p> 61 </div> 62<?php endif; ?> 63 <?php endwhile; endif; ?> 64 <!-- end of even number --> 65 66<!--- End of コンテンツ ---> 67 68<!-- サイドバー --> 69<div id="sidebar"> 70 <ul> 71 <?php dynamic_sidebar(); ?> 72 </ul> 73</div> 74 75<?php get_footer(); ?> 76</html> 77
「出力したいHTMLの構造」はPHPのソースではなく、それを実行して出力されたHTMLのことなのですが、追記可能ですか？また、「どうなったのか」の奇数記事は2つ出るはずが1つ減ったということでしょうか。
HTMLの構造を載せようと前のをもう一度試したら、なぜかしっかり動きました！！協力してくださり、本当にありがとうございます。
回答2件
0
以下の通りでできました！協力してくださった2名様、どうもありがどうございました！
php
1 <?php if(have_posts()): while(have_posts()): the_post(); ?> 2 <?php if (is_odd_post()): ?> 3 <div id="odd"> 4 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 5 <p class="readmore"> 6 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 7 <?php echo the_break_excerpt() ?> 8 </p> 9 <p class="postinfo" > 10 <?php echo get_the_date(); ?> 11 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 12 </p> 13 </div> 14 <?php else: ?> 15 <div id="even"> 16 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 17 <p class="readmore"> 18 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 19 <?php echo the_break_excerpt() ?> 20 </p> 21 <p class="postinfo" > 22 <?php echo get_the_date(); ?> 23 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 24 </p> 25 </div> 26 <?php endif; ?> 27 <?php endwhile; endif; ?> 28 <!-- end of odd number -->
投稿2016/05/29 19:39
総合スコア15
0
ベストアンサー
- まず、同じIDを持った要素は2つ以上作らないでください。作るならclassにしてください。
- is_odd_postやis_even_postはfunctions.phpで定義してますか？定義してないなら定義してください。
- メインループを巻き戻さないと、2回目以降のループは回りません。なので、rewind_posts関数を呼び出さないとうまくいきません。
- あと、floatはフロートレイヤーにするだけなので、きちんと面倒をみないといけないでしょう。
is_odd_postやis_even_postをfunctions.phpで定義した上で考えると、だいたいこんな感じになると思います。
php
1<div class="clearfix"> 2<?php 3if(have_posts()) { 4 ?><div id="odd"><?php 5 while(have_posts()) { 6 the_post(); 7 if(is_odd_post()) { 8 // 奇数投稿時の出力 9 } 10 } 11 ?></div><?php 12 rewind_posts(); 13 ?><div id="even"><?php 14 while(have_posts()) { 15 the_post(); 16 if(is_even_post()) { 17 // 偶数投稿時の出力 18 } 19 } 20 ?></div><?php 21} 22?></div>
なお、clearfixのCSSはこんな感じになります。
CSS
1.clearfix { 2 clear: both; 3}
投稿2016/05/29 13:26
総合スコア73
あなたの回答
tips
プレビュー
