WordPress・見た目と機能を育てる

テーマでサイトを着せ替える

WordPressの見た目は「テーマ」を選ぶだけで一新できます。8,000種類以上の無料テーマから選んで着せ替える方法と、テーマの正体(実はHTML+CSS)を学びます。

記事は書けるようになりました。つぎは見た目です。WordPressでは、CSSを1行も書かずに、テーマを選ぶだけでサイト全体のデザインを一新できます。そして着せ替えても、書いた記事は1文字も消えません——この仕組み、どこかで聞いた考え方だと思いませんか?

テーマ=サイト全体の「服」

テーマは、サイトの見た目一式をまとめた着せ替えセットです。配色・文字・レイアウト・ヘッダーやフッターの形まで、まるごと変わります。

大事なのは、テーマを変えても記事や画像などの中身はそのまま残ること。WordPressは「中身(記事)」と「見た目(テーマ)」を分けて管理しているからです。

テーマを追加してみる

管理画面の「外観」→「テーマ」→「新しいテーマを追加」で、公式ディレクトリのテーマを探せます。その数、8,000種類以上。すべて無料です。

WordPressのテーマ追加画面。8352種類のテーマがサムネイルつきで並び、人気順などのタブで切り替えられる
テーマの追加画面。気になるテーマは「インストール」→「有効化」の2ステップで着られます。

手順は2ステップです。

  1. インストール——テーマをサイトにダウンロードする(クローゼットに服が増える)
  2. 有効化——そのテーマに着替える(実際に着る)

インストールしただけでは見た目は変わりません。「有効化」した1着だけが、いま着ている服です。

選び方の目安

多すぎて選べないときは、この3つを見てください。

  • プレビューを見る——「詳細&プレビュー」で、着たときの姿を試着できます
  • 更新日と使用数——長く更新され、たくさん使われているテーマは安心(この感覚は、あとで学ぶプラグイン選びでも同じです)
  • 最初は公式デフォルトでも十分——WordPressに最初から入っている「Twenty」シリーズは、シンプルで質の高いお手本です

テーマの正体は、HTMLとCSS

テーマの中身はなんなのか——答えは、HTMLのひな型とCSSの束です。「記事のタイトルをここに、本文をここに流しこむ」というHTMLの骨組みに、CSSで化粧をしたもの。それがテーマの正体です。

だから、開発者ツールでWordPressサイトをのぞくと、<header><article>など見覚えのあるタグが並んでいます。学んだ知識で、テーマの「なぜこう見えるか」まで読めるのです。

このレッスンのまとめ

  1. テーマはサイト全体の着せ替えセット——変えても記事は消えない(中身と見た目の分離)
  2. 追加は「外観」→「テーマ」から、インストール→有効化の2ステップ
  3. テーマの正体はHTMLのひな型+CSS——学んだ知識でテーマの中身まで読める

やってみよう:テーマを着せ替える

Playgroundで、サイトの服を替えてみましょう。

  1. 表側のサイトの雰囲気を目に焼きつけておく
  2. 管理画面の「外観」→「テーマ」→「新しいテーマを追加」をひらく
  3. 「人気」タブから気になるテーマを選び、「インストール」→「有効化
  4. 左上のサイト名から表側に戻って、変身ぶりを確かめる
  5. 「Hello world!」や前レッスンで書いた記事が、そのまま残っていることも確認する

余裕があれば2〜3着はしごして、雰囲気の変わりっぷりを楽しんでください。リロードすれば全部リセットされる練習場なので、遠慮はいりません。