Chapter02 コンテンツの追加と編集

概要と目標 コンテンツの投稿方法や、
メニュ、ウィジェットの使い方を知る。

WordPressのコンテンツの投稿方法や、カスタムメニュー、ウィジェットの使い方を学習しよう。

新規投稿 ブログは「投稿」から書く。

ブログを書く場合は、「管理画面」の「投稿」から書くことができる。

はじめてのブログ記事を書いてみよう。

  1. 管理メニューの「投稿」をクリック
  2. 「新規追加」をクリック
  1. 以下の文字列を「タイトル」をコピペ
はじめてのブログ
  1. 以下の文字列を「本文」をコピペ
はじめまして。
私はWebデザイナーを目指しているのですが、Webデザイナーになるまで記録をこれから毎日ブログに書いていきます。

今日は簡単になぜWebデザイナーを目指しているのかを書いてみたいと思います。

Webデザイナーを目指すきっかけ

Webデザイナーを目指したきっかけは、Webデザイナーが素敵だからです。

Webデザイナーが素敵なところ

Webデザイナーが素敵だと思う理由は以下の3つです。

大好きなデザインに携われる

自分のスキルで、ものづくりができる

フリーランスになれる可能性がある

他にもいろいろな理由があるんですけど、これらが大きな理由です。

今は、Webデザイナーになるために、Webデザイナーに必要なスキルが何を毎日調べています。

今日はHTMLというのを勉強しなければいけないことを知って、衝撃でした。

WikipediaのHTMLのページによると

HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ、HTML（エイチティーエムエル））は、ハイパーテキストを記述するためのマークアップ言語の1つである。

とありました。

ひとつも書いてる意味がわからず困惑しています。

引き続き明日もWebデザイナー必要なスキルを調べてブログに書きたいと思います。

それでは。

書式設定 見出しや強調などを
簡単に設定できる。

WordPRessでは見出しや強調などののタグを、簡単につけることができる。

書式設定をやってみよう。

  1. 「Webデザイナーを目指すきっかけ」を見出し2にする
  1. 「Webデザイナーが素敵なところ」を見出し3にする
  1. 「大好きなデザインに携われる」〜「フリーランスになれる可能性がある」を箇条書きにする
  1. 「HyperText Markup Language・・・」〜「マークアップ言語の1つである。」までを、引用にする
    その際、「引用元」に「Wikipedia」と入力する
  1. 「Webデザイナーが素敵」の部分を重要にする
  1. 「毎日」の部分を強調にする
  1. 「WikipediaのHTML」の部分に下記のリンクを設定する
    • リンク先URL：「https://ja.wikipedia.org/wiki/HyperText_Markup_Language」
    • 新しいタブで開く： オン
HTMLを自由に編集するには？
WordPressの投稿は自由にHTMLを編集できる。
ひとつのブロックだけのHTMLを自由に変更する場合は、「詳細説明 ①」、「「HTMLとして編集」をクリックする。
記事全体をHTMLで編集するのであれば、「ツールと設定をさらに表示 ②」、「「コードエディター」をクリックする

画像の挿入 画像も簡単にアップロードできる。

投稿ブロックで簡単に画像をアップロードできる

画像をアップロードをしてみよう。

  1. 「Webデザイナーを目指すきっかけ」のブロックを選択し、
    「ブロックの追加」から「画像」ボタンをクリック
  1. 「wordpress-lessons」 › 「material」フォルダ内にある「web-design.jpg」をアップロードし、代替えテキストを入力
代替えテキスト
Webデザイナーに早くなりたくて、とりあえず紙にデザインを書いてみました。
  1. 「プレビュー」ボタンをクリック

パーマリンク設定 記事のURLを指定できる。

文書の設定の「パーマリンク」にある「URLスラッグ」にURLの最後の部分を指定できる。
パーマリンクはそのままURLになるため、記事を公開する前に指定し、公開後も変更しないほうがよい。

パーマリンクを設定して記事を公開してみよう。

  1. 「パーマリンク」を「first-blog」する
  1. 「公開する」ボタンをクリック
  2. 「公開」ボタンクリックして公開する
  3. 「投稿を表示」をクリックして投稿を確認
公開設定
WordPressでは、記事公開時に閲覧権限や、公開日時の設定を行うことができる

カテゴリー 記事を分類することができる。

記事を分類するための仕組みとして、「カテゴリー」というものがある。
WordPressでは、1つの記事につき必ずカテゴリーをひとつは選択する必要がある。
選択しないまま投稿する「未分類」というカテゴリーになる。
カテゴリーは階層（親子関係）をもたせることができる。

カテゴリを作成してみよう

  1. サイドメニュー「投稿」 に移動
  2. 「カテゴリー」 に移動
  3. カテゴリ名を入力
    • 名前： 「お知らせ」
  4. スラッグ名を入力 （カテゴリーページのURLになる）
    • スラッグ： 「news」
  5. 「新規カテゴリーを追加」ボタンをクリック

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

  1. サイドメニュー「投稿」 に移動
  2. 「投稿一覧」 に移動
  3. 「はじめてのブログ」 に移動
  4. 「カテゴリ」から「未分類」のチェックを外し、「お知らせ」にチェックを入れる
  5. 「更新」ボタンをクリック

子カテゴリを作成してみよう

  1. サイドメニュー「投稿」 に移動
  2. 「カテゴリー」 に移動
  3. カテゴリ名を入力
    • 名前： 「Webデザイナーへの道」
  4. スラッグ名を入力 （カテゴリーページのURLになる）
    • スラッグ： 「road-to-web-designer」
  5. 「新規カテゴリーを追加」ボタンをクリック
  1. サイドメニュー「投稿」 に移動
  2. 「投稿一覧」 に移動
  3. 「はじめてのブログ」 に移動
  4. 「カテゴリ」から「Webデザイナーへの道」にチェックを入れる
  5. 「更新」ボタンをクリック

タグ記事を探してもらう、
キーワードの分類。

タグはカテゴリとよく似ているが、親子関係を持たせることはできない。
一般的には、記事を探してもらうためのキーワードを2~3個設定することが多い。

タグを付けてみよう

  1. 「タグ」に「Webデザイン」と入力して、エンターを押す
  1. 「更新」ボタンをクリック

タグのスラッグを編集してみよう

  1. サイドメニュー「投稿」 に移動
  2. 「タグ」 に移動
  3. 「Webデザイン」の「クイック編集」ボタンをクリック
  4. スラッグ名を入力 （タグページのURLになる）
    • スラッグ： 「web-design」
  5. 「タグを更新」ボタンをクリック

アイキャッチ画像記事を代表する画像を設定できる。

WordPressでは、その記事を代表する画像のことを「アイキャッチ画像」という。

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

  1. サイドメニュー「投稿」 に移動
  2. 「投稿一覧」 に移動
  3. 「はじめてのブログ」 に移動
  4. 「アイキャッチ画像」から、先程とアップロードした「ワイヤーフレームの画像」を選択
  5. 「更新」ボタンをクリック

固定ページ時系列に関係なく
表示するページ。

ブログやニュースなどの随時投稿していくコンテンツには投稿の方が向いているが、
「企業情報」や「お問い合わせ」などの
時系列に関係なく表示されるページは「固定ページ」の方が便利。
なお、固定ページには、親子関係を設定することができるため、
「企業情報」→「代表メッセージ」などのように階層をつけて表示することができる。

固定ページを作成してみよう。

  1. サイドメニュー「固定ページ」 をクリック
  2. 「新規追加」をクリック
  3. 固定ページのタイトルを入力
About Me
  1. 固定ページの本文を任意で入力する
  2. パーマリンクが「about-me」となっているか確認
  1. 「公開」ボタンをクリックして固定ページを公開
  2. 「投稿を表示」をクリックして、投稿を確認

カスタムメニュー自由にメニューを追加したり、
並び替えたりできる。

WordPressには「カスタムメニュー」という自由にメニューを設定できる機能がある。

カスタムメニューを作成してみよう。

  1. サイドメニュー「外観」 をクリック
  2. 「メニュー」をクリック
  3. メニュー名に「global」と入力
  4. 「メニューを保存」ボタンをクリック
  1. 固定ページから「ホーム」と「About Me」を選択
  2. 「メニューに追加」をクリック
  3. メニュー設定の固定ページを自動追加の「このメニューに新しいトップレベルページを自動的に追加」を選択
    （固定ページを作成すると自動的にメニューに追加される）
  4. メニュー設定のメニューの位置から「メイン」を選択
    （選択しているテーマによって位置の名前は異なる）
  5. 「メニューを保存」ボタンをクリック
  1. サイトを表示してメニューが表示されているかを確認

ウィジェット自由に機能を追加して、
サイトをカスタマイズ出来る

WordPressには「ウィジェット」という機能があり、
「最近の投稿」の一覧や「カテゴリー」の一覧を表示したりができる。
配置できる場所はテーマによって異なるが、
一般的にはサイドバーやフッターに配置できるものが多い。

ウィジェットを作成してみよう。

  1. サイドメニュー「外観」 をクリック
  2. 「ウィジェット」をクリック
  3. 利用したいウィジェットを選択
  4. ウィジェットを配置する場所を選択
  5. 「ウィジェットを追加」ボタンをクリック
  1. 追加したウィジェットをドラッグで好きな順番に並び替える
  2. ウィジェットのタイトルを「記事を書いた日」と入力
  3. 「保存」ボタンをクリック
  1. サイトを表示してウィジェットが表示されているかを確認

まとめ 管理画面から記事を投稿したり、
メニューやウィジェットを追加したり。

コンテンツの追加は「投稿」と「固定ページ」がある。
また、カスタムメニューやウィジェットを使ってサイトをカスタマイズできる。

  • ニュースやブログなど随時投稿していくコンテンツは、投稿
  • 時系列に関係なくずっと表示しておくコンテンツは、固定ページ
  • カスタムメニューやウィジェットでサイトをカスタマイズできる