見出し画像

ワードプレスのテーマを自作する方法（オリジナルテーマのカスタマイズ）

344

HTML・CSSでWEBサイトの制作が出来るようになると、次に覚えたいスキルの一つとしてはWordPressの構築ではないでしょうか？
WEB上の42%がWordPressを使ったWEBサイトであるように、世界中で使用されているCMSです。

日本でも様々なサイトがWorPressで作られており、中小企業のコーポレートサイトから、有名な大企業のサイトもWorPressで作られています。

実際に、WEB制作の依頼を受ける時もWorPressの実装を依頼されたり、リニューアルの際にCMSをWorPressに乗り換えるというケースもあります。

個人的な実感ですが、私が受けたWEB制作の依頼の約7割ほどがWorPressの絡む案件だった事もあり、そのニーズは今も少なくないと実感しています。

では、そのワードプレスの構築方法はどのようにやっているのか？
ワードプレスの構築方法をいくつかのセクションに区切り、一からワードプレスの構築をご紹介していきたいと思います。

この記事のURLを順に追って読みながら制作を進めていく事で、ワードプレスの自作テーマの作成ができるようになります。
また、今回ご紹介するWorPressのテーマの自作をする方法の内容は、WorPressの自作テーマでコーポレートサイトを構築する上で必要最低限の内容でご紹介していますので、あくまでこの内容を基に徐々にスキルアップを図っていただければと考えています。

ご興味のある方は是非一度お読み頂き、WEB制作のスキルアップの手伝いができれば幸いです。

実際にWorPressの制作にあたって事前に準備をするもの

まずは前提条件として、HTML・CSSでWEBサイトの作成ができる事が条件の一つになります。
その上でまず、以下のものを準備します。

・WEBサイト(HTML・CSSで作られた静的サイト)
・レンタルサーバー
・テキストエディタ

WorPressのテーマを自作する方法

ワードプレスの自作テーマでは、基になるWEBサイトのページを、WorPressに必要なテンプレートパーツとして、パーツごとにHTMLを切り取り、必要に応じてパーツを呼び出したりしてページを構成しています。

セクション1：ヘッダーを作成とWorPressの動作に必要な最低限のファイルを作成

まずは、WorPressの動作に必要最低限なファイルの用意と、そこからWEBサイトのヘッダーになる部分の作成方法をまとめています。

セクション2：フッター部分のテンプレートファイルおｗ作成

上記のセクションが終わると、次はフッター部分を作成し、WEBサイトの共通部分を作成していきます。

セクション3：WEBサイトのトップページのワードプレスの構築に必要なテンプレートタグの解説

上記のセクションで共通パーツができたら、次はトップページにあたるテンプレートを作成し、次に必要なファイルを呼び出すためのテンプレートタグについてご紹介をしていきます。

セクション4：下層ページをワードプレスの固定ページにして作成

上記のセクションまでが終わると、トップページがちゃんと表示されている状態かと思います。
このセクションでは、下層ページのコンテンツを、固定ページを使って作成していく方法をご紹介していきます。

セクション5：投稿ページで新着情報の一覧ページ・新着個別ページを作成

WEBサイトでよく見かける新着情報。WorPressには、主に固定ページと投稿ページという機能があり、投稿ページでは主に新着情報やIR情報など、一覧ページと、個別の詳細なページはこの投稿ページで作られます。
ブログをイメージすると分かりやすいでしょう。

セクション6：お問合せフォームを便利なプラグインを使用して作成

WorPressにはプラグインという便利な機能があり、このプラグインを使用する事で必要な機能を簡単に実装する事が可能です。
このセクションではプラグインを使った、お問合せフォームの作成をご紹介しています。

セクション7：お問合せフォームを便利なプラグインを使用して作成

最後に、少しだけ発展的な内容として、WorPressには通常の投稿機能に加え、オリジナルの投稿機能を実装する事も出来ます。
例えば、新着情報では通常の投稿機能を使い、商品紹介やスタッフ紹介、コラム掲載といったページではカスタム投稿を使って実装する事が少なくありません。
このセクションではカスタム投稿の作成方法についてご紹介してきます。

まとめ

以上で、ワードプレスのテーマの自作方法についてご紹介いたしました。

今回ご紹介した内容はあくまで必要最低限で、これでけではまだまだ企業のサイトを作るのには物足りないくらいの内容ですので、この内容を基に、後はご自身でステップアップして頂ければ幸いです。

この記事が気に入ったらサポートをしてみませんか？