BLOGCATEGORY / WordPresオリジナルテーマ作成

実演!!自作のWordPressオリジナルテーマを作成する方法を徹底解説

WordPressは、テーマを変更することでWEBサイトのデザインや機能を変更することができます。

配布されているWordPressテーマは、有料・無料に関わらず豊富にありますが、専用に作られたものではないため、制約を受けたりカスタマイズを繰り返したりするうちに複雑化し、余計な機能も盛りだくさんの重たくメンテナンスしづらいサイトになってしまいます。

自作のWordPressのテーマを作成するのは、既存のテーマをそのまま使うよりも大変かもしれませんが、それ以上にたくさんのメリットがあります。

WordPressのテーマを自作するメリットは??

既製のテーマを使用せずに、自作テーマを制作できるようになると、下記のメリットを感じることができるかと思います。

  • 機能的な制約に縛られることなく自由に作成できる
  • テーマの構造を理解できているのでカスタマイズしやすい
  • 一つベースを作れば、応用して様々なデザインのテーマを作ることができる
  • 必要のない余計な機能がついていないのでサイトが軽くなる
  • 完全にオリジナルな自分だけのテーマなので他と被らないサイトが作成できる
  • 今までよりもWordPrssへの理解が深まることにより、今まで以上の機能やデザインのサイトを制作することができる

一番最初こそ大変かもしれませんが、自作テーマの作成方法をマスターすれば、WordPressを使用して自由にサイトを作成できるようになりますし、既存の配布されているテーマのカスタマイズも今まで以上にできるようになるでしょう。

ステップに分けてWordPressテーマの作り方を紹介

WordPressのテーマを完成させるためには、独自の関数や作成する際のルールが多数あるため、全てを同時に行おうとせずに順序立てて作成していく必要があります。

本カテゴリ『自作WordPressテーマ作成』では、純粋なテーマの作り方がわかるように、シンプルで最低限の機能だけのベースとなるテーマの作成方法をいくつかのステップに分けてご紹介します。

実際にデモテーマを制作しながら、徹底解説していくため一度挫折してしまった人でも大丈夫です!

ゼロから自分だけのWordPressのオリジナルテーマを作成し、Wordpressに関して知識を深め、理想のサイトを作成しましょう!

1.WordPressテーマの骨組みとなるテンプレートファイルを作成する

WordPressのテーマを作成し、動作させるためには最低限必要なテンプレートを先に準備してからアップロードする必要があります。WordPressテーマ作成1では、必要最低限の記述だけの骨組みとなるテンプレートを作成し、テーマとしての形を作成していきます。

2.作成するWordPressテーマの構成やレイアウト・デザインを決定する

WordPressテーマ作成2では、テーマの構成やデザインを作成しサイトのレイアウトをCSSで整えます。ワイヤーフレーム・デザインを元にWordpressテーマを作成していくため、自分の作りたい要素やイメージをデザインに落とし込んいきましょう。

3.WordPressテーマのレスポンシブ対応メニュー付きのヘッダーとフッターを構築する

WordPressテーマ作成3では、header.phpにタイトル・ナビゲーションメニューを出力するための要素を追加しデザインを調整します。ナビゲーションメニューはJqueryを使って、タブレット・スマホのときにはボタンに収納されるように機能を追加しましょう。

4.WordPressテーマの投稿(single.php)と固定ページ(page.php)を構築する

WordPressでは、テンプレートに要素を追加することで、タイトル・本文を初めとしてカテゴリや投稿日・タグ・アイキャッチ画像などの各要素を自由に出力することができます。WordPressテーマ作成4では、投稿(single.php)と固定ページ(page.php)の基本的な作成方法をご紹介します。

5.WordPressテーマの記事一覧ページ(index.php・archive.php)とトップページ(home.php)を作成する

WordPressテーマ作成5では、メインループを使用して記事一覧を出力するページを作成します。記事一覧ページのベースとなる『index.php』を作成し、それをベースに記事一覧を出力するアーカイブページとTOPページを作成する方法をご紹介します。

6.WordPressテーマのheadタグ内にSEO用のメタデータを追加する

検索エンジンのクローラーが巡回する際やSNSでの拡散時にサイト情報を正確に伝えるためには、metaデータをheadタグ内に記述しコントロールする必要があります。WordPressテーマ作成6では、ページに合ったメタデータやファビコンを出力し、内部的に最適化する方法についてご紹介します。

番外編.テーマ作成時に知っておくと便利な優先順位や独自テンプレート

テンプレートの優先順位や種類、投稿や固定ページの個別テンプレートの作成方法を知り、自分だけのWordPressテーマに仕上げていきましょう。WordPressテーマ作成番外編では、テーマに追加できるテンプレートについてご紹介します。

CONTACTお問い合わせ

様々な制作経験から得たノウハウを活かし、ご予算・ご要望に合わせたお客様のビジネスのお手伝いができるかと思います。
福岡を中心に事業を行っておりますが、ZOOMやChatwork、LINE等のツールを利用して遠距離のお客様との打ち合わせも行っております。
WEB関連でお困りの際はお気軽にご相談ください。