【WordPress ソースコード】初級編：コーポレートサイト
ディレクトリ構成
～/wp-content/themes/wed
├─img
│ ├─favicon.ico
│ ├─logo.svg
│ ├─about.jpg
│ ├─business1.jpg
│ ├─business2.jpg
│ ├─business3.jpg
│ ├─business4.jpg
│ ├─mainvisual.jpg
│ └─company.jpg
│
├─category.php
├─footer.php
├─functions.php
├─header.php
├─index.php
├─page.php
└─style.css
category.php
別タブで開く
category.php
<?php get_header(); ?>
<main id="category" class="wrapper">
<h1 class="page-title">News & Press</h1>
<ul class="tab-menu">
<!-- ニュース一覧の場合は、「ニュース」タブの下線を太線にする（activeクラスで設定） -->
<?php is_category('news') ? print '<li class="active">' : print '<li>' ?>
<a href="<?php echo esc_url(home_url('/category/news/')); ?>">ニュース</a>
</li>
<!-- プレスリリース一覧の場合は、「プレスリリース」タブの下線を太線にする（activeクラスで設定） -->
<?php is_category('press') ? print '<li class="active">' : print '<li>' ?>
<a href="<?php echo esc_url(home_url('/category/press/')); ?>">プレスリリース</a>
</li>
</ul>
<?php if (have_posts()): ?>
<dl class="list">
<?php while(have_posts()):the_post(); ?>
<dt>
<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
<span><?php single_cat_title(); ?></span>
</dt>
<dd><?php the_title() ?></dd>
<?php endwhile; ?>
</dl>
<?php endif; ?>
</main>
<?php get_footer(); ?>
別タブで開く
footer.php
<footer id="footer">
<div class="wrapper">
<div class="flex">
<div class="logo">
<img src="<?php echo esc_url(get_theme_file_uri('img/logo.svg')); ?>" alt="Web Entertainment Design">
</div>
<div class="info">
<p>
Web Entertainment Design Inc.<br>
West Building 3F<br>
9-99 Sakuragaokacho Shibuya-ku<br>
Tokyo, Japan 150-0031
</p>
<p>T/99-9999-9999</p>
</div>
</div>
<p class="copyright">© Web Entertainment Design Inc.</p>
</div>
</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');
/**************************************************
アイキャッチを有効化
**************************************************/
add_theme_support('post-thumbnails');
別タブで開く
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">
<div class="inner wrapper">
<?php $tag = (is_home() || is_front_page()) ? 'h1' : 'div'; ?>
<<?php echo $tag; ?> class="logo">
<a href="<?php echo esc_url(home_url()); ?>">
<img src="<?php echo esc_url(get_theme_file_uri('img/logo.svg')); ?>" alt="Web Entertainment Design">
</a>
</<?php echo $tag; ?>>
<nav>
<ul>
<li><a href="<?php echo esc_url(home_url('/category/news/')); ?>">NEWS</a></li>
<li><a href="<?php echo esc_url(home_url()); ?>/#about">ABOUT</a></li>
<li><a href="<?php echo esc_url(home_url()); ?>/#business">BUSINESS</a></li>
<li><a href="<?php echo esc_url(home_url()); ?>/#company">COMPANY</a></li>
</ul>
</nav>
</div>
<a class="contact" href="<?php echo esc_url(home_url('/contact/')); ?>">お問い合わせ</a>
</header>
index.php
別タブで開く
index.php
<?php get_header(); ?>
<main>
<div id="mainvisual">
<img src="<?php echo esc_url(get_theme_file_uri('img/mainvisual.jpg')); ?>" alt="">
</div>
<section id="news" class="wrapper">
<h2 class="section-title">
<span class="en">NEWS</span>
<span class="ja">ニュース</span>
</h2>
<ul class="list">
<li>
<div class="date-area">
<time datetime="2021-01-01">2021.01.01</time>
<span>NEWS</span>
</div>
<p>タイトルタイトルタイトルタイトル</p>
</li>
<li>
<div class="date-area">
<time datetime="2021-01-01">2021.01.01</time>
<span>PRESS</span>
</div>
<p>タイトルタイトルタイトルタイトル</p>
</li>
<li>
<div class="date-area">
<time datetime="2021-01-01">2021.01.01</time>
<span>NEWS</span>
</div>
<p>タイトルタイトルタイトルタイトル</p>
</li>
</ul>
</section>
<section id="about">
<div class="img">
<img src="<?php echo esc_url(get_theme_file_uri('img/about.jpg')); ?>" alt="">
</div>
<div class="text">
<h2 class="section-title">
<span class="en">ABOUT</span>
<span class="ja">私たちについて</span>
</h2>
<p>
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
</p>
<p>
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
</p>
<p>
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<section id="business" class="wrapper">
<h2 class="section-title">
<span class="en">BUSINESS</span>
<span class="ja">事業内容</span>
</h2>
<div class="flex">
<div class="left">
<div class="item">
<p class="title">Web制作・マーケティング</p>
<img src="<?php echo esc_url(get_theme_file_uri('img/business1.jpg')); ?>" alt="">
</div>
<div class="item">
<p class="title">インターネットメディア事業</p>
<img src="<?php echo esc_url(get_theme_file_uri('img/business2.jpg')); ?>" alt="">
</div>
</div>
<div class="right">
<div class="item">
<p class="title">プロモーション企画・制作</p>
<img src="<?php echo esc_url(get_theme_file_uri('img/business3.jpg')); ?>" alt="">
</div>
<div class="item">
<p class="title">ソーシャル企画・運営</p>
<img src="<?php echo esc_url(get_theme_file_uri('img/business4.jpg')); ?>" alt="">
</div>
</div>
</div>
</section>
<section id="company" class="wrapper">
<div class="text">
<h2 class="section-title">
<span class="en">COMPANY</span>
<span class="ja">会社情報</span>
</h2>
<dl class="info">
<dt>会社名</dt>
<dd>ウェブエンターテイメントデザイン株式会社</dd>
<dt>所在地</dt>
<dd>東京都渋谷区桜丘町99-9 West Building 3F</dd>
<dt>代表</dt>
<dd>ＸＸＸＸＸＸ</dd>
<dt>設立</dt>
<dd>2021年1月1日</dd>
<dt>資本金</dt>
<dd>3,000,000円</dd>
<dt>事業内容</dt>
<dd>Web制作・マーケティング</dd>
<dd class="add">インターネットメディア事業</dd>
<dd class="add">プロモーション企画・制作</dd>
<dd class="add">ソーシャル企画・運営</dd>
</dl>
</div>
<div class="img">
<img src="<?php echo esc_url(get_theme_file_uri('img/company.jpg')); ?>" alt="">
</div>
</section>
</main>
<?php get_footer(); ?>
page.php
別タブで開く
page.php
<?php get_header(); ?>
<main id="page" class="wrapper">
<article>
<h1 class="page-title"><?php the_title(); ?></h1>
<div class="content">
<?php the_content(); ?>
</div>
</article>
</main>
<?php get_footer(); ?>
style.css
別タブで開く
style.css
@charset "UTF-8";
/*
Theme Name: wed
*/
html {
font-size: 100%;
}
body {
background-color: #f0f0f0;
color: #000;
font-size: 0.875rem;
}
a {
color: #000;
font-size: 0.875rem;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
li {
list-style: none;
}
.logo {
width: 100px;
line-height: 1px;
margin-right: 60px;
}
.logo a {
display: block;
}
.page-title {
font-size: 2.25rem;
font-weight: normal;
letter-spacing: 0.3em;
line-height: 1;
margin-bottom: 80px;
}
.section-title {
font-weight: normal;
line-height: 1;
margin-bottom: 50px;
}
.section-title::after {
content: "";
width: 40px;
height: 1px;
background-color: #000;
display: block;
}
.section-title .en {
display: block;
font-size: 2.25rem;
letter-spacing: 0.3em;
margin-bottom: 10px;
}
.section-title .ja {
display: block;
font-size: 0.875rem;
margin-bottom: 36px;
}
.wrapper {
width: 100%;
max-width: 1032px;
padding: 0 16px;
margin: 0 auto;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
#header .inner {
display: flex;
align-items: center;
}
#header .inner ul {
display: flex;
align-items: center;
}
#header .inner li {
margin-right: 30px;
}
#header .inner li:last-child {
margin-right: 0;
}
#header .contact {
width: 200px;
height: 80px;
line-height: 80px;
background-color: #000;
color: #fff;
font-size: 0.75rem;
display: inline-block;
text-align: center;
}
#header .contact:hover {
background-color: #333;
}
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
margin-bottom: 120px;
}
#mainvisual img {
width: 100%;
height: calc(100vh - 80px);
object-fit: cover;
}
/*-------------------------------------------
News
-------------------------------------------*/
#news {
margin-bottom: 120px;
}
#news .list {
display: flex;
justify-content: space-between;
}
#news .list li {
width: calc(100%/3);
border-right: solid 1px #000;
padding: 10px 20px;
}
#news .list li:first-child {
padding-left: 0;
}
#news .list li:last-child {
border-right: none;
padding-right: 0;
}
#news .list li .date-area {
margin-bottom: 16px;
}
#news .list li .date-area span {
width: 50px;
height: 20px;
line-height: 20px;
background-color: #000;
color: #fff;
display: inline-block;
font-size: 0.75rem;
margin-left: 10px;
text-align: center;
}
/*-------------------------------------------
About
-------------------------------------------*/
#about {
display: flex;
margin-bottom: 120px;
}
#about .img {
width: 55%;
}
#about .img img {
width: 100%;
height: 400px;
object-fit: cover;
}
#about .text {
width: 45%;
padding: 180px 5% 0 5%;
}
#about .text p {
line-height: 2.2;
}
/*-------------------------------------------
Business
-------------------------------------------*/
#business {
margin-bottom: 120px;
}
#business .flex {
display: flex;
justify-content: space-between;
padding: 0 10%;
}
#business .flex .left {
width: 46%;
margin-top: 100px;
}
#business .flex .right {
width: 46%;
}
#business .flex .item {
margin-bottom: 50px;
}
#business .flex .item:last-child {
margin-bottom: 0;
}
#business .flex .title {
font-weight: bold;
margin: 0 0 10px 18px;
position: relative;
}
#business .flex .title::before {
content: "";
width: 8px;
height: 1px;
background-color: #000;
position: absolute;
top: 50%;
left: -18px;
}
/*-------------------------------------------
Company
-------------------------------------------*/
#company {
height: 750px;
display: flex;
align-items: center;
position: relative;
}
#company .text {
width: 55%;
background-color: #fff;
padding: 100px 8% 100px 6%;
position: absolute;
top: 0;
left: 0;
}
#company .img {
width: 53%;
position: absolute;
top: 115px;
right: 0;
}
#company .img img {
width: 100%;
height: 400px;
object-fit: cover;
}
#company .info {
display: flex;
align-items: center;
flex-wrap: wrap;
}
#company .info dt {
width: 20%;
margin-top: 10px;
}
#company .info dt:first-of-type {
margin-top: 0;
}
#company .info dd {
width: 80%;
margin-top: 10px;
}
#company .info dd:first-of-type {
margin-top: 0;
}
#company .info .add {
margin-left: 20%;
}
/*-------------------------------------------
固定ページ
-------------------------------------------*/
#page {
margin-top: 80px;
margin-bottom: 120px;
}
#page .form {
margin-top: 60px;
}
#page .form .required {
color: #ff0000;
}
#page .form dt {
margin-bottom: 5px;
}
#page .form dd {
margin-bottom: 30px;
}
#page .form input,
#page .form textarea {
width: 100%;
background-color: #fff;
padding: 15px;
}
#page .form textarea {
height: 180px;
}
#page .button {
width: 100px;
border: solid 1px #000;
margin: 0 auto;
transition: all 0.3s ease;
}
#page .button:hover {
background-color: #ddd;
}
#page .button input {
width: 100%;
padding: 10px 0;
}
/*-------------------------------------------
Category一覧
-------------------------------------------*/
#category {
margin-top: 80px;
margin-bottom: 120px;
}
#category .tab-menu {
display: flex;
border-bottom: solid 1px #000;
}
#category .tab-menu .active {
border-bottom: solid 3px #000;
}
#category .tab-menu li {
width: 240px;
padding: 20px 0;
text-align: center;
}
#category .tab-menu li a {
font-size: 1rem;
}
#category .list dt {
margin: 50px 0 10px 0;
}
#category .list dt span {
width: 50px;
height: 20px;
line-height: 20px;
background-color: #000;
color: #fff;
display: inline-block;
font-size: 0.75rem;
margin-left: 10px;
text-align: center;
}
#category .list dd {
padding-bottom: 50px;
border-bottom: solid 1px #ccc;
}
/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
background-color: #fff;
padding-bottom: 20px;
}
#footer .flex {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px 0;
}
#footer .flex .logo {
margin-right: 0;
}
#footer .copyright {
font-size: 0.625rem;
}
/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {
.logo {
width: 80px;
margin: 8px 0;
}
.page-title {
font-size: 2rem;
margin-bottom: 40px;
}
.section-title {
margin-bottom: 34px;
}
.section-title .ja {
margin-bottom: 24px;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header .inner {
flex-direction: column;
align-items: flex-start;
}
#header .contact {
display: none;
}
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
margin-bottom: 80px;
}
/*-------------------------------------------
News
-------------------------------------------*/
#news {
margin-bottom: 80px;
}
#news .list {
flex-direction: column;
}
#news .list li {
width: 100%;
border-right: none;
padding: 10px 0;
margin-bottom: 20px;
}
#news .list li:last-child {
margin-bottom: 0;
}
/*-------------------------------------------
About
-------------------------------------------*/
#about {
flex-direction: column;
margin-bottom: 80px;
}
#about .img {
width: 100%;
margin-bottom: 30px;
}
#about .img img {
height: 300px;
}
#about .text {
width: 100%;
padding: 0 16px;
}
/*-------------------------------------------
Business
-------------------------------------------*/
#business {
margin-bottom: 80px;
}
#business .flex {
flex-direction: column;
padding: 0;
}
#business .flex .left {
width: 100%;
margin: 0 0 30px 0;
}
#business .flex .right {
width: 100%;
}
#business .flex .item {
text-align: center;
margin-bottom: 30px;
}
#business .flex .title {
text-align: left;
}
/*-------------------------------------------
Company
-------------------------------------------*/
#company {
height: auto;
flex-direction: column;
position: static;
}
#company .text {
width: 100%;
padding: 40px 20px;
margin-bottom: 20px;
position: static;
}
#company .img {
width: 100%;
padding: 0;
position: static;
}
#company .info {
flex-direction: column;
}
#company .info dt {
width: 100%;
margin-top: 20px;
}
#company .info dd {
width: 100%;
margin-top: 5px;
padding-left: 14px;
}
#company .info dd:first-of-type {
margin-top: 5px;
}
#company .info .add {
margin-left: 0;
}
/*-------------------------------------------
固定ページ
-------------------------------------------*/
#page {
margin-top: 40px;
}
#page .form {
margin-top: 40px;
}
/*-------------------------------------------
Category一覧
-------------------------------------------*/
#category {
margin-top: 40px;
}
#category .tab-menu li {
width: 50%;
}
#category .list dt {
margin-top: 40px;
}
#category .list dd {
padding-bottom: 40px;
}
/*-------------------------------------------
footer
-------------------------------------------*/
#footer .flex {
flex-direction: column;
align-items: flex-start;
}
#footer .flex .logo {
margin-bottom: 10px;
}
}