WEB開発

【永久保存版】Localを使ったローカル環境WordPress開発入門 -最小構成のテーマを作成する-

今回のゴール

・テーマの作成する

WordPressにおけるテーマ

テーマとはWordPressの機能でWebサイトの見た目や機能をつかさどる重要な機能です。

今回は最小構成のテーマを作成することでテーマへの理解を進めていきましょう。

既存テーマを更新してみよう

WordPressインストール直後はいくつかのテーマがプリインストールされています。

テーマは外観＞テーマを選択することで確認することができます。2021年8月時点では以下の3つのテーマがインストールされています。これらはWordPress開発チームが作成したものになります。

  • Twenty Twenty-One
  • Twenty Nineteen
  • Twenty Twenty

テーマフォルダを確認する

テーマはどこに格納されているのでしょうか。今回は既存テーマを少しだけいじってみたいと思います。

テーマフォルダの場所は以下のように確認します。

Localを開いて「MyBlog」を右クリックした後「Show Folder」をクリックします。

するとWordPressのインストールフォルダを開くことができます。

開いたら「C:\Users\[ユーザ名]\Local Sites\myblog\app\public\wp-content\themes」にアクセスしてみてください。

そこに上記のテーマの名前のフォルダがいくつか見つかると思います。これがテーマフォルダになります。テーマはこのフォルダの中身で構成されています。

今回更新してみるテーマは「twentytwentyone」とします。「twentytwentyone」フォルダをVisualStudioCodeで開きましょう。

開いたら「index.php」の画像の位置に以下のように何か追加しましょう

<p>既存テーマを更新してみる</p>

では更新してサイトを見てみましょう。

更新されていますね。いい感じです。

オリジナルテーマを作成する

ではオリジナルのテーマを作成してみましょう。

先ほどと同様にC:\Users\[ユーザ名]\Local Sites\myblog\app\public\wp-content\themesにアクセスしてください。

開いたフォルダにオリジナルのテーマフォルダを作りましょう。ここでは単純に新規フォルダを追加するだけでいいです。

今回は「uedive」としました。

ではこの「uedive」フォルダをVisualStudioCodeで開いておきましょう。そしてこのフォルダの中に以下の２つのファイルを追加してください。

  • style.css
  • index.php

style.cssの内容は次のようにします。

/*
Theme Name: uedive theme
Author: uedive
Description: オリジナルテーマを作成します。
Version: 1.0
*/

ここまで出来たらダッシュボードのテーマを見に行ってみましょう。

新しくテーマが追加されているはずです。

テーマを作り上げていく

必須テンプレートタグを記述する(wp_head(), wp_footer())

テーマはできましたが、まだ中身は空っぽのままです。以下の2ファイルを追加して基礎部分をくみ上げてみましょう。

  • header.php
  • footer.php

html文書はhtml>head+bodyのような構造になっていますが、このうち、htmlの開始タグ、head、bodyの開始タグまでをheader.php。bodyの終了タグ(</body>)、htmlの終了タグ(</html>)をfooter.phpに記載します。

また、テーマを作成する場合、wp_head(), wp_footerを必ず記載しなければなりません。

テンプレートタグ(wp_head)

テーマテンプレートファイル内の </head> タグ直前で使う（例: header.php や index.php の中）。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_head
テンプレートタグ(wp_footer)

テーマテンプレートファイル内の </body> タグ直前で使う（例: footer.php や index.php の中）。

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_footer
<!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 wp_footer(); ?>

</body>
</html>

これらのファイルをindex.phpで読み込みます。

<?php get_header(); ?>
<?php get_footer(); ?>
テンプレートタグ(get_header)

現在のテーマディレクトリの header.php テンプレートファイルを読み込みます

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_header
テンプレートタグ(get_footer)

現在のテーマディレクトリの footer.php テンプレートファイルを読み込みます

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_footer

ここまでくると、次の画像のようになるはずです。F12の開発者ツールで確認するとhtmlが組みあがっていることがわかります。

-WEB開発
-, , ,