WordPressの自作テーマ作成への道 -1- (準備〜テンプレートファイル)

概要

WordPressのテーマを1から作成するノウハウをまとめていく。

背景としては、WordPress関連のお仕事が増えてきたため。

今回は、自作テーマ作成の準備をまとめる。

準備編

今回はサクッとXAMPPで開発環境を作り、WordPressをインストールしています。

XAMPP
https://www.apachefriends.org/jp/

WordPress本体のダウンロード
https://ja.wordpress.org/

テーマを作る対象を確認する

下記パスに「themes」フォルダがあるか確認する。
wordpress – wp-content – themes

自作テーマフォルダを作成する

「themes」フォルダが確認できたら、そこへ自作テーマフォルダを作成する。

※今回は「jet-theme」を作成する事として進める。
wordpress – wp-content – themes – jet-theme

先に必要なフォルダの作成

「jet-theme」フォルダの中に「css」、「images」フォルダを新規作成する。

自作テーマの設定を記述する

「jet-theme」フォルダの中に「style.css」ファイルを新規作成する。

「style.css」に下記コードを記述する。

@charset "UTF-8";
/*!
Theme Name: [テーマ名]
Theme URI: [テーマ配布URI(URL)]
Description: [テーマの説明]
Version: [バージョン]
Author: [作者名]
Author URI: [作者のURI(URL)]
*/

動作確認

「jet-theme」の中に「index.php」ファイルを新規作成する。

「index.css」に下記コードを記述する。

<?php get_header(); ?>

<?php bloginfo('name');>

<?php get_footer(); ?>;

※「get_header();」、「get_footer();」が無いと動かない

※「bloginfo」関数は、パラメータに応じてブログ情報を返す。
パラメータに関しては、リンク先のWordPressのテンプレートタグ参照

style.cssを読み込む

自作テーマのcss/style.cssをPHPで読み込む場合は下記を追記する。

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

テンプレートファイル

テンプレートファイル名(一部)

トップページのテンプレート階層