オリジナルテーマ作成で WordPressの理解を深める(その②)

季節の中で個人的には秋が一番好きです。外にお出かけしても気持ちいい時期ですね。
まだまだ日中は暑いですが、夜は寝やすい時期になってきました。

今回は連続企画の第二弾!
前回はオリジナルテーマの最小ファイル構成を確認しました。
今回はその中身、① style.css② index.php を実際に書いていきます。

① style.css に書くべき内容

WordPress がテーマとして認識するためには、style.css の先頭にテーマ情報コメントが必要です。
これがないと管理画面にテーマが表示されません。

/*
Theme Name: (必須) テーマ名
Theme URI: テーマの説明ページURL(任意)
Author: (必須) 開発者名(個人・団体)
Description: (必須) テーマの概要
Version: (必須) バージョン番号(例: 1.0.0)
Requires at least: (必須) 最低対応WordPressバージョン(例: 6.0)
Text Domain: 翻訳用のテキストドメイン(例: mytheme)
Template: 親テーマのディレクトリ名(※子テーマの場合のみ)
Tags: 検索用のタグ(公式テーマディレクトリ登録用)
*/

②Index.phpに書くべき内容

Index.phpに描く内容は様々ありますが、今回は本当に「テーマが認識されているか」を確認するためだけにします。

ページにアクセスすると、真ん中に サイトタイトル(オリジナルテーマ) だけが表示されます。

<?php
/**
 * Index Template (タイトルのみ表示)
 * @package mytheme
 */
?>

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

<main id="main">
  <h1><?php bloginfo('name'); ?></h1>
</main>

</body>
</html>

からindex.php にヘッダー・フッター・サイドバー・投稿記事一覧 を追加して、
「ブログらしい形」に進化させていきます!

コメントする

上部へスクロール