4⃣ pege.php/sngle.php/page-service.php部分‐オリジナルをつくる編‐
2016/04/04
❼ pege.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 28 29 30 31 32 33 34 35 36 37 |
<?php get_header(); ?> <div id="contents"> <div id="main"> <section> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_content(); ?> <?php endwhile; else: ?> <p>投稿は記事はありません。</p> <?php endif;?> </dl> </section> </div> <!--/main--> <?php get_sidebar(); ?> <?php get_footer(); ?> |
メニューの固定ページができました。
❽ sngle.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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<?php get_header(); ?> <div id="contents"> <div id="main"> <section> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_content(); ?> <?php endwhile; else: ?> <p>投稿は記事はありません。</p> <?php endif;?> </dl> </section> <!-- ▼前か次のページが存在する場合のみ表示する▼ --> <?php if( get_previous_post() || get_next_post() ){ ?> <!-- ページャー --> <div style="width:100%"> <?php if( get_previous_post() ): ?> <div style="float:left"> <?php previous_post_link('%link', '≪ %title'); ?> </div> <?php endif; if( get_next_post() ): ?> <div style="float:right"> <?php next_post_link('%link', '%title ≫'); ?> </div> <?php endif; ?> </div> <!-- /ページャー --> <?php } ?> <!-- ▲前か次のページが存在する場合のみ表示する▲ --> </div> <!--/main--> <?php get_sidebar(); ?> <?php get_footer(); ?> |
投稿ページができました。
❾ page-service.php部分の書き換え‐オリジナルをつくる編‐
固定ページに投稿ページを作る。
今回は…プラグインを使います。custom post type UI
記事が投稿できるようになりました。
pege.phpを複製してpage-service.phpを作ります。
service.html部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<section class="list"> <a href="service2.html"> <h4>サービス名</h4> <figure><img src="images/sample1.jpg" width="200" height="133" alt="" /></figure> <table> <tr> <th>商品名</th> <td>製品A</td> <th>価格</th> <td>2,300円</td> </tr> <tr> <th>サイズ</th> <td>50kg</td> <th>特徴</th> <td>製品Aの特長を書きます。</td> </tr> </table> <p>製品Bの説明をここに入れます。</p> </a> </section> |
page-service.php部分に下記の読みだす記述を書き加えます。
|
1 2 3 4 5 |
<?php $loop = new WP_Query(array("post_type" =>"service","posts_per_page" =>10)); while($loop->have_posts()): $loop->the_post(); ?> <?php endwhile; ?> |
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?php get_header(); ?> <div id="contents"> <div id="main"> このページはサービスの更新ページです。 <section> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_content(); ?> <?php endwhile; else: ?> <p>投稿は記事はありません。</p> <?php endif;?> <?php $loop = new WP_Query(array("post_type" =>"service","posts_per_page" =>10)); while($loop->have_posts()): $loop->the_post(); ?> <section class="list"> <a href="service2.html"> <h4>サービス名</h4> <figure><img src="images/sample1.jpg" width="200" height="133" alt="" /></figure> <table> <tr> <th>商品名</th> <td>製品A</td> <th>価格</th> <td>2,300円</td> </tr> <tr> <th>サイズ</th> <td>50kg</td> <th>特徴</th> <td>製品Aの特長を書きます。</td> </tr> </table> <p>製品Bの説明をここに入れます。</p> </a> </section> <?php endwhile; ?> </section> </div> <!--/main--> <?php get_sidebar(); ?> <?php get_footer(); ?> |
このように表示されるようになります。
あとはアイキャッチ画像など表示できるようにしていきます。
function.php部分に下記の読みだす記述を書き加えます。
|
1 2 3 4 5 6 |
<?php function eyecatch() { add_theme_support( 'post-thumbnails' ); } add_action( 'after_setup_theme', 'eyecatch' ); ?> |
page-service.php部分に下記のタイトルやアイキャッチを読みだす記述を書き加えます。
4箇所書き換えます。
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?php get_header(); ?> <div id="contents"> <div id="main"> このページはサービスの更新ページです。 <section> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_content(); ?> <?php endwhile; else: ?> <p>投稿は記事はありません。</p> <?php endif;?> <?php $loop = new WP_Query(array("post_type" =>"service","posts_per_page" =>10)); while($loop->have_posts()): $loop->the_post(); ?> <section class="list"> <a href="<?php the_permalink(); ?>"> <h4><?php the_title(); ?></h4> <figure><?php the_post_thumbnail(array(200,133)); ?></figure> <table> <tr> <th>商品名</th> <td>製品A</td> <th>価格</th> <td>2,300円</td> </tr> <tr> <th>サイズ</th> <td>50kg</td> <th>特徴</th> <td>製品Aの特長を書きます。</td> </tr> </table> <p><?php the_content(); ?></p> </a> </section> <?php endwhile; ?> </section> </div> <!--/main--> <?php get_sidebar(); ?> <?php get_footer(); ?> |
このように表示されます。
