現役エンジニアがオススメするデスク周りの商品紹介

【完全初心者向け】WordPressのカスタマイズ方法の基礎を解説【手順紹介】

【初心者必読】WordPressのカスタマイズ方法の基礎を解説【手順を紹介】

読者の悩み

  • WordPressのカスタマイズをしてみたいけど、不安
  • 全然わからないんですけど、初心者でもできる?
  • カスタマイズのカの字も知らないので、色々知りたい!

こんな疑問に答える記事になっています。

ブログを始めて数年、ブログのカスタマイズを沢山してきました。
ブログカスタマイズの記事も沢山投稿しています。

>>WordPressカスタマイズ集のまとめ

また、WordPressテーマを自作してサイトを立ち上げた経験もあります。

そんな私が、初心者向けにWordPressのカスタマイズ方法や、カスタマイズ手順について解説していきます!

1.WordPressのカスタマイズより前に、テーマについて理解しよう

WordPressのカスタマイズを行う前に、テーマについて理解を深めましょう。

なぜなら、良いテーマを使えば、カスタマイズがほぼ不要の状態で使用できるから。

カスタマイズに時間をかけることなく、記事の執筆に時間をかけることができるのが一番ですからね。

そんなWordPressのテーマは有料のものや、無料のものがあります。
私は無料テーマのStinger8→有料テーマのSANGOに切り替えた経験があります。

SANGO+PORIPUにテーマを乗り換えで大変だった点【100記事越えてからの変更】 SANGO+PORIPUにテーマを乗り換えで大変だった点【100記事越えてからの変更】 WordPressのテーマをStinger8からSANGO+PORIPUへ乗り換えました!なぜ乗り換えたのか?という点や、乗り換え時には110記事+カスタマイズをしまくっていたこともあり、乗り換え時にやったことなどを紹介します。

すぐれたテーマを使うと、メリットだらけで・・・

テーマのメリット

  • 知識がない人でも簡単にサイトを(ある程度は)カスタマイズできる
  • トップページなどの色をワンクリックで変更可能だったりするテーマもある
  • 広告は、いちいち検索せずとも広告用のコードを書きこむ場所に書き込めば終わりなど、初心者に嬉しい機能もたくさん

こんな感じに、優れたテーマを使っていると「カスタマイズ、不必要では・・・?」という人も出てくるんじゃないかなぁと思います。

初期設定で自分の思うように色を指定したり、チェックボックスにチェックを入れたりするだけで終わります。

もちろん、優れたテーマ=有料テーマになりがちなので、私は断然有料テーマをおすすめしています。

テーマは、WordPressの「外観」→「テーマ」から選択可能です。

途中でテーマを切り替えるのは大変なので、できるだけ初心者の頃(記事数が少ないころ)から良いテーマに設定しておくのが良いでしょう。

時間をかけて大部分をカスタマイズすることを考えているのなら、いっそのこと最初から綺麗なデザイン+高機能な有料テーマを使ってみるのもいいんじゃない?と私は思っています。

2.WordPressのカスタマイズに必要な要素について学ぼう

カスタマイズに必要な要素について学ぼう

さて、カスタマイズに関して、本題に入りましょう!
カスタマイズに必要な要素は、HTMLとCSSの二つです。

maipyon

HTMLは家の骨組み、CSSは家の壁みたいな感じだと思ってもらえれば!2つを組み合わせてデザインを作っていきます。
プログラミングを学習している人なら、PHPという言語の部分を編集することでより高度なこともできます。(めちゃくちゃ凝り性じゃないとPHPはいじらないと思います。)

テーマの改修にはCSSの改修が必要

元々あるデザインの、ある部分の色を変えたい・・・みたいなことってよくありますよね。

そういう場合には、CSSのみ編集が必要になってきます。

CSSは家でいうなら壁、と例えましたが、CSSで文字の色・サイズ・太さなどなど、デザイン全般ならなんでもできると思ってもらえればOKかなと思います。

そのCSSを、WordPressだとどこで編集できるか?と言えば、2か所あります。

CSSの編集場所
外観
テーマエディター
style.css

ここにCSSがずらっと書かれているので、このページを編集します。

maipyon

基本的に、style.cssの一番下にコピペで張り付けることが多いと思います!

CSSってなに???という人は、より簡単な「追加CSS」という部分に追加するだけの方がいいでしょう。
こっちの方が初心者向けです。

CSSの編集場所
外観
カスタマイズ
追加CSS

maipyon

追加CSSは何もしていなければまっさらな状態なので、初心者にもわかりやすい!
注意
どちらも、ファイル全体をバックアップ(コピペでテキストデータを別の場所に保存するなど)しておくのをオススメしておきます。あくまでカスタマイズは自己責任です。

HTMLはどこに書くの?

憧れのブロガーさんのやってるような、きれいな囲み枠を付けてみたいんだけど・・・という人は、CSSだけでなくHTMLも書く必要が出てきます。

で、そのHTMLってどこに書くの?という話ですが、HTMLは単純に記事の中に書けばOKです!

ただ、いつも書いているビジュアルモードでHTMLを貼り付けるのはNGです。

WordPressはビジュアルモードだとHTMLが見えませんが、テキストモードにすることでHTML形式で見えるので、そこにHTMLをコピペなどして貼り付けるとOKです。

maipyon

記事内じゃなくて、ブログのヘッダーになにか追加したい・・・とかだと、header.phpをいじることになります。ファイル構成をしっかりと認識すれば、WordPressならどこでも自由自在にいじれます!

3.コピペで張り付けたのにうまくいかない・・・

HTMLもCSSもコピペで張り付けたのにうまくいかない・・・!
全く見た目が変わらないのですが・・・どうしたらいいですか?

という場合が結構あるのですが、これは「キャッシュ」が原因です。

サイトを見る際には、できるだけ軽くするために、「キャッシュ」を読み込みます。

その結果、「キャッシュを読み込む」=「以前のデザインを読み込む」なので、デザインが変わらないままになります。

そのため、キャッシュを削除して、デザイン変更後のページを読み込む必要が出てきます。

(chromeを使用している場合)やり方は簡単で、windowsならctrl+F5を押せば完了です!

macなら、+shift+rでキャッシュを削除しつつ読み込むことができるので、もしデザインが変わらない・・・という場面に遭遇した場合は、試してみてください!

カスタマイズしたCSSを保存できなくなった場合

ほぼ起こることはないのですが、特殊な部分をカスタマイズしている場合には、保存すらできなくなることがあります。

間違った内容のコードを書けばエラーがでるので、それを修正すればいいのですが、保存すらできない・・・。

そんな時は、WAF設定を見直しましょう。

サーバーで設定されているウェブアプリケーションファイアウォールと呼ばれるもので、セキュリティ対策として使われています。

CSSを変更して保存が、攻撃として見られてしまっているから保存できない。という状況です。

これはあなたが契約しているサーバーのWAF設定をOFFにしてから保存するしかないので、もしもの場合は見直しましょう。

WAF設定が原因で変更できない場面は、みんながよく使うAddQuickTagというプラグインで編集しようと思ったらできなくなることが個人的には多いかな~と思います。

4.WordPressでのカスタマイズを怖れずにやってみよう!

初心者向けに、カスタマイズの方法について説明しました。

基本的には、「記事内にHTMLを書いて」「それに対応するCSSを追加する」だけで、大抵のカスタマイズは完了します!

気に入ったカスタマイズが出てきたら、恐れずにやってみて欲しいなぁ・・・と私は思います!

このブログでは、WordPressのカスタマイズ集を載せているので、そちらも参考にしていただけると嬉しいです!

【コピペでOK】WordPressのカスタマイズ集20選【ほぼ必須のカスタマイズあり】 【コピペでOK】WordPressのカスタマイズ集20選【ほぼ必須のカスタマイズあり】 今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。