気になったことはなんでも調べてメモするブログ
  1. WordPress
  2. 46 view

WordPressテーマを自作しよう(1)最低限必要なものはすぐ揃う

Last updated: 2020/03/19

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(); ?>

footer.php の【最低限】

<?php wp_footer(); ?>
</body>
</html>




WordPressの最近記事

  1. 【TCD-ZERO】記事のタイトルをh1見出しにする

  2. 【TCD-ZERO】記事抜粋した末尾に「…」が表示されないようにする

  3. 【TCD-ZERO】記事一覧で (さらに&hellip;) と表示されてしまう問題を解決す…

  4. All In One WP Securityの初期設定で気を付けるポイント

  5. WordPressテーマを自作しよう(8)トップページと記事ページで別のものを表示する

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP