ワードプレスオリジナルテーマ作り方①　必要なファイル | 福岡のホームページ制作はマリオ君にお任せ

ワードプレスをオリジナルテーマに

本日は現在レンタルサーバーヘテムルのワードプレス簡単インストールの初期で設定されているワードプレスのテンプレートデザインから、自分でいろいろカスタマイズできる、オリジナルテーマに変更していきたいと思います。

※追記します。下記練習用フォルダをご準備しました。ワードプレスオリジナルテーマの完成見本とワードプレス化する前のhtmlをhtmlフォルダを格納しておりますので、やりながらブログを見られたい方はダウンロードされてみてください。


ダウンロードはこちら

ではさっそく

こちらも、設定するだけなら簡単なのでサックっとやっていきたいと思います。


大まかな流れは、オリジナルテーマに最低限必要なファイルを作成して、FTPソフトを利用してアップロードして外観のテーマをテンプレートからオリジナルのテーマに変更するだけです。

ワードプレスに必要なファイルを準備

それでは、さっそくワードプレスのオリジナルテーマに必要なファイルを作成していきます。

オリジナルテーマを表示するのに最低限のファイルを説明していきます。

必要なファイルは下記になります。

• CSSフォルダ
• imgフォルダ
• jsフォルダ
• partsフォルダ
• 階層変更フォルダ
• category.php
• functions.php
• home.php
• index.php
• page.php
• single.php
• style.css

それではフォルダ・ファイルの説明をしていきます。

上から順に

CSSフォルダ

これはCSSを入れるフォルダになります。ホームページに色を付けたり、形を整えたりするCSSを記述したファイルを格納するフォルダです。絶対必要なわけではないですが整理整頓のためにフォルダを作っています。フォルダの名前はお好きな名前で大丈夫です。これは、通常の静的なHTMLのホームぺージを作るときも作る感じのやつですね。
現状なにも入っていません。

imgフォルダ

これは画像を入れるフォルダになります。ホームページで使用する画像を格納するフォルダです。絶対必要なわけではないですがこちらも整理整頓のためにフォルダを作っています。フォルダの名前はお好きな名前で大丈夫です。これも、通常の静的なHTMLのホームぺージを作るときも作る感じのやつですね。よく使われる名前はimageとかimgですね。人によってはphotoとかgazouとかの名前にされる方もいらっしゃいます。
現状なにも入っていません。

jsフォルダ

これはジャバスクリプトを記述したファイルを入れるフォルダになります。スライドショーやローディングなど様々な動きをつけることができるjavascriptを記述するファイルを格納するフォルダです。絶対必要なわけではないですがこちらも整理整頓のためにフォルダを作っています。フォルダの名前はお好きな名前で大丈夫です。これも、通常の静的なHTMLのホームぺージを作るときも作る感じのやつですね。
現状なにも入っていません。

partsフォルダ

これは今後共通になりそうな部分を使いまわせるようにパーツ化したファイルを入れるために作っています。ナビゲーションの部分やフッターの部分などの全ページで使いまわせるパーツを入れるフォルダになります。これも絶対必要なわけではないですがこちらも整理整頓のためにフォルダを作っています。

階層変更フォルダ

階層変更はなくてもいいですが、前回サブディレクトリーにインストールしたワードプレスをドメイン直下で表示させるときに使用したファイル
index.php
.htaccess
が入っています。
別に捨ててもいいのですが、一応とっています。
これはなくてもほんといいです。

ここからはファイルの説明です。

ファイル名は基本的に名前はそのまま使用します。（カスタム投稿や固定ページのテンプレートなどで例外あり）

category.phpファイル

こちらはワードプレスの管理画面から投稿で記事を書いたときの記事のカテゴリー一覧を表示するファイルです。
例）お花屋さんが投稿機能を利用して記事を書いているとき
■キャンペーン
■最新情報
■本日のおすすめ
■お花の豆知識
とかのカテゴリーが予想されますね。
こちらの投稿した記事の一覧を表示させるファイルがcategory.phpになります。

functions.phpファイル

こちらはワードプレスにいろいろ命令するときに記述するファイルです。
ファイル名は変更は禁止で、
functions.php
という名前で使用してください。
こちらのファイルに今後いろいろ、ワードプレスに関する命令（CSSやジャバスクリプトみたいな感じで）命令などを書いていきます。

home.phpファイル

こちらはトップページに使用するファイルになります。ワードプレスにはトップページにする方法は何個かありますが、今回はhome.phpをトップページにします。
home.phpに記述したものが自動的にトップページとして表示されます。

index.phpファイル

こちらのファイルは詳しく知りませんがとりあえずいるファイルです。
ファイルの中は何もかいてありませんが、とにかくいると覚えておいてください。

page.phpファイル

こちらは固定ページを表示するファイルです。
例）お花屋さんだと
■ショップ情報
■取り扱いの花
■アクセス
■お問い合わせ
■選ばれる理由
とかですかね、投稿記事のぺージって感じですかね。
投稿記事と違い基本的には静的に近い感じで制作する方が多いです。その分デザインに幅をもたせてより細かく情報を伝えることができます。

single.phpファイル

こちらはワードプレスの管理画面から投稿で記事を書いたときの記事が表示されるぺージです。
今読んでいただいている記事が表示されるファイルです。

style.cssファイル

こちらCSSを記述するファイルですが、基本的にCSSファイルはCSSフィルダに格納するので、こちらのファイルはワードプレスの管理画面でエラーの文字が出ないように、するため？？のファイルになります。とりあえず必要なファイルです。
このファイルの中にテンプレートの内容を記述したりします。


以上がワードプレスに必要なファイルの説明です（ほかにもありますが現状はこれでOK）。

次はオリジナルテーマにするにあたってスーパー簡単にレイアウトをきめます。


それじゃまた。