Understrap テーマを、カスタマイズしました(防備録・リンク集)

この記事にはプロモーションが含まれています

Bootstrap ベースの Understrap をカスタムしたら、かなり勉強になって良かった!という話

このサイトのリニューアルから、もう半年が経ってしまいました。

デザインのリニューアルをしました
  • 参考サイトをご紹介する予定

だと言っていたのに、ぜんぜん記事を書いてなかったことを思い出し…😅
今回記事にしようと思います。

ご紹介するのは、WordPress テーマのカスタマイズに関するもので、

にあたり、参考にさせてもらったサイトです。

制作環境

サイトのリニューアルや制作では

を利用しています。

Understrap テーマの利用

今回、OhYeah to こ では 、Bootstrap ベースの WordPress テーマ、 Understrap を使わせてもらいました。

Bootstrap が面白そうだったので、使ってみたかったんです😉

Bootstrap って、何?

Bootstrap · 世界で最も人気のあるフロントエンドフレームワーク

ざっくり言うと、

  • 比較的簡単に、Webサイトがつくれるツール(?)

といったところでしょうか…。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。 Bootstrap - Wikipedia

比較的簡単に(作れる)と言ったのは、基本的な

  • HTML
  • CSS
  • JavaScript

の知識が必要だからです。

これらの知識がなくてもデザインできるBootstrap ベースの国産 WordPress テーマもありますので、先にご紹介しておきますね😉

もっと詳しく学ぶなら・プロ講師から学べる

ちゃんと学ぶ、WordPress テーマ開発講座

WordPressで既存テーマのカスタマイズではない、オリジナルのウェブサイトを作ろう

詳しく見る

Bootstrap ベースの国産 WordPress テーマ

Bootstrap ベースの国産 WordPress テーマの中で、オススメはこちらです

どちらのテーマも

  • WordPress公式ディレクトリ登録テーマで、安心して使える!
  • ブロックエディター対応なので、サイトが簡単に作れる!
  • レスポンシブデザインもバッチリ!

という、いたれりつくせりのテーマ です。

HTMLの知識がなくてもブロックエディター対応なので、思っているデザインが作りやすいと思います👍

どちらも無料版がありますので、ダウンロードして試してみるのも良いですね😉

LIQUID PRESS と Lightning をインストールしてみた

日本語対応してあるし本家サイトもしっかりしているので、長く使っていけそう!ということで、どちらもインストールしてみました。

  • こんなに高い完成度のものが、無料で使えるなんて…✨

と感動していたのですが、サイトの中身を眺めていて思いました。

かゆいところに手が届きすぎて、Bootstrap の勉強にならないかも😅

これでは、当初の目的から外れてしまいます😥

LIQUID PRESS と Lightning はどちらもオススメの WordPress テーマ

LIQUID PRESS Lightning はどちらも

  • サイトデザインが洗練されている
  • 初見でも使いやすい作りになっている
  • 母体がしっかりしている(長く使っていける)

など、プラス要素ばかりのテーマです。

私のように

  • ”素の”Bootstrap を体験してみたい!

という方には(親切設計なので)不向きとなってしまいますが😅、それ以外の方にはもちろんオススメです!

無料ダウンロード先

どちらを選ぶかは、お好みでどうぞ。
無料ダウンロードして、使ってみるのがいちばんだと思います。

というわけで私は、かなり素の Bootstrap に近そうなUnderstrap を利用することにしました。

Bootstrap ベースの Understrap

Understrap

そんなこんなで Understrap をインストールして使ってみたのですが…。

  • はじめて聞くような単語が出てきて、わからないことだらけ😰
    • 聞いたことのある単語もあったけど、面倒くさそうで今までスルーしてきた単語がチラホラ😅

そういうわけで、たくさん調べ物をしました。
自分の防備録も兼ねて、以下より”参考サイト一覧”です。

各要素の細かい説明・設定などは省かせてもらいます🙇

WordPress のローカル環境を用意する

Local

WordPress のカスタムは必ず、ローカル環境で試します。
Local は簡単にローカル環境が作れて、メンテナンスも簡単なのでオススメです。

  • WordPress ローカル環境構築ツール:
Local 参考サイト

【図解付】Local(ツール)でWordPressのローカル環境を構築する方法 | Web学園 byお名前.com

【WordPress】Local by Flywheelでローカル環境を簡単構築! – RYOB.net

Understrap ダウンロードとインストール

ローカル環境が整ったら、WordPress の設定を済ませて Understrap をインストールします。

Understrap の日本語ドキュメントが無さそうなので

を使ってなんとかします😉
Bootstrap の日本語ドキュメントは、こちらから。

vscode ダウンロードとインストール

Visual Studio Code - Code Editing. Redefined

コーディングには、vscode(Visual Studio Code) を使っています。

  1. 使い勝手がよく
  2. 拡張機能で、自分好みのカスタムができる
  3. コーディングだけじゃなく、markdown も使えるのに
  4. 全部無料✨

なんて素敵なんでしょう…。

素の状態だと英語なので、日本語化します。

vscode 参考サイト

VSCode | Visual Studio Codeを日本語化する

もっと詳しく学ぶなら・プロ講師から学べる

ざっくり学ぶ、Visual Studio Codeの使い方講座

プログラミングに便利なエディターソフト、Visual Studio Codeを使いこなそう

詳しく見る

gulp ダウンロードとインストール

gulp.js

Bootstrap では Sass が使われています。
環境を整えるため、まずは gulp をインストールします。

gulp とは?

gulp(ガルプ)はNode.jsのパッケージ(プラグイン)として開発されているWeb開発を効率的に行うためのツールです。様々な処理や作業を自動化することができ、実際の開発現場でも使われています。 Node.jsのパッケージgulp(ガルプ)で開発を効率化 | パソコン工房 NEXMAG

gulp 参考サイト

絶対つまずかないGulp 4入門(2022年版) - インストールとSassを使うまでの手順 - ICS MEDIA

Gulpのおすすめパッケージを紹介!Sassのコンパイルやブラウザのオートリロードなど – RYOB.net

Sass とは?

Sass: Syntactically Awesome Style Sheets

「Sass(サス、サース)」とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。従来のCSSにデザイナーやプログラマーが抱いていた不満を解消するスタイルシートといえます。 【入門編】Sassの意味は?SASS・SCSSとは?読み方か…|Udemy メディア

入れ子でCSSが書けると、ホント、らくちんです。

sass 参考サイト

SCSSの基本的な書き方 - Qiita

Sassの書き方(ファイル分割) | GRAYCODE HTML&CSS

bootstrap scss 使い方を解説!死ぬほど分かりやすい導入方法から実際に変数を変更するまで|Be Engineer

もっと詳しく学ぶなら・プロ講師から学べる

CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~

登場してから10年余り、制作現場にも導入が進み、Web開発の現場では必須の技術となりつつある「Sass」。Sass(SCSS)を使えば効率的にCSSをコーディングできます。実務レベルで使えるSassを基礎から身につけよう!

詳しく見る

WordPress のテーマをカスタム

これでやっと、Understrap テーマをカスタマイズする準備ができました。

WordPress のテーマをカスタムする場合は、子テーマを作成してからカスタマイズします。

WordPress 子テーマとは?

親テーマはWordPressのデザインの基本となるテンプレートです。一般的に「テーマ」と言う場合は親テーマのことを指します。
一方、子テーマとは親テーマをカスタマイズするために欠かせないテーマファイルのことです。
子テーマは、親テーマに影響を与えずにテーマをカスタマイズすることが可能です。
親テーマをいじらずに子テーマのみを編集するため、テーマ全体に支障が出ることはありません。 【WordPressの子テーマ】作成方法と使い方を初心者向けに解説|ワプ活

親テーマのいいとこ取りできるのが、良いですね。

WordPress 子テーマ参考サイト

WordPressの子テーマを自作する方法|ワプ活

【初心者向け】WordPressの子テーマとは?設定方法・活用法も解説 | Web学園 byお名前.com

アクションフック

子テーマを用意しても、できるだけ元テーマを触りたくないものです…。

アクションフックとは WordPress本体やテーマ、プラグインなど、アクションフックが用意されている場所で任意のPHPが実行できるしくみです。 できる!WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦! | 株式会社ベクトル

アクションフック参考サイト

できる!WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦! | 株式会社ベクトル

WordPress初心者開発者向け フィルターフックとアクションフック入門 - Qiita

もっと詳しく学ぶなら・プロ講師から学べる

ちゃんと学ぶ、WordPress テーマ開発講座

WordPressで既存テーマのカスタマイズではない、オリジナルのウェブサイトを作ろう

詳しく見る

まとめ

そんなこんなで、サイトのリニューアルが完了しました。
わからないことだらけで、どうしようか…と思いましたが、これらのサイトの皆さんのおかげでたくさん学び・知ることができました😀

今回は広く浅くの勉強だったので、これから少しずつ深めていけたらなぁと思っています。

では!

モバイルバージョンを終了