WordPressテーマの自作方法を解説する!

今回は「最近WordPressの勉強を始めてそろそろWordPressのテーマを自作してみたいけど、どうゆう手順でやったらいいのかも、どのくらいの難易度なのかも全くわかりません。教えてパイセン…」

こんな疑問に答えていきたと思います。

【本記事の内容】

  • WordPressテーマを自作する意味
  • WordPressのテーマ自作の手順

では早速解説していきましょう。

スポンサードサーチ

WordPressテーマを自作する意味とは?

WordPressテーマを自作する意味見出し画像

「そもそもなんでWordPressのテーマを自作する意味あんの?」

「大して知識ない奴が作ったオリジナルのテーマなんて誰も使わないじゃん。」

そう思っている方や、周りからそう言われて萎えてる方もいるかと思うので、まずはWordPressテーマを自作する意味について解説したいと思います。

WordPressのテーマを自作する意味は大きく3つあります。

  1. WordPressの基本的なことが理解できる
  2. 技術書に書いてある通りにコードを書くより学習の効率が格段にいい
  3. わかりやすい実績になる

では詳しくみていきましょう。

WordPressの基本的なことが理解できる

WordPressのテーマを自作するとWordPressの基本的なことが理解できるようになります。

なぜかというと、テーマを自作するにはWordPressの仕組みや、細かいWordPressのテンプレートタグの意味などの基本的なことを理解していないと、どこかでエラーが発生してしまいしっかりと動くサイトを作れないからです。

本や他の学習サービスだとどうしてもゼロから作るという経験がしづらいので、自分でゼロからWordPressのテーマを自作するということがWordPressを理解する上で重要になってくるわけです。

技術書に書いてある通りにコードを書くより学習の効率が格段にいい

次に、テーマの自作では技術書に書いてある通りにコードを書くより学習の効率が格段にいいということが挙げられます。

誤解しないでいただきたいのですが、決して技術書をやるのが無駄ということではないです。

ただ、技術書を何周もして勉強するよりも、技術書はサクッと1周してあとは調べながらテーマを自作してみる方が格段に早くWordPressを理解できるようになります。

なぜ技術書を何周もして勉強するよりも、自分でテーマを自作する方が学習の効率がいいのかと言うと

技術書では書いてあることをその通りに書いていれば意味を正確に理解していなくても正常に動きます。

ですが、テーマを自作する場合は、WordPressのテンプレートタグの意味や仕組みなどを正確に理解していないとサイトを正常に動かすことができません。

なので必然的にテーマを自作する方が学習の効率が良いんです。

わかりやすい実績になる

WordPressのテーマを自作する3つ目の理由としては「わかりやすい実績になる」からです。

理由は、テーマを自作できることはWordPressのことを最低限理解しているという基準になることが多いからです。

実際、WordPressの案件には主に「既存テーマの編集」「静的HTMLのWordPress化」「オリジナルテーマの実装」この3つがあるのですが

一般的に一番難易度が高いのは「オリジナルテーマの実装」です。

そしてWordPressのテーマを自作できるということは、「オリジナルテーマの実装」ができるということとイコールなわけです。

なので自作したテーマを持っていると実績として公開できるので、WordPressのスキルがあるというわかりやすい実績になるんです。

WordPressのテーマ自作の手順

WordPressのテーマ自作の手順見出し画像

では次は本題の「WordPressテーマ自作の手順」について解説していきます。

今回は実際に僕が自作したテーマに基づいて解説していきたいと思います。

(下記が実際に自作したテーマの全体像です)

自作テーマのイメージ画像

>僕が自作したテーマはこちら

具体的な手順は以下の感じです

  1. 作りたいデザインを紙に書く
  2. HTML&CSSで見た目を作る
  3. 2で作ったHTMLをPHPで書き換えWordPress化
  4. 必要な箇所をテンプレートタグで書き換える
  5. バグチェック

こんな感じです。

では詳しくみていきましょう。

作りたいデザインを紙に書く

まずはどんなデザインのテーマにしたいかを考え、紙に書いていきましょう。

XDやfigmaなどのデザインツールが使える方はそちらを使ってデザインを作っても良いです。

なお、最低でもトップページと個別記事投稿ページの2つは作成しましょう。

【トップページ】

トップページデザインのラフ画像

 

【個別記事投稿ページ】

個別投稿記事ページのデザインのラフ画像

*本来ならテーマ作成の意図や用途などを入念に考え、ラフデザインの作成→カンプデザインの作成とやるのがWebデザインではセオリーですが、今回解説するのはWordPressがメインなのでデザインの解説は少しショートカットしていますのでご了承ください。

HTML&CSSで見た目を作る

次に先ほど作成したデザインを元に、見た目の部分を下記の画像のようにHTML&CSSで作っていきましょう。

レスポンシブ対応もしっかりさせましょう。

「トップページ」

HTML&CSSで作成したトップページイメージ

「個別記事投稿ページ」

HTML&CSSで作成した個別記事投稿ページイメージ

*WordPressをやるにはHTML,CSS,JS(jQuery),PHPの超基礎の知識があることが前提です。

2で作ったHTMLをPHPで書き換えWordPress化

ここからが本題です。

*ここからはMAMPなどを使ったローカル環境で動作を確認しながら進めてください。MAMPを使ったWordPressの環境構築はこちらの記事でわかりやすく解説されています。

WordPressではheaderやfooterなどのパーツを切り分けて使用します。

まずは2で作成したトップページ用のHTMLのファイル名をindex.phpに書き換え

index.phpのheader部分、sidebar部分、footer部分をそれぞれheader.php、sidebar.php、footer.phpに書き換えましょう。

下記の画像参考に

index.php参考画像 header.php参考画像

次に個別記事投稿ページを「single.php」に書き換え、先ほどと同じ要領で、header,footer,sidebar部分を削除していきます。

固定ページも個別記事とデザインを変えない場合は、「page.php」というファイルを作成し、「single.php」の内容をそのままコピペしておきましょう。

必要な箇所をテンプレートタグで書き換える

次にテンプレートタグを使って必要な箇所を書き換えていきましょう。

ちなみに僕が使ったテンプレートタグは

  • タイトル:<?php bloginfo(‘name’); ?>
  • CSSファイル読み込み:<?php bloginfo(‘stylesheet_url’); ?>
  • テーマ作成に必ず必要:<?php wp_head(); ?>
  • <?php body_class(); ?>
  • ディスクリプション:<?php bloginfo(‘description’); ?>
  • ナビゲーション:<?php wp_nav_menu(‘theme_location=header-nav’);?>
  • <?php bloginfo(‘template_url’); ?>
  • テーマ作成に必ず必要:<?php wp_footer(); ?>
  • header.phpの読み込み:<?php get_header(); ?>
  • アイキャッチ:<?php the_post_thumbnail(‘full’); ?>
  • パーマリンク:<?php the_permalink(); ?>
  • 記事抜粋文:<?php the_excerpt(); ?>
  • 日付:<?php echo get_the_date(); ?>
  • カテゴリー:<?php the_category(‘,’); ?>
  • etc..

こんな感じです。

必要なテンプレートタグはどんな機能を入れるかによって変わるので、技術書などで調べながら作っていきましょう。

またコメント用のページなど、必要であればファイルも追加していきましょう。

バグのチェック

ある程度完成したなと思ったら、最後はiphoneの実機や、safari、Chrome、firefox、IEなどで表示を確認しておきましょう。

バグチェックも終わって異常が無さそうであれば完成です!

 

ということで今回はWorPressのテーマを自作する意義と、テーマ自作の手順について解説しました。

WordPressの技術書を数冊終わらせたらぜひテーマの自作に挑戦してみてください!

今回は以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。