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

シンガポール

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

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

テーマ作りを始めると、

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

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

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

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

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

Start Bootstrapとは

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

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

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

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

テーマの枠組みをつくる

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

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

Themes→Browse All Themesの順にクリック

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

こちらのテンプレートを選択しました

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

テンプレートを選ぶときはライセンスもチェックしましょう

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

ダウンロード後解凍したファイルをThemesのディレクトリに保存

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

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

まだテーマが正しく読み込まれません

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

このようにcssを作っていきます

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

拡張子をindex.htmlからindex.phpに変更

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

無事に読み込まれたら有効化をクリック

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

cssが読み込まれていないとこうなります

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

このように絶対パスを入れておけば読み込めます

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

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

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

このように書きます

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

Start Bootstrapと同じデザインになりました

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

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

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

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

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

Start Bootstrapでは、

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

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

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

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

UdemyでWordpressを学ぼう!

この投稿は役に立ちましたか? 役に立った 役に立たなかった 5 人中 5 人がこの 投稿 は役に立ったと言っています。

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

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