みなさまこんにちは。ウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、執筆記事の実際の表示を確認して、公開しましょう。
記事の確認や「公開」以外の表示方法、公開する前にチェックすべきことを解説します。
特に覚えておくと良いのは、「プレビュー」の方法と「表示状態」、「パーマリンク設定」です。
「表示状態」は他の方に確認してもらうときのため、「パーマリンク」はSEOに関わるため重要な部分です。
記事の確認(プレビュー)
まずは確認方法から紹介しましょう。
![プレビューボタンの場所](https://kotatsu.info/blog/wp-content/uploads/2021/08/preview-btn.jpg)
![新しいタブでプレビューボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/preview-menu-newtab.png)
![プレビュー画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/preview.jpg)
![プレビュー方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/KKw5hobMcB-min.gif)
これで、投稿後の表示が確認できます。
デバイス別の確認方法
![プレビューのデバイスサイズセレクトメニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/preview-menu-device.png)
「新しいタブでプレビュー」の上にある「デスクトップ」「タブレット」「モバイル」は、それぞれのデバイスサイズでどう表示されるか、エディター上で簡易的に確認ができます。
デスクトップはパソコン、タブレットはタブレットPC、モバイルはスマートフォンサイズのことです。
![プレビューメニューからデバイスサイズを選択した画面(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/OyMjxzlqUM-min-1023x590.gif)
パソコン上でスマートフォンのプレビューを見る場合は、ブラウザのウィンドウを狭めれば確認できます。
![プレビューでデスクトップ幅からスマートフォン幅にウィンドウを狭める様子(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/oNjCKWMiI8-min-1024x726.gif)
ただし、実際のスマートフォンとは表示が多少異なります。
![パソコン上にてウィンドウ幅をスマホサイズで表示した画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/preview-pc-sp-size.jpg)
![スマートフォンでの表示画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/preview-sp-view.jpg)
若干フォントの違いやズレがある
公開する前に
問題なければ、公開作業に移りましょう。
右上の「プレビュー」の右隣にある「公開」をクリックすれば、すぐに公開できます。
![「公開」ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/public-btn.jpg)
ですがその前に、カテゴリーや記事URLなどの設定はどうなっているか、必ず確認しましょう。これは非常に重要です。
公開の設定メニュー
公開の設定メニューは、画面右側にあります。
![](https://kotatsu.info/blog/wp-content/uploads/2021/08/right-menu-bar-post-tab.jpg)
もし右側に何もない場合は、右上の歯車マークをクリックしてください。
![右上の歯車アイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/gear-icon.png)
歯車マークで、右側メニューバーの表示・非表示の切り替えができます。
![右メニューバーの表示・非表示(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/image22.gif)
ブロックの選択を解除するか、右側のメニューバータブを「ブロック」から「投稿」に切り替えれば、公開などの設定メニューになります。
![右メニューバーのタブ切り替え(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/BYiOTFo82Z-min.gif)
この「投稿」設定メニューを詳しく解説いたします。
表示状態
![公開状態メニューの開き方(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/8DroUXldOb-min.gif)
記事を、どの権限を持つ人まで表示するのか設定します。
「表示状態」の「公開」をクリックしましょう。
「公開状態」のメニューが開きました。
![公開状態の設定メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/public-setting-menu.png)
すべての人に表示します
サイトを管理・編集する人のみ表示します
パスワードを知っている人のみ記事内容を表示します
その下にある「公開」の項目では、投稿の日付を変更できます。
日付が書かれた部分(未設定なら「今すぐ」のところ)をクリックし、設定メニューを開いて日時を記入します。
![公開日時の設定方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/LEnHM8sCPD-min.gif)
![公開日時の選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/public-calendar-select-587x1024.png)
過去にアップしたことにしたいなら、アップする日付の前に設定できます。
未来の日付にすれば、その日に自動的に公開してくれます。これを「予約投稿」といいます。
「リセット」で現在日時に設定します。
では次に、「非公開」「パスワード保護」の表示状態について、詳しく説明しましょう。
非公開
![「公開状態」で「非公開」にチェックが入っている画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/public-select-private.png)
管理者や編集者としてログインしているユーザー以外は閲覧できません。
非公開にしたページを、WordPressにログインしていないブラウザで確認すると、「お探しのページが見つかりません。」と表示されます。
![非公開ページのログインユーザーと一般ユーザーの表示比較](https://kotatsu.info/blog/wp-content/uploads/2021/08/private-login-vs-nologin.jpg)
対象のユーザー以外には、記事の一覧ページにも表示されません。
![投稿一覧ページでのログインユーザーと一般ユーザーの非公開ページ表示比較](https://kotatsu.info/blog/wp-content/uploads/2021/08/private-archive-login-vs-nologin.jpg)
社内などの投稿の確認に活用できます。
パスワード保護
![「公開状態」で「パスワード保護」にチェックが入っている画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/public-select-password-on.png)
ページには誰でもアクセスできます。
しかし、設定したパスワードを入力しないと、記事の内容は見られません。
![パスワード保護ページのログインユーザーと一般ユーザーの表示比較](https://kotatsu.info/blog/wp-content/uploads/2021/08/password-on-login-vs-nologin.jpg)
ログイン情報を渡せない人に、ページを確認してもらうときに便利です。
しかし非公開とは違い、記事の一覧ページには、パスワード保護をしている記事のタイトルやパスワード入力エリアが、すべての人に表示されてしまいます。
![投稿一覧ページでのログインユーザーと一般ユーザーのパスワード保護ページ表示比較](https://kotatsu.info/blog/wp-content/uploads/2021/08/password-on-archive-login-vs-nologin.jpg)
RSSフィードにも表示されるため、購読している人にタイトルがバレてしまいます。
![RSSフィードに表示されるパスワード保護記事](https://kotatsu.info/blog/wp-content/uploads/2021/08/password-on-rss-feed.png)
パスワード保護をする場合はご注意ください。
パーマリンク設定
管理画面に戻りましょう。
![パーマリンクのURLスラッグ](https://kotatsu.info/blog/wp-content/uploads/2021/08/permalink.png)
「パーマリンク」とは、記事のURLのことです。「URL スラッグ」とは、記事URLの最後につける文字です。
WordPressの設定によっては変更できない場合もありますが、自由に設定できる場合は入力しておきましょう。
日本語でも構いませんが、SNSでの共有がうまくいかない場合もあるため、半角英数字での入力を推奨します。
半角スペースは使えないので、ご注意ください。
おすすめの醤油を紹介した記事なら「recommended-soy-sauce(おすすめ-醤油)」、サバのさばき方をレクチャーする記事なら「how-to-fillet-mackerel(ハウツー-切り身-サバ)」など、なんちゃって英語でもローマ字でも構いません。
SEOのために、記事の内容に関連したスラッグにしましょう。
カテゴリー・タグ
![カテゴリーとタグの設定メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/category-tag-setting.png)
「カテゴリー」や「タグ」も設定しましょう。
カテゴリーは、設定したいものにチェックを入れればOKです。既に入れておいたカテゴリーが選択できます。
この中に設定したいものがなければ、新しく作成もできます。
カテゴリーやタグの管理方法については、下記ページをご覧ください。
カテゴリーはなるべく複数選択しない
「カテゴリー」は複数選択できますが、推奨しません。
ユーザーにもSEOにもやさしくないためです。
カテゴリーは大分類、いわゆる「フォルダ」にあたる役割です。
例えるなら、同じファイルを複数のフォルダに複製して入れているようなものです。
△ 複数のカテゴリーを設定した場合
![複数カテゴリーありの場合](https://kotatsu.info/blog/wp-content/uploads/2021/08/plural-category-article.png)
○ 1つのカテゴリーに設定した場合
![複数カテゴリーなしの場合](https://kotatsu.info/blog/wp-content/uploads/2021/08/plural-no-category-article.png)
例えば、このようなカテゴリー構成があったとしましょう。
![カテゴリー構造例](https://kotatsu.info/blog/wp-content/uploads/2021/08/category-case.png)
![「Cカテ」をカテゴリーに設定する場合](https://kotatsu.info/blog/wp-content/uploads/2021/08/category-check-explanation.png)
「Aカテ」の中にある「Cカテ」に設定するとします。それなら、「Aカテ」も選択して良いです。
ですが、「Bカテ」と「Cカテ」の両方や、「メイン」を同時に選択するのは避けましょう。
複数の属性を設定するならタグを使おう
特別な理由がないかぎり、複数の分類を入れたいなら「タグ」を利用しましょう。
SNSでいうハッシュタグのようなものです。
![タグの設定方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/PYmiOXAzVY-min.gif)
何文字か入力すると、既に設定してあるタグが候補で表示されるので、選択します。
もし何文字入れても候補が出ない場合は、まだ設定していない可能性が高いです。そのまま追加してしまいましょう。
エンターもしくは「,(半角コンマ)」を入力すれば追加できます。
アイキャッチ画像
![アイキャッチ画像設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/eyecatch-img-setting.png)
「アイキャッチ画像」を設定します。
テーマによっては、記事の一覧や記事ページの一番上に表示されます。
![「アイキャッチ画像を設定」をクリックする](https://kotatsu.info/blog/wp-content/uploads/2021/08/eyecatch-img-setting-click.png)
![アイキャッチ画像を選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/eyecatch-select.jpg)
![アイキャッチ画像設定完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/eyecatch-setting-after.jpg)
![アイキャッチ画像の設定方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/xazL0GdJoy-min.gif)
![アイキャッチ画像の変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/eyecatch-change.jpg)
別のものに変えたいなら、選択した画像もしくは「画像を置換」か、「アイキャッチ画像を削除」をクリックすれば、選び直せます。
抜粋(任意)
![抜粋の入力エリア](https://kotatsu.info/blog/wp-content/uploads/2021/08/extract.png)
「抜粋」では、記事の要約やさわり(要点)を記述できます。
テーマやWordPressの設定によっては、検索の説明文や記事一覧に表示されます。
「任意」とあるとおり、入れても入れなくても構いません。
ディスカッション
![ディスカッションの設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/discussion.png)
記事へのコメント許可を設定したり、「ピンバック」「トラックバック」という、簡単に言えば相互リンクの機能を使用するか選択できます。
SEOには悪くないですが、悪用されやすくスパムが送られてしまう機能でもあります。
デフォルトでは両方ともチェックが入っていますが、理由がない限りは外すのをオススメします。
公開する
以上の確認ができたら、公開しましょう。
![公開ボタンをクリックする](https://kotatsu.info/blog/wp-content/uploads/2021/08/public-click.png)
![公開してよいですか?を確認して公開](https://kotatsu.info/blog/wp-content/uploads/2021/08/public-click-last.png)
![公開完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/public-finish.png)
![公開方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/zs5qyjc5F0-min.gif)
![公開完了後の操作](https://kotatsu.info/blog/wp-content/uploads/2021/08/public-after.png)
「投稿を表示」でアップした記事を開きます。「リンクをコピー」でURLをコピーし、SNSでシェアするのも良いでしょう。
予約投稿
「ステータスと公開状態」のところで触れた、投稿の予約も試してみましょう。
![予約投稿の設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/reservation-public-setting-620x1024.png)
![予約投稿の設定確認](https://kotatsu.info/blog/wp-content/uploads/2021/08/reservation-public-setting-last.png)
![予約投稿完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/reservation-public-finish.png)
![予約投稿の方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/yCUBsapTOF-min.gif)
ログインしていないブラウザで確認すると、ページが表示されません。
![予約投稿ページのログインユーザーと一般ユーザーの表示比較](https://kotatsu.info/blog/wp-content/uploads/2021/08/reservation-login-vs-nologin-901x1024.jpg)
予約投稿した記事を公開日の前に確認したいときは、WordPressにログインしましょう。
以上、今回は表示の確認と公開方法を解説しました。
保存済み投稿記事の管理方法については、下記ページをご覧ください。
WordPressの他の機能につきましては、WordPressレクチャーシリーズをご参照ください。