テーマ作成時のディレクトリ構造

2023.12.11
  1. 自分のテーマのためのフォルダ（例：mytheme）をwp-content/themesのディレクトリに作成します。
  2. そして、そのフォルダ内に以下の基本的なファイルを作成します。
  • style.css
    →テーマ詳細・スタイルを記述
  • functions.php
    →特定のテーマに関連する機能を定義する
  • header.php
    →サイトのヘッダー部分を表示するためのテンプレート
  • footer.php
    →サイトのフッター部分を表示するためのテンプレート
  • index.php
    →WordPressの基本テンプレートファイルで、他のテンプレートが存在しない場合に使用されるデフォルトのファイル　主にLPの部分。
  • single.php
    →個々の投稿ページを表示するためのテンプレートファイル
  • page.php
    →個々の固定ページを表示するためのテンプレートファイル
  • category.php
    →特定のカテゴリに属する投稿を表示するためのテンプレートファイル
  • search.php
    →サイト内検索の結果を表示するテンプレートファイル
  • searchform.php
    →サイト内検索のフォームを表示するテンプレートファイル
  • loop.php
    →WordPressのループを管理するためのテンプレートファイル
  • 404.php
    →存在しないページにナビゲートしたときに表示されるエラーページのテンプレートファイル

style.css

テーマのスタイリングに関する情報とともに、テーマに関する詳細（テーマ名、作者、「専用テーマ」など）を含むヘッダが含まれます。

/*
Theme Name: テーマの名前
Theme URI: テーマの公式ウェブサイトへのリンク
Author: テーマ作成者
Author URI: テーマ作成者のウェブサイトへのURL
Description: 説明
Version: バージョン番号
License: ライセンス
License URI: ライセンスへのリンク
Text Domain: テーマの翻訳用に使用
Tags: テーマに関連するキーワード
Template: 親テーマのテーマディレクトリ名を指定(子テーマ作成時のみ記述。)
*/

/*以下、レスポンシブ対応*/
/* PC画面表示(1024px~) */
@media screen and (min-width: 1024px) {

}

/* タブレット画面表示(428～1024px) */
@media screen and (min-width: 428px)and(max-width: 1024px) {

}

/* スマホ表示画面(～428px) */
@media screen and (max-width: 428px) {

}

index.php

特定のテンプレートファイルが存在しない場合に使用されるデフォルトのテンプレートファイルです。

<?php get_header(); ?> // ヘッダーテンプレートを取得します。

<div id="container" class="wrapper">
  <main>
    <?php if(have_posts()): ?> //もし記事が存在すれば...
      <?php while(have_posts()):the_post(); ?> // 記事を取得します。
        <?php
          $cat = get_the_category(); // 現在の記事のカテゴリを取得します。
          $catname = $cat[0]->cat_name; // 最初のカテゴリ名を取得します。
        ?>
        <article>
          <h2 class="article-title">
            <a href="<?php the_permalink(); ?>"> // 記事のリンクを取得します。
              <?php the_title(); ?> // 記事のタイトルを表示します。
            </a> 
          </h2>
          <ul class="meta">
            <li><?php the_time('Y/m/d'); ?></li> // 記事の投稿時間を表示します。
            <li><?php echo $catname; ?></li> // 記事のカテゴリ名を表示します。
          </ul>
          <a href="<?php the_permalink(); ?>"> // 記事のリンクを取得します。
            <?php the_post_thumbnail(); ?> // 記事のサムネイルを表示します。
          </a> 
          <div class="text">
            <?php
              if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 80) {
                $content = mb_substr(strip_tags(get_the_content()), 0, 80, 'UTF-8'); 
              // 記事の本文が80文字以上の場合、最初の80文字だけを表示します。
                echo $content . '…';
              } else {
                echo strip_tags(get_the_content()); 
              // 記事の本文が80文字以下の場合、全てを表示します。
              }
            ?>
          </div>
          <div class="readmore">
            <a href="<?php the_permalink(); ?>">記事を読む</a>
          </div> 
　　　　　// "記事を読む" というリンクを表示しそれをクリックすると詳細ページに移動します。
        </article> // 上記で表示した各要素を含む記事の表示を終えます。
      <?php endwhile; ?>
    <?php endif; ?>
  </main>
</div>

<?php get_footer(); ?> // フッターテンプレートを取得します。

functions.php

テーマやウェブサイトの機能を追加するためのファイルです。

<?php
//CSSファイルの読込
	function mytheme_enqueue_styles() {
    	    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
	}
	add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );
  
//ページネーションの設定
        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;
    }
  }

  // ページ数が2ぺージ以上の場合のみ、ページネーションを表示
  if(1 != $pages) {
    echo '<div class="pagination">';
    echo '<ul>';
    // 1ページ目でなければ、「前のページ」リンクを表示
    if($paged > 1) {
      echo '<li class="prev"><a href="' . esc_url(get_pagenum_link($paged - 1)) . '">前のページ</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)) . '">次のページ</a></li>';
    }
    echo '</ul>';
    echo '</div>';
  }
}

//サイドバーウィジェットの設定
if (function_exists('register_sidebar')) {
  register_sidebar(array(
    'name' => 'サイドバー',
    'id' => 'sidebar',
    'description' => 'サイドバーウィジェット',
    'before_widget' => '<div>',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="side-title">',
    'after_title' => '</h3>'
 ));
}

//検索対象を投稿ページだけに指定
function search_filter($query) {
  if ($query -> is_search) {
    $query -> set('post_type', 'post');
  }
  return $query;
}
add_filter('pre_get_posts', 'search_filter');

//アイキャッチ画像の機能を有効化
	if ( function_exists( 'add_theme_support' ) ) {
    	      add_theme_support( 'post-thumbnails' );
	}

//Wordpressで設定したナビゲーションメニューを header.php で出力
	function my_custom_theme_setup() {
		register_nav_menus( array(
			'header_menu' => 'Header Navigation Menu',
		) );
	}
	add_action( 'after_setup_theme', 'my_custom_theme_setup' );

header.php

ウェブサイトのヘッダーセクションを作成するためのテンプレートファイルです。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Language" content="ja">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
	<meta name="author" content="Enakat">
	<meta name="description" content="あなたのSNSアカウント、多くの方に見てもらえるように拡散・宣伝代行いたします。">
	<meta name="keywords" content="">
	<meta name="robots" content="noindex, nofollow">
	<link rel="canonical" href="">
	<meta property="og:title" content="">
	<meta property="og:description" content="">
	<meta property="og:image" content="">
	<meta property="og:type" content="website">
	<meta property="og:url" content="">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <div class="header_title">
            <h1>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
            </h1>
        </div>
		<nav class="nav-block">
        	<?php 
				if ( has_nav_menu( 'header_menu' ) ) {
					wp_nav_menu( array(
						'theme_location' => 'header_menu',
						'container'      => 'nav',
						'container_id'   => 'navigation',
						'menu_class'     => 'custom_menu',
					) );
				}
 			?>
        </nav>
    </header>

footer.php

ウェブサイトのフッターセクションを作成するためのテンプレートファイルです。

<script>必要に応じて、Googleアドセンス</script>
    <footer>
        <p>Copyright &copy; <?php echo date("Y"); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
    </footer>
</body>
</html>

sidebar.php

ウェブサイトのサイドバーを作成するためのテンプレートファイルです。

<aside id="sidebar">
  <section class="author">
    <img src="<?php echo esc_url(get_theme_file_uri('img/sidebar/author.jpg')); ?>" alt="テキストテキストテキスト">
    <h3 class="side-title">Name Name</h3>
    <p class="profile">
      プロフィールテキスト
    </p>
  </section>

  <?php get_search_form(); ?>

  <section class="archive">
    <?php dynamic_sidebar('sidebar'); ?>
  </section>
</aside>

single.php

はそれぞれの投稿ページを表示するためのテンプレートファイルです。

<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <?php if(have_posts()):while(have_posts()):the_post(); ?>
      <?php
        $cat = get_the_category();
        $catname = $cat[0]->cat_name;
      ?>
      <article>
        <h1 class="article-title">
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h1>
        <ul class="meta">
          <li><?php the_time('Y/m/d'); ?></li>
          <li><?php echo $catname; ?></li>
        </ul>
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
        <div class="text"><?php the_content(); ?></div>
      </article>
    <?php endwhile;endif; ?>

    <ul class="post-link">
      <li><?php previous_post_link('%link', '< 前の記事へ'); ?></li>
      <li><?php next_post_link('%link', '次の記事へ >'); ?></li>
    </ul>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

page.php

ウェブサイトの固定ページを表示するためのテンプレートファイルです。

<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <?php if(have_posts()):while(have_posts()):the_post(); ?>
      <article>
        <h1 class="article-title"><?php the_title(); ?></h1>
        <?php the_post_thumbnail(); ?>
        <div class="text"><?php the_content(); ?></div>
      </article>
    <?php endwhile;endif; ?>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

searchform.php

検索フォームを表示するためのテンプレートファイルです。このファイルが存在しない場合、WordPressはデフォルトの検索フォームを使用します。

<form method="get" id="searchform" action="<?php echo esc_url(home_url()); ?>">
  <input type="text" name="s" id="s" placeholder="キーワードで検索する">
  <button type="submit">
    <img src="<?php echo esc_url(get_theme_file_uri('img/common/search.png')); ?>" alt="">
  </button>
</form>

search.php

検索結果ページを表示するためのテンプレートファイルです。ユーザーがサイトで検索を実行したとき、WordPressはこのテンプレートを使用して検索結果を表示します。

<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <?php if (have_posts()): ?>
      <?php if (!$_GET['s']) { ?>
        <p>検索キーワードが未入力です<p>

      <?php } else { ?>
        <h1 class="page-title">
          「<?php echo esc_html($_GET['s']); ?>」の検索結果：<?php echo $wp_query->found_posts; ?>件
        </h1>

        <?php while(have_posts()):the_post(); ?>
          <?php
            $cat = get_the_category();
            $catname = $cat[0]->cat_name;
          ?>
          <article>
            <h2 class="article-title">
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </h2>
            <ul class="meta">
              <li><?php the_time('Y/m/d'); ?></li>
              <li><?php echo $catname; ?></li>
            </ul>
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
            <div class="text">
              <?php
                if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 80) {
                  $content = mb_substr(strip_tags(get_the_content()), 0, 80, 'UTF-8');
                  echo $content . '…';
                } else {
                  echo strip_tags(get_the_content());
                }
              ?>
            </div>
            <div class="readmore"><a href="<?php the_permalink(); ?>">READ MORE</a></div>
          </article>
        <?php endwhile; ?>

        <?php
          if (function_exists("pagination")) {
            pagination($wp_query->max_num_pages);
          }
        ?>
      <?php } ?>
    <?php else: ?>
      <p>検索されたキーワードに一致する記事はありませんでした</p>

    <?php endif; ?>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

category.php

<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <?php
      $cat = get_the_category();
      $catname = $cat[0]->cat_name;
    ?>
    <h1 class="page-title"><?php echo $catname; ?>一覧</h1>

    <?php if(have_posts()): ?>
      <?php while(have_posts()):the_post(); ?>
        <article>
          <h2 class="article-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h2>
          <ul class="meta">
            <li><?php the_time('Y/m/d'); ?></li>
          </ul>
          <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
          <div class="text">
            <?php
              if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 80) {
                $content = mb_substr(strip_tags(get_the_content()), 0, 80, 'UTF-8');
                echo $content . '…';
              } else {
                echo strip_tags(get_the_content());
              }
            ?>
          </div>
          <div class="readmore"><a href="<?php the_permalink(); ?>">詳細を見る</a></div>
        </article>
     <?php endwhile; ?>
  
      <?php
        if (function_exists("pagination")) {
          pagination($wp_query->max_num_pages);
        }
      ?>
    <?php endif; ?>
  </main>
</div>

<?php get_footer(); ?>

loop.php

<?php while(have_posts()):the_post(); ?>
  <article>
    <h2 class="article-title">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </h2>
    <ul class="meta">
      <li><?php the_time('Y/m/d'); ?></li>
      <?php if (!is_category()) { ?>
        <?php
          $cat = get_the_category();
          $catname = $cat[0]->cat_name;
        ?>
        <li><?php echo $catname; ?></li>
      <?php } ?>
    </ul>
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    <div class="text">
      <?php
        if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 80) {
          $content = mb_substr(strip_tags(get_the_content()), 0, 80, 'UTF-8');
          echo $content . '…';
        } else {
          echo strip_tags(get_the_content());
        }
      ?>
    </div>
    <div class="readmore"><a href="<?php the_permalink(); ?>">READ MORE</a></div>
  </article>
<?php endwhile; ?>

404.php

wp_safe_redirect(home_url(), 301);
要求されたページが存在しない場合、ユーザーをサイトのホームページに永久的にリダイレクトします。そしてexit;はその後の処理を中断します。

<?php
  if (!have_posts()) {
    wp_safe_redirect(home_url(), 301);
  exit;
　}
?>

コメント

  1. Wilbur-I より:
    2024年7月11日 7:32 PM

    Very interesting points you have noted, thank you for
    posting.Leadership

    返信
タイトルとURLをコピーしました