【卒業制作】コーディング × WordPressテーマ化 練習素材【※実案件です】
Web制作を一通り学んだ方向けに、実案件を体験できる練習素材を公開しました
指示書形式で作り方を載せてますので、ぜひ挑戦してみてください
（完成したら実績に載せてOK）#デイトラ #卒業制作https://note.com/tokyofreelance/n/n3813fa13822f …
こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。
この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。
前回の記事はこちら↓
12thステップであるこの記事では、公開したサイトにメタ要素・ソーシャルシェア・XMLサイトマップを設定した後、更にサイトのユーザビリティを向上させていきます。
目次
1. プラグイン『All in One SEO Pack』をインストールする
実は今日の課題はこれをインストールするだけで終わりです。
<title>や<description>などのメタ要素・ソーシャルシェア・XMLサイトマップなど、全て『All in One SEO Pack』一つで完結できます。
Webマーケティング業界のレジェンド、バズ部さんが詳しい設定の解説記事を出してくれてますので、こちらを参考に設定してください。
GoogleアナリティクスやSearch Consoleへの登録、XMLサイトマップの送信も必ずやっておきましょう。
All in One SEOで設定したメタタグやOGPタグは『wp_head()』関数の中で呼び出されます。
現在header.phpの中に残っている静的なタグと重複しますので、以下のように編集してください。
header.php
コピー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<?php wp_head(); ?>
<link rel="icon" href="./img/icon-home.png">
</head>
<body>
・
・
・
なお、実案件では本番環境のファイルを直接編集するのは絶対にNGです。
最低限、ローカル環境で開発→動作確認してOKなら本番環境に反映という手順を踏みましょう。
今回もローカル環境でheader.phpを編集した上で、動作確認してから本番環境にアップロードしてください。
サーバー上のファイルを直接編集してエラーを起こすリスクは必ず回避しましょう。
All in One SEO Packの設定とheader.phpのアップロードができたら、サイトの基本的なSEOも無事に完了です。
2. クローラーに更新を通知するプラグイン『WebSub/PubSubHubbub』をインストールする
ここまでで、GoogleアナリティクスとSearch Consoleの設定、XMLサイトマップ作成と送信まで完了したので、運用に便利なプラグインも導入していきます。
ページの更新や新規ページの追加があった際、クローラーに素早く通知してくれるプラグイン『WebSub/PubSubHubbub（ウェブサブ/パブサブハブバブ）』をインストールしましょう。
このプラグインは、検索エンジンのクローラーにサイトの更新を自動通知してくれるツールです。
いくらサイトを更新しても、検索エンジンにインデックスされていなければ、そのページは存在していないのとほぼ同義です。
クローラーにサイトの更新を素早く通知することで、ページのインデックスを早めることができます。
また、サイトの更新を素早く通知することでコピーコンテンツへの対策にもなります。
せっかく作った記事なのに、内容をパクったコピペ記事の方が早くインデックスされたばかりに、オリジナル記事が検索エンジンからマイナス評価を食らったら嫌ですよね。
そのため、サイトを更新したらすぐにクローラーに通知する必要があるんです。
『PubSubHubbub』は、その作業を自動化してくれます。
使い方はインストールするだけで、特に設定は必要ありません。
メディアやブログ機能をつけたコーポレートサイトを作ったら、必ず入れておきましょう！
3. 画像のリサイズ＆圧縮で画像を最適化する
サイズの大きすぎる画像の読み込みは、ページの表示速度の低下、ひいてはユーザーの離脱に繋がります。
特に、Webに詳しくないクライアントの場合、どんな画像サイズでアップロードするかわからないので、メディアファイルのリサイズ・圧縮ができるプラグイン『EWWW image Optimizer』をインストールしておきましょう！
このプラグインのいいところは、自動で新規にアップロードされた画像のリサイズ・圧縮を行ってくれるだけでなく、過去にアップロードされた画像の一括最適化までできるところです。
詳しい設定方法と使い方は、バズ部さんのこちらの記事を参考にしてください。
記事中にもありますが、過去の画像を一括最適化するときは、念のために必ずバックアップを取ってから実行してくださいね！（作業前にAll in One WP MigrationでエクスポートすればOKです👍）
また、記事の中で紹介されていませんが、大きすぎる画像は元の容量も大きいので、圧縮をかけても容量は大きいままです。
表示遅延にも繋がりますし、無駄にサーバーの容量を圧迫してしまいますので、大きすぎる画像は自動でリサイズされるよう上限サイズを設定しておきましょう。
4. リンクが切れたURLや画像がないかを検知する
サイトを運営していると、むかし貼った外部リンクページが無くなっていたり、内部リンクを貼っていたページのURLを変更したりする場合があります。
そういうリンクを放置していると、リンクをクリックしたユーザーに404ページが表示されてしまうので、ユーザービリティの面でよくありません。
こうした問題のあるリンクを自動検知してくれるプラグインが『Broken Link Checker』です。
インストールするとサイドバーの『ツール』の中に『リンクエラー』という項目が追加され、自動でリンクエラーを検出してくれます。
問題のあるリンクと、そのリンクが含まれているページを表示してくれるので、リンクエラーを検出したら修正するようにしましょう。
リンクエラーの報告・修正は、運用保守プランの『定期検診項目』として含めておくと、Webに詳しくないクライアントにとっても安心ですね。
5. キャッシュを有効化してサイトの表示速度を上げる
最後に、キャッシュを有効化してサイトの表示速度を上げていきましょう。
そもそもキャッシュが何かわからない方は、サルワカさんの初心者向け記事を参考にどうぞ。
キャッシュの概要が理解できたら、このキャッシュを有効化するプラグイン『WP Super Cache』をインストールしましょう。
WP Super Cacheの良いところは、無料でモバイル用キャッシュ機能まで付いているところです。
詳しい設定方法は、バズ部さんのこちらの記事をどうぞ。
なお、こちらも記事中で解説されていますが、導入前に必ずバックアップを取ってください。
また、ECサイトにキャッシュを残すとえらいことになるので、ECサイト制作の場合は導入は避けてくださいね。
これでメタ要素・ソーシャルシェア・XMLサイトマップを設定と、サイト運用において必要な設定も完了です。
お疲れ様でした☺️
【卒業制作】コーディング × WordPressテーマ化 練習素材【※実案件です】
デイトラ3rd「WordPress編」完走おめでとうございます🎉
デイトラ1stから取り組んでる方は、かれこれ2ヶ月は勉強し続けたんじゃないでしょうか…！ここまでやり遂げられたのは本当にすごい！！！
これでWordPressを使ったサイト制作の基本はマスターです😀
ここで案件を取りに行ってもいいですし、実際取れる案件もありますが
- これまで学んだ知識の総復習がしたい
- 制作会社への転職を考えている
- 実案件レベルの難易度を知っておきたい
- ポートフォリオに掲載できる見本サイトが欲しい
という方は、ぜひ卒業制作に挑戦してみてください。
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="314"><rect fill-opacity="0"/></svg>)
49人がこの話題について話しています
こちらの素材は、東京オリンピックの共催プログラムになっている舞台サイトを作った時に利用した実際のカンプです。
実サイト
完全版マハーバラタ
利用許可をいただけたので、そのカンプを練習用に調整しました。これをコーディングからWordPressテーマ化まで通してできれば、制作会社でも間違いなく通用しますよ！
作り方は指示書形式で書いていますが、デイトラ3rdでは紹介していないプラグインも利用しているので、知らないことは実案件だと思って調べながら実装しましょう！
きっと苦戦するポイントもあると思いますが、調べて、聞いて、復習して、なんとか形にしようともがくからこそゼロから作る力が身につくんです。
ここまで進めてこられた皆さんなら、絶対に乗り越えられるはずです。コーディング・WordPressの理解・調べる力、それぞれ実案件で通用するか、ぜひ試してみてください。
それでは、デイトラ卒業おめでとうございます☺️🎉
