オリジナル・デザイン〜テーマフォルダ編
まずページデザインの元となるindex.htmlとsingle.html、base.cssを事前に作っておきます。これはそれぞれでご用意ください。
私の場合は以下です。
index.htmlの中身は
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<!-- header + nav -->
<header class="clearfix">
<h1>ページタイトル</h1>
<nav>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</nav>
</header>
<!-- header + nav -->
<!-- .eye-catch -->
<div class="eye-catch">
image
</div>
<!-- .eye-catch -->
<!-- main -->
<main class="home clearfix">
<h2>Contents</h2>
<div class="box1">
<h3><a href="#">記事タイトル</a></h3>
<p><a href="#">本文</a></p>
</div>
</main>
<!-- main -->
<!-- footer -->
<footer>
<p>フッター</p>
</footer>
<!-- footer -->
</body>
</html>
single.htmlは
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<!-- header + nav -->
<header class="clearfix">
<h1>ページタイトル</h1>
<nav>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</nav>
</header>
<!-- header + nav -->
<!-- main -->
<main class="single-wrap clearfix">
<aside>
<section>
<h3>項目</h3>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</section>
</aside>
<div>
<figure class="thumbnail">
<img src="#" alt="">
</figure>
<h3>記事タイトル</h3>
<p>日付</p>
<p>カテゴリー</p>
<p>本文</p>
</div>
</main>
<!-- main -->
<!-- footer -->
<footer>
<p>フッター</p>
</footer>
<!-- footer -->
</body>
</html>base.cssの中は
*{
margin:0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
body{
font-family: sans-serif;
background-color:white;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
header,main,footer{
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
header{
padding-top: 20px;
padding-bottom: 10px;
}
header h1{
font-size: 40px;
font-weight: normal;
width: 60%;
float: left;
}
header nav{
width: 40%;
float: left;
}
nav ul{
list-style-type: none;
}
nav li{
float: left;
}
nav a{
color: black;
text-decoration: none;
display: block;
padding: 10px 30px;
}
nav a:hover{
background-color: black;
color:white;
}
.eye-catch{
height: 400px;
color:transparent;
background-color:lightgray;
background-size: cover;
}
.home h2{
font-size: 30px;
text-align: center;
font-weight: normal;
padding-top: 50px;
padding-bottom: 50px;
}
.home a{
text-decoration: none;
color:gray;
}
main{
padding-bottom:50px;
}
.box1{
width: 50%;
float: left;
}
.thumbnail img{
width: 100%;
height: 400px;
}
.single-wrap div{
width: 70%;
float: left;
}
aside{
width: 30%;
float: left;
}
aside h3{
font-size: 24px;
line-height: 175%;
font-weight: normal;
}
aside ul{
list-style-type: none;
font-size: 14px;
}
aside a{
color: gray;
text-decoration: none;
display: block;
padding: 5px 10px;
}
aside section{
margin-bottom: 10px;
padding-left:0px;
padding-right:30px;
}
aside a:hover{
color: white;
background-color: gray;
}
.wrap > div{
margin-bottom: 30px;
}
aside input{
font-size: 14px;
width: 100%;
height: 40px;
border: 1px solid gray;
padding-left:30px;
background-image: url(images/24px.svg);
background-repeat: no-repeat;
background-position: 6px center;
}
footer{
background-color:black;
}
footer p{
color:white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
です。
次にカスタマイズ用のテーマフォルダをthemesフォルダの中に新しく作りましょう。
今回私はtestという名のテーマフォルダを作ります。
その中にページデザインの元となるindex.htmlとsingle.html、base.cssを置きます。
そしてこのフォルダをテーマとして認識させる為にstyle.cssを置きます。中身は
@charset “UTF-8”;
/*
Theme Name: テンプレート名（任意）
Theme URI: テーマ・アドレス（任意）
Author: 制作者名（任意）
Author URI: 制作者・アドレス（任意）
Version: 1.0（任意）
License: GNU General Public License v2 or later
Description: テーマ説明（任意）
*/
@import url(“cssファイル名（任意）”);
にします。
ちなみに私の場合は
@charset "UTF-8";
/*
Theme Name: Test
Theme URI: https://tatsuya-lab.com/
Author: tatsuya
Author URI: https://tatsuya-lab.com/
Version: 1.0
License: GNU General Public License v2 or later
Description: テンプレート・テーマ Test
*/
@import url("base.css");
です。
実際のcssはstyle.cssの中に書いてもいいのですがindex.htmlと共用したかったので@import url(“base.css”);にしました。
testフォルダを外観からテーマに登録
管理画面に戻って「外観」の中の「テーマ」を見てみて下さい。testフォルダがテーマとして認識されています。
まだテーマの詳細が透明ですので画像を置きます。テーマのtwentytwentyフォルダの中のscreenshot.pngをPhotoshopで開きます。元の画像を削除して新しい画像と差し替えます。
別名保存でテーマのtestフォルダに保存します。
再度、管理画面に戻って「外観」の中の「テーマ」をリロードするとテーマの詳細の背景に画像が表示されます。
まだ有効化はしないでください。
次にindex.phpを置きます。新規でこの名前にしてテーマのtestフォルダに保存して下さい。
トップページを表示
中身ですが取り敢えずindex.htmlと同じにして下さい。という訳でコピーペースト。
それではテーマをtestにしてみましょう。管理画面から「外観」「テーマ」からtestを有効化してみましょう。
サイトを表示してみましょう。
表示されましたか？
あと管理画面に戻れないのでブラウザの戻るで管理画面に戻って下さい。
index.phpの中身がindex.htmlなのでそのまま表示していると思います。がcssが反応していないと思います。cssを有効化させてみましょう。
index.phpの中の<link rel=”stylesheet” href=”base.css”>のhref=”base.css”をhref=”<?php bloginfo(‘stylesheet_url’); ?>”に変更。
<link rel="stylesheet" href="base.css">を
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">に変更。
管理画面に戻ってリロード。サイトを表示してみましょう。
cssが有効になりました。
<?php bloginfo(‘stylesheet_url’); ?>はstyle.cssに対するurlが排出されます。