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

Wordpress

概要

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" />

 

テンプレートファイル

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

テンプレートファイル名 概要
front-page.php Webサイトのトップページを表示
single.php 投稿の記事ページを表示
page.php 固定ページを表示
category.php カテゴリーページを表示
search.php 検索結果ページを表示
archive.php 記事一覧を表示
404.php 404エラーページ表示

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

優先順位 テンプレートファイル名 備考
1 front-page.php
2 固定ページ表示ルール 「設定」→「表示設定」の「フロントページの表示」が「固定ページ」
に設定されている場合に表示
3 home.php
4 index.php
タイトルとURLをコピーしました