初心者・独学でもわかる!WordPressを学び始める前の準備

WordPressでWeb制作に挑戦してみたいけど、何から始めればいいかわからない…。そんな独学初心者に向けて、本記事では「事前準備」と「最初につまずきがちな落とし穴」を徹底解説します。レンタルサーバやテーマ選び、教材の使い方まで、筆者の実体験を交えて整理しています。

「ぼくら」の失敗談

1.学習本を選ぶ際に、テーマを考えずに本を選んだために、買いなおすことになった。⇒内容の分かりやすさも大切だが、自分が選んだテーマを例にして説明してある本でないと分かりづらい。はじめはよく分からないので、人気がある「Lightning」や「Cocoon」、「SWELL(有料)」などでよい。

2.この記事で話題にしている「ブラウザ依存のレイアウト問題」「バックアップを取るタイミングと方法」「コメント欄の非表示・インデックス対策」「固定ページと投稿ページの違い」などの説明が、どの書籍にも分かりやすく書いてない。そのため、サイト作成の途上で重大なミスに気づき、その修正に時間がかかった。慣れている者にとっては、ごく当たり前のことが、初心者にはたいへん難しかったりする。サイトを作成する前に、せめて注意喚起してあれば、多大な労力と時間を要して、後で修正する時間を省くことができる。

1.WordPressの教材選びで失敗しないために

⑴.テーマに合った本の選び方

WordPressにはサイトやブログを作る際のテーマがあります。購入する本は、テーマにあわせて選びます。テーマごとに操作法や表示に違いがあり、本はひとつのテーマを例にして書かれています。

例えば、テーマを「Lightning」にしたら、「Lightning」を例にして説明している本が分かりやすいです。

左上図は、管理画面の「外観」>「テーマ」でいくつかテーマが表示されているところです。下は「Lightning」をテーマとして選んで、有効化したところです。
ちなみに、『テーマ』とは、世間一般で使われている「話題、題材」という意味でなく、「テンプレート」のことです。テーマごとにレイアウトなどが違いますので、いくつかの違うテーマを有効化しながら慣れていくしかありません。

⑵.ネット教材や動画の活用法

ネット上にWordPressを解説したページは多数ありますが、右図のWEBST8などは初心者に分かりやすいページだと思います。動画もありますので、おすすめです。

分からない時に、AIを利用するのもいいと思いますが、AIはスキルが身についてから利用すべきかなと思います。AIは「学習のサポート役」や「疑問の交通整理役」として、初期段階から活用してもいいのですが、質問力や判断力が未熟なままだと、誤情報をうのみにしたり、ほしい情報が得られなかったりするからです。

2.最初にぶつかる実践の壁とその回避策

⑴.ブラウザ依存のレイアウト問題

  • WordPressのレイアウト表示が思った通りにならないのに、問題が解決しないことがあります。そんな時は、既定のブラウザを変更してみると解決することがあります。例えば、 Edge を Google chrome に変更してみてください。多くの場合、問題が解決することが多いです。
  • 例えば、サイドメニューが表示されない場合、chromeに変更するだけで表示されるようになります。
    また、メニュー表示位置が右上でなく、フッターの上部に表示される問題も解決します。WordPressの設定をかえてもまったく受け付けてくれない場合は試してみましょう。どのブラウザを使っても同じようなレイアウトにするのは上達したあとで考えましょう。(HTMLやCSSなどの知識が必要になります)

⑵.バックアップを取るタイミングと方法

サイトを本の解説に沿って作成していく途中で、学習が進めやすいように作成途上のページからヘッダーとフッターのみを残して削除しなければならない場合があります。せっかく苦労して作ったサイトの内容を、すべて消し去れと言われます。
設定をかえずに、ページの途中からブロックを設定するような内容であるべきだと個人的には思いますが、そんな時はバックアップをとりましょう。バックアップの取り方については別のブログで話題にしています。

⑶.コメント欄の非表示・インデックス対策

  • 投稿ページのコメント欄を削除するため、チェックをはずさないとまだ未完成のサイトの状態でもコメントが来てしまいます。コメント欄の非表示は、「表示設定」>「ディスカッション」で行います。
  • サイトが完成して公開するまでは、管理画面の「設定」>「表示設定」>「検索エンジンでの表示」にチェックを入れて、検索エンジンがサイトをインデックスしないようにします。(探して表示しない。)
  • 「設定」>「投稿」>「公開」で公開になっていますが、非公開またはパスワード保護を選べます。サイトを作成している段階では非公開が無難です。使用する画像の著作権や公開する写真からプライバシーが漏れないかなど検証した後で公開すべきです。

3.投稿記事の扱い方とサイトマップの考え方

⑴.サンプル記事削除と軽量化

  • 最初からあるサンプル投稿記事「Hello world!」などは削除していいと思います。必要がないならサイドバーウィジェット、コメント欄、デフォルト固定ページ「サンプルページ」も削除します。

⑵.固定ページと投稿ページの違い

  • まず、ホームページに必要な骨格(サイトマップ)をイメージします。大切なのは、トップページをどうするかです。
    個人的には、固定ページをトップページにし、グローバルメニューから投稿記事一覧にリンクをはるのがよいかと思います。個別の投稿記事は自動的に一覧からリンクがはられる仕様になっているからです。
    管理画面の表示設定から簡単に設定できますが、詳しくは別のブログで話題にしています。
  • 分かりにくいと思いますが、WordPressはもともとブログ用であり、デフォルトでトップページが投稿ページ(記事)一覧になっています。
    固定ページが複数あってもWordPressは自動的にリンクをはってくれませんが、投稿ページが複数あると自動的に投稿ページ全体の一覧を作るのです。また、簡単な設定をすれば投稿ページのカテゴリー別やタグ別の一覧まで作ってくれ、個別の投稿ページへのリンクまではってくれます。こういったWordPressの特徴を理解しないと、サイトマップの作成はできません。
  • ブログ中心のサイトが多くなり、書籍等では執筆者が使い慣れているせいなのか、サイトマップを作成する難しさに気づいていないようです。
    初心者は、固定ページと投稿ページの違いやサイトの中での役割がイメージできないため、もう少し十分な説明がなされるべきではと思います。
    デザインカンプからコーディングしてWordPress化するスキルと関係がありますので、テンプレートファイルを中心に別のブログで話題にしています。

4.よくある専門用語と対処法

⑴.ウィジェットとは?

  • 書籍等でよく登場するウィジェットとは、「小さな部品」という意味です。
    サイドバーやフッターにウィジェットを組み込むことで、コードを書くことなく「最新記事の一覧」や「検索フォーム」といった機能を設置することが可能になります。

⑵.キャッチフレーズ・投稿日・ロゴの表示調整

  • レイアウトを分かりやすくするため、タイトルをロゴ画像に差し替えます。
    さらに、余分な表示を修正しましょう。
    ①トップページのタイトルを非表示にする
    ②固定ページの投稿日を非表示にする
    ③タイトルとメニューの表示を変える
    ④投稿日や投稿者の表示を非表示にする
    ⑤キャッチフレーズを非表示にする
    …などがあります。