【作成編1】ワードプレス オリジナルテーマ作成方法|トップページ

前回ワードプレスのオリジナルテーマをイメージ画像を元に、html化まで行いました。
今回は、トップページ部分を作っていこうと思います。

ワードプレスでオリジナルテーマを作成する場合

    • 知識0の初心者では無理では?
    • ネットで調べるだけで出来た?
    • 環境づくりが大変じゃない?

など、色んな事を思っている方も多いと思います。
結果からお伝えしますと、htmlなどの知識がない方でも知識0から作成可能です。

この記事では、ワードプレスでオリジナルテーマを作成したいけど、用意する物や開発環境の作り方など、初心者向けに紹介します。
ワードプレスのオリジナルテーマ作成に興味があるけど、「やり方がわからない…」という方はぜひ参考にして下さい。

前回の記事はこちらです。

 

ワードプレス テーマ作成時に最低限用意するもの

ワードプレスのオリジナルテーマを作成する時に最低限用意しておいたほうが良いのは、

  • ローカル開発環境
  • テキストエディター
  • FTPソフト

上記3種類は最低限用意しておいた方が良いです。
最低限必要なものに関して1つずつ紹介していきます。

 

ローカル開発環境

既にワードプレスをインストールしてブログを公開している人は、公開しているサーバーに作成したファイルをアップロードすればテーマは、反映されますが書き直す度にサーバー上にファイルをアップロードする必要があるので、とても面倒な手間となっていまいます。

また、ファイルを書き直した際にコーディングミスがあった場合、ワードプレスにログインできなくなる場合もあり、復旧を行うのに時間が掛かる場合もあり、公開しているサーバ上にあるワードプレスを直接触るのは、あまりおすすめできません。そこで、パソコン上でインターネットに繋がずとも開発ができるように、ローカル開発環境を準備しておくと開発がとても捗ります

オススメの開発環境は、「Flywheel」というツールです。これは、面倒な開発環境を作成する必要もなく、簡単にワードプレスのローカル開発環境を作成可能です。

将来、クラウドソーシングを利用してワードプレスの案件獲得を考えている方は、必須のツールなので、ぜひ使ってみて下さい。

FlyWheelでの環境構築方法は、下記記事で紹介しているので、参考にして下さい。

 

テキストエディター

テキストエディターも最低限必要になるツールです。

phpファイルやcss、JQueryなど開発を行う際のファイルを作成してコーディングを行っていきます。

テキストエディターですが、オススメは「Atom」というテキストエディターです。

コードが色分けされていてとても見やすく、1度記述した事を覚えているので、コーディングを行いやすいです。

FTPソフト

なくても、開発が出来ないわけではありませんが、FTPソフトは用意しておいた方が、効率はかなり良くなります作業効率が違うので、最低限必要なツールの1つです。

FTPソフトとは、ワードプレスを置いているレンタルサーバーにファイルを簡単にアップロードしてくれるツールの事です。

レンタルサーバーにファイルをアップしたことがある方は、わかると思いますが、FTPソフトなしで、レンタルサーバにファイルをアップロードする場合、

  • Zipファイルに圧縮
  • ファイルを1個ずつアップロード

上記のような手間と時間が掛かって面倒だと感じた事があると思います。

FTPソフトでは、そんな手間と時間を掛ける必要もなく、複数のファイルが入ったフォルダーをまとめて一括でアップロードする事ができます。
ドラッグ&ドロップだけで、簡単にファイルをアップロードする事が出来るので非常におすすめです。

おすすめのFTPソフトは「FileZilla」です。

 

ワードプレス オリジナルテーマを作成していく

最低限、作成時に必要なツールを用意できたら、実際にワードプレスでオリジナルテーマを作成していきます。

ファイルの作り方は、テキストドキュメント(メモ帳)を新規作成して、「text.php」という名前を変更して下さい。その時「拡張子を変更するとファイルが開けない可能性があります」という警告がでますが無視して「はい」を選択して問題ありません。

今回、私が作成した際に作成したファイルは、

  • index.php(最初に読み込まれるページ)
  • header.php(ページの一番上。ヘッダーと呼ぶ)
  • footer.php(ページの一番下。フッターと呼ぶ)
  • sidebar.php(横に表示されるメニュー。サイドバーと呼ぶ)
  • single.php(公開された記事を表示する)
  • function.php(ワードプレスの機能を制御する)
  • category.php(カテゴリーを表示する)
  • archive.php(月別で記事を表示する)
  • page.php(固定ページ)
  • style.css(ブログの装飾。見出しのデザインなどブログ全体のデザイン)

上記の10種類ほどです。とりあえずオリジナルテーマを適応したいという場合は、index.phpとStyle.cssがあれば反映されます。

逆にindex.phpとStyle.cssがない場合は、テーマが壊れていると認識されオリジナルテーマを読み込めないので注意が必要です。

固定ページやカテゴリーページなどは、作成する予定がない場合は作成しなくても問題はありません。

 

ファイルの収納場所

作成したファイルを置く場所ですが、ローカル環境開発の「FlyWheel」では、書き画像の部分をクリックすると、ローカル環境にあるワードプレスが保存されている場所が表示されます。

本番環境の場合は、使用しているレンタルサーバーの中にワードプレスファイル(「wp」や「wordpress」という名前があるはず)があります。

その中に「themes」フォルダーの中にオリジナルテーマのファイルを置いてください。「themes」フォルダーの場所は

  • wpフォルダー
  • wp-contentフォルダー
  • themesフォルダー

上記の順番でクリックしていくと見つける事ができます。

私の場合は、作成したphpファイルやcssファイルは「mythemes」というフォルダーを作成して「themes」フォルダーにファイルを配置しました。

 

ワードプレスの基本的なファイル構成

ワードプレステーマを作成する時に知っておかないといけない事があります。

ワードプレスでは、1つのページを表示するのに、複数のファイルが読み込まれて表示されています。

私が作成したテーマで説明すると以下のようになります。

画像が小さくなってちょっとわかりづらいですが、私が作成したテーマでは、トップページを表示するのに4つのファイルが読み込まれています。

上記画像のようにワードプレスでは、複数のファイルを読み込むことで1つのページを表示しているので、htmlファイルで作成したページを分割する作業しないといけません。

 

htmlの書き換えと分割を行う

「ワードプレス オリジナルテーマを作成していく」で紹介した、PHPファイルの作成が完了したら実際にコーディングを行っていきます。
index.htmlを各PHPファイルに分けます。コードは素人が作成した下手なコードですが、以下のサンプルコードを参考にしてみて下さい。

index.html

少しゴチャゴチャしてわかりづらくて申し訳ありません。

今回、ワードプレスの「ウィジェット」という機能を使わずにサイドバーを作成したので、物凄くゴチャゴチャした感じになりました…

うっかりやってしまうミスが、index.phpにコピペする時にサイドバーまでコピメする事です。

間違ってサイドバーに表示する部分までindex.phpまでにコピーしないようにして下さい。

 

PHPファイル

index.htmlファイルを分割して各PHPファイル用に書き換えたのが以下のコードです。

header.php

index.php

sidebar.php

footer.php

綺麗なコードではないので、分かり辛い部分もあると思いますが、イメージ的な事だけでも掴めて貰えたら幸いです。

 

基本的なワードプレスの関数やタグ

基本的なワードプレスの関数やタグについて紹介します。

ワードプレスでテーマを作成する場合は、必ず必要になるので参考にして下さい。

タグ名 概要
wp_head() ; header.phpの</head>の上に必ず記載
get_header(); header.phpを読み込む。ヘッダー部分を表示させたいページに記載
get_sidebar(); sidebar.phpを読み込む。サイドバーを表示したいページに書く
get_footer(); footer.phpを読み込む。フッターを表示させたいページに書く
get_stylesheet_uri(); style.cssを読み込む <head>内の<link>タグで使用する
get_template_directory_uri() テンプレートディレクトリのURLを取得する。ファイル内にある画像なども読み込む。
have_post() 記事情報があるか確認する。繰り返し処理であるwhile文の中で使用する。
the_post() while文の繰り返し処理で使用する。投稿情報を取得する。
the_title() 繰り返し処理中にthe_post()で取得している記事のタイトルを取得する。
the_excerpt() 取得した記事の抜枠を表示する
the_permalink() パーマリンク(投稿記事のURL)を表示する
the_post_thumbnail() アイキャッチ画像を表示する

 

次に、function.phpというワードプレスを制御する為のファイルに書いておいたほうが良い関数を紹介します。

function.phpに記載するコード 概要
add_theme_support(‘post-thumbnails’); アイキャッチ画像を使用可能にする
add_theme_support(‘menus’) カスタムメニュー機能を使用可能にする

自分で作成したjsファイルを読み込む場合、以下のコードをfunction.phpに記載する事でjsファイルを読み込む事ができます。

まとめ

今回はトップページ作成だけを行っていきました。次回は記事ページと固定ページの作り方を紹介しようと思います。

以前の記事でもお伝えしましが、私が書いたコードでも不都合なく動きます。

ですが、私がコーディングしたコードは、綺麗なコードではありません。この記事では、ワードプレスのテーマ作成方法の流れを掴んでもらえたらと思います。

ですので、コードのコピペは自己責任でお願いします。

最後まで読んでいただきありがとうございました。