WordPress｜5章：メインナビゲーションの使い方

INDEX

前の章に戻る次の章に進む

5章：メインナビゲーションの使い方

【5-1】固定ページと投稿ページ

WordPressは「投稿」と「固定ページ」と言われる2種類のページの作成方法があります！
まずはこちらの違いについて説明していきます！

それぞれの詳しい説明は後ほど実践でおこなっていきます！

投稿ページ

特徴
- ブログや記事、お知らせのようなコンテンツは投稿で作成。
できること
- 時系列で順序関係があり、「前へ」「次へ」で移動
- 投稿一覧、カテゴリー一覧、タグ一覧から各ページを一覧表示
- カテゴリーやタグにより投稿記事のグループ化
できないこと
- 投稿同士で親子関係の作成
- ページごとにデザインテンプレートを選択することはできない

固定ページ

特徴
- トップページや採用情報、会社概要などページ単体で完結できるようなコンテンツは固定ページで作成。
できること
- 任意の固定ページをトップページのメニューへリンク
- 固定ページ同士で親子関係を作成
- ページごとにデザインテンプレートを作成・選択
できないこと
- カテゴリー・タグによる投稿の関連付け
- 固定ページ一覧、カテゴリー一覧、タグ一覧などで各ページを一覧表示

ポイント

まずはざっくり、「固定ページはホームページの各ページを作成するもの」「投稿ページはブログ記事を作成するもの」と覚えておきましょう！

【5-2】メディアライブラリ

WordPressでは、ホームページ内で使用している画像や動画を全て閲覧・編集できるメディアライブラリと呼ばれるメニューがあります。

メディアライブラリに画像をアップロード

メディアライブラリに直接画像をアップロードする場合は【メディア】→【新しいメディアファイルを追加】→PC内に保存した画像をドラッグ＆ドロップでアップロードができます！

このあと説明していきますが、固定ページや投稿ページから追加した画像もここに自動的に保存されます！

以下のデモ動画でも操作方法を確認しておきましょう！（デモ動画には音声はついておりません）

WordPress 5-1

この動画はデモンストレーション動画になります。音声は入っておりません。

6章では、「Cocoon」というテーマを使って説明を行います。
練習に「Cocoon」を有効化しておきましょう！

メディアの詳細設定

①代替テキスト
代替テキストはWebサイトに含まれる画像の代わりになるテキストのことで、画像が何らかの原因で表示されないときや音声読み上げ機能の際に使用するテキストのことです。
alt属性と呼ばれ検索エンジンに画像の詳細を伝える役割や画像検索に表示されるなどSEOに優位に働くテキストです。

②タイトル
タイトルはテーマや設定により画像に表示される説明文です。
必要に応じて記載しましょう。

③キャプション
キャプションは代替テキストとは違いテーマや設定により画像の下部に表示される説明文です。
必要に応じて記載しましょう。

④説明
管理者が使用するメモです。
Webページに表示されることはないのですが、メディアライブラリ内の検索を行う時に便利な機能です。

⑤ファイルのURL
画像に対するURLです。

メディアを削除する

メディアの削除方法は2パターンあります。

①1枚のみ削除　画像を選択→【完全に削除する】
②複数削除　【一括選択】→画像を選択→【完全に削除する】

WordPress 5-2

この動画はデモンストレーション動画になります。音声は入っておりません。

メディアを検索する

メディアライブラリにはアップロードを行ったファイルの検索を行える機能があります。

【すべてのメディア】データファイルの形式での絞り込み
【すべての日付】アップロードした日付での絞り込み
【メディアを検索】「メディアの詳細設定＞④説明」で入力したキーワードでの絞り込み

メディアライブラリの基本的な使い方について解説しました。
操作する機会が多いメニューなのでしっかり覚えてくださいね！

【5-3】コメントとは

WordPressはもともとブログサイトとして作成されたため投稿ページにコメントが記載できる機能が備わっています。

Webサイトの種類によってはあまり使用されない機能であるため、簡単に説明していきます！

削除・編集

コメントにカーソルを合わせると下の写真のメニューが出てきます。
こちらを選択することで削除や編集が可能です。

コメント設定をオフにする

サイトを作成する際コメント機能をオフにする設定です。
コーポレートサイトなどを作成する場合必ずこちらを設定していきましょう。

【設定】→【ディスカッション】→新しい投稿へのコメントを許可のチェックを外してください。

こちらを設定することでコメント機能が表示されなくなります。

WordPress 5-3

この動画はデモンストレーション動画になります。音声は入っておりません。

【5-4】外観とは

外観とはWordPress のデザイン・表示のされ方を設定する場所です。
テーマ（テンプレート）の設定や編集などを行う事が可能です。

ポイント

編集できるものはテーマによって異なります！

テーマ

【外観】→【テーマ】を選択していただくとダウンロードしてあるテーマの一覧が表示されます。
【有効】となっているテーマが現在使われているテーマです。

ダッシュボードのヘッダーにある家マークのボタン（画面左上）を押して現在使用しているテーマの見た目を確認してみましょう！

テーマの変更

ダウンロードしたテーマを変更する場合は変更したいテーマにカーソルを合わせ【有効化】ボタンを押すことで変更が可能です。

WordPress 5-4

この動画はデモンストレーション動画になります。音声は入っておりません。

ポイント

ページ制作後にテーマを変更するとレイアウトの崩れやバグが発生する事があるため、必ず作成前にテーマを選定しましょう！

新しいテーマの追加

【新しいテーマの追加】→テーマの検索＆選定→【インストール】を行うとテーマの追加が可能です。
追加されたテーマは先ほど紹介したテーマの変更の方法で設定ができます。

WordPress 5-5

この動画はデモンストレーション動画になります。音声は入っておりません。

ポイント

テーマは沢山ありますが、日本語対応のテーマを選ぶようにしましょう！

テーマの削除

不要なテーマを削除する場合は、削除するテーマをクリック→【削除】を行う事で削除する事が可能です。

WordPress 5-6

この動画はデモンストレーション動画になります。音声は入っておりません。

テーマのカスタマイズ

カスタマイズ画面

カスタマイズはテーマの設定を行うメニューです。
まずはカスタマイズの画面について説明していきます。

①テーマの修正箇所を確認する場所です。
②アイコンを変更することでレスポンシブデザインの確認ができます。
③編集を行う箇所のメニューです。
④現在有効になっているテーマ名が表示され、テーマ自体を変更できるメニューです。
⑤修正を反映させるボタンです。

サイトの基本情報

【4-3】で説明させていただいている内容が表示されています！
どちらからでも設定修正可能なので使用しやすい方を使用してください。

ではここからは実際に動画を見ながら手を動かしてサイトの情報を編集していきましょう！

【サイトの基本情報】を選択してください。

【サイトのタイトル】：Wordpress練習用サイト＋お名前
【キャッチフレーズ】：Wordpress練習用のサイトです。
【サイトアイコン】：FigmaまたはCanvaを使用し512 x 512pxのロゴ画像を作成して設定してください

WordPress 5-7

この動画はデモンストレーション動画になります。音声は入っておりません。

サイトの背景を設定

【背景画像】を選択してください。

【画像を選択】→メディアライブラリにある画像を選択orドラッグ＆ドロップで画像をアップロードしてください（素材サイトからダウンロードしたお好きな画像）→プリセットをデフォルトに設定

ポイント

プリセットとは背景をどのように配置するかの設定なのでお好みの設定にしましょう！

ここまで設定が完了したら【公開】をクリックし、ページを閉じてください。

メニュー、ウィジェット、ホームページ設定、はこの後作成する固定ページや投稿ページが出来てから設定を行って行くので現段階では一旦飛ばしていきます！

【5-5】プラグインとは

プラグインの追加

プラグインとは好きなプラグインを追加することで自分好みにWebサイトをカスタマイズできる機能です。
基本的には、WordPress本体やテーマに備わっていない機能を補うために使用していきます。

プラグインは便利な機能ですが、セキュリティやテーマとの相性などもあるので、下の注意事項を必ず守って使用してください。

プラグインを使用する際の注意

不要なプラグインはインストールしない
テーマやプラグイン同士の相性が悪い場合、使用できないことがある
バージョンアップは必ず行い、最新の状態を保つ

では早速ですがプラグインを追加していきましょう！

今回は後で使用していく【Contact Form 7】という問い合わせ機能を追加できるプラグインを入れていきます。
【プラグイン】→【新規プラグインを追加】→「Contact Form 7」と検索→【インストール】をクリックします。
インストールができたら【有効化】を押してください！