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制作方法11 初心者向け

Last updated at Posted at 2020-04-30

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

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法10 初心者向け

今回は投稿一覧表示の作成をします。

が、その前にパーマリンク(url)の設定を変更しておきましょう

##パーマリンクの設定

管理画面左タブの設定/パーマリンク設定より設定画面を開きます。

デフォルトは日付と投稿名になっています。

これを以下のカスタム構造に変えましょう。

カテゴリー名/投稿名がパーマリンクに変更されました。
Image from Gyazo

##投稿一覧ページの作成

投稿一覧ページはarchive.htmlに作成していますので
archive.htmlの中身をarchive.phpへ貼り付けます。

ヘッダー、フッター、サイドバーの共通レイアウトは
wordpressタグで呼び出すよう変更しておきましょう。

この状態でurlの末尾にblogと加えるとパーマリンクが設定されているので
以下のarchive.phpの中身が表示されます。
Image from Gyazo

blogだけでなくinformationの一覧も表示されていますので修正していきます。
今回はブログ、業務について、リリースの3つを独立した一覧として分けます。

まずarchive.phpのコンテンツ部分に以下の記述をしましょう

archive.php
<?php if (in_category(array('1'))) {?>
 「Aがはいります」
<?php } elseif(in_category(array('2'))){ ?>
 「Bがはいります」
<?php }else{ ?>
  「Zがはいります」
<?php } ?>

こちらはカテゴリーidが1の場合は「Aが入ります」を表示
カテゴリーIDが2の場合は「Bが入りますを表示」
それ以外は「Zが入ります」を表示するというif文です。

それぞれの部分に前回index.phpで作った
一覧部分のパーツをコピペして書き換えます。
少し複雑なので全体を載せておきます。

archive.php
<?php get_header(); ?>
    <div class="wrapper">
    <div id="conL">

<?php if (in_category(array('9'))) {?>

      <div class="information"><!--blogstart-->
        <h2>Blog</h2>
        <dl>
          <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

          </dl>
        </div><!--blogend-->

<?php } elseif(in_category(array('8'))){ ?>

     <div class="information"><!--informationstart-->
        <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=8');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

        </dl>
      </div><!--informationend-->

<?php }else{ ?>

      <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=8');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

        </dl>
      </div><!--informationend-->

<?php } ?>

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

そして最後に各コンテンツのループの開始と終わりをいかに書き換えます。

の上を書き換えています。

以下完成形です。

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

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

<?php if (in_category(array('9'))) {?>
      <div class="information"><!--blogstart-->
        <h2>Blog</h2>
        <dl>

          <!--loopstart-->
<?php if(have_posts()): while(have_posts()): the_post();?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

        <!--loopend-->
<?php endwhile; endif; ?>

          </dl>
        </div><!--blogend-->

<?php } elseif(in_category(array('8'))){ ?>
  <div class="information"><!--informationstart-->
        <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
<?php if(have_posts()): while(have_posts()): the_post();?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
<?php endwhile; endif; ?>
        </dl>
      </div><!--informationend-->

<?php }else{ ?>

  <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
<?php if(have_posts()): while(have_posts()): the_post();?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
<?php endwhile; endif; ?>
        </dl>
      </div><!--informationend-->

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

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

これでブログ、リリース、業務についての一覧ページを
独立して表示できるようになりました。
urlと結果一覧が正しいことを確認してください。

Image from Gyazo

Image from Gyazo

Image from Gyazo

次回は詳細ページを作成します。
MAMPを使ったWordpressでのWEB制作方法12 初心者向け

0
0
1

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?