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