【WordPress ソースコード】中級編：ストアサイト（インテリア）／グリッドレイアウト
テーマディレクトリ構成
～/wp-content/themes/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
<!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="icon" href="<?php echo esc_url(get_theme_file_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_theme_file_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>¥<?php echo esc_html(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">© <?php echo bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
functions.php
別タブで開く
functions.php
<?php
/**************************************************
CSSファイルの読み込み
**************************************************/
function my_enqueue_styles() {
wp_enqueue_style('ress', '//unpkg.com/ress/dist/ress.min.css', array(), false, 'all');
wp_enqueue_style('style', get_stylesheet_uri(), array('ress'), false, 'all');
}
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_theme_file_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="' . esc_url(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="' . esc_url(get_pagenum_link($i)) . '">' .$i. '</a></li>';
}
}
}
if ($paged < $pages) {
echo '<li class="next"><a href="' . esc_url(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>¥<?php echo esc_html(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>¥<?php echo esc_html(get_post_meta(get_the_ID(), 'price', true)); ?> +tax</p>
<dl>
<dt>SIZE：</dt>
<dd><?php echo esc_html(get_post_meta(get_the_ID(), 'size', true)); ?></dd>
<dt>COLOR：</dt>
<dd><?php echo esc_html(get_post_meta(get_the_ID(), 'color', true)); ?></dd>
<dt>MATERIAL：</dt>
<dd><?php echo esc_html(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');
});
});