アーカイブページ(カテゴリーページ)で並び替えを実現したいと思いますのでカスタム投稿タイプ用のアーカイブテンプレートを作成します。
アーカイブテンプレートの作成
archive.phpをコピーしてarchive-camp.phpに名前を変更します。
基本的なサイト構造は維持して作りますので以下のように変更しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php if (have_posts()) : ?> <div class="home_area"> <section> <div class="entry_box"> <table border> <tr> <td>施設名</td> <td>都道府県</td> <td>AC付きサイト価格</td> <td>テントサイト価格</td> </tr> <?php while (have_posts()) : the_post(); ?> <tr> <td><?php echo the_title(); ?></td> <td><?php echo get_post_meta($post->ID , 'c_pref' ,true); ?></td> <td align="right"><?php echo get_post_meta($post->ID , 'c_autoprice' ,true); ?></td> <td align="right"><?php echo get_post_meta($post->ID , 'c_tentprice' ,true); ?></td> </tr> <?php endwhile; ?> </table> </div> <div class="clear"></div> </section> </div> <?php else: ?> <p>記事がありません</p> <?php endif; ?> |
これが実際にはこう表示されます。
とここまで進めて思ったのですが、本来はこのあと並び替えボタンを用意してGETパラメータを使って並び替えを実行しようと思ってたのですが、よく考えたらこの時点でjQueryを使ってソートテーブル化してしまえばいいことに気づきました…
Table Sorterの導入
プラグイン検索からTable Sorterを導入しました。
コードをテーブルソーター用に変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php if (have_posts()) : ?> <div class="home_area"> <section> <div class="entry_box"> <table width="100%" border id="myTable" class="tablesorter"> <thead> <tr> <th class="sortless">施設名</th> <th>都道府県</th> <th>AC付きサイト価格</th> <th>テントサイト価格</th> </tr> </thead> <tbody> <?php while (have_posts()) : the_post(); ?> <tr> <td><?php echo the_title(); ?></td> <td><?php echo get_post_meta($post->ID , 'c_pref' ,true); ?></td> <td align="right"><?php echo get_post_meta($post->ID , 'c_autoprice' ,true); ?></td> <td align="right"><?php echo get_post_meta($post->ID , 'c_tentprice' ,true); ?></td> </tr> <?php endwhile; ?> </tbody> </table> </div> <div class="clear"></div> </section> </div> <?php else: ?> <p>記事がありません</p> <?php endif; ?> |
並べ替えはとりあえずこれでよしとしましょう。
wordpressで価格比較サイトを作ろう
第1回 ローカルテスト環境の構築
第2回 投稿ページの作成
第3回 並べ替え可能なアーカイブページの作成
第4回 カスタムフィールドの項目で記事を絞り込む
第5回 カスタムフィールドの値を表示する
第6回 口コミの追加
最終回 テスト環境から本番環境へ移行
スポンサーサイト
アフィリエイトはエーハチネット
ドメイン取るならお名前.com
