aaa

初心者のためのwordpressオリジナルテーマ作成の手順書


こんにちは、humaruです

今日は、初心者向けにWordPressのオリジナルテーマ作成方法を解説していきます!

 

はじめに

そもそもWordPressのテーマを変更したことがあるでしょうか?

WordPressの左メニューの”外観”から”テーマ”に行くと、テーマを変更することができるので、まず最初から入っているテーマを切り替えてお気に入りのものにしてみましょう。

オリジナルテーマもここから選択するので、テーマの変え方は覚えておいてくださいね。

オリジナルテーマを作成することは、”いかにもWordPressっぽい”ブログサイトから抜け出る一歩でもあります。あまりサイトのコーディングをしたことが無い人にとっては少し難しい部分もあると思いますが、ぜひ挑戦してみましょう。

 

作成手順

下準備

必要な知識・ツール

使用言語
・HTML/CSS
・PHP
・・今回はどちらも初級者レベルでOK
ツール
・FTP
・・テーマの更新がしやすくなります

ディレクトリの説明

まず始めにFTPを使用して、WordPressのテーマに関わるファイルが保存されている場所に移動します。

例)wordpress(WordPressのファイル一式が入っているディレクトリ。人によってはフォルダ名が違う場合があります。) > wp-content > themes

ここに各テーマが収納されています。
デフォルトでは「twentyfourteen」や「twentythirteen」、「twentytwelve」といったフォルダが入っています。
それらのファイル一つ一つがテーマとなっています。

同じ階層にオリジナルテーマとして「sample」というフォルダを作成してみましょう。

これでテーマに必要なファイルをいれる場所は確保できましたので、実際にテーマを構成するPHPやCSSを書いていきましょう。

各ファイルの役割

テーマのファイル数は、ページ構成やテーマ機能の複雑さによって、変動します。

「twentyfourteen」や「twentythirteen」のフォルダの中を観ていただければ分かると思いますが、20~30個以上のファイルで構成されています。

カスタマイズが可能なテーマについては、その倍以上のファイルで構成されることもあります。

今回は初心者向けでもありので、いきなり大規模なものを作るのではなく、まずは自分一人でもテーマをいじれそうな感じにしていくので、デザインにはあまりこだわらず、なるべく少ないファイル数で作成してみます。

今回、作成するファイルの一覧です。

1. style.css
2. screenshot.png
3. index.php
4. header.php
5. footer.php
6. content.php

 

まずはじめにstyle.cssを編集してテンプレートの初期設定をします。
style.cssを開いたら一番上に、以下のようなフォーマットでテンプレートの説明を入力しましょう。
(”:[コロン]”以下は自分の好きなものにしてかまいません)

入力したら保存します。

管理画面からテーマをみると下の画像のように新しいテーマが増えているはずです。


 

original_theme1

これをクリックすると下の画像のように先ほど、style.cssに入力した情報が記載されているのがわかります。


 

original_theme1_detail

続いて、screenshot.pngを追加してみましょう。

この画像は、テーマのサムネイル画像になります。

上の画像の灰色になっている部分に画像が表示されます。

必要に応じて追加してください。

 

今回はヘッダーとフッターを分けるので、まずはindex.phpにheader.phpとfooter.phpを呼び出すコードを書きます。

 

次にheader.phpを編集します。
普通のHTML記述の場合は、ヘッダーやフッターなど別々に分けませんが、WordPressの場合には、拡張機能を使用したりする際に、ヘッダー、フッター、ボディの区別がはっきりしていた方が便利なため、ファイルを分けています。

header.phpには主に、ページのタイトルやメタ情報から、サイト本体のヘッダーやナビバー部分程度までを記載します。

以下のようにHTMLとPHPを記述してみましょう。

フッターには、bodyやdiv、htmlの閉じるタグとfooterタグを入れておきます。

 

ここまで の状態で、テーマを有効化してみましょう。

以下のように表示されます。


 

フェーズ1


 

WordPressの管理画面から設定したブログのタイトルと説明文が表示されています。

また、ホームへのリンクが設定されているので、ヘッダーが固定の場合はどのページいてもタイトルをクリックすれば、ホームに戻ってこれる状態になっています。

このように、WordPressのテーマはphpでWordPress用の関数を呼び出すことで、タイトルを表示したり、記事の内容を表示させていきます。

他の関数も知りたいと言う方は、以下のリファレンスを見てみましょう。

関数リファレンス

投稿記事の表示

次に投稿したタイトルが表示されるようにしましょう。

index.phpに以下のようにコードを加えます。

次にcontent.phpを編集します。

以下のように入力して、表示される投稿内容を設定します。

ページを更新すると下の画像のように投稿した記事の”タイトル”、”日付”、”カテゴリー”が表示されます。

 


 

フェーズ2


 

次にCSSでデザインを適用する方法についてお話ししていきます。

CSSファイルのstyle.cssをheadタグ内で以下のように呼び出します。

 

階層の指定が少し複雑なのは、WordPressのサイトを見ているとき、直接、テーマフォルダ内のindex.phpを読み込んでいる訳ではなく、階層が異なるため、指定の仕方に少し工夫が必要になります。

画像を挿入する際にも、HTMLをいじるような単純な相対パスではないので、注意してください。

それでは、style.cssに以下のコードを追加してみましょう。

以下のようになっていれば、CSSが適用されています。


 

フェーズ3


 

以上のようにWordPressのテーマ作成は、WordPressの読み込みたい投稿をPHPで読み込み、CSSでデザインを調整することを繰り返して作り上げていきます。

 

テーマのアップロード方法

FTPを使っている場合には、FTP経由でアップロードすれば、大きな問題はありません。
しかし、FTPを使えない環境でも作ったテーマをアップロードすることができます。

友達のWordPressに自分の作ったテーマを適用させてあげる際などに役立つかと思います。

それでは手順のほうに入っていきます。

1. 作成したテーマフォルダをZip形式で圧縮します。
2. WordPressの管理画面を開きます。
3. 左メニューの”外観”をクリックします。
4. 左上の”テーマ”の文字の右となりにある”新規追加”をクリックします。
5. 左上の”テーマを追加”の右となりにある”テーマのアップロード”をクリックします。

thema-upload
6. ファイルの選択画面が表示されるので、最初に圧縮しておいたテーマフォルダを選択して、インストールします。
7. ”テーマ”にインストールしたテーマが追加されているので、”有効化”させることで、オリジナルテーマが適用されます!

まとめ

テーマの仕組みから作り方、適用の仕方まで一通り、触れてみました。
WordPressを入れてみたものの、複雑で中身がなんだかよくわからないよー、これから何しよー、と思ってた人にとっては、たくさんあった構成ファイルからテーマに関連する部分が分かり、記事を書くだけの使い方から、WordPressのさらなる活用に一歩踏み出せたのではないでしょうか。

オリジナルテーマを自由に使えるようになると、ブログサイト以外にもWordPressの活用が広がります。例えば、運用してるサイトのお知らせやニュースの入稿を直打ちでやってた。なんて場合には、丸々、WordPressに移行して、更新の多い部分は、WordPressの管理画面から入稿、なんてフローに切り替えることもできちゃいます。その他、ニュースサイトに改造したり、身内だけのちょっとしたSNSサイトに改造することだって可能です。

一般に無料で公開されているテーマもたくさんあるので、インストールしては、コードを読んで、シャレた部分は参考にしたりして、自分だけの最高のサイトを作ってみましょう!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleWordpressでのアクセス解析に便利なプラグイン15選