子テーマのsingle.phpです

2023年11月29日2024年2月2日投稿者: admin

オリジナルテーマの作成

テーマディレクトリを作成

▼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

↓イメージサイト

ホームページ

home

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;
  }
}

デフォルトのテキストです