ワードプレスには様々なテーマがあって、好きなテーマを選んで使っている人が多いと思います。
使っていると、自分の好きなようにカスタマイズしてみたい!と思うようになってくる人もいるはずです。
実は、ワードプレスのテーマは自作することもできるんです。
オリジナルテーマを作れば、自分の理想的なワードプレスのサイトを作れるようになりますよ!
オリジナルテーマを作るなんて難しそう…という方のために、今回は、ワードプレスでオリジナルテーマを作るメリットや基本的な流れについて見ていきましょう。
WordPress(ワードプレス)のオリジナルテーマを作るメリット
![](https://web-hero-japan.com/blog/wp-content/uploads/2022/10/23662507_s.jpg)
ワードプレスには、色々なテーマがありますが、自分でオリジナルテーマを作ると何がいいの?と思いますよね。
オリジナルテーマを作れば、必要な機能やデザインが備わった自分の理想的なサイトが作れることがメリットです。
作成後も、自分の好きな機能やデザインに変更することができます。
既存のテーマは、決められた変更しかできず、自分の思うようにカスタマイズすることはできませんよね。
不要な機能も最初から入れなければいいだけなのでサイトの読み込み速度もアップしますよ。
WordPress(ワードプレス)の仕組みを理解しよう
![](https://web-hero-japan.com/blog/wp-content/uploads/2023/04/choong-deng-xiang-YBtAJPcvc4Y-unsplash-1.jpg)
ワードプレスの構成は次のようになっています。
- プラグラム:Webサイトを表示させるためのもの
- データベース:生地の内容や画像を保存するためのもの
プログラム部分には「PHP」という言語が使われていて、データベース部分には「MySQL」というシステムが使われています。
ユーザーがWebサイトにアクセスするとPHPがデータベースの内容を取得し、決められたデザインに当てはめて表示するシステムになっています。
システム部分で使用されているPHPファイルを書き換えれば、自由に表示を変えることができるんです。
オリジナルテーマを作成する場合は、ワードプレスを構成する複数のPHPファイルを作成していきます。
WordPress(ワードプレス)でオリジナルテーマを作るときに必要な知識
![](https://web-hero-japan.com/blog/wp-content/uploads/2023/04/mark-516279_640.jpg)
ワードプレスでオリジナルテーマを作りたいなら、次のような知識を身に着けておくといいでしょう。
- HTML:コンテンツをブラウザに表示させるベースの言語
- CSS:文字や背景の装飾・デザインを行うための言語
- PHPの変数や関数:ワードプレスで使用されるプログラミング言語
- WordPressの基本構造:テーマがもつ役割を理解するために必要な知識
基本的なことは理解しておくとオリジナルテーマが作りやすくなります。
WordPress(ワードプレス)のオリジナルテーマを作成する流れ
![](https://web-hero-japan.com/blog/wp-content/uploads/2023/05/glenn-carstens-peters-npxXWgQ33ZQ-unsplash.jpg)
ワードプレスでオリジナルテーマを作成する流れを見ていきましょう。
- ローカル環境を構築する
- HTMLとCSSでWebサイトをデザインする
- 作成したデザインをPHPファイルに落とし込む
- PHPコードの追記
- テスト
- 本番環境へ移行
ローカル環境を準備する
ワードプレスでオリジナルテーマを作成する場合は、自分のパソコンの中でローカル環境を構築する必要があります。
ローカル環境のMAMP上にワードプレスをインストールした状態で進めましょう。
HTML・CSS・画像ファイルを準備する
事前に、サンプルページやHTMLファイルなどを準備しておきましょう。
項目 | 内容 |
---|---|
webst8 | htmlファイル類を格納しているフォルダ。あとでワードプレスのthemesフォルダに移動します。 |
index.html | 今回ワードプレス化するウェブページ |
mystyle.css | index.htmlを整形するスタイルシート |
images | 画像を格納しているフォルダ |
準備した「webst8」フォルダをワードプレスのthemesフォルダにコピーします。
そして、webst8フォルダの中にstyle.cssを新規作成し、ワードプレスに格納したwebst8フォルダにstyle.cssを追加しましょう。
style.cssには、テーマの名前などを入力します。
index.phpを作成する
トップページとして用意していたindex.htmlのファイル名を「index.php」に変更しましょう。
テーマを適用する
テーマが適用できるようになるので、ワードプレスの外観⇒テーマから「webst8」を有効化しましょう。
テーマを適用した後にトップページを表示し、テーマが表示されていれば完了です。
相対パスを修正する
これでいったんテーマの適用ができるようになりましたが、この状態ではまだCSSファイルのスタイルが適用されない、画像が表示されないなど不完全な状態です。
ここから修正していきましょう。
ワードプレスのインストールフォルダが「localhost/wpkm/webst8/images/xxx.jpg」となっていてファイルが見つからないと画像が表示されない。
ワードプレス独自の関数を入れて修正します。
■修正前<link rel=”stylesheet” href=”mystyles.css”>
↓
■修正後<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/mystyle.css”>
画像ファイルのパスも修正しましょう。
■修正前<img src=”images/top.jpeg” alt=”トップページ画像”>
↓
■修正後<img src=”<?php echo get_template_directory_uri(); ?>/images/top.jpeg” alt=”トップページ画像”>
画像がたくさんある場合は、エディタ上で「コントロール+F」を押すと一括置換可能です。
ワードプレス関数(wp_head()とwp_footer())を追加する
次に、ヘッダーとフッターの関数を追加しましょう。
- <?php wp_head(); ?>:</head>タグの直前
- <?php wp_footer(); ?>:</body>タグの直前
<?php wp_head(); ?>
</head><body>
…
<?php wp_footer(); ?>
</body>
</html>
このように入力します。
設定後にログインし、トップページを表示すると管理バーが表示されるようになります。
これで基本的な設定ができるようになりました。
そのほかのテンプレート
ファイル名 | 概要 |
---|---|
index.php | ワードプレス必須のテンプレート。 |
single.php | 投稿用のテンプレート |
page.php | 固定ページ用のテンプレート |
archive.php | アーカイブ用のテンプレート |
category.php | カテゴリーページのテンプレート |
404.php | ページが見つからないエラー(404エラー)用のテンプレート |
search.php | 検索結果用のテンプレート |
その他にもワードプレスには必要なテンプレートがあります。
基本的な設定ができたら順番に設定していきましょう。
WordPress(ワードプレス)のオリジナルテーマを作るメリットや流れを解説!まとめ
![](https://web-hero-japan.com/blog/wp-content/uploads/2023/03/24859323_s.jpg)
ワードプレスのオリジナルテーマを作るメリットや流れについて見ていきました。
- ワードプレスのオリジナルテーマを作れば自分の好きなようにカスタマイズできる
- HTMLやCSSなどの知識が多少必要
- ローカル環境の構築が必要
- 必須テーマは必ず入れるようにする
オリジナルテーマを作るためには、HTMLやCSSのコードを書き換える必要があります。
初心者の方は難しいかもしれませんが、まずは流れをつかむことが大切です。
是非、参考にしてみてくださいね。
![](https://web-hero-japan.com/blog/wp-content/uploads/2022/10/webhero_logo_new.png)
ホームページを今より活用して集客に繋げたい方、
WEBマーケティングを展開してきたい方はWebHEROにお任せください!
ホームページを活用して、もっと売上アップしたい…!
そう考えているあなたは、こんなお悩みをお持ちではないでしょうか?
そのお悩み、WebHEROにお任せください!
WEBマーケティングにおける重要なポジションを担っている「ホームぺージ」を
優秀なWEBマーケターの視点をいれて制作をさせていただきます!
まずは無料相談!
いつでもお気軽にご相談ください!