WordPressでブログを始めよう! ~第7回~ オリジナルテーマの下準備

WordPressでブログを始めよう! ~第7回~ オリジナルテーマの下準備

どうもこんばんは!HYPのこうじです。

さっそく今回は、ゼロから作るテーマの準備をして行きたいと思います!

オリジナルテーマの下準備

最低限必要なファイルを準備しよう

テーマを作成する上で、必須のファイルがいくつかあります。
それが以下のファイルです。

  1. index.php
  2. functions.php
  3. style.css
  4. screenshot.png

index.php

言わずもがな標準の表示となるファイルです。

基本的にはWordPressはそれぞれのページに応じたファイル名のページを表示します。
後日改めて説明しますが、例えば記事ページは『single.php』ファイルを読み込み、各カテゴリー分けされたページは『archive.php』ファイルを読み込むと言った具合です。

例えば、記事を表示するページへアクセスした際『single.phpファイルが見つからない!』なんて事があった場合、代替えファイルとして『index.php』ファイルが読み込まれます。

wordpress-7-1

こんな感じで、index.phpファイルは最終予防線みたいな感じですね。

functions.php

このファイルは、サイトを表示させる際に裏方でごにょごにょさせる内容を書き込んでおくファイルです。

普通にhtmlファイルしか操作した事ない人はphpというモノにまったく馴染みは無いと思いますが、php自体知らなくても大抵はコピペでなんとかなる時代なので、世の中便利になったなぁと思います。
知ってたらもちろん色々夢が広がりますけどね!

style.css

ページで使用するスタイルシートを書き込んでおくファイルです。
スタイルシート以外にも、テーマの概要等もこのファイル内に書き込みます。

screenshot.png

テーマを選択する時に表示される画像です。

wordpress-7-2

テーマを設置しよう

テーマの概要を変更

上記で説明した通り、テーマの概要は『style.css』の一番上に書き込みます。
ここらへんは、既存のテーマから持ってきた方が早いのでそうしましょう!
今回もWordPressのデフォルトテーマから持ってきます。

色々設定する場所はありますが、個人で使う場合(公開しない場合)は、『Theme Name』を編集しておけば、分かるのでそこだけで十分かと思います。

wordpress-7-3

htmlファイルを準備

今回はテストなので、簡単に用意しました。

wordpress-7-7

スクリーンショット画像を用意

ぶっちゃけこれは適当に用意しといて、テーマが完成したらそのキャプチャを使った方がそれっぽいです(笑)
せっかくなので、僕もメンフクロウさんを書いてみました。
素晴らしい仕上がりです。これは売れそうです。

wordpress-7-6

必須ファイルをフォルダにまとめてアップロード

functions.phpファイルはとりあえずそのファイル名で用意すればOK。中身は必要ありません。
この4ファイルをフォルダにまとめてテーマフォルダにアップロードしましょう。
テーマの置いておくフォルダは『ルートフォルダ > wp-content > themes』です。

wordpress-7-4

フォルダの中身

wordpress-7-5

認識しているか確認

テーマを置いたら管理画面からテーマが選択できるか確認してみましょう。

wordpress-7-8

ページを確認

それでは、ページを見てみましょう。
先ほどのふざけたページががちゃんと表示されました!

wordpress-7-9

オリジナルは大変

ゼロから作成するのは最初に言っておきますが、決して簡単ではありません。
煽っているように感じますが事実です。じゃないと仕事として成り立ちません。

・・・が!!

決して無理レベルではありません!
興味を持って始めれば、全然出来るレベルです。
実際、WordPressのTIPSサイトなんて今の時代溢れんばかりに公開されています。

慣れてきたら、オンラインマニュアルだけでも行けます。そんなもんです。

なので、最初は適当なテーマを見繕って、それをちょっとだけ自分流にカスタマイズしていくのが楽しい気がします。

『どこでどの作業させてんだよ。調べるのめんどくせー!』ってなったらおめでとうございます。ゼロから作ってください(笑)

おわり

今回は必須ファイルのみ説明しましたが、次回は他のファイルも説明したいと思います!
と言っても、きっとこれは使うんだろうなーってファイル限定になりそうです!

記事一覧

HYPについて