【WordPress ソースコード】中級編:ストアサイト(インテリア)/グリッドレイアウト

目次

テーマディレクトリ構成

    
fd
 ├─img
 │  ├─favicon.ico
 │  └─logo.svg
 │
 ├─js
 │  └─main.js
 │
 ├─category.php
 ├─footer.php
 ├─functions.php
 ├─header.php
 ├─index.php
 ├─page.php
 ├─single.php
 └─style.css
    
  

header.php

別タブで開く
header.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php echo bloginfo('name'); ?></title>
  <meta name="description" content="<?php bloginfo('description'); ?>">
  <link rel="shortcut icon" href="<?php echo esc_url(get_template_directory_uri()); ?>/img/favicon.ico">

  <?php wp_head(); ?>
</head>

<body>
  <header id="header" class="wrapper">
    <h1 class="site-title">
      <a href="<?php echo esc_url(home_url()); ?>">
        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/logo.svg" alt="Furniture Design">
      </a>
    </h1>

    <nav id="navi">
      <ul class="nav-menu">
        <li><a href="<?php echo esc_url(home_url()); ?>/category/products/">PRODUCTS</a></li>
        <li><a href="<?php echo esc_url(home_url()); ?>/about/">ABOUT</a></li>
        <li><a href="<?php echo esc_url(home_url()); ?>/company/">COMPANY</a></li>
        <li><a href="mailto:xxxxx@xxx.xxx.com?subject=お問い合わせ">CONTACT</a></li>
      </ul>
    </nav>

    <div class="toggle_btn">
      <span></span>
      <span></span>
    </div>

    <div id="mask"></div>
  </header>

index.php

別タブで開く
index.php

<?php get_header(); ?>

<main>
  <div id="top" class="wrapper">
    <ul class="product-list">
      <?php
        $args = array(
          'posts_per_page' => 8
        );
      ?>
      <?php $posts = get_posts($args); ?>
      <?php foreach ($posts as $post): ?>
        <?php setup_postdata($post); ?>
        <li>
          <a href="<?php the_permalink(); ?>">
            <img src="<?php the_post_thumbnail_url('full'); ?>" alt="">
            <p><?php the_title(); ?></p>
            <p>&yen;<?php echo get_post_meta($post->ID, 'price', true); ?> +tax</p>
          </a>
        </li>
      <?php endforeach; ?>
      <?php wp_reset_postdata(); ?>
    </ul>
    <a class="link-text" href="<?php echo esc_url(home_url()); ?>/category/products/">View More</a>
  </div>
</main>

<?php get_footer(); ?>

別タブで開く
footer.php

  <footer id="footer" class="wrapper">
    <ul class="menu">
      <li><a href="https://www.instagram.com/" target="_blank">INSTAGRAM</a></li>
      <li><a href="https://twitter.com/" target="_blank">TWITTER</a></li>
      <li><a href="https://www.facebook.com/" target="_blank">FACEBOOK</a></li>
    </ul>
    <p class="copyright">&copy; <?php echo bloginfo('name'); ?></p>
  </footer>

  <?php wp_footer(); ?>
</body>
</html>

functions.php

別タブで開く
functions.php

<?php

/**************************************************
CSSファイルの読み込み
**************************************************/
function my_enqueue_styles() {
  wp_register_style('ress', '//unpkg.com/ress/dist/ress.min.css', array(), false, 'all');
  wp_register_style('style', get_stylesheet_uri(), array('ress'), false, 'all');
  wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');

/**************************************************
JSファイルの読み込み
**************************************************/
function st_enqueue_scripts() {
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), '3.5.1', false);
  wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'st_enqueue_scripts');

/**************************************************
アイキャッチを有効化
**************************************************/
add_theme_support('post-thumbnails');

/**************************************************
ページネーション
**************************************************/
function pagination($pages = '', $range = 2) {
  $showitems = ($range * 2) + 1;

  global $paged;
  if(empty($paged)) {
    $paged = 1;
  }

  if($pages == '') {
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    if(!$pages) {
      $pages = 1;
    }
  }

  if(1 != $pages) {
    echo '<ul class="pagination">';
    if($paged > 1) {
      echo '<li class="prev"><a href="' . get_pagenum_link($paged - 1) . '">PREV</a></li>';
    }

    for ($i=1; $i <= $pages; $i++) {
      if (1 != $pages &&(!($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
        if ($paged == $i) {
          echo '<li class="active">' .$i. '</li>';
        } else {
          echo '<li><a href="' .get_pagenum_link($i) . '">' .$i. '</a></li>';
        }
      }
    }

    if ($paged < $pages) {
      echo '<li class="next"><a href="' . get_pagenum_link($paged + 1) . '">NEXT</a></li>';
    }
    echo '</ul>';
  }
}

category.php

別タブで開く
category.php

<?php get_header(); ?>

<main>
  <div class="content wrapper">
    <?php
      $cat = get_the_category();
      $catname = $cat[0]->cat_name;
    ?>
    <h1 class="page-title"><?php echo $catname; ?></h1>
    <ul class="product-list">
      <?php if (have_posts()): ?>
        <?php while(have_posts()):the_post(); ?>
          <li>
            <a href="<?php the_permalink(); ?>">
              <img src="<?php the_post_thumbnail_url('full'); ?>" alt="">
              <p><?php the_title(); ?></p>
              <p>&yen;<?php echo get_post_meta($post->ID, 'price', true); ?> +tax</p>
            </a>
          </li>
        <?php endwhile; ?>
      <?php endif; ?>
    </ul>
    <?php
      if (function_exists("pagination")) {
        pagination($wp_query->max_num_pages);
      }
    ?>
  </div>
</main>

<?php get_footer(); ?>

page.php

別タブで開く
page.php

<?php get_header(); ?>

<main>
  <div class="content wrapper">

    <h1 class="page-title"><?php the_title() ?></h1>

    <?php the_content(); ?>

  </div>
</main>

<?php get_footer(); ?>

single.php

別タブで開く
single.php

<?php get_header(); ?>

<main>
  <div class="content wrapper">
    <?php if(have_posts()): ?>
      <?php while(have_posts()):the_post(); ?>
        <h1 class="page-title"><?php the_title() ?></h1>
        <div id="item">
          <div class="item-img">
            <img src="<?php the_post_thumbnail_url('full'); ?>" alt="">
          </div>
          <div class="item-text">
            <?php the_content(); ?>
            <p>&yen;<?php echo get_post_meta(get_the_ID(), 'price', true); ?> +tax</p>
            <dl>
              <dt>SIZE:</dt>
              <dd><?php echo get_post_meta(get_the_ID(), 'size', true); ?></dd>
              <dt>COLOR:</dt>
              <dd><?php echo get_post_meta(get_the_ID(), 'color', true); ?></dd>
              <dt>MATERIAL:</dt>
              <dd><?php echo get_post_meta(get_the_ID(), 'material', true); ?></dd>
            </dl>
          </div>
        </div>
      <?php endwhile; ?>
    <?php endif; ?>
    <a class="link-text" href="<?php echo esc_url(home_url()); ?>/category/products/">Back To Products</a>
  </div>
</main>

<?php get_footer(); ?>

style.css

別タブで開く
style.css

@charset "UTF-8";
/*
Theme Name: fd
*/
html {
  font-size: 100%;
}
body {
  color: #333;
  font-size: 14px;
  min-height: 100vh;
  position: relative;
}
a {
  color: #333;
  text-decoration: none;
  transition: all 0.5s;
}
a:hover {
  opacity: 0.7;
}
img {
  max-width: 100%;
}
li {
  list-style: none;
}

.wrapper {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
.content {
  padding-top: 120px;
  padding-bottom: 160px;
}
.site-title a {
  width: 180px;
  line-height: 1px;
  display: block;
}
.page-title {
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 30px;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10
}
#navi {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  color: #fff;
  padding: 36px 50px;
  transition: all 0.5s;
  z-index: 20;
  opacity: 0;
}
#navi a {
  color: #fff;
}
#navi li {
  margin-bottom: 14px;
}
.open #navi {
  left: 0;
  opacity: 1;
}
.toggle_btn {
  width: 30px;
  height: 30px;
  position: relative;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 20;
}
.toggle_btn span {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all 0.5s;
}
.toggle_btn span:nth-child(1) {
  top: 10px;
}
.toggle_btn span:nth-child(2) {
  bottom: 10px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(4px) rotate(-45deg);
  transform: translateY(4px) rotate(-45deg);
}
.open .toggle_btn span:nth-child(2) {
  -webkit-transform: translateY(-4px) rotate(45deg);
  transform: translateY(-4px) rotate(45deg);
}
#mask {
  display: none;
  transition: all 0.5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 10;
  cursor: pointer;
}

/*-------------------------------------------
TOP、PRODUCTS
-------------------------------------------*/
#top {
  padding-top: 80px;
  padding-bottom: 160px;
}
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.product-list li {
  width: 23%;
  margin-bottom: 40px;
}
.product-list img {
  margin-bottom: 10px;
  vertical-align: top;
}
.product-list p {
  font-size: 12px;
}
.link-text {
  display: block;
  text-align: center;
}
.pagination {
  display: flex;
  justify-content: center;
}
.pagination li {
  padding: 0 20px;
}

/*-------------------------------------------
ITEM
-------------------------------------------*/
#item {
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
#item .item-text {
  width: 42%;
}
#item .item-text p {
  margin-bottom: 30px;
  text-align: justify;
}
#item .item-text dl {
  display: flex;
  flex-wrap: wrap;
}
#item .item-text dt {
  width: 30%;
}
#item .item-text dd {
  width: 70%;
}
#item .item-img {
  width: 50%;
}

/*-------------------------------------------
ABOUT
-------------------------------------------*/
#about {
  max-width: 600px;
}
#about p {
  line-height: 26px;
  margin-bottom: 30px;
}

/*-------------------------------------------
COMPANY
-------------------------------------------*/
#company {
  max-width: 600px;
}
#company dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#company dt {
  width: 30%;
  border-bottom: solid 1px #dcdbdb;
  padding: 20px 10px;
}
#company dt:last-of-type {
  border-bottom: none;
}
#company dd {
  width: 70%;
  border-bottom: solid 1px #dcdbdb;
  padding: 20px 10px;
}
#company dd:last-of-type {
  border-bottom: none;
}
#company .map {
  filter: grayscale(1);
}
#company .map iframe {
  width: 100%;
  height: 300px;
  border: 0;
  overflow: hidden;
  background-color: transparent;
}

/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}
#footer .menu {
  display: flex;
}
#footer .menu li {
  font-size: 12px;
  margin-right: 30px;
}
#footer .copyright {
  font-size: 10px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {

  /*-------------------------------------------
  TOP、PRODUCTS
  -------------------------------------------*/
  .product-list li {
    width: 47%;
  }

  /*-------------------------------------------
  ITEM
  -------------------------------------------*/
  #item {
    flex-direction: column;
  }
  #item .item-text {
    width: 100%;
  }
  #item .item-img {
    width: 100%;
    margin-bottom: 30px;
  }

  /*-------------------------------------------
  COMPANY
  -------------------------------------------*/
  #company dl {
    flex-direction: column;
  }
  #company dt {
    width: 100%;
    border-bottom: none;
    padding-bottom: 5px;
  }
  #company dd {
    width: 100%;
    padding-top: 5px;
  }

  /*-------------------------------------------
  フッター
  -------------------------------------------*/
  #footer {
    flex-direction: column;
  }
  #footer .menu {
    margin-bottom: 5px;
  }
}

main.js

別タブで開く
main.js

$(function(){
  /*=================================================
  ハンバーガーメニュー
  ===================================================*/
  $('.toggle_btn').on('click', function() {
    if ($('#header').hasClass('open')) {
      $('#header').removeClass('open');
    } else {
      $('#header').addClass('open');
    }
  });

  $('#mask').on('click', function() {
    $('#header').removeClass('open');
  });
});