0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MAMPを使ったWordpressでのWEB制作方法12 初心者向け

Last updated at Posted at 2020-04-30

#MAMPを使ったWordpressでのWEB制作方法11 初心者向け

今回は詳細ページの作成です。
前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法11 初心者向け

##詳細ページの作成

詳細ページもレイアウトは統一されているのでまずは
ヘッダー、フッター、サイドバーと表示部分が空になった
フレームだけを用意します。

single.php
<?php get_header(); ?>

    <div class="wrapper">
    <div id="conL">


    </div><!--conLend-->
    <?php get_sidebar(); ?>

  </div><!--wrapperend-->
  
<?php get_footer();

前回の投稿一覧ページ同様以下のif文を作成して
タイトルと中身を取得できるようにタグを設置します。

single.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">

 <!--loopstart-->
 <?php if(have_posts()): while(have_posts()): the_post();?>
  <h2><?php the_title(); ?></h2>
  <!--loopcontent-->
  <?php the_content(); ?>
 <!--loopend-->
 <?php endwhile; endif; ?>
 <a class="btn" href="<?php echo home_url(); ?>/contact"><button class="btn1">お問い合わせ</button></a>


    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->

<?php get_footer();

一覧ページから詳細ページを開くと投稿の中身が表示されます。
Image from Gyazo

中身は表示できましたが日付が入っていないので追加します。
タイトルの下にタグを入れましょう。

single.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">

 <!--loopstart-->
 <?php if(have_posts()): while(have_posts()): the_post();?>
  <h2><?php the_title(); ?></h2>
  <p><?php the_time('Y/m/d'); ?></p>
 <!--loopcontent-->
 <?php the_content(); ?>
 <!--loopend-->
 <?php endwhile; endif; ?>
 <a class="btn" href="<?php echo home_url(); ?>/contact"><button class="btn1">お問い合わせ</button></a>


    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->

<?php get_footer();

以上で投稿ページは完成です。

次はお問い合わせページを作成します。
MAMPを使ったWordpressでのWEB制作方法13 初心者向け

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?