「かっこいい・かわいい・おしゃれ」が大好きな1990年生まれ、神奈川県出身。
初めてWordPressのデザインをしたわけですが、凄くやりたかったのが記事一覧表示、いわいるindex.phpにおいて、一覧を同じデザインで表示するのではなく、最新順にそれぞれデザインをレスポンシブルに変更する方法です。
それが上手く書けたので、今日はその方法を紹介したいと思います。
前にgori.meの@planetofgoriさんに記事一覧途中にAdsenseコードを入れる方法を聞いた時に、記事を書いて説明してくれました。
WordPressの記事一覧ページで特定の記事の下にAdsense広告を入れる方法 | gori.me
これのおかげで、今回のデザインが出来ました!
これを応用する事で、レスポンシブルにデザインを変更出来ます。まぁCSSとかに慣れてる人はもう大体はわかったでしょう。
ようは、カウントで記事ごとに番号が決められます。なので、条件分岐(if文)で、そのカウント番号の時にclass属性を切り替えてあげてCSSにて、それぞれデザインを変えてあげればいいわけです。
僕が書いたコードを例に説明します。書き方はThemeで異なるので僕のをただ単にコピーしても出来ないので注意!書き方を真似してくださいね(*^_^*)
<?php $count = 1; ?><!--カウントを1に設定--> <?php if(have_posts()): while(have_posts()): the_post(); ?><!--記事のループ--> <!--postはサムネイル,タイトル、日付、抜粋をまとめたもの--> <?php if ($count == 1) { echo '<div class="post1">';<!--カウントが1の時にclass属性を指定--> }else if ($count == 2) { echo '<div class="post2">';<!--カウントが2の時にclass属性を指定--> }else if ($count == 3){ echo '<div class="post3">';<!--カウントが3の時にclass属性を指定--> }else if ($count == 4){ echo '<div class="post4">';<!--カウントが4の時にclass属性を指定--> }else echo'<div class="post">';<!--カウントが5以上の時にclass属性を指定--> ?> <a href="<?php the_permalink(); ?>"><!--サムネイルのリンク--> <?php if ($count == 1) { the_post_thumbnail();<!--カウントが1の時のサムネイルの大きさを指定--> }else if ($count == 2) { the_post_thumbnail();<!--カウントが2の時のサムネイルの大きさを指定--> }else if ($count == 3 || $count == 4){ the_post_thumbnail(medium);<!--カウントが3または4の時のサムネイルの大きさを指定--> }else the_post_thumbnail(array(150,150));<!--カウントが5以上の時のサムネイルの大きさを指定--> ?> </a><!--endサムネイルのリンク--> <!--post-boxはタイトル日付抜粋をまとめたもの--> <?php if ($count == 1) { echo '<div class="post-box1">';<!--カウントが1の時のclassを指定--> }else if ($count == 2) { echo '<div class="post-box2">';<!--カウントが2の時のclassを指定--> }else if ($count == 3) { echo '<div class="post-box3">';<!--カウントが3の時のclassを指定--> }else if ($count == 4) { echo '<div class="post-box4">';<!--カウントが4の時のclassを指定--> }else echo '<div class="post-box">';<!--カウントが5以上の時のclassを指定--> ?> <div class="index-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> <div class="index-date"><?php the_time('F d , Y'); ?></div> <div class="exp"><?php the_excerpt(); ?></div> </div><!--end post-box--> </div><!--end post--> <?php if ($count == 4) : ?> <!--カウント4のときにAdsenseコードを入力--> <?php endif; $count++; ?><!--end Adsense。カウントを加算--> <?php endwhile; endif; ?><!--end記事のループ-->
カウントが大きくなることに、別々のclassを出力させてあげる事でCSSにて別のデザインを反映する事が出来ます。
最新の記事だけに、この表示方法を適用したいのですが、このままだと2ページ目以降(exp : http://xxx.com/page/2)でも同様の表示になってしまいます。これを回避するためにWordPressの条件分岐関数である is_paged() を使います。
これは2ページ目以降の場合という条件を反映してくれます。最初のカウント直下に以下のコードを書き加えます。
<?php $count = 1; ?> <?php if(is_paged()){ $count = 1001;<!--2ページ目以降の場合にカウントを1001にする--> }?>
これを加える事で、2ページ目以降はカウントのループが1001からのループになります。(1001じゃ少ない人は10001にでもしてくださいw)
また、Goriさんの記事途中にAdsenseコードを挿入する方法を使う場合には、
<?php if ($count == 4 || $count == 1003 ) : ?> <!--カウント4または1003のときにAdsenseコードを入力--> <?php endif; $count++; ?><!--end Adsense。カウントを加算-->
これにより2ページ目以降でカウントを1001〜にしても、1003でAdsenseコードを出力してくれます。
2ページ目以降は、解決しましたがカテゴリーページやアーカイブページを別途用意していない場合はindex.phpを読み込んでしまうので、カウントが1からのループになってしまいますので、classが適用されてしまいます。
これを解決するには2つの方法があります。
1つ目は、別途category.phpやarchive.phpやsearch.phpなどを用意する方法。
2つ目は、ループを1001からに指定してあげる方法。これはさっきis_paged()で2ページ目以降の場合の対処法と同じ方法です。
<?php $count = 1; ?> <?php if(is_paged() || is_category() || is_archive() || is_search() ){ $count = 1001;<!--2ページ目以降、カテゴリー、アーカイブ、サーチページの場合にカウントを1001にする--> }?>
これを加える事で、カテゴリーページ、アーカイブページ、サーチページでも1001からのループになります。
個人的には、カテゴリーページなどは別途phpファイルを用意してあげた方が、デザインを修正するときにわかりやすいかと思います。index.phpで一元管理した方がデザインを大幅に変更する場合に便利ですが、慣れていない人は別々にした方がいいでしょう。
<?php $count = 1; ?><!--カウントを1に設定--> <?php if(is_paged() || is_category() || is_archive() || is_search() ){ $count = 1001;<!--2ページ目以降、カテゴリー、アーカイブ、サーチページの場合にカウントを1001にする--> }?> <?php if(have_posts()): while(have_posts()): the_post(); ?><!--記事のループ--> <!--postはサムネイル,タイトル、日付、抜粋をまとめたもの--> <?php if ($count == 1) { echo '<div class="post1">';<!--カウントが1の時にclass属性を指定--> }else if ($count == 2) { echo '<div class="post2">';<!--カウントが2の時にclass属性を指定--> }else if ($count == 3){ echo '<div class="post3">';<!--カウントが3の時にclass属性を指定--> }else if ($count == 4){ echo '<div class="post4">';<!--カウントが4の時にclass属性を指定--> }else echo'<div class="post">';<!--カウントが5以上の時にclass属性を指定--> ?> <a href="<?php the_permalink(); ?>"><!--サムネイルのリンク--> <?php if ($count == 1) { the_post_thumbnail();<!--カウントが1の時のサムネイルの大きさを指定--> }else if ($count == 2) { the_post_thumbnail();<!--カウントが2の時のサムネイルの大きさを指定--> }else if ($count == 3 || $count == 4){ the_post_thumbnail(medium);<!--カウントが3または4の時のサムネイルの大きさを指定--> }else the_post_thumbnail(array(150,150));<!--カウントが5以上の時のサムネイルの大きさを指定--> ?> </a><!--endサムネイルのリンク--> <!--post-boxはタイトル日付抜粋をまとめたもの--> <?php if ($count == 1) { echo '<div class="post-box1">';<!--カウントが1の時のclassを指定--> }else if ($count == 2) { echo '<div class="post-box2">';<!--カウントが2の時のclassを指定--> }else if ($count == 3) { echo '<div class="post-box3">';<!--カウントが3の時のclassを指定--> }else if ($count == 4) { echo '<div class="post-box4">';<!--カウントが4の時のclassを指定--> }else echo '<div class="post-box">';<!--カウントが5以上の時のclassを指定--> ?> <div class="index-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> <div class="index-date"><?php the_time('F d , Y'); ?></div> <div class="exp"><?php the_excerpt(); ?></div> </div><!--end post-box--> </div><!--end post--> <?php if ($count == 4 || $count == 1004) : ?> <!--カウント4のときにAdsenseコードを入力--> <?php endif; $count++; ?><!--end Adsense。カウントを加算--> <?php endwhile; endif; ?><!--end記事のループ-->
このようになります。
プログラミングに慣れてない方は難しいかもしれないですが、これで記事一覧ページの最初の最新のページだけにおいて、レスポンシブルなデザインにする事が出来ました\(^o^)/簡単なphpの書き方ですが、目的のデザインに出来たことが非常に嬉しいです\(^o^)/
多分、自作テーマじゃない人は、これを反映させるの難しいと思うので、やりたいと思った人は是非とも自作テーマに挑んでみてはいかがですか?
CSSの書き方がわかってくれば、この本の通りに書けば思った通りのデザインに出来ますよ!
参考:条件分岐タグ – WordPress Codex 日本語版
参考:WordPressの記事一覧ページで特定の記事の下にAdsense広告を入れる方法 | gori.me
参考:WordPress ::: Webデザインレシピ