Start BootstrapでWordPressのテーマの骨格作り

こんにちは。fsです。
前回の記事で、Wordpressのオリジナルテーマのローカル環境構築方法を紹介しました。
※参考記事はこちら
↓↓↓↓↓↓↓

【初心者向け】簡単なWordpressのローカル開発環境構築のやり方

今回は『簡単なWordpressのローカル開発環境設定のやり方』をシェアしていきたいと思います。プログラミング初心者にとってはローカル開発環境構築も一つのハードルになるので、そんな方々に向けて書いています。

fsfuyuto.com

2021.11.11

今回は次のステップとして、『簡単なオリジナルテーマの骨格作り』を紹介したいと思います。

テーマ作りを始めると、

「トップページのレイアウトどうしよう😓」
「スマホ対応も1からやるのめんどくさいな😱」
「骨組みだけでも簡単に作りたいな☺️」

まずこのような悩みに直面します。

Start Bootstrapというウェブサイトを活用すれば、洗練されたレイアウトを無料でダウンロードでき、このめんどくさい作業を大幅に効率化できます。

そんなわけでStart BootstrapのレイアウトをWordpressに連携させるまでのプロセスを画像を用いながら実践していきます。

特にWordpressでオリジナルテーマを作成してみたい初心者の方にお読みいただければ幸いです。

Start Bootstrapとは

Start BoostrapとはBootstrapという超有名なデザインフレームワークで作られたテーマサイト集です。

このサイトを活用することで、

• 自分の作りたいウェブサイトのデザインをイメージできる
• 好きなレイアウトのコードをそのままダウンロードして使える
• レスポンシブ対応（PC、タブレット、スマホ全てに対応している）に悩まない

などのメリットを享受できます。しかも無料です。
WordPressテーマの開発者にとっては、作業を効率化できるとてもありがたいサービスです。

テーマの枠組みをつくる

それでは、実際にStart Bootstrapでファイルをダウンロードして、Wordpressに連携させるまでの流れを解説していきます。

まずはStart Bootstrapのウェブサイトにアクセスして、Themes→Browse All Themesの順にクリックします。

たくさんテーマがありますが、今回はClean Blogというテンプレート使うことにしました。
もちろん無料です。

ちなみにこちらはMTI Licenseとなっており、「商用利用も可能なライセンス」という意味です。
デザインを使うときはこのようにライセンスを確認すると良いです。

テーマをダウンロードして、解凍します。
これを開発中のサイトのThemesディレクトリに保存します。
※お好みでフォルダ名を変更してください
このあとフォルダ名をMYBLOGに変更しました。

これをコードエディターで開き、保存します。

新テーマが無事インストールされてるか確認するため、管理画面に行ってみます。
すると、このようにスタイルシートが足りないので、作っていきます。

MYBLOGフォルダの直下にstyle.cssを作り、テーマ名（Theme Name）、作成者（Author）、説明（Description）、バージョン（Version）を記入して保存します。

管理画面を更新すると今度はindex.phpが足りないのでこれも作ります。
ダウンロードしたファイルには、デフォルトのindex.htmlというファイルがあるので、その拡張子をphpに変更すればOKです。
※WordpressはPHPというプログラミング言語で動作するからです

管理画面を更新するとMy Blogが追加されているのがわかります。
早速、有効化してみます。

ただ、この時点ではまだスタイルシート（css）が読み込まれていなく、レイアウトがしっかりしていないのがわかります。

これはcssを読み込むindex.phpファイルのパスがデフォルトになっているためです。
cssを読み込めるように、入っている階層構造を指定して（絶対パス）入れ直します。
※このように書きます。

cssが無事読み込まれ、綺麗なレイアウトになりました。

なお、開発段階であればこのような絶対パスでも良いのですが、ドメインが変わったとき（サーバーにUPする時など）はフォルダ名を直接指定するわけにはいかなくなります。

なので、作ったテンプレートファイルを呼び出すテンプレートタグを使っておくと良いです。
echo（出力）メソッドの後に、get_template_directory_uri()というテンプレートタグを挿入します。

これでドメインが変わってもcssが読み込まれます。

これでテーマのベースとなる骨組みができたので、あとは

• 好みに合わせcssを微修正
• リンクを追加していく
• 固定ページや投稿ページをつくる
• テンプレートタグを挿入していく
• ループをつくる

などの開発を進めていくだけです。

まとめ　フレームワークで簡単レイアウト作り

いかがだったでしょうか。
めんどくさいレイアウト作りも、このようなフレームワークも数分で完了できてしまいます。

Start Bootstrapでは、

• 多種類
• 洗練されたデザイン
• レスポンシブ対応

のレイアウトを無料で入手できるので、開発者にとっては使わない手はありません。

これからWordpressのテーマを作成していく方は、レイアウト作りにぜひ活用いただければと思います。
以上、Wordpressテーマ開発初心者の参考になれば幸いです。

最後までお読みいただきありがとうございました。

UdemyでWordpressを学ぼう！