XAMPPでWordPress開発 on Mac OS 【自作テーマの作成】

タイガー

ローカルにXAMPPとWordPressで環境構築が完了したら、簡単に自作テーマを作成してみます。

●あらかじめhtmlを組んでおく

必要ないといえば必要ありませんが、私はローカルであらかじめhtmlとcssを作っておきました。

●自作テーマを追加

  1. XAMPP/htdocs/wordpress/wp-content/themes配下に、任意の名前で自作テーマ用のディレクトリを用意します。

  2. 作成したディレクトリ内で、index.php、header.php、footer.php、style.cssファイルを作成します。

  3. index.phpに、↓のようにあらかじめローカルで作成しておいたhtmlを貼り付け、保存します。

<!DOCTYPE html>
<html>
　　<head>
  　　<title>GOOD MORNING!</title>
　　　<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/style.css">
　　</head>

　　<body>
  　　<h1>GOOD MORNING!</h1>
  　　<p>WordPressで自作テーマを作成します。</p>
　　</body>
</html>

<link>タグに注目してみてください。
WordPressには、現在有効化されているテーマのパスを取得するphpの関数「get_template_directory_uri()」が用意されており、これに「/style.css」を結合することで、<link>タグ内でstyle.cssのパスを指定しています。

4.style.cssの頭に下記のコメントヘッダーを貼り付け（このコメントヘッダーを入れることでWordPressの管理画面から認識できるようになるため必須です）、その下にあらかじめ作成しておいたcssを貼り付け、保存します。

/*
Theme Name: Sample Wordpress Theme
Description: これは、サンプルのテーマです
Version: 0.0.1
*/

h1 {
  color: red;
}

p {
  color: green;
}

●自作テーマを有効化する

XAMPPのコントロールパネルからApache Web Serverを起動し、ダッシュボード（http://localhost:50000/wp-login.php）にアクセス、「外観」に飛ぶと、作成した自作テーマが追加されているので、「有効化する」をクリックして、テーマを有効化します。

http://localhost:50000/にアクセスすると、自作テーマが反映されています。


この記事が気に入ったらサポートをしてみませんか？