はじめてWordPressのオリジナルテーマを作る練習・勉強方法

2020年2月6日  最終更新:2020年3月1日

HTMLとCSSはそれなりに触れるけど、WordPressのカスタマイズは難しそう！って思う人は多いと思います。

実際にWordPressをインストールしてカスタマイズしようとしても、見たこともないプログラミングコードがたくさん書かれていて、はじめての人はどこから手を付けて良いのかわからない状況です。

この記事では、ある程度「HTML」と「CSS」の知識と「WordPressのインストールができる」ことを前提としています。

まずはシンプルなWordPressテーマのデザインをカスタマイズしてみる！

私の練習＆勉強方法は、最低限のワードプレスの機能を使えて、デザインが施されていない「なるべくシンプルなテーマ」をダウンロードすることからはじめました。

無駄が省かれたWordPressのテーマは下記を参考にしました。
※ちょっと古い記事なので今は存在しないテーマもあるみたいです。。

密かに使ってるカスタマイズ前提のWordPress ブランクテーマ4つ

http://websae.net/wordpress-starter-theme-20141104/

ちなみに私は上記の記事にある「Underscore」というテーマをダウンロードしてカスタマイズしていました。

WordPressの大まかな構成をみる

ダウンロードしたWordPressのテーマのカスタマイズする箇所は下記の通り。

・「header.php」ヘッダー
・「footer.php」フッター
・「sidebar.php」サイドバー
・「index.php」主にトップページのみに表示される部分
・「page.php」固定ページ
・「single.php」投稿記事ページ
・「archive.php」記事一覧とかの部分
・「search.php」検索結果ページ
・「style.css」スタイルシート

こちらは「とりあえずデザインのみカスタマイズする場合」ですので、デザイン以外のカスタマイズをする場合は別のファイルをカスタマイズしたり、新たなファイルを作ったりもします。

CSSについてはフォルダを作って「css/style.css」という形で呼び出すのもありと思います。

バックアップを取りながら、とりあえずカスタマイズしてみる！

まずは考えても仕方ないので、とりあえず上記で書いたphpファイルを開いてカスタマイズしてみるのが早いと思います。
※念の為カスタマイズする際はバックアップを取っておくと安全です。

php言語で書かれているファイルですが、基本的な構成はHTMLと似ていますので、「<div>」とかの要素に「id」や「class」をつけてみて、それにCSSでデザインを付けていく練習からはじめると意外と理解していけるかと思います。