ワードプレスをカスタマイズする方法

皆さま、ごきげんよう。
ワードプレスのカスタマイズといえば色々な方法があると思いますが、本日は私のカスタマイズの仕方について語ってみたいと思います。
twenty seventeenをベースにしたこのブログをカスタマイズした時の注意点や、調べ方についての備忘録です。

ベースとなるテーマを決める


ベースとなるテーマを選びます。なるべくシンプルなテーマがカスタマイズしやすいです。「ワードプレス」、「ブランクテーマ」 などと検索すると、骨組みだけのシンプルなテーマが色々紹介されています。
オリジナルを作りたい方、ワードプレスの構成を一から勉強したい方などは、こういうテーマを使ってみるのも良いですね!

私の場合は、ワードプレス公式のテーマ「twenty..」シリーズをベースにしております。
ブログを運営するのに便利な機能が一通り揃っていてかつ、レスポンシブ対応、デザインもシンプル、プラグインとの互換性も良いのでとても便利なんです。

子テーマの作成

ベースとなるテーマが決まったら、子テーマを作成します。
子テーマの作成については以前の記事で書いた通りなので、こちらもぜひ参考にしてみてください。
スタイルシートに子テーマを設定する
各テーマもたまにアップデートされたりしますので、その際せっかくカスタムした内容が消えてしまわない様、親テーマを直接編集するよりも子テーマの作成をお勧めします。

ディベロッパーツールを活用する

私はfirebugを使っております。chromeなら表示→開発/管理→ディベロッパツールも便利です。これらを使ってほぼブラウザ上でデザインしております。
カスタマイズしたい部分の画面上を右クリックし、「要素を調査」してcssをいじって結果を確認しながら、子テーマのスタイルシートに書き加えてゆく、という感じです。

jsファイルを作る時の注意点

jsファイルなどでjqueryの記述をするときは「$」を「jQuery」と書き換えます。
私も自分でも呆れるほどよくやらかすのですが、コードに間違いがないのに何故か実行されない時は、もしかしたらこれが原因かもしれません。

外部ファイルを読み込ませる

外部ファイルを読み込ませた時、ちゃんと読み込みされているかどうか調べたい時は、
サイトのどこかを右クリック→ページのソースを表示、Command + f(Ctrl + f)でファイル名を入れて検索してみます。
ちゃんと読み込めていれば見つかるはず!
ワードプレスに外部ファイルを読み込ませる方法についてはこちらもご覧ください。
ワードプレスの背景に雪を降らせてみよう

プラグインのスタイルシート

子テーマのスタイルシートにcssを書いても反映されない場合、直すべきはプラグインのスタイルシートかも知れません。
ディベロッパツールなどでパスを調べてみましょう。例えばfirebugではstyle.css何行目、などと書いてあるところにマウスオーバーするとcssのパスがわかりますので、もしwp-content/plugins/…となっていれば、FTPへ行ってwp-content/plugins/…中にあるcssファイルを書き直すことになります。

デザインでお役立ちのサイト

私が普段よく利用しているお役立ちサイトをご紹介します。

  • html,css HTMLクイックリファレンス もうここ無しではいられないくらいお世話になっています!
  • 配色で悩んだら 色見本と配色サイト 配色サイトは数あれど、色が探しやすくて便利です。
  • フォントを探すなら google web fonts
  • 無料のお洒落な写真サイト Foter 写真の量が豊富で、探しているイメージがほぼ見つかります。

他にもお世話になっているサイトがありすぎでして(笑)また思いついたら追記します。

まとめ

いかがだったでしょうか?
カスタマイズの仕方は十人十色ですが、少しでも参考になれば幸いです。
ではまた次回お会いしましょう!

コメントを残す