ワードプレス 初めての記事投稿（クラシックエディター使用）
ワードプレスで初めてブログ記事を投稿する方法について、解説していきます。
2020年11月現在（WordPressバージョン 5.5）、標準のエディターはブロックエディターですが、初心者の方にとってはとっつきにくいのでクラシックエディターを使っていきます。
この記事を読めば、次のようにワードプレスで記事を作成する上で基本的な事項を学ぶことができます。
- クラシックエディターでの記事の作成方法（文章入力と画像の挿入）
- クラシックエディターの機能強化プラグインAdvanced editor Tools（旧TinyMCE Advanced）のインストール・有効化と使用方法
- SEOに強い記事構成の作り方（見出しと段落で階層化する）
- ビジュアルエディターとテキストエディターの違い
- 記事に合わせてパーマリンクを編集する方法
- カテゴリーの設定方法
- アイキャッチ画像の設定方法
- テーマによってアイキャッチ画像や記事一覧表示が異なることの理解
- 記事の公開方法と公開オプション
- 編集画面での表示オプションとコメント欄の表示・非表示
このように単にクラシックエディターの使い方だけでなく、ワードプレスの記事作成上大切な項目も学ぶことができます。じっくり読んでくださいね。
ブロックエディターについて知りたい、という場合は、こちらを参考にしてください。
https://web-children.com/2020/11/18/gutenberg-guidelines/前提条件（準備）
実際の記事投稿の解説に入る前に、前提条件を設定しておきます。
・テーマはTwenty Seventeenを使用します。
Twenty Seventeenはシンプルなので、ここで使える機能は他のテーマでも使えるかと思います。テーマについての参考記事はこちらがおすすめです。
・プラグインClassic Editorがインストール・有効化され、使用できるようになっていること
次の記事のクラシックエディターの紹介のところで解説しています。
本記事でも簡単にプラグインのインストール・有効化と、設定について記載しておきます。
まずは投稿の編集画面を見てみる
クラシックエディターの構成
ダッシュボードメニューから、投稿＞新規追加 をクリックして、投稿編集画面を開けます。
上記のように、編集画面は大きく３つに分かれます。
記事タイトル入力部
記事のタイトルの入力とパーマリンク（作成中記事のURL）の編集を行います。
記事本文入力部とその上の編集ツールバー
記事本文を入力します。
画面右の関連情報パネル
記事の下書き保存とプレビュー、記事の公開などの記事の管理のほか、カテゴリー、アイキャッチ画像なども設定できます。
このなかにフォーマットという欄もありますが、設定は標準のままでよいでしょう。
ビジュアルエディターとテキストエディター
記事本文入力部について、もう少し詳細を見てみましょう。
右上側に、『ビジュアル』『テキスト』と表示されたタブがあります。
通常は、”ビジュアル”タブが選択されており、この状態で使います（ビジュアルエディターと呼んでいます）。
『テキスト』を選択すると、テキストエディターに変わります。
テキストエディターではHTML言語を使って記事を入力していくことができますが、専門言語を勉強する必要があるので、少なくとも初心者が使うことはありません。ただし後述するように、簡単な確認や操作で使うこともあるので、こういうものがある、ということは覚えておきましょう。
記事本文編集ツールバー
上記画像のように、記事本文入力部の真上には編集ツールバーがあります。ツールバーの一番右をクリックすると、全てのツールが表示されるようになります。
しかし、このままでは若干編集作業には物足りないので、プラグインAdvanced Editor Tools（旧TinyMCE Advanced）を使ってツール機能を強化します。
プラグインAdvanced Editor Tools（旧TinyMCE Advanced）のインストール・有効化
Advanced Editor Toolsを使わなくても記事を作成することはできますが、クラシックエディターで記事を作成する上では、使用するのが前提の定番プラグインなので使っていきましょう。
プラグインAdvanced Editor Toolsをインストール・有効化する手順
①ダッシュボードメニュー プラグイン＞新規追加 の画面で、画面右上の検索ボックスに”Advanced Editor”と入力します。
すると、プラグインAdvanced Editor Toolsがプラグイン一覧に表示されます。
②次のように”今すぐインストール”と”有効化”を順番にクリックしていけば、インストール済プラグインの中に追加されます。
以上で、インストール・有効化は終了です。
プラグインAdvanced Editor Tools有効化後の編集ツールバー
プラグインAdvanced Editor Toolsを有効化した後では、編集ツールバーが強化されているのがわかります。
追加される機能
導入前後で機能を比較すると以下の通りとなります（青太字は追加された機能）
| デフォルトの機能 | TinyMCE Advanced導入後の機能 |
| （上段左から） ・段落等要素切り替え ・太字 ・イタリック ・番号なしリスト ・番号付きリスト ・引用 ・左寄せ ・中央揃え ・右寄せ ・リンクの挿入/編集 ・『続きを読む』タグを挿入（下段左から） ・打ち消し ・横ライン ・テキスト色 ・テキストとしてペースト ・書式設定をクリア ・特殊文字 ・インデントを減らす ・インデントを増やす ・取り消し ・やり直し ・キーボードショートカット | （上段左から） ・ファイル＞印刷 ・編集＞取り消し/やり直し/切り取り/コピー/貼り付け/テキストとしてペースト/すべて選択/検索置換 ・表示＞ソースコード/ビジュアルエイド/非表示文字を表示/ブロックを表示/フルスクリーン ・挿入＞リンクの挿入・編集/メディア/テーブル/特殊文字/横ライン/改行なしスペース/アンカー/日付・時間/メディアを追加/『続きを読む』タグを挿入/改ページ ・フォーマット＞太字/イタリック/下線/打ち消し/上付き/下付き/ソースコード/ブロック/Align/書式設定をクリア/Reset table size/Remove table styling ・ツール＞ソースコード ・テーブル＞テーブル/表のプロパティ/表を削除/行/列/セル（中段 左から） ・段落等要素切り替え ・太字 ・イタリック ・引用 ・番号なしリスト ・番号付きリスト ・左寄せ ・中央揃え ・右寄せ ・リンクの挿入/編集 ・リンクの削除 ・取り消し ・やり直し（下段 左から） ・フォントファミリー ・フォントサイズ ・インデントを減らす ・インデントを増やす ・テキストとしてペースト ・書式設定をクリア ・特殊文字 ・『続きを読む』タグを挿入 ・テキスト色 ・テーブル ・キーボードショートカット |
さらに機能を追加したい場合
Advanced Editor Toolsは、上記のほかにも機能を追加することができます。
ダッシュボードメニュー 設定のAdvanced Editor Toolsという項目をクリックします。
機能追加画面が開きますので、下記のように”使用しないボタン”一覧から追加したい機能をドラッグ＆ドロップでツールバーに追加します。
特に増やしておきたいのは、画像の挿入/編集機能と動画の挿入/編集機能です。
画像の挿入/編集機能では、画像周りに余白や枠線をつけることができます。
動画の挿入/編集機能は、YouTubeのURLを指定することで動画の埋め込みが可能です。画面サイズも調整できます。
パーマリンクの設定
投稿記事の内容を書いていく前に、パーマリンク設定をしておきましょう。
パーマリンクの設定については、こちらの記事の設定＞パーマリンク設定 でも紹介していますの参照ください。
パーマリンクは、作成した投稿記事ページのURLを表す大事なものですが、ワードプレスでは、何通りかのパーマリンク設定があります。ここでは、一番シンプルな、（ドメイン）/投稿タイトル という形式に設定してみます。
ドメインとは、ワードプレスをインストールしてあるURLです。独自ドメインを設定しなければ、レンタルサーバーの初期ドメイン（レンタルサーバーのIDと同じ場合が多い）を使うことになります。
では、パーマリンクの形式設定をしていきましょう。
ダッシュボードメニューの 設定＞パーマリンク設定 で設定します。
上記のように投稿名というところを選択して変更を保存しておけば、記事のURLは自動的に
（ドメイン）/投稿タイトル
と設定されることになります。
ちなみに私はこのサイトでは、日付と投稿名を選択して使っています。日付があると自分自身がいつ作成したものかがすぐにわかるので、記事が増えていったときに整理するのに便利です。
しかしデメリットとしてURLが長くなるのと、日付があることで古い記事だとみなされてしまうことです。したがって最近は、ほとんどの書籍等が投稿名を推奨したり、もっとシンプルに数字ベースを推奨したりしています。
投稿記事の作成
それではいよいよ、記事の作成をしていきます。
タイトルの入力とパーマリンクの入力
クラシックエディターのタイトル欄にタイトルを入力します。
タイトル『記事１』と入力して[Enter]キー（リターン）を押すと、下記画像のようにタイトルの下にパーマリンクが表示されます。
設定した通り、（ドメイン）/投稿タイトル という形式になっているのですが、投稿タイトルの部分が、日本語表記になっていますね。URLは日本語のままだと何かと不便なことが多いので、半角英数字表記（-を含む）に直しておきましょう。
ここでは『記事１』を表す『post1』としておきます。
上記の手順のように、編集をクリックすればボックスが開くので、半角英数字に直してOKをクリックします。
このように、パーマリンクは、記事タイトルを反映する半角英数字に修正する、というように心がけましょう。GoogleもURLは簡潔かつ意味のわかるもの、と推奨しています。
英語が苦手という方は、Google翻訳を使って日本語を英語に直せばよいでしょう。
パーマリンクはネット上でそのページを特定する大切なＵＲＬですので、記事を投稿する最初の段階で設定する習慣をつけておきましょう。公開した後で時間がたってからパーマリンクを変更すると、リンク切れが発生したりそのページのネット上の評価がリセットされてしまうからです。
記事本文の入力（記事構成の階層化を覚えよう）
段落と改行
まず、下記画像のように適当にテキストを入力してみます。
入力すると、自動的に段落として扱われます。このとき、
- 入力して[Enter]キーを押すと次の段落へ移る
（このとき段落と段落の間には、自動的にスペースが挿入されます） - 同じ段落内で改行だけしたい場合は、Shift+[Enter]キー とする
という操作を覚えておきましょう。
見出しの設定
入力した段落を見出しに変更してみます。
『見出しの一番目』と入力してから、これを見出しに変更する手順は以下の通りです。
（カーソルは、見出しに変えたい行に置いておきます）
①左上の段落 と表示されているところをクリック
②ドロップダウン表示されるメニューから『見出し２』をクリック
テキスト『見出しの一番目』が大きく表示されて、見出しに変更されたことがわかります。
ここで、見出し２ という項目を選びましたが、この見出し２、とか見出し３などの数字はどのような意味があるでしょうか？
テキストエディターで見る見出し
ここで、一度テキストエディターで表示させてみましょう。
下記のように、記事本文入力部の右上の『テキスト』タブをクリックすればテキストエディターに切り替えできます（『ビジュアル』タブをクリックすれば、元のビジュアルエディターに戻ります）。
テキストエディターで見ると、見出しの部分が<h2>と</h2>とで囲まれているのがわかります。
h1、h2、h3・・・などのタグは、見出し要素を表すHTMLタグで、この数字が小さいほど、大きな見出しを表します。
したがってh1が一番大きな見出しを表すのですが、h1は１つのページにつき原則として１つだけ、という決まりがあり、ワードプレスでは自動的に記事のタイトルがh1に指定されます。
したがって、記事本文の中で一番大きな見出しはh2だということです。
この見出しを、記事の中で、階層的につけていくことで、Googleの検索ロボットが記事の内容を理解しやすくなるのです。理解しやすければ、Googleのデータベースにも正常に登録されます。
したがって、SEO（検索エンジン最適化：すなわちGoogleの検索で上位表示されやすくなる）上の観点から、記事タイトルと記事内見出し、そして記事内容（段落）がきちんと階層的に並んでいる構成にすることは、必須事項だと言えるのです。
記事内容の階層化
以下のように記事内容を構成していきます。
このように、記事内は、見出しh2、h3、h4・・・と、段落をうまく使いながら階層化するようにしましょう。理由は先ほどと同じく、Googleの巡回ロボットが理解しやすくなるためです。
記事を途中でプレビュー
投稿記事内容をプレビューしてみましょう（プレビューは、編集画面の右上のプレビューボタンを押せばよいのですね）
記事のサイト表示も、うまく見出しと段落が反映されていることが確認できます。
記事内への画像の挿入
記事トップに画像を挿入してみましょう。
以下の手順のように、挿入したい部分（記事先頭）にカーソルを置いて、『メディアの追加』のクリックすると、メディアライブラリが開きます。
メディアライブラリに、挿入したい画像をパソコンのフォルダからドラッグ＆ドロップすれば、メディアライブラリ内に画像が保存されます（アップロードすると言います）。
アップロードした画像の情報を、下記のようにメディアライブラリ右側で編集します。
編集できる項目は
・代替テキスト（画像が何らかの理由で表示されない場合、代わりに表示されます。SEO上、画像の説明にもなるので重要です）
・キャプション（画像の説明を表示したければ入力します。必須ではありません）
・画像のURL情報をコピーできる（通常は使いません。ウィジェットなどで指定の画像を表示したい場合に使います）
・画像の表示設定（画像の配置位置、リンク先（あれば）、画像サイズ※）
※ワードプレスでは、画像をアップロードすると、元の画像のサイズのほか、大・中・小のサイズが自動的に生成されますので、どれかを選択します。
画像情報の編集が終われば、『投稿に挿入』をクリックすれば、記事内に挿入されます。
上記のように、エディター内に画像が挿入されたのが確認できます。
画像をクリックすると画像設定の編集ツールが表示されるので、ここでも配置や画像の削除などの編集ができます。
画像設定が終われば、再びプレビューで投稿記事を表示させてみましょう。以下のように画像が挿入できています。
投稿記事のカテゴリーを設定する
投稿した記事のカテゴリーはデフォルトでは『未分類』となっていますので、公開する前にカテゴリーも設定しておきましょう。
手順は、以下の通りです。カテゴリー設定ボックスは、編集画面の右側の中にあります。
アイキャッチ画像の設定
アイキャッチ画像は、ブログトップページなどの記事一覧の中で表示させたり、投稿記事ページの1stビュー画像として表示されたり、使用しているテーマによっては、扱い方がいろいろですが、どのようになるか一旦設定してみましょう。
設定方法は以下の通りです。アイキャッチ画像の設定ボックスも、編集画面の右欄の中にあります。ここでは、記事トップに挿入したものと同じ画像を設定してみました。
以上で、投稿記事の制作は一旦終了です。編集画面右上の『公開』をクリックして、サイト表示をさせてみましょう。
投稿記事のサイト表示
以下は、トップページです。投稿した記事の
・記事タイトル
・アイキャッチ画像
・記事本文
が表示されていますが、アイキャッチ画像と記事本文が同じものが表示されているうえ、記事本文も全文表示されてしまっています。
これを、トップページには記事タイトルとアイキャッチ画像のみが表示される（記事本文は抜粋のみ表示される）よう、修正してみます。
記事抜粋表示の設定方法
moreタグというものを使用します。
記事内にmoreタグ（<!– more –>）を挿入すると、挿入した箇所以降は一覧表に表示されなくなります。
今回は記事トップに挿入して、記事内トップ画像を含めて記事全文が表示されないようにしてみます。
以下が挿入方法です。
挿入したい場所にカーソルを置いて『続きを読むタグを挿入』をクリックすればよいだけです。
では、トップページを確認してみましょう。
目論見通り、記事タイトルとアイキャッチ画像が表示されるだけで、moreタグ以降（記事本文）は『続きを読む』で記事ページへのリンクが表示されています。
では、記事ページも見てみましょう。
設定どおりにはなっているのですが、ヘッダー画像とアイキャッチ画像とが連なって表示されており、あまりデザイン的に見映えがよくありません。
そこで、このテーマ（Twenty Seventeen）の場合は
・アイキャッチ画像は設定しない
・各記事トップ画像の下に（または、トップ画像直下の導入文の下に）Moreタグを設置する
という設定とした方が、上記画像右下のように、すっきりしたデザインにできることがわかります。
このように、テーマによって、アイキャッチ画像の設定や、記事抜粋の方法を適正に使っていくようにしましょう。
※テーマによって、アイキャッチ画像の取り扱い方や記事一覧へのテキストの表示方法は異なります。
Twenty Seventeenの場合は、今回紹介したようにアイキャッチ画像が記事一覧ページだけでなく、各記事ページの一番上にも表示される仕様ですが、例えば、私のこのサイトで使用中のテーマLuxeritasの場合、各記事ページには表示されません。
また、記事一覧ページへの表示ですが、Twenty Seventeenではmoreタグを挿入したところまでが表示されますが、Luxeritasでは、moreタグを使用する方法と自動的に記事の頭の所定文字数を抜粋して表示する方法のどちらかを選択できるようになっています（初期値は自動抜粋）。
このほか、ほとんどのブログ用有料テーマでも記事抜粋が表示される設定になっていることが多いでしょう。
記事コンテンツの作成以外に、編集画面の中にあるいくつかの便利機能を紹介します。
公開関連の各設定について
公開設定には次のようにいくつかの便利機能があります。
・公開済の投稿記事を下書き状態に戻したりできる
・投稿記事の任意のパスワードを設定できる
・投稿記事の過去の編集状態を復元できる
・投稿記事の予約公開ができる
これらの手順は以下の通りです。
編集画面での表示オプション
編集画面には、デフォルトで表示されている編集ボックス以外に、いくつかのオプションがあります。
編集画面の上のほうにある、『表示オプション』をクリックすれば、表示されていないボックスを確認できます。
以下に例として、ディスカッションボックスの表示させてみます。
ディスカッションは、ブログ記事の下にコメントを書き込める機能ですが、スパム攻撃の元になったりすることもあり、企業サイトに中には、このコメント欄を表示させていない場合が多いようです。サイトの目的に応じて使っていくようにしましょう。
まとめ
以上、クラシックエディターを使った、記事の投稿方法について解説してきました。
- プラグインTinyMCE Advancedを使うことで、表の作成など、記事本文の編集ツールを増やすことができる。
- パーマリンクは、投稿記事のURLなので、記事公開初期段階で半角英数字にて設定しておくようにする。
- 見出しタグh1、h2、h3・・・を使うことで、記事のタイトルおよび記事本文内見出しと段落を、階層的な構成にすることは、SEO上必須事項である
- 記事への画像の挿入は、挿入部にメディアライブラリにて画像情報を編集してから挿入する
- カテゴリーはデフォルトでは未分類となっているので、記事内容に応じて設定する
- アイキャッチ画像を設定することで、トップページの記事一覧や記事ページに画像を表示させることができる。表示方法は、テーマに依存する。
- moreタグを記事内に挿入すれば、挿入部以降は、記事一覧表に表示されない。
- 公開の方法として、パスワードを設定したり、予約公開をする方法がある
- 編集画面の表示オプションで、デフォルトでは表示されていない機能ボックスを表示させることができる。
- ディスカッションは記事コメントを書き込める機能だが、スパム攻撃の標的にもなるので、設置していないサイトもある。
記事編集用の各ツールの使い方詳細については、本記事では解説していませんが、ワープロ感覚で入力できるクラシックエディターであれば、使っていくうちに自然に使いこなせるものと思います。
どんどん記事を書いて、慣れていくようにしましょう。
