WordPressの独自テーマ作成方法2【トップ静的部分の作成】

2021年9月8日 13:57

※自分用備忘録
※下記の手順はローカルでの作業です
※作成したテーマは、実際に稼働させるWordPressのテーマに追加する必要があります

独自テーマ作成の手順

MAMP→htdocs内に作成したWordPressのフォルダに必要なデータを入れていきます。

WordPress→wp-content→themesの中にフォルダを作ります。
twentynineteenやtwentytwentyなどが最初から入っているフォルダです。
同じ階層に作りましょう。
フォルダ名がそのままテーマの名前になります。

index.php

style.css

作成したフォルダをテキストエディタで開き、「index.php」と「style.css」ファイルを追加します。

上記二つのファイルを作成後WordPressの管理画面からテーマ選択画面を開いてみると、設定が反映されているのが確認できます。

テーマを有効化しindex.phpに何かを記述してみるとトップページに反映もされます。

@charset "utf-8";
/*
  Theme Name: フォルダ名（テーマ名）
  Author:　テーマ作成者名（作成チーム名）
  Description: テーマの説明。長い文章でもOK
  Version: 1.0
  License: ライセンス名
*/

WordPressのテーマの決まり事を書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <?php wp_head(); ?>
</head>
<body>

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

index.phpには必ず「<?php wp_head(); ?>」と「<?php wp_footer(); ?>」を記述します。
これを記述することによりログインしている状態の時にWordPressのメニューバーを表示させることができます。

<?php wp_head(); ?>は</head>の直前に、<?php wp_footer(); ?>は</body>の直前に記述しましょう。

index.phpにstyle.cssを適用させるには下記のコードをhead内に記述します。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

テーマの詳細を書いたcssファイルと装飾のためのcssを分けるケースも多くあります。

style.cssと別のフォルダに.cssファイルを作る場合は下記をhead内に記述します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

functions.php

functions.phpにはWordPressに追加する機能や挙動をPHPで記述します。

WordPressに必要なファイルは厳格に付与するファイル名が定められています。
functions.phpがfunction.phpや、style.cssがstyles.cssなどとならぬよう注意しましょう。

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