テーマディレクトリを作成
▼index.php、style.cssを作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<?php wp_head(); ?>
</head>
<body>
<?php wp_footer(); ?>
</body>
</html>
→管理ツールバーが表示されます。
▼style.cssにコードを記載
/*
* Theme Name: original theme 231129
*/パーツファイルを作成
ブログサイトの場合
- header.php
- footer.php
- single.php（投稿ページページのデザインファイル）
index.php
<?php get_header(); ?>
<div class="container">
<?php while (have_posts()): ?>
<?php the_post(); ?>
<!-- ループを次の投稿に進める -->
<a href="<?php the_permalink(); ?>">
<p><?php the_title(); ?></p>
<p><?php the_excerpt(); ?></p>
</a>
<hr>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php the_title(); ?></title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
<!-- テーマフォルダへの絶対パスが取得できる関数 -->
<?php wp_head(); ?>
</head>
<body>
<div class="container">
<ul class="nav-list">
<li class="nav-item">
<a href="<?php echo home_url(); ?>" class="nav-link">Home</a>
<!-- 現在のブログのホームURLを返します。 -->
</li>
</ul>
</div>footer.php
<?php wp_footer(); ?>
</body>
</html>single.php
<?php get_header(); ?>
<div class="container">
<?php while (have_posts()): ?>
<?php the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php get_footer(); ?>
LPサイトの場合
- テーマディレクトリ
- style.css
- index.php
- header.php
- footer.php
- functions.php
- assets
- css
- style.css
- js
- main.js
- img
- css
- assets
↓イメージサイト
index.php
<?php get_header(); ?>
…
<?php get_footer(); ?>header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo( 'name' ); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<h1 class="header-logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<?php
if( has_custom_logo() ){
/* ロゴが設定されていたら画像を表示 */
the_custom_logo();
}else{
/* ロゴが設定されていなければサイトタイトルを表示 */
echo get_bloginfo( 'name' );
}
?>
</a>
</h1>
<?php wp_nav_menu(
array(
'theme_location' => 'global-nav',
'menu_id' => 'top-menu',
)
); ?>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="hamburger-text">MENU</span>
</div>
<!-- /.hamburger -->
</header>
<!-- /.header -->footer.php
<?php wp_footer(); ?>
</body>
</html>assets/css/style.css
:root {
--primary-color: #FF7D32;
--blueG1: #0E5095;
--blueG2:#399FC7;
--blue1: #1673B2;
--blue2: #EDF8FF;
--gray1: #f5f5f5;
--red1: #e80f4b;
--yellow1: #EEFF6C;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
img {
max-width: 100%;
height: auto;
}
/*-------------------------------------------
共通
-------------------------------------------*/
.container {
max-width: 1200px;
padding: 0 20px;
margin-left: auto;
margin-right: auto;
}
/*-------------------------------------------
header
-------------------------------------------*/
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
box-shadow: 0 1px 2px 1px #0000000d;
}
.header-logo {
max-width: 200px;
font-size: 1.25rem;
color: var(--primary-color);
}
#top-menu {
display: flex;
column-gap: 20px;
}
/*-------------------------------------------
hamburger
-------------------------------------------*/
.hamburger {
width: 50px;
height: 50px;
position: relative;
display: none;
}
.hamburger span {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: all .3s;
}
.hamburger .bar {
content: "";
background-color: var(--primary-color);
width: 30px;
height: 2px;
}
.hamburger .bar:nth-child(2) {
top: 10px;
}
.hamburger .bar:nth-child(3) {
top: 20px;
}
.hamburger .hamburger-text {
bottom: 0;
font-size: 0.75rem;
}
.hamburger.active .bar:first-child {
top: 10px;
transform: translateX(-50%) rotate(45deg);
background-color: #fff;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
top: 10px;
transform: translateX(-50%) rotate(-45deg);
background-color: #fff;
}
@media screen and (max-width: 768px) {
#top-menu {
display: none;
}
#top-menu.active {
background-color: rgba(0,0,0,.3);
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
color: #fff;
text-align: center;
}
.hamburger {
display: block;
}
}