スライドショーの設定をしてみよう。

1. 「外観」 › 「カスタマイズ」に移動し、「Lightning トップページスライドショー」をクリック
2. 「[1] スライド画像1」の「画像を変更」ボタンをクリック
3. 「material」フォルダ内の「hero.jpg」を選択
4. 「[1] スライドの代替えテキスト」を以下のように入力
   • 代替えテキスト：「デスクの上にmacとカメラとコーヒー」
5. 「[1] スライドに被せる色 (任意)」を以下のように変更
   • 色：「#073647」
6. 「[1] スライドに被せる色の濃さ (任意)」を以下のように変更
   • 濃さ：「80」%

7. 「[1] スライド画像リンク先 URL」を以下のように変更
   • URL：「http://localhost/wp-lesson/about-me/」
8. 「[1] スライドタイトル (任意)」を以下のように変更
   • テキスト：「デザインもコーディングも
     どっちも大好き。」
9. 「[1] スライドテキスト (任意)」を以下のように変更
   • テキスト：「UI・UX/HTML/CSS/JS/PHP/SQL」
10. 「[1] ボタンの文字 (任意)」を以下のように変更
    • テキスト：「僕のことをもっと知る」

11. 「[1] スライド上の文字色 (任意)」を以下のように変更
    • 色：「#ffffff」
12. 「文字に影をつける (任意)」をオフにする
13. 「[2] スライド画像」を削除する
14. 「公開」ボタンを押して、サイトを確認する

PR Blockの設定をしてみよう。

1. 「外観」 › 「カスタマイズ」に移動し、「Lightning トップページPR Block」をクリック
2. 「アイコン 1」を以下のように入力
   • Font Awesome 5のclass名：「fas fa-paint-brush」
3. 「タイトル 1」を以下のように変更
   • タイトル：「効果的なデザイン」
4. 「サブテキスト 1」を以下のように変更
   • テキスト：「クライアントの要望を達成する効果的なデザインを行います。」
5. 「リンク URL 1」を削除する

6. 「アイコン 2」を以下のように入力
   • Font Awesome 5のclass名：「fab fa-html5」
7. 「タイトル 2」を以下のように変更
   • タイトル：「きれいなマークアップ」
8. 「サブテキスト 2」を以下のように変更
   • テキスト：「アクセシビリティを意識したきれいなマークアップを行います。」
9. 「リンク URL 2」を削除する

10. 「アイコン 3」を以下のように入力
    • Font Awesome 5のclass名：「fab fa-css3」
11. 「タイトル 3」を以下のように変更
    • タイトル：「最適なCSS設計」
12. 「サブテキスト 3」を以下のように変更
    • テキスト：「OOCSS,SMACSS,FLOCSSなど、様々な設計案が使えます。」
13. 「リンク URL 3」を削除する
14. 「公開」ボタンを押して、サイトを確認

テーマカスタマイザーの注意

テーマカスタマイザーによってカスマイズした箇所は、そのテーマでのみ使用できる。
したがって、テーマを変更した場合は、そのカスタマイズ内容が反映されないなどの問題が発生する。

Contact Form 7をインストール

1. サイドバーの「プラグイン」をクリック
2. 「新規追加」ボタンをクリック

3. 「contact form 7」を検索
4. 「今すぐインストール」をクリック
5. 「有効化」をクリック

コンタクトフォームを作成してみよう

コントロール部品をボタンで設置して、メールテンプレートに部品の名前を書けばOK。

1. サイドバーの「お問い合わせ」をクリック
2. 「コンタクトフォーム 1」をクリック

3. 表示されたHTML記入欄に 以下の<label>要素を追加

<label> お名前 (必須)
    [text* your-name] </label>

<label> メールアドレス (必須)
    [email* your-email] </label>

<label> 電話番号</label>

<label> 題名
    [text your-subject] </label>

<label> メッセージ本文
    [textarea your-message] </label>

[submit "送信"]

4. 文字列「電話番号」の後ろにカーソルを入れて、コントロール部品の挿入ボタンの「電話番号」をクリック
5. 表示されたパネルの「名前」を以下にする
   • 名前：「your_tel」
6. 「タグを挿入」ボタンをクリック

7. 「メール」タブをクリックして、メールの設定画面に移動
8. 「送信先」のメールアドレスがちゃんと受け取れるアドレスを確認

9. 「メッセージ本文」に電話番号を受け取るテンプレート記述

差出人: [your-name] <[your-email]>
題名: [your-subject]

メッセージ本文:
[your-message]

電話番号：
[your_tel]

--
このメールは Dummy (http://localhost/wp-lesson) のお問い合わせフォームから送信されました

10. 「保存」ボタンをクリック

作ったコンタクトフォームを設置してみよう

投稿画面にショートコードをコピーすればコピーすれば表示される。

1. ショートコードをコピー

2. 「固定ページ」から「新規追加」をクリック
3. 「タイトル」と本文を以下のように入力
   • タイトル：「Contact」
   • 本文：「下記のフォームからお問い合わせ下さい。」
4. 本文の下にショートコードを貼り付ける
5. 「公開」ボタンをクリックし、固定ページを公開する

6. フォームがちゃんと機能するかを確認。
   （SMTPの設定を行っていないXAMPPやMAMPではメールが送信できない）

Yoast SEOをインストールしてみよう。

1. 「サイドバーの「プラグイン」をクリック
2. 「新規追加」ボタンをクリック
3. 「Yoast SEO」を検索
4. 「今すぐインストール」をクリック

5. 「有効化」をクリック

Yoast SEOの設定をしてみよう。

タイトルの区切り文字や、サイトの運営者、SNSの連動などを設定しよう。

1. 「サイドバーの「SEO」をクリック

2. 「サイドバーの「Search Appearance」をクリック
3. 「タイトル区切り文字」を「|」に設定
4. 「Meta description」にサイトの紹介文を任意で設定
5. 「Knowledge Graph & Schema.org」を「個人」に設定
6. 「Personal info」を自分のユーザー名に選択

7. 「変更を保存」をクリック

SNSの連携

「Knowledge Graph & Schema.org」を「Organization」にした場合は、サイドバーの「SEO」 › 「ソーシャル」からSNSの設定ができる。
「個人」にした場合は、ユーザーのプロフィールから設定ができる

8. サイトのトップページを表示し、「ソースを表示」する
9. 設定した内容が、反映しているか確認

構造化データマークアップ

HTMLの情報を、ちゃんと検索ロボットでも理解できるようにした情報を「構造化データという。
構造化データをマークアップする記法は、「microdata」などいくつかあるが、現在 Googleは「JSON-LD」というJSONでのマークアップ方法を推奨している。

記事のSEO対策をしてみよう。

プラグインをインストールすると、投稿画面からSEOに関する設定ができる。

1. 「投稿」 › 「投稿一覧」に移動
2. 「はじめてのブログ」をクリックし、編集画面を開く
3. 記事の下部に「Yoast SEO」のフィールドが追加されていることを確認
4. フォーカスキーワードに「Webデザイナー」と記入
5. 「Edit snippet」をクリックしてパネルを開く
6. 「Meta descripion」に記事の紹介文を以下のように設定する

はじめまして。
みんながブログをやれやれうるさいので、仕方なくブログをはじめてみました。
今日は私がなぜ Webデザイナー を目指しているのかという「きっかけ」や、
 Webデザイナー という職種が「いかに素敵か」について、とことんわかりやすく説明します。

日本語のキーワードがうまく判別されない

Yoast SEOの解析は日本語だとうまく判別できない。
正確には、キーワードの前後に半角スペースが無いと判別できない。
したがって解析ルーツを利用する時は、キーワードの前後に半角スペースを入力する必要があるが、実際公開時には不要なので、解析が終わったら半角スペースを消すとよい。

7. 「SEO 解析」のパネルを開く

8. 「タイトルにキーフレーズが含まれていない」と怒られるので、タイトルを以下のように変更する
   • タイトル： 「Webデザイナー を目指してる私のはじめてのブログ」
     （解析ツールに反応させるため半角スペースを含んでいます。）

9. SEO 解析パネルで「SEO タイトルの長さ: いいですね !」となっているか確認

10. タイトルと、Meta desictionの「Webデザイナー」の前後にある半角スペースを削除
11. 「更新」ボタンを押し記事を保存する

プラグインの使いすぎに注意

WordPressにはとても便利なプラグインが豊富にあるが、使いすぎには注意する。
プラグインを入れれば入れるほど、サイトが重くなり表示速度に影響が出たりする 。
また、プラグインの開発者はWordPressの開発者と別の方がほとんどのため、
WordPressのアップデートに常に対応していると限らない。
そのため、WordPressをアップデートしたらプラグインが利用できなくなったり、結果、WordPRessがアップデート出来ずにセキュリティが低下しているする。
したがって、可能な限りプラグインに依存しないように心がけるほうがよい。