初心者向けWordPressエディターの使い方

WordPress管理画面

この記事は前回のWordPress基本設定とインストール:チュートリアル1日目の続きの記事です。

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

WordPressには投稿ページと固定ページが存在します。この2つを使い分けることでサイトを作っていきます。どちらを使うか理解しておきましょう。

投稿ページの特徴

投稿ページは、時系列で表示されるため記事を投稿した日付が表示されます。投稿ページにはニュースやブログなどの記事に利用します。

カテゴリーとタグを設定することができ、記事の分類をする機能があります。カテゴリーは階層を持つことができ、タグはできません。分類することで一覧ページの出力が可能となります。またユーザーにとっても分類されていることで解りやすいホームページになります。

また、WordPressでは複数のユーザーを登録する機能があり、投稿ページに書いた人が誰であるかが表示することができます。

投稿ページがWordPressの基本になるので、このページの機能をしっかり覚えましょう。

*左メニューの投稿から新規追加や一覧の表示ができます。

WordPress投稿メニュー

固定ページの特徴

固定ページには時系列がありません。固定ページにはAbout・サイト情報・プロフィール・サイトマップ・お問い合わせなどの時系列にする必要のないページに利用します。

*左メニューの固定ページから新規追加や一覧の表示ができます。

WordPress固定ページメニュー

記事の投稿方法エディターの使い方

WordPressのエディターは、とても使いやすく記事が書きやすさを追求した優れたエディターです。使ってみるとその使いやすさにきっと驚くでしょう。記事を書くときに必要な文字数のカウント機能がついておりとても役立ちます。

では記事を投稿してみましょう!

新規投稿ページ

こちらが新規投稿のダッシュボードです。左メニューの「投稿」「新規投稿」を選択してください。まずはタイトルを入力してみましょう。次に記事本文を書きますが、その前にビジュアルとテキストモードを選択することができます。ビジュアルは実際の表示に近い状態を見ながら記事を書くことができます。テキストモードはHTMLタグを見ながら書くモードです。今回は初心者にわかりやすいビジュアルモードを選択してください。

*下の画像はTinyMCE Advancedプラグインでメニューを追加した状態です。

新規投稿ダッシュボード

タイトルを入力した際のパーマリンク設定

まずタイトルを入力すると、タイトルの下にパーマリンクが表示されます。下の例では日本語になっていますが、このままで公開すると日本語のURLで表示されますが、ソーシャルメディアでシェアされた時に不都合が生じます。日本語が記号に変換されとても長く意味のわからないURLが生成されてしまいます。そのためパーマリンクはわかりやすい英文かローマ字で入力します。できるだけわかりやすくタイトルを表す単語を入力しましょう。例えばwp-settingのようにハイホンで区切っても構いません。

投稿のパーマリンク

WordPressのシステム全体にパーマリンクを設定していない方は、事前に詳細ページを確認ください。
WordPress基本設定とインストール:チュートリアル1日目

見出しの効果的な使い方

文章には見出しが必要です。読んだ方にわかりやすくパラグラフごとに見出しを設定しましょう。また、SEO対策として見出しを効果的に使うことが重要です。それには多少の知識が必要になりますが、簡単なことなので覚えておいてください。

見出しタグ

ホームページの内部ではHTMLで書かれており、以下のように出力されます。

HTML対応表
見出し1 <h1>〜</h1>
見出し2 <h2>〜</h2>
見出し3 <h3>〜</h3>
見出し4 <h4>〜</h4>
見出し5 <h5>〜</h5>

見出しを設定する際には順番が逆にならないように注意してください。見出し2の次に見出し1は間違いです。

入れ子は正しい記述方法です。入れ子というのは、例えば見出し2の中に見出し3が2つあり、次のパラグラフは見出し2から始まるというパターンです。

詳しくはこちらのページも参考になります。
見出しタグh1からh6の使い方

*WordPressのエディターはビジュアルモードとテキストモードを入れ替えることができるので、設定した内容を確認してHTMLではどのように表示されるかを見て勉強してください。

テーマ内の見出しタグを確認する

たいていのテーマでは記事タイトル部分にh1が設定されていると思いますが、テーマによってまちまちです。

あなたが利用しているテーマによってどのような内部構造をしているか異なりますので、ソースコードの確認をしましょう。

ブラウザによって異なりますが上部のツールバーの中かから「開発」「ソースコードを表示」で確認できます。WordPressには初めからサンプルーページ(Hellow World)が用意されていますので、確認しておきましょう。

以下の例は、今読んでいるこのページの場合です。記事タイトル部分にh1が設定されているのが解ると思います。タイトル名を探して、h1なのか、h2なのかを調べて見ましょう。

ソースコード例

以上を踏まえて文章を書いていきましょう。

文字にリンクを設定してみよう

ホームページ内の他のページや外部のホームページを紹介するためにリンクを設定したいことがあると思います。

下の画像を見ると解ると思いますが、文字を入力し、選択します。選択した状態でリンクボタンを押すと、URLを入力する場所が出てきますので、ここに入力するかコピーして貼り付けると完成です。

エディター内の右上にあるプレビューボタンで確認して動作確認をして見ましょう。
WPリンク設定方法の画像

記事に画像を挿入してみよう

画像を挿入したい場所にカーソルを合わせます。「メディア追加」ボタンを押してファイルをアップロードします。ドラッグ&ドロップもしくはフォルダからファイルを選択します。

WordPressメディアアップロード画面

代替テキストを必ず入力します。ここに画像の説明を入力します。ブラウザーには表示されませんが、HTML内に表示されます。HTML内ではaltタグに相当しSEO対策上とても重要です。

代替えテキストの入力

その下に画像の配置とURLを設定します。

配置:なし・右・左・中央
リンク先:なし・メディアファイル・添付ファイルのページ・カスタムURL
画像サイズ:サムネイル・中・大・フルサイズ

配置は「なし」を選んだ場合左側にそのまま配置されます。「右・左」を選んだ場合、画像が右に配置され以降のテキストが回り込みます。「中央」は左右均等の余白が生まれ中央に配置されます。リンク先は「メディアファイル」を選択した場合画像をクリックするとフルサイズの画像が表示されます。画像のサイズは、「設定」「メディア」で変更することができます。

WP添付ファイルの表示設定

カテゴリーを設定してみよう

カテゴリーはページとして作られ、SEO的にも意味のあるページなのでむやみにたくさん作らずよく意味を考えて設定します。WordPressメディアサイトにおいてはかなり重要な設計項目です。自分のメディアのターゲットをよく考えて効果的なカテゴリーを作りましょう。カテゴリーを現時点で明確に決められない場合は先ほど紹介したSEO対策プラグインを利用して、カテゴリーを検索エンジンに登録しないnoindexの設定をしておきます。サイトの方向性が決まってから設定しても構いません。

カテゴリーは投稿画面の右側にあります。ここから新しいカテゴリーを設定します。記事の内容に即した意味のあるカテゴリーを設定します。デフォルトでは未分類に設定されています。「投稿」「カテゴリー」から詳細の設定ができます。

カテゴリー追加

タグを設定してみよう

タグはカテゴリーほど重要ではない分類をする機能です。複数のカテゴリーにまたがるキーワードなどにも設定できますので、ユーザー検索の利便性が上がります。

同じようなページが量産されてしまうため、SEOプラグインを利用してnodindexの設定をしておきます。

WPタグ設定

アイキャッチ画像を設定してみよう

アイキャッチ画像とは、サイト内の様々な場所でその記事を表現するために出力される画像のことです。例えば、投稿ページ一番上に出力される画像やトップページやカテゴリーページなど記事一覧に表示される画像。

アイキャッチ画像を設定することで、ユーザーの視線をまさにキャッチすることができます。文字だけだと解りにくいサイトになってしまうでしょう?

アイキャッチ画像追加

まとめ

WordPressの使い方がだんだんわかってきたんじゃないでしょうか。覚えることはエディター内で使うSEOを意識したHTMLの基本だけです。

難しいコードを打たなくてもデザインはテーマが自動的に作ってくれますので、初心者の方でもメディアサイトは気軽に作れます。

次は、WordPressでサイト運営する時に欠かせないプラグインの設定方法について紹介します。
WordPress基本9個のプラグイン設定