この記事にはプロモーションが含まれています
Bootstrap ベースの Understrap をカスタムしたら、かなり勉強になって良かった！という話
このサイトのリニューアルから、もう半年が経ってしまいました。
デザインのリニューアルをしました
- 参考サイトをご紹介する予定
だと言っていたのに、ぜんぜん記事を書いてなかったことを思い出し…😅
今回記事にしようと思います。
ご紹介するのは、WordPress テーマのカスタマイズに関するもので、
- Bootstrap ベースの Understrap テーマ を利用する
にあたり、参考にさせてもらったサイトです。
目次
制作環境
サイトのリニューアルや制作では
- 使用OS：
- コーディングツール：
- WordPress ローカル環境構築ツール：
を利用しています。
Understrap テーマの利用
今回、OhYeah to こ では 、Bootstrap ベースの WordPress テーマ、 Understrap を使わせてもらいました。
Bootstrap って、何？
ざっくり言うと、
- 比較的簡単に、Webサイトがつくれるツール（？）
といったところでしょうか…。
BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。 Bootstrap - Wikipedia
比較的簡単に（作れる）と言ったのは、基本的な
- HTML
- CSS
- JavaScript
の知識が必要だからです。
これらの知識がなくてもデザインできるBootstrap ベースの国産 WordPress テーマもありますので、先にご紹介しておきますね😉
Bootstrap ベースの国産 WordPress テーマ
Bootstrap ベースの国産 WordPress テーマの中で、オススメはこちらです
どちらのテーマも
- WordPress公式ディレクトリ登録テーマで、安心して使える！
- ブロックエディター対応なので、サイトが簡単に作れる！
- レスポンシブデザインもバッチリ！
という、いたれりつくせりのテーマ です。
HTMLの知識がなくてもブロックエディター対応なので、思っているデザインが作りやすいと思います👍
LIQUID PRESS と Lightning をインストールしてみた
日本語対応してあるし本家サイトもしっかりしているので、長く使っていけそう！ということで、どちらもインストールしてみました。
- こんなに高い完成度のものが、無料で使えるなんて…✨
と感動していたのですが、サイトの中身を眺めていて思いました。
これでは、当初の目的から外れてしまいます😥
LIQUID PRESS と Lightning はどちらもオススメの WordPress テーマ
LIQUID PRESS 
と Lightning はどちらも
- サイトデザインが洗練されている
- 初見でも使いやすい作りになっている
- 母体がしっかりしている（長く使っていける）
など、プラス要素ばかりのテーマです。
私のように
- ”素の”Bootstrap を体験してみたい！
という方には（親切設計なので）不向きとなってしまいますが😅、それ以外の方にはもちろんオススメです！
無料ダウンロード先
どちらを選ぶかは、お好みでどうぞ。
無料ダウンロードして、使ってみるのがいちばんだと思います。
というわけで私は、かなり素の Bootstrap に近そうなUnderstrap を利用することにしました。
Bootstrap ベースの Understrap
そんなこんなで Understrap をインストールして使ってみたのですが…。
- はじめて聞くような単語が出てきて、わからないことだらけ😰
- 聞いたことのある単語もあったけど、面倒くさそうで今までスルーしてきた単語がチラホラ😅
そういうわけで、たくさん調べ物をしました。
自分の防備録も兼ねて、以下より”参考サイト一覧”です。
WordPress のローカル環境を用意する
WordPress のカスタムは必ず、ローカル環境で試します。
Local は簡単にローカル環境が作れて、メンテナンスも簡単なのでオススメです。
- WordPress ローカル環境構築ツール：
Local 参考サイト
Understrap ダウンロードとインストール
ローカル環境が整ったら、WordPress の設定を済ませて Understrap をインストールします。
Understrap の日本語ドキュメントが無さそうなので
を使ってなんとかします😉
Bootstrap の日本語ドキュメントは、こちらから。
vscode ダウンロードとインストール
コーディングには、vscode（Visual Studio Code） を使っています。
- 使い勝手がよく
- 拡張機能で、自分好みのカスタムができる
- コーディングだけじゃなく、markdown も使えるのに
- 全部無料✨
なんて素敵なんでしょう…。
素の状態だと英語なので、日本語化します。
vscode 参考サイト
gulp ダウンロードとインストール
Bootstrap では Sass が使われています。
環境を整えるため、まずは gulp をインストールします。
gulp とは？
gulp（ガルプ）はNode.jsのパッケージ（プラグイン）として開発されているWeb開発を効率的に行うためのツールです。様々な処理や作業を自動化することができ、実際の開発現場でも使われています。 Node.jsのパッケージgulp（ガルプ）で開発を効率化 | パソコン工房 NEXMAG
gulp 参考サイト
Sass とは？
「Sass（サス、サース）」とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。従来のCSSにデザイナーやプログラマーが抱いていた不満を解消するスタイルシートといえます。 【入門編】Sassの意味は？SASS・SCSSとは？読み方か…｜Udemy メディア
入れ子でCSSが書けると、ホント、らくちんです。
sass 参考サイト
bootstrap scss 使い方を解説！死ぬほど分かりやすい導入方法から実際に変数を変更するまで｜Be Engineer
CSSを効率的に書く！フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~
登場してから10年余り、制作現場にも導入が進み、Web開発の現場では必須の技術となりつつある「Sass」。Sass（SCSS）を使えば効率的にCSSをコーディングできます。実務レベルで使えるSassを基礎から身につけよう！
WordPress のテーマをカスタム
これでやっと、Understrap テーマをカスタマイズする準備ができました。
WordPress のテーマをカスタムする場合は、子テーマを作成してからカスタマイズします。
WordPress 子テーマとは？
親テーマはWordPressのデザインの基本となるテンプレートです。一般的に「テーマ」と言う場合は親テーマのことを指します。
一方、子テーマとは親テーマをカスタマイズするために欠かせないテーマファイルのことです。
子テーマは、親テーマに影響を与えずにテーマをカスタマイズすることが可能です。
親テーマをいじらずに子テーマのみを編集するため、テーマ全体に支障が出ることはありません。 【WordPressの子テーマ】作成方法と使い方を初心者向けに解説｜ワプ活
親テーマのいいとこ取りできるのが、良いですね。
WordPress 子テーマ参考サイト
アクションフック
子テーマを用意しても、できるだけ元テーマを触りたくないものです…。
アクションフックとは WordPress本体やテーマ、プラグインなど、アクションフックが用意されている場所で任意のPHPが実行できるしくみです。 できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！ | 株式会社ベクトル
アクションフック参考サイト
まとめ
そんなこんなで、サイトのリニューアルが完了しました。
わからないことだらけで、どうしようか…と思いましたが、これらのサイトの皆さんのおかげでたくさん学び・知ることができました😀
今回は広く浅くの勉強だったので、これから少しずつ深めていけたらなぁと思っています。
では！