Bootstrapの無料テンプレートを使用し、オリジナルテーマを作成する方法

Bootstrap

本記事では、Bootstrapの無料テンプレートのダウンロード手順から、テンプレートを使用し、WordPressのオリジナルテーマを作成する方法までご紹介させて頂いております。注意点としましては、WordPress環境は、個々で準備出来ることを前提としてますので、内容としては省いておりますため、宜しくお願い致します。

 

✅   Bootstrapテンプレートの使い方が分かる
✅   Bootstrapテンプレートを用いたオリジナルテーマの作成方法
✅   テーマのイメージ画像を配置する方法が分かる

Bootstrapテンプレート

Bootstrapのテンプレートとは、HTML/CSS, javaScript, jQuery,Boostrapをベースに作成されたもので、以下の特徴が御座います。

   レイアウトデザインが既に固まっている
   無料で使用できるものも多い
   レスポンシブに対応している
   JavaScript/jQuery(アニメーション)も実装されている
   デザインの種類が数百以上ある
   HTML/CSSを変更するだけでカスタマイズが可能
以下のサイトからテンプレートをダウンロードできます。

◇  THEMA WAGON

1098+ Free Bootstrap HTML5 CSS3 Website Templates | High Quality Bootstrap Theme
Searching for high-quality free demo HTML5 website templates? Download responsive HTML5 CSS3 website templates & Bootstrap themes. Free for commercial use.

◇  W3Layouts

4000+ Free WordPress Themes and Website Templates
W3Layouts Wordpress Themes and website templates are built with responsive web design techniques with HTML5, So they work across all devices. W3Layouts provides...

テンプレートのダウンロード

 

では、実際にBootstrapテンプレートのダウンロードをしてみましょう。
今回は、THEMA WAGONというサイトに掲載されている「FINDSTATE」というテンプレートを使用します。

公式サイトへアクセス ⇨ 検索欄より 「FINDSTATE」 と検索

検索結果の中から赤枠で囲っているものと同じものを選択


 

ダウンロードの際、初回の場合は、メールアドレスの登録を求められますが、一応、使用するのは、フリーメール(Gmail, Yahoomail…)をお勧めします。

登録したメールアドレス宛に本登録用のリンクが送られますので、クリックしますと、ダウンロードが開始されます。次回からは、Download Freeのボタンが表示されるようになりますので、今回は、メールアドレスの登録をしましょう。

ダウンロードが始まると、保存先を指定しますが、今回は、デスクトップに保存しましょう。

デスクトップ上にダウンロードされたzipファイルが確認出来たら解凍しておきます。 解凍出来たら完了です。

 

スポンサーリンク

WordPress環境の準備(参考)

◇  Local by fly wheel

Local by fly wheel インストール & サイト作成〜言語変更方法
WordPressでWeb制作を行っていくためには、PC上で作業を行うためのローカル環境を準備する必要があります。そこで、本記事では、ローカル環境として使用するLocalbyflywheelのインストールとサイトの作成までの手順をご紹介させて頂いております。

◇  MAMP

【2021年版 MAMPでWordPressをインストールする方法】
今回は、「MAMP(マンプ)」というフリーのソフトウェアを利用して、WordPressをローカル開発環境(PC)でインストールする方法を説明します。   なお、MAMPはMacを想定したソフ

◇  XAMPP

XAMPPを使ってローカルでWordPressを動かそう②【XAMPPでWPを動かす手順編】
今回は「XAMPP でどのように WordPress を動かすのか? データベースの作り方、複数 WordPress は動かせるの? 効率よく利用するための小技」などなど、XAMMP で WordPress を動かすまでの手順を最後まで紹介します。

オリジナルテーマの作成

 

最後に、ダウンロードしたBootstrapテンプレートをオリジナルテーマとして、WordPressへ反映させる作業を行なっていきましょう。

テンプレートの移動

 

デスクトップに配置していると思いますが、findstate-masterフォルダを準備して頂いたWordPress環境下のwp-contentフォルダ内にあるthemesフォルダへ移動してあげる必要が御座います、

 

index.phpに名前を変更

 

続いて、オリジナルテーマを作成するために必要なファイルの一つであるindex.phpを準備していきましょう。
作業としては新規で作成するのではなく、findstate-masterフォルダ内のindex.htmlの拡張子を.phpに直すだけOKです!

style.cssを作成

 

オリジナルテーマを作成する上で、index.phpのみでは、いけません。 テーマ用のstyle.cssを作成し、findstate-masterフォルダ内に保存しましょう。
また、テーマ名を記述してあげないといけませんので、コードとして以下を記述してあげてください。


/* 
  Theme Name: findstate-master
  Author: 制作者名
  Description: テーマの説明
*/

テーマのイメージ画像を設定

 

ここについては任意ではありますが、テーマのイメージ画像の設定方法についても確認していきましょう。
方法は、至って簡単で、好きな画像で構いませんので、ファイル名をscreenshotにしてあげればOKです。拡張子は、.png, .jpg, .jpegであれば大丈夫です。

テーマ一覧に反映されているかを確認する

 

ここまで、準備が出来ましたら、早速、WordPress環境にログインし、テーマ一覧に今回、作成したオリジナルテーマが反映されているかを確認してみましょう!

 

 

確認できましたでしょうか?? もし、表示されない/反映されない場合は、再度、各ファイルの配置場所やindex.phpに変更できてるか, style.css内の記述を見直してみましょう。

 

まとめ

✅   Bootstrapテンプレート
⇨ ナビゲーションメニューやフォームなどのUI(ユーザーインターフェース)の要素が既に定義されているテンプレート
✅   Bootstrapテンプレートを用いたオリジナルテーマの作成
⇨ ダウンロードしてきたBootstrapテンプレート内のindex.htmlをindex.phpに変換し、新規でstyle.cssを作成する
✅   テーマのイメージ画像を配置する方法
⇨ テーマフォルダ内にscreenshot.png(.jpgなどもOK)を作成することで、テーマのイメージ画像として反映される

コメント

タイトルとURLをコピーしました