WordPressオリジナルテーマを作ってみよう　シンプルなブログサイト

こんにちは、koheiです。
WordPressには、色んなテーマファイルをインストールでき、自分好みのサイトにカスタマイズできますが、今日はそのテーマファイルを１から自分で作ってみようという記事です。
今回の記事では、以下のような必要な機能だけに絞ったシンプルなブログサイトを作っていきます。

本記事で作成するブログサイト

一応、ソースコードをコピペしても完成するように解説していますので、これから自作でWordPressサイトを作ってみようという方は是非参考にしてくださいね！

動画解説

【更新情報】2019年10月22日動画解説を追加しました。
動画による解説です。記事内容と合わせて参考にしてみてください！

■サイトの骨組み作成までを解説

■CSSでのレイアウト調整を解説

動画中に解説したソースコードの完成版は以下からダウンロードできます。参考にしてみてください。

【初心者でもできるWordPress講座】シンプルなブログサイト完成ソース

1 file(s)   152.15 KB

Download

上記動画では、CSSの実装内容を変えています。動画中に解説しているCSSのコードとブログ記事中に記載しているCSSのコードは若干異なりますのでご注意ください。

作成するためのツール、環境を準備する

まずは、WordPressのオリジナルテーマ作成に必要なツール等を準備しましょう。

ローカル環境（MAMP or XAMP）

とりあえずWordPressサイトをお試しで作ってみたいなら、自分のローカル環境（PC)にMANP(Mac)/XAMP(Windows) をインストールし、ローカルPC上にWordPressをインストールすることをおすすめします。
以下記事で、ローカル環境構築の備忘録を記載してますので、参考にどうぞ。
WordPressローカル環境の構築　備忘録

レンタルサーバー＆ドメイン

WordPressのオリジナルテーマを作成し、本格的にWebに公開したいなら、レンタルサーバー/ドメインを契約しましょう。
以下記事でレンタルサーバー＆ドメインについて簡単に紹介しています。参考にどうぞ。
【初心者用解説】そもそもWordPressって何？

エディタ

実装する時に使うエディタを用意しましょう。PCに標準で入っているメモアプリでもよいのですが、せっかくなので実装に便利なツールを用意しましょう。
私のおすすめはAtomというエディタです。
Atom

FTPツール

作成したオリジナルテーマや修正ファイルをサーバーへアップする時に必要です。
Windowsならフリーソフトの「FFFTP」が有名です。
FFFTP

Macなら「Cyberduck」というソフトがおすすめです。
Cyberduck

テーマフォルダを作成

さて、必要な環境、ツールを揃えたら、次は、オリジナルテーマを作成するためのフォルダやファイルを準備しましょう。
WordPressのテーマを作成するには、最低限以下のファイルがあれば大丈夫です。以下から空のテンプレートファイルをダウンロードできます。

テーマフォルダ　空のテンプレート

1 file(s)   681.67 KB

Download

WordPressサイトを作るために最低限必要なファイル

index.php
すべてのページ生成に使用される最も基本的なテンプレートファイルです。

functions.php
WordPressの様々な機能を使いたい時、このファイルに処理を加えます。

style.css
サイトをデザインするためのスタイルシートです。

screenshot.jpg
WordPress管理画面からテーマ選択する際に表示されるサムネイル画像です。

テーマを有効化する方法

作成したテーマフォルダをWordPressをインストールした場所内にある[wp-content]内の[themes]フォルダの中にアップロードします。（※ローカルPC環境の場合は、インストールしたWordPress内の同様の場所に配置しましょう。）

WordPress管理画面の「外観」→「テーマ」を選択します。
アップロードしたテーマファイルのサムネイル画像が表示されますので、選択して「有効化」しましょう。

これで、実装前の準備が整いました。
次からいよいよコーディングしていきましょう。

• 1
• 2
• 3

スポンサーリンク