2022.2.6 更新
皆さま、ごきげんよう。
本日はワードプレスのカスタマイズの方法について、
このブログをカスタマイズした時の注意点や、調べ方についての備忘録です。
1.ベースとなるテーマを決める
ベースとなるテーマを選びます。なるべくシンプルなテーマがカスタマイズしやすいです。「ワードプレス」、「ブランクテーマ」 などと検索すると、骨組みだけのシンプルなテーマが色々紹介されています。
オリジナルを作りたい方、ワードプレスの構成を一から勉強したい方などは、こういうテーマを使ってみるのも良いですね。
私の場合は、ワードプレス公式のテーマ「twenty..」シリーズをベースにしております。
ブログを運営するのに便利な機能が一通り揃っていてかつ、レスポンシブ対応、デザインもシンプル、プラグインとの互換性も良いのでとても便利です。
2.子テーマの作成
ベースとなるテーマが決まったら、子テーマを作成します。
子テーマの作成についてはこちらの記事も参考にしてみてください。
テーマはアップデートされることがありますので、その際せっかくカスタムした内容が消えてしまわない様、親テーマを直接編集するよりも子テーマの作成をお勧めします。
3.ディベロッパーツールを活用する
firefoxならfirebug、chromeなら表示→開発/管理→ディベロッパツールが便利です。これらを使ってほぼブラウザ上でデザインしております。
カスタマイズしたい部分の画面上を右クリックし、「要素を調査」してcssをいじって結果を確認しながら、子テーマのスタイルシートに書き加えてゆく、という感じです。
4.jsファイルを作る時の注意点
jsファイルなどでjqueryの記述をするときは「＄」を「jQuery」と書き換えます。
私も自分でも呆れるほどよくやらかすのですが、コードに間違いがないのに何故か実行されない時は、もしかしたらこれが原因かもしれません。
5.外部ファイルを読み込ませる
外部ファイルを読み込ませた時、ちゃんと読み込みされているかどうか調べたい時は、
サイトのどこかを右クリック→ページのソースを表示、Command + f（Ctrl + f）でファイル名を入れて検索してみます。
ちゃんと読み込めていれば見つかるはずです。
ワードプレスに外部ファイルを読み込ませる方法についてはこちらもご覧ください。
6.プラグインのスタイルシート
子テーマのスタイルシートにcssを書いても反映されない場合、直すべきはプラグインのスタイルシートかも知れません。
ディベロッパツールなどでパスを調べてみましょう。例えばfirebugではstyle.css何行目、などと書いてあるところにマウスオーバーするとcssのパスがわかりますので、もしwp-content/plugins/…となっていれば、FTPへ行ってwp-content/plugins/…中にあるcssファイルを書き直します。
7.デザインでお役立ちのサイト
私が普段よく利用しているお役立ちサイトをご紹介します。
- html,css HTMLクイックリファレンス もうここ無しではいられないくらいお世話になっています！
- 配色で悩んだら 色見本と配色サイト 配色サイトは数あれど、色が探しやすくて便利です。
- フォントを探すなら google web fonts
- 無料のお洒落な写真サイト Foter 写真の量が豊富で、探しているイメージがほぼ見つかります。
まとめ
いかがでしたでしょうか？
カスタマイズの仕方は十人十色ですが、少しでも参考になれば幸いです。
ではまた次回、お会いしましょう！