WordPressのテーマを自分で作ってみています。
無料の素敵テーマでステキやん♪て思っていたのですが、
仕事でテーマを作った所思ったよりも簡単だったので、じゃぁ作ってみようかという流れです。すみません。
で、テーマ作りの流れをまとめました。
- まずデザインを普通にコーディング。▼
- 拡張子をPHPに変える。▼
- CSSファイルを編集。（テンプレートと認識させる）▼
- テーマを入れるフォルダを作って、ファイルを入れる。▼
- index.phpのリンク関係をテンプレートタグに書き換える。▼
- index.phpをパーツ化（分割）する。▼
- パーツ編集 header.php ｜テンプレートタグに書き換える▼
- パーツ編集 header.php ｜テンプレートと認識させる▼
- パーツ編集 index.php ｜WPループに書き換える▼
- パーツ作成 function.php ｜テーマをウィジェット対応にする▼
- パーツ編集 sidebar.php ｜ウィジェットを表示させる▼
- パーツ編集 footer.php ｜テンプレートと認識させる▼
---------------------------------------------------------------------
ここまでで、管理画面からテーマの変更・選択が可能
---------------------------------------------------------------------
1.まずデザインを普通にコーディング。
HTML+CSS（index.html + style.css）でコーディングします。
出来ればscreenshot.png（640*480）も用意するとハッピーですｗ
2.拡張子をPHPに変える。
index.html → index.php に変更します。
3.CSSファイルを編集。（テンプレートと認識させる）
CSSファイルの最初に以下追記。
[css]
/*
Theme Name:作ったテーマ名（必須）
*/
[/css]
他にも、
[css]
Author：名前
Author URI:URL
Version:バージョン
[/css]
などがあるけど、必須ではないです。
4.テーマを入れるフォルダを作って、ファイルを入れる。
wp-content/themes/作ったテーマ名 でフォルダを作成します。
上記のフォルダに、ここまでに作ったindex.php ・ style.css・（作っていれば）screenshot.png を入れます。
ここまでの作業で、もうWPの管理画面からテーマの選択・変更が可能になります。
・・・意外にあっさりできる気がしませんか？私は単純なので、そう思ったから作ってみてますｗ
screenshot.pngを作っておくと、管理画面上でサムネイルが出るのでそれらしくなりますｗ
5.index.phpのリンク関係をテンプレートタグに書き換える。
[php]
//テンプレートのディレクトリのURI取得
<?PHP echo get_template_directory_uri(); ?>
//テンプレートのスタイルシートファイルのURI取得
<?PHP echo get_stylesheet_uri(); ?>
[/php]
6.index.phpをパーツ化（分割）する。
- ヘッダー・・・header.php
- サイドバー・・・sidebar.php
- フッター・・・footer.php
- 残り（コンテンツ部分）・・・index.php
上記4つに分けます。
分けた後、パーツに分けてPHPファイルをindex.phpに読み込ませるために、
index.phpファイルにタグを記述します。
[php]
//以下を記述した箇所で、header.phpが表示される
<?PHP get_header(); ?>
//以下を記述した箇所で、sidebar.phpが表示される
<?PHP get_sidebar(); ?>
//以下を記述した箇所で、footer.phpが表示される
<?PHP get_footer(); ?>
[/php]
7.パーツ編集 header.php ｜テンプレートタグに書き換える
書き換えられる所は書き換えましょう。
テンプレートタグは以下。
[html]
//サイト名を出力する
<?PHP bloginfo('name'); ?>
//記述サンプル
<title><?PHP bloginfo('name'); ?></title>
//サイトの概要・説明文の出力する
<?PHP bloginfo('description'); ?>
//記述サンプル
<meta name="description" content="<?PHP bloginfo('description'); ?>" />
//トップページのURLを出力する
<?PHP home_url(); ?>
//記述サンプル
<h1><a href="<?PHP home_url(); ?>" title="<?PHP bloginfo('name'); ?>"><?PHP bloginfo('name'); ?></a></h1>
//例えば、記事ページ（single.php）で『記事名｜サイト名』と記述したい場合
<title><?PHP wp_title('|',true,'right'); ?><?PHP bloginfo('name'); ?></title>
//→記事名の右側（right）に、「｜」という区切り文字を入れる。trueは表示、falseは値を返します。
[/html]
8.パーツ編集 header.php ｜テンプレートと認識させる
header.phpの、タグの直前に以下の様にソースを記述します。
[html]
<?PHP if(is_singular()) wp_enqueue_script("comment_reply"); ?>
<?PHP wp_head(); ?>
</head>
[/html]
1行目は、コメント投稿用のJavaScriptを読み込むため、
2行目は、このheader.phpファイルをWPでテンプレートとして使えるようにするためです。
9.パーツ編集 footer.php ｜テンプレートと認識させる
header.phpと同じように、footer.phpもテンプレートとして使えるようにするためにソースを記述します。
記述する箇所は、
