本記事では、Bootstrapの無料テンプレートのダウンロード手順から、テンプレートを使用し、WordPressのオリジナルテーマを作成する方法までご紹介させて頂いております。注意点としましては、WordPress環境は、個々で準備出来ることを前提としてますので、内容としては省いておりますため、宜しくお願い致します。
✅ Bootstrapテンプレートを用いたオリジナルテーマの作成方法
✅ テーマのイメージ画像を配置する方法が分かる
Bootstrapテンプレート
Bootstrapのテンプレートとは、HTML/CSS, javaScript, jQuery,Boostrapをベースに作成されたもので、以下の特徴が御座います。
無料で使用できるものも多い
レスポンシブに対応している
JavaScript/jQuery(アニメーション)も実装されている
デザインの種類が数百以上ある
HTML/CSSを変更するだけでカスタマイズが可能
◇ THEMA WAGON
◇ W3Layouts
テンプレートのダウンロード
では、実際にBootstrapテンプレートのダウンロードをしてみましょう。
今回は、THEMA WAGONというサイトに掲載されている「FINDSTATE」というテンプレートを使用します。
公式サイトへアクセス ⇨ 検索欄より 「FINDSTATE」 と検索
検索結果の中から赤枠で囲っているものと同じものを選択
ダウンロードの際、初回の場合は、メールアドレスの登録を求められますが、一応、使用するのは、フリーメール(Gmail, Yahoomail…)をお勧めします。
登録したメールアドレス宛に本登録用のリンクが送られますので、クリックしますと、ダウンロードが開始されます。次回からは、Download Freeのボタンが表示されるようになりますので、今回は、メールアドレスの登録をしましょう。
ダウンロードが始まると、保存先を指定しますが、今回は、デスクトップに保存しましょう。
デスクトップ上にダウンロードされたzipファイルが確認出来たら解凍しておきます。 解凍出来たら完了です。
WordPress環境の準備(参考)
◇ Local by fly wheel
◇ MAMP
◇ XAMPP
オリジナルテーマの作成
最後に、ダウンロードした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: テーマの説明
*/
テーマのイメージ画像を設定
テーマ一覧に反映されているかを確認する
ここまで、準備が出来ましたら、早速、WordPress環境にログインし、テーマ一覧に今回、作成したオリジナルテーマが反映されているかを確認してみましょう!
確認できましたでしょうか?? もし、表示されない/反映されない場合は、再度、各ファイルの配置場所やindex.phpに変更できてるか, style.css内の記述を見直してみましょう。
まとめ
⇨ ナビゲーションメニューやフォームなどのUI(ユーザーインターフェース)の要素が既に定義されているテンプレート
⇨ ダウンロードしてきたBootstrapテンプレート内のindex.htmlをindex.phpに変換し、新規でstyle.cssを作成する
⇨ テーマフォルダ内にscreenshot.png(.jpgなどもOK)を作成することで、テーマのイメージ画像として反映される
コメント