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)も用意するとハッピーですw
2.拡張子をPHPに変える。
index.html → index.php に変更します。
3.CSSファイルを編集。(テンプレートと認識させる)
CSSファイルの最初に以下追記。
/* Theme Name:作ったテーマ名(必須) */
他にも、
Author:名前 Author URI:URL Version:バージョン
などがあるけど、必須ではないです。
4.テーマを入れるフォルダを作って、ファイルを入れる。
wp-content/themes/作ったテーマ名 でフォルダを作成します。
上記のフォルダに、ここまでに作ったindex.php ・ style.css・(作っていれば)screenshot.png を入れます。
ここまでの作業で、もうWPの管理画面からテーマの選択・変更が可能になります。
・・・意外にあっさりできる気がしませんか?私は単純なので、そう思ったから作ってみてますw
screenshot.pngを作っておくと、管理画面上でサムネイルが出るのでそれらしくなりますw
5.index.phpのリンク関係をテンプレートタグに書き換える。
//テンプレートのディレクトリのURI取得 <?PHP echo get_template_directory_uri(); ?> //テンプレートのスタイルシートファイルのURI取得 <?PHP echo get_stylesheet_uri(); ?>
6.index.phpをパーツ化(分割)する。
- ヘッダー・・・header.php
- サイドバー・・・sidebar.php
- フッター・・・footer.php
- 残り(コンテンツ部分)・・・index.php
上記4つに分けます。
分けた後、パーツに分けてPHPファイルをindex.phpに読み込ませるために、
index.phpファイルにタグを記述します。
//以下を記述した箇所で、header.phpが表示される <?PHP get_header(); ?> //以下を記述した箇所で、sidebar.phpが表示される <?PHP get_sidebar(); ?> //以下を記述した箇所で、footer.phpが表示される <?PHP get_footer(); ?>
7.パーツ編集 header.php |テンプレートタグに書き換える
書き換えられる所は書き換えましょう。
テンプレートタグは以下。
//サイト名を出力する <?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は値を返します。
8.パーツ編集 header.php |テンプレートと認識させる
header.phpの、タグの直前に以下の様にソースを記述します。
<?PHP if(is_singular()) wp_enqueue_script("comment_reply"); ?> <?PHP wp_head(); ?> </head>
1行目は、コメント投稿用のJavaScriptを読み込むため、
2行目は、このheader.phpファイルをWPでテンプレートとして使えるようにするためです。
9.パーツ編集 footer.php |テンプレートと認識させる
header.phpと同じように、footer.phpもテンプレートとして使えるようにするためにソースを記述します。
記述する箇所は、