WordPressを利用してブログを作りたい。
でも好みのテーマが見つからない……。
それなら試しに自作してみませんか？(・ω・)ノ
この記事では、初めてWordPressテーマを作る人や、コーディング自体慣れていない人向けに、コンパクトに情報をお伝えしていきます。
もくじ
ローカルでWordPressを動かす
ローカルの動作確認環境を作りましょう！
要するに、開発中のWordPressブログを自分のパソコン上で誰にも見られずに動かそう、ということです。
テーマを作ろうとするくらいなので、皆さんすでに準備OKだったりして？
ひとまずこの記事では環境構築方法には触れずに、テーマ作成に移ります。まだ準備ができていない方は、「wordpress ローカル環境」などで調べてみてください。
（後日当ブログでもまとめるかもしれません）
ファイルを2つ作る
ローカル環境の wp-content/themes フォルダの中に、新しいフォルダを作りましょう（名前はなんでもOKです）
そして中に、次の2つのファイルを入れます。
- index.php
- style.css
index.phpの方はひとまず中身は空っぽでOKです。
style.cssの方には次のコードを書いてください。
/*
Theme Name: original-theme
*/「original-theme」はテーマの名前です。
日本語も入力できますので、お好きな名前をつけてください。
なんとこれだけで、外観設定で自作テーマを選択できるようになります。
しかしindex.phpが空っぽなので、適用しても何も表示されません！
ちょっとなんか書いてみましょう。
<?php
get_header();
get_footer();
?>書き足したのはWordPressが提供している機能で、
それぞれ「ここにヘッダー書いて！」「フッター書いて！」という意味です。
つまりサイトのメイン部分は2つの処理の間に書くことになります。
あらためてサイトを表示すると下の画像のようになるはずです。
デフォルトのヘッダーとフッターが表示されました。
シンプルですね！
編集できるようにしましょう。
ヘッダーとフッターを編集する
get_header は「header.php」を、get_footer は「footer.php」を、それぞれ呼び出す仕組みです。
なので同名のファイルを作っておくと、自作ファイルが呼び出されるようになります。
- header.php
- footer.php
中身は空っぽで……と言いたいところですがいくつか作法があり、【これだけは書いておかないとテーマとして成り立たない】という処理が存在するので、それだけ必ず書いておきましょう。
header.phpはこのように書きます。
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>5行目に関してはレイアウト次第で調整して問題ありません。
自作のヘッダーに関する処理（HTMLタグ）はこれらの処理の後、11行目以降に書き足しましょう。
footer.phpはこのように書きます。
<?php wp_footer(); ?>
</body>
</html>自作のフッターに関する処理は一番上に書き加えましょう。
これだけ書いておくと、WordPressのツールバーだけは表示されるはずです。
まとめ
ファイルが4つあればとりあえずテーマは動きます。
つづきはこちら↓
style.css の【最低限】
/*
Theme Name: original-theme
*/index.php の【最低限】
<?php
get_header();
get_footer();
?>header.php の【最低限】
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?><?php wp_footer(); ?>
</body>
</html>
この記事へのコメントはありません。