2020.07.06

WordPress - オリジナルテーマをゼロから作成する時の最低限のテンプレート

Wordpress

1. 用意するファイル

ファイル	内容
index.php	トップページを出力
single.php	投稿ページを出力
header.php	ヘッダーを出力
footer.php	フッターを出力
sidebar.php	サイドバーを出力
content.php	コンテンツ内容を出力（任意のファイル名）
content-single.php	コンテンツ内容を出力（任意のファイル名）
functions.php	関数などを書き込むファイル
style.css	CSS を書き込むファイル
screenshot.png	管理画面の外観 > テーマに表示される画像。画像サイズ 1200x900px

2. 各ファイルに記述する内容

header.php

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
header
</header>

<html <?php language_attributes(); ?>>
lang="ja"を出力。「設定 > 一般 > サイト言語」の言語によって出力が変更される

<meta charset="<?php bloginfo( 'charset' ); ?>" />
charset="UTF=8"を出力

<?php wp_head(); ?>
テーマやプラグインに必要な css や javascript がヘッダー部分に自動的に組み込まれるようになる。</head>の一つ上の行に書くのが決まり

<body <?php body_class(); ?>>
ページごとに自動でクラスが追加される。ページ別に css を追加したいときなどに利用

footer.php

<footer>
footer
</footer>
<?php wp_footer(); ?>
</body>
</html>

<?php wp_footer(); ?>
テーマやプラグインに必要な css や javascript がフッター部分に自動的に組み込まれるようになる。</body>の一つ上の行に書くのが決まり

index.php・single.php

//index
<?php get_header(); ?>
<?php get_template_part('content'); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

//single
<?php get_header(); ?>
<?php get_template_part('content-single'); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php get_header(); ?>
header.php を呼び出す

<?php get_template_part('ファイル名'); ?>
任意の名前のファイルを呼び出す。ファイルをフォルダに入れている場合は、<?php get_template_part('フォルダ名/ファイル名'); ?>

<?php get_sidebar(); ?>
sidebar.php を呼び出す

<?php get_footer(); ?>
footer.php を呼び出す

functions.php

<?php
//タイトルタグ追加
add_theme_support( 'title-tag' );

//スタイルシート(style.css)の読み込み
function add_files(){
  wp_enqueue_style('style', get_template_directory_uri() .'/style.css');
}
add_action('wp_enqueue_scripts', 'add_files');

WordPress では、functions.php からタイトルタグやスタイルシートを読み込むことを推奨しています。

style.css

@charset "UTF-8";
/*
Theme Name: テーマの名前
Theme URI: テーマのURL
Author: テーマ作成者
Author URI: テーマ作成者のURL
Version: バージョン
License: ライセンス
License URI: ライセンス元のURL
Text Domain: テーマの名前
Tags: サイト構成のタグ（例：one-column, flexible-header, custom-menu)
*/

このコメントアウトがテーマ情報に反映されます。テーマを配布するとかでなければ、すべて記述しなくても OK