記事内に商品プロモーションが含まれる場合があります
今回はWordPress初心者の方に向けて「WordPressの基本」や「最初につまずきやすい点」などを紹介していきます。すでに知っている部分はサクッと読み飛ばしてくださいませ（とくに前半は簡単な内容です）。
そもそもWordPressって何？はてなブログやアメブロなどと何が違うの？という方は、まずはこちらの記事に目を通してみてください。
1. WordPressは自由
WordPressはとにかく自由です。ブログから、企業やお店のホームページ（Webサイト）、掲示板などまで作ることができます。デザインのカスタマイズも自由。細かなところまで、自分好みに変えることができます。これがアメブロやはてなブログと比べたWordPressの何よりの魅力です。
WordPressをこれから始める方は、こちらの記事が参考になるはずです。
2. 初心者でもテーマでデザインをおしゃれに
せっかくなら、おしゃれなサイトやブログを運営したいですよね。WordPressには「テーマ」と呼ばれるデザインテンプレートが無数にあります。
このテーマ選びがとても重要です。
良いテーマをインストールすれば、カスタマイズをほとんどしなくても、おしゃれなWebサイトが完成します。
（有料のものもありますが）無料でも高品質なものがたくさんあります。
当サイトからもSANGOという名前のWordPressテーマ（有料）を販売しています。興味のある方はぜひチェックしてみてください。
こちらの記事でおすすめのWordPressテーマをまとめています。無料のものもたくさん紹介しています。
ちなみに記事数が増えてからテーマを変更するのはけっこう大変です。何かと修正作業が必要になる可能性大です。テーマは慎重に選びましょう。
3. パーマリンク設定をはじめに行う＆設定は変えない
パーマリンク設定とは、ページのURLをどのようなルールで表示させるかという設定のことです。
管理画面の左下の「設定」「パーマリンク設定」から変更することができます。
パーマリンクはいくつかの選択肢の中から選ぶことができます。
おすすめは「投稿名」
Googleのガイドラインでは「シンプルで分かりやすいURLにする」ことが推奨されています。また、URLに日付を入れると「記事更時にも検索結果の日付が更新されない可能性（仮説）」があります。 というわけで、おすすめは投稿名（https://◯◯/sample-post/）を選ぶことです。
投稿ページで末尾の指定を
パーマリンク設定で「投稿名」を選んだ場合には、投稿編集画面でURLの末尾を指定できるようになります。ここには、その記事を簡潔に表す英語の文字列を入れるのがおすすめです。上の画像のようなURL設定はタイトル欄の下あたりに表示されます。一度記事を下書き保存しないと表示されなかったりするのでご注意を。
パーマリンク設定を変えるリスク
後からパーマリンク設定を変えると、ページのURLが全て変わってしまいます（投稿済みの記事のURLまで変わってしまいます）。これはSEO的にマイナスの影響を与える可能性があるので、できればパーマリンク設定は変えないようにしましょう。
4. WordPressでは複数のファイルを結合して1つのページを生成している
ここは初心者の方には少し分かりづらいかと思いますが、知っておくとカスタマイズをしやすくなります。
WordPressでは複数のPHPファイルを結合して、1つのページデータ（記事ページやトップページなど）が作られます。
例えば、記事ページの場合には、サイトタイトルまわりのパーツは「header.php」に、記事のコンテンツ部分は「single.php」に、サイドバー部分は「sidebar.php」に書かれています。
テーマによって少し差はありますが、基本的にこのようにパーツごとに違うファイルが分かれています。それを組み合わせて１つのページが出来上がっているのですね。本格的なカスタマイズを行う際には、これらのファイルに変更を加えていくことになります。
ロゴまわりを自分好みにカスタマイズしたい！というときには「header.php」を触るというわけですね。
5. カスタマイズ時には子テーマを使う
通常のテーマ（親テーマ）と組み合わせて使うカスタマイズ用のテーマです。これにより、親テーマ自体には手を加えること無く、変えたい部分だけを上書きするような形でカスタマイズすることができます。
WordPress初心者の頃には、何気なくテーマファイルを直接いじってしまうのですが、これには少しリスクがあります。というのもテーマにアップデートがあったときに、せっかく編集したファイルまで上書きされてしまうのです。
これを避けるためにできれば、子テーマと呼ばれるものを用意し、カスタマイズは子テーマを通して行いましょう。
詳しくはこちらの記事をどうぞ。
5. WordPressではことあるごとにバックアップを
WordPressではことあるごとにバックアップを取りましょう。
バックアップを取るシーン
- カスタマイズ時
- WordPressのバージョンアップ時
- テーマやプラグインの更新時
- 定期的な自動バックアップも
とくに①WordPress/テーマのカスタマイズをする時のバックアップは重要です。コードを書き間違えるだけで、画面が真っ白になってしまいかねないですからね…。バックアップの取り方については、別の記事にまとめています。
6. WordPress初心者もFTPソフトは導入しておこう
WordPressではカスタマイズ時のちょっとしたコードのミスにより突然画面が真っ白になり、英語のエラー文だけが表示されることがあります。
WordPressでカスタマイズをするのであれば、きっと誰もが経験することになります。このとき管理画面から元に戻そうとしても、管理画面まで真っ白になってしまうこともよくあります。このような場合には、FTPソフトを使ってエラーのあるファイルを編集しなければなりません。
FTPソフトとは「サーバー」⇔「手元のパソコン」の間でファイルのアップロード/ダウンロードができるソフトのことです。FTPソフトの使い方や導入方法は、下の記事で初心者の方でも分かるように解説しています。
8. カスタマイズで困ったら、まずはキャッシュ消去
ブラウザのキャッシュとは、下図のように画像やCSSなどのファイルを閲覧者のパソコンやスマホに保存しておいて、次に同じ画像やファイルを読み込むときの時間を短縮する仕組みのことです。
皆さんのパソコンの中にも自分のブログのキャッシュが残り「デザインを変えたはずなのに反映されないぞ？」というようなことが起こるわけですね。
キャッシュを消去すると解決するパターン多し
「カスタマイズしたのに反映されない」というときには、まずはブラウザのキャッシュを消去しましょう。例えば、Chromeのキャッシュの削除の方法は下の記事でまとめています。
キャッシュ系プラグインでの消去も忘れずに
「WP Super Cache」などのキャッシュ系のプラグインを入れている場合には、ブラウザのキャッシュの消去とは別にプラグインの設定（管理画面）からキャッシュの消去を行う必要があります。
それでも反映されない場合は…
下記の記事を参考にしてみてください。
9. ブラウザの「検証」は早めに覚えよう
ブラウザには検証機能というものがついています。検証の使い方は今すぐに覚えておきましょう。自分好みにカスタマイズをしたいとき、デザイン崩れを直したいとき、CSSが反映されずに困っているときなどに大活躍します。
検証機能を使うときは、Webページ上の調べたい部分を右クリックして「検証」をクリックします。ブラウザによっては「調査」などの名前になっていることも。
すると、その部分のHTMLと、そのスタイルを決めるCSSが横並びで表示されます。
例えば、デザインが崩れてしまっている部分で検証を使えば「どんなHTML・CSSが書かれていて、何が問題でデザイン崩れが起きているのか」を調べられるのです。詳しい使い方はこちらの記事をどうぞ。Chromeの場合ですが、他のブラウザでも使い方はほぼ同じです。
10. 初心者はプラグインの入れすぎに注意
プラグインはWordPressにさまざまな機能を簡単に付け足すことができる仕組みのことです。
「バックアップを自動で取ってくれるもの」や「問い合わせフォームを簡単に設置できるもの」「画像を自動圧縮してくれるもの」など、たくさんのプラグインを無料で簡単に使うことができます。
このプラグインが便利でついついたくさん入れてしまうのですが、プラグインはときにトラブルのもとになります。テーマとの相性やプラグインどうしの相性が悪ければ、エラーが出ることもあります。
また、表示速度が落ちる原因になります（プラグインによります）。
プラグインを入れるときは慎重に
とはいえ「プラグインを使わない方が良い」というわけではありません。優秀なプラグインはうまく使うべきです。ちなみに日本語の文字化けを直すプラグイン「WP Multibyte Patch」は有効化しておきましょう。
11. WordPressで不具合があったら、プラグインを停止してみる
デザイン崩れやおかしな表示、エラーなどがあったときには、一度プラグインを全て停止して確認してみましょう。これで解決する場合には、１つずつ有効化に戻すことで、どのプラグインが不具合の原因になっているのかを特定できます。
12. スマホやタブレット表示までチェック
WordPress初心者〜中級者にありがちなのが、自分のパソコンで見た時の表示ばかり気にしていて、スマホやタブレットで見たときにデザインが崩れてしまっている、ということです。 カスタマイズを行ったときには必ずスマホ表示までチェックしましょう。
パソコンからスマホ表示を確認
わざわざスマホで開かなくても、PCブラウザからスマホ表示を確認できます。ブラウザによって確認方法はまちまちなのですが、例えばChromeの場合にはさきほど紹介した「検証」から調べられます（解説）。FirefoxやSafariの場合には、ツールや開発メニューから「レスポンシブデザインモード」を選びます。
Resizerというツールも便利
また、ResizerというGoogleが提供するツールを使えば、URLを入れることで、PC、タブレット、スマホ表示をまとめてチェックができます。おすすめ。
13. やりたいことがあったり困ったりしたらググる
WordPressに関する記事は検索すればたくさんヒットします。何かやりたいことがあったり、困ったことがあったりしたら、まずは「WordPress ◯◯」や「WordPress ◯◯できない」というように検索してみましょう。人気のテーマを使っているのであれば、そのテーマ名を入れるのも効果的です。
英語でも検索してみよう
もし日本語でヒットしない場合には、英語で検索してみるのも良いかもしれません。やはり英語だと情報量が格段に違います。普段の検索エンジンに英語を入力すると、日本のサイトが中心にヒットしてしまうので、GoogleのUS検索を使うのがおすすめです。
14. ビジュアルエディタで困ったら、テキストエディタで
WordPressの投稿画面では「ビジュアル」と「テキスト」というタブがあると思います。ここからエディタの切り替えを行うことができます。
- ビジュアル：実際の表示に似たような見た目で記事が書ける。自動でHTMLに変換される
- テキスト：HTML形式で表示される。ビジュアルで何か困ったらこっちを見てみる
WordPress初心者の方だと、ビジュアルエディタで記事を書く方が多いと思います。もし「ビジュアルでの表示がおかしい」「プレビューしてみると変な表示になってしまっている」という場合には、テキストエディタに切り替えて該当部分をチェックをしてみましょう。明らかに余計なHTMLタグが入ってしまっている場合には、そのタグを消去してみると良いかもしれません。
15. ページの読み込み速度を上げよう
ウェブページの読み込み速度が1秒から5秒になると直帰率は90%上がると言われています（ソース）。WordPressでブログをはじめたら、できる限りの高速化を行いましょう。具体的な方法は次の記事で解説しています。
この記事で紹介している方法は例えば以下のようなものです。
対策例
- プラグインの見直し
- PHPのバージョンの見直し
- サーバーの見直し
- キャッシュ系プラグインの活用
- 画像の容量を小さくする
- 画像の読み込みを遅延
- ブラウザのキャッシュを活用
- コードを圧縮
- JavaScriptをフッターで読み込み
- YouTube動画を最適化
ちなみに読み込み速度は、Googleが提供するPageSpeed Insightsというツールを使えば、簡単に計測できます。
16. 画像は圧縮しよう
こちらは読み込み速度の話と関係するのですが、とくに重要なのでこのページでも取り上げておきます。画像のサイズは読み込み速度を遅くする大きな原因になります。必要以上に大きな画像は使わないようにしましょう。
画像は圧縮（とくにPNG画像）
とくにPNG画像は思いのほか大きなサイズになってしまいがちです。そこでおすすめなのが「PNG圧縮」というWebサイトです。
無料、会員登録不要、ソフトインストールは不要。画像をドラッグしてアップロードするだけで圧縮が始まります。なお、画像に含まれている余計な情報を取り除くだけなので、画質はほとんど落ちません。
まとめて圧縮したい場合はプラグインを
「EWWW Image Optimizer」というプラグインを使うと、WordPressに画像をアップロードした時に自動で圧縮を行ってくれます。既にアップロード済みの画像もまとめて圧縮することもできる優れもの。
画像挿入時に最適なサイズを選ぼう
WordPressでは画像をアップロードしたときに、「サムネイル」「中」「大」というように複数のサイズの画像を自動生成してくれます。
画像挿入画面の右下でサイズを選べることも知っておきましょう。
17. XMLサイトマップをSearch Consoleに登録しておこう
XMLサイトマップとは、サイト内に存在するページ一覧がまとまった地図のようなものです。これを「Google Search Console」というサービスに登録しておくことで、Googleがサイト内のページを把握しやすくなります。
とくにサイト（ブログ）を開設したばかりの頃は、Googleのシステムがなかなか巡回に来てくれません。検索エンジンからの流入を期待するのであれば、必ず登録しておきましょう。
XMLサイトマップには書き方のルールが決まっており、自分での作成と更新を行うのはなかなか大変です。しかし心配ご無用。プラグインを使えばWordPress初心者の方でも簡単に設定と登録ができます。
18. アイキャッチ画像はCanvaを使えば無料＆簡単
アイキャッチ画像を作りたいときには、Canvaというデザインツールを使うのがおすすめです。たくさんのテンプレートが用意されており、少し編集を行うだけでおしゃれなデザインの画像を作ることができます。
ブラウザ上で編集ができるため、ソフトをインストールしたりする必要もありません。
アイキャッチ画像のデザインのコツについては、次の記事にまとめています。
19. SNSでシェアされたときのアイキャッチ画像表示をチェック
WordPressで各投稿に登録したアイキャッチ画像は、（テーマやプラグインで設定ができていれば）TwitterやFacebookでシェアされたときにも使われます。
Twitterカード/OGP設定をしよう
このような「シェアされたときのリンクの表示を最適化する設定」は、Twitterカード設定やOGP設定と呼ばれます。最近だとテーマ側であらかじめ設定されていることも多いですね（サルワカのテーマSANGOでも設定済みです）。詳しい解説は別の記事にまとめました。
アイキャッチ画像がどのように表示されるかを確認しよう
TwitterやFacebookでシェアされたときにはアイキャッチ画像が決まったサイズで表示されます。はみ出た部分は自動で切り抜かれます。文字などを画像に入れていると、中置半端な位置で切り抜かれて不格好になってしまうことがあります。
というわけで、アイキャッチ画像サイズチェッカーというものを作りました。このツールを使えば、TwitterやFacebookでシェアされたときにどのような見た目になるのかをまとめてチェックできます。
20. 画像はドラッグで挿入できる
地味に時間短縮になるのがこちら。パソコンのフォルダー上の画像を投稿編集画面へとドラッグすることで、アップロードすることができます。複数の画像を一挙にアップロードすることも可能です。
21. 代替テキストを記入しよう
画像の挿入時の画面右下に「代替テキスト」という欄があります。こちらは「画像が表示されなかったとき」や「ページコンテンツが音声により読み上げられるとき」などに使わることになります。
つまり、代替テキストが「スマホの通信制限がかかってしまって、文字はなんとか読み込めたけど画像は読み込めなかった」なんていう時に表示されたりするわけです。
また、検索エンジンは画像の内容を判断するうえで、代替テキストを見ています。SEO対策にもなるので、できる限り記入しましょう。
すでに挿入されている画像であっても「画像」⇒「鉛筆マーク」の順にクリックすれば、代替テキストを後から設定＆編集することができます。
代替テキストの書き方は？
簡潔に書きます。SEO対策になるからと言って、キーワードを詰め込むのもやめましょう（スパムとみなされる可能性もあります）。「画像が読み込まれなかったとしても、代替テキストにより画像内容が把握できる」のが理想です。詳しくは、次の記事が参考になります。
22. 無料素材を活用しよう
こちらはWordPressに限った話ではないですが…。最近だと高品質な写真、イラスト、アイコンを無料配布してくれているサイトがたくさんあります。
例えば、Unsplashというサイトでは美しい写真がたくさん配布されています。無料かつ商用利用も可能な最強の写真素材サイトです。
イラストやアイコン素材を探すときには、下の記事を参考にしてみてください。
WordPress初心者の方が知っておきたいことをまとめてきました。WordPressはユーザーが多いので、ググればだいたい答えが見つかります。困ったら、まずは調べてみましょう。
