ゼロから始めるWordPress自作テーマ #1「自作テーマをつくろう」

WordPress

「０から始める自作テーマでWordPress作成」の記事では、既成のテーマを使わずに、イチからWordPressサイトを構築するやりかたを紹介していきます。WordPressテーマを自作できるようになると、自由にサイトをデザインすることができます。既成テーマをカスタマイズしていくより、実は自作したほうが簡単なことも多いです。このブログサ

「０から始める自作テーマでWordPress作成」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。

WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。

第１回は「自作テーマをつくろう」です。

自作テーマに必要な最小限のファイルを用意して、そのテーマに切り替えます。以下のようにWordPressのテーマに自作テーマを表示して、HTMLで記述した内容をサイトのトップページに表示できるようになります。

外観に自作テーマが表示される
サイトのトップページを表示できる

WordPressのインストール

WordPressのインストール方法は省略します。レンタルサーバーにすでにWordPressがインストールされていることを前提に進めていきます。

ぼくのWordPress環境は以下の通りです。

ちなみに、レンタルサーバーはロリポップのライトプランがオススメです。月額¥250と費用が安く、安定したサーバー環境を得ることができます。以前に、ロリポップでWordPressをはじめる方法についてのブログを書きましたので、そちらも参考にしてみてください。

ouni.work
https://ouni.work/blog/ロリポップでwordpressをはじめる/
https://ouni.work/blog/ロリポップでwordpressをはじめる/

WordPressテーマに必要なファイルは２つだけ

WordPressテーマに最低限必要なファイルは以下の２つです。

HTMLを作成したことがある方は、index.html と style.css はどういうものか分かるかと思います。WordPressテーマでも同様に index.php と style.css を使います。index.html ではなく index.php のように拡張子が php になっています。これは、WordPress が php というプログラミング言語を使うためです。ひとまず、今は気にせずに index.html と同じものだと思っておいてもらうとOKです。

それでは、さっそく２つのファイルを作成します。以下のようにフォルダを作成して、その中にファイルをつくります。

myWpThemeというフォルダの中にファイルを作る

ファイルができたら、それぞれファイルの中身を以下のように書いておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My WordPress Theme</title>
</head>
<body>
  これはWordPressテーマです。
</body>
</html>
/*
Theme Name: わたしの自作テーマ
*/

これで自作テーマに必要なファイルの準備は完了です。

サーバーにアップする

FTPを使ってPCに作成したファイルを、サーバにアップします。

Step.1 FTPでサーバーに接続する

ロリポップを使っている場合は、以下の情報を参考にFTPを設定します。ちなみに私は、Commander One というMacのFTPソフトを使用しています。

ロリポップ！レンタルサーバー
各種FTPソフトの設定方法 / ファイル管理 / マニュアル - レンタルサーバーならロ...
https://lolipop.jp/manual/hp/ftp-set/
ロリポップ！レンタルサーバーのご利用マニュアル FTPソフトの設定を説明したマニュアルページです。

これでサーバーに接続できるようになりました。

Step.2 テーマファイルをアップする

テーマフォルダをアップする場所は wptest/wp-content/themes/ です。ここに作成したファイルをフォルダごとアップします。今回は、myWpThemeというフォルダの中に index.php と style.css を作成していますので、myWpTheme ファルダをアップしています。

FTPでサーバーにアップする

これで WordPressテーマをつくることができました。

Step.3 テーマを切り替えてみる

さっそく作成したテーマを確認してみます。正しくテーマファイルがアップロードできていれば、「外観」＞「テーマ」の中に、作成したテーマが表示されています。そのテーマを有効化します。

外観に作成したテーマが表示される

有効化できたら、サイトのトップページを表示してみます。すると index.php の内容が表示されます。

サイトのトップページにindex.phpの内容が表示される

まとめ

第１回では、WordPressテーマを自作して表示させるところまでを紹介しました。

WordPressテーマも、基本は html の作成と同じで index.php と style.css で構成されているだけです。htmlを作成したことがある方にとっては難しい内容ではなかったはずです。

次回は、トップページに 投稿一覧を表示させてみます。