07. クラシックテーマの基本構成

この章では、クラシックテーマの基本構成を学びます。

WordPressテーマは、決められた場所に決められたファイルを置くことで、管理画面から認識されます。

まずは最小構成から理解しましょう。

テーマフォルダ

クラシックテーマは、WordPressのテーマディレクトリにフォルダとして置きます。

テーマの配置
wp-content/
  themes/
    my-theme/
      style.css
      index.php
      functions.php

my-themeがテーマフォルダです。

この中にテンプレートやCSS、JavaScript、画像などを入れていきます。

最小構成

テーマとして認識させるための最小構成は、基本的にstyle.cssとindex.phpです。

最小構成
my-theme/
  style.css
  index.php

style.cssには、テーマ情報を書きます。

index.phpは、ほかに適切なテンプレートがない場合の最後の受け皿です。

style.css

style.cssの先頭には、テーマ情報を書きます。

style.css
/*
Theme Name: My Theme
Author: Your Name
Version: 1.0.0
Description: Web制作学習用のクラシックテーマです。
*/

このコメントがあることで、WordPressの管理画面にテーマとして表示されます。

通常のCSSも同じファイルに書けますが、実務ではCSSファイルを分けて読み込むこともあります。

index.php

index.phpは、テーマの基本テンプレートです。

最初は簡単なHTMLを書いて、テーマが表示されるか確認します。

index.php
<?php get_header(); ?>

<main>
    <h1><?php bloginfo( 'name' ); ?></h1>
    <p>テーマが有効化されています。</p>
</main>

<?php get_footer(); ?>

get_header()はheader.phpを読み込みます。

get_footer()はfooter.phpを読み込みます。

functions.php

functions.phpは、テーマの機能を設定するファイルです。

CSSやJavaScriptの読み込み、テーマサポート、メニュー登録などを書きます。

functions.php
<?php

function my_theme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

functions.phpは、テンプレートを表示するファイルではありません。

テーマの準備や機能追加を書く場所です。

header.phpとfooter.php

header.phpには、HTMLの上部やヘッダー部分を書きます。

footer.phpには、フッター部分やwp_footer()を書きます。

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">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
        <?php bloginfo( 'name' ); ?>
    </a>
</header>
footer.php
<footer class="site-footer">
    <p>&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

wp_head()とwp_footer()は、WordPressやプラグインが必要なコードを出力するために重要です。

よく使うテンプレート

クラシックテーマでは、ページの種類に応じてテンプレートファイルを作ります。

ファイル主な用途
front-page.phpトップページ
page.php固定ページ
single.php投稿詳細
archive.phpアーカイブ
category.phpカテゴリー一覧
search.php検索結果
404.php404ページ

WordPressはテンプレート階層に沿って、使うファイルを自動的に選びます。

screenshot.png

screenshot.pngをテーマフォルダに置くと、管理画面のテーマ一覧に画像が表示されます。

必須ではありませんが、テーマを識別しやすくなります。

テーマフォルダ例
my-theme/
  screenshot.png
  style.css
  functions.php
  index.php
  header.php
  footer.php

静的HTMLをテーマに分ける

静的HTMLをWordPressテーマにする時は、共通部分とページごとの部分を分けます。

  • ヘッダーはheader.php
  • フッターはfooter.php
  • トップページはfront-page.php
  • 固定ページはpage.php
  • 投稿詳細はsingle.php

いきなりすべてを動的にするのではなく、まず静的HTMLをテーマファイルに分けるところから始めます。

この章のまとめ

  • クラシックテーマは、テーマフォルダ内のPHPやCSSで構成される
  • 最小構成はstyle.cssとindex.php
  • functions.phpには、テーマの機能設定を書く
  • header.phpとfooter.phpには共通部分を書く
  • ページの種類に応じて、front-page.php、page.php、single.phpなどを作る