WPテーマ開発（ポートフォリオサイト）

2022-08-03
2024-11-16

記事をご覧いただき、ありがとうございます。
Webコーダーのまついちです。

この記事の目的は、コーダーの採用を検討中の方に、わたしのWordPressテーマの開発スキルをアピールすることです。

なお、基礎的なコーディングスキルを確認したい方はオリジナルサンプルサイトの解説記事をご参照ください。

WordPressテーマを開発した理由

このテーマを開発した理由は3つあります。

1つ目は、「ポートフォリオサイトが必要だったから」です。Web制作のコーダーとして、採用担当者に実績をひと目で確認してもらえるサイトを作り、スキルを視覚的にアピールするために、独自のポートフォリオサイトが必要でした。

2つ目は、「仕事の選択肢を広げるため」です。WordPress案件は需要が多いため、スキルを身につけることで仕事探しの幅が広がると考えました。条件に合う案件を増やすためにも、WordPressでのテーマ開発経験は重要です。

3つ目は、「WordPress自体への興味関心があるから」です。私はもともと技術への好奇心が強いのですが、特に長年にわたり人気を誇るWordPressの仕組みに興味がありました。今回は納期がなかったため、WordPressについて網羅的に学習し、技術的理解を深める良い機会だと考えました。

WordPressテーマ開発

公開までの流れ

今回のコーディングから公開までの大まかな流れは、

①HTMLサイトを制作
↓
②（①を）WordPressのテーマ化
↓
③（②を）レンタルサーバーに公開

です。

詳しく見ていきます。

1. HTMLサイトからWordPressテーマへの移行

まず、HTMLとCSSでサイトを構築しました。その後、Local（WordPressの開発アプリケーション）を使って開発環境を整え、サイトをWordPressテーマに組み替えました。

2. インクルードタグで共通パーツの効率的管理

HTMLの段階では各ページで個別に記述していたヘッダーやフッターなどの共通部分を、WordPressのインクルードタグを活用して効率化しました。

具体的には、インクルードタグを使用することで、ヘッダー、フッター、サイドバーなどのサイト全体の共通パーツを一元管理しました。

これにより、デザイン変更が発生した際も、必要な部分のみを更新するだけで各ページに反映できるため、メンテナンス性が向上しました。

3. テンプレート階層を活用したページごとの動的表示

静的なHTMLサイトにはない柔軟性を持たせるため、WordPressのテンプレート階層を活用してページごとに異なるテンプレートを適用しました。

具体的には、投稿ページにはsingle.php、固定ページにはpage.phpを使うなど、ページタイプに応じたテンプレートを設定しました。

これにより、ページごとのデザインや機能をカスタマイズでき、動的で柔軟なページ表示を実現しました。

4. サブループとテンプレートタグでの情報表示

PHPのサブループとテンプレートタグを活用し、必要な情報をデータベースから自由に取得・表示できるようにしました。

例えば、トップページのブログセクションに新着記事やサムネイルの一覧を表示し、記事を追加・更新すると自動的に反映される仕組みを構築しました。

他にも、ページごとにサイドバーの内容を切り替えて出力する機能を実装するなど、様々な仕組みを構築したフェーズです。

5. WordPressサイトの公開

完成したサイトをWeb上に公開するために行った手順は以下です。

①レンタルサーバーの契約とドメインの取得
②サーバーにWordPressをダウンロード&インストール
③ローカル環境で作成したコードを本番環境へ移行し公開

このように、HTMLサイトからWordPressテーマへ移行する一連の作業を通して、静的サイトと動的サイトの違いを実感しながら、効率的かつ柔軟なWebサイト構築の技術を習得できました。

実装した機能

具体的に実装したのかを記述します。

パンくずリスト

パンくずリストは大きく分けて2つの機能を実装しました。

ひとつは、閲覧ページごとに最適なリスト内容を表示するという標準的な機能。

もうひとつは、JSON-LD形式で構造化データを生成する機能です。パンくずリストの階層を、ページごとに検索エンジンに伝えることでSEO効果を期待しています。

ページナビゲーション

WordPress関数の「the_posts_pagination」を利用して、アーカイブページにページナビゲーション機能を実装しました。

関数のパラメータを調整して出力内容を制御したり、CSSでスタイリングして見た目を変更しています。

ドロワーメニュー

当サイトのドロワーメニューは、以下の一般的な機能を内包しています。

・モバイルデバイス（スマートフォン・タブレット）で閲覧時に適応
・メニューが開いているときはスクロール禁止
・閉じるボタン、または、ドロワーメニューの範囲外クリックでメニューを閉じる
・メニュー開閉時は、フワッとアニメーション

ページアップボタン

スクロール位置に合わせてページアップボタンの表示を制御しています。

ファーストビューは非表示で、下へスクロールするとフワッと登場し、ページ最下部では特定位置で固定されます。

お問い合わせフォーム

お問い合わせフォームは、googleフォーム→contactform7（プラグイン）→MW WP Form（プラグイン）の順で実装しました。

実際に運用してみて最終的にMW WP Formで落ち着きました。
確認画面を実装するのに適していたのと、自動返信メール機能の実装と管理も分かりやすく扱いやすかったです。

さらに、バリデーションの制御も管理画面から分かりやすく設定できるのでMW WP Formにして良かったと感じています。

投稿・カスタム投稿

ブログをWordPressデフォルトの投稿タイプに割り当て、
制作実績をカスタム投稿タイプ（functions.php）で実装しました。

一覧ページは、アーカイブ、カテゴリー、タグ、月別の種類を用意し、その内容は投稿タイプ（ブログと制作実績）によってデザインとコンテンツを切り替え出力しています。

トップページから一覧ページ、一覧ページから個別投稿ページへのジャンプや、アイキャッチ画像・タイトル・日付などの投稿に紐づくデータを取得出力するなどの制御もすべてPHPを用いた実装です。

サイドバー

自作したサイドバーを、トップページとお問い合わせページを除くすべてのページで表示しています。

サイドバー内に表示される内容は、投稿機能と同様に閲覧中のページによって、「ブログ」と「制作実績」が切り替わる仕組みです。

PHPではなくJavaScriptで実装した理由ですが、見出しをHTML(DOM)から取得するために処理順をDOM生成の後にしたかったからです。

WordPressのフックを活用すればPHPで実装できそうですが、急ぎで目次を実装することになったので当時から慣れていたJavaScriptで実装することに決めました。

サイトの最適化

レスポンシブ対応

スマートフォン、タブレットやパソコンそれぞれが正しく表示されるようにコーディングしました。

また、当サイトは、できるだけスマートフォンに負荷をかけないように「スマホファースト」で設計しています。

管理画面の機能拡張

サイト運用を快適にするためにWordPressの管理画面をカスタマイズしました。カスタムフィールドのプラグインを使用しています。

トップページのカスタマイズ例として、
編集画面にラベル付きの入力ボックス（プラグイン）を準備したことです。ラベルに従い編集者が入力するだけで、内容が定型化された統一感のあるサイトになります。

まとめ

最後まで読んでいただいて、本当にありがとうございます。
この記事を通して「WordPressのテーマ作成は、一通り任せられそうだ」と、感じていただけましたら嬉しいです。

ご不明点や気になる事、または、お仕事のご相談はこちらのお問い合わせフォームからご連絡ください！

プロジェクト	ポートフォリオサイト制作
作業内容	テーマ開発保守・運用
使用ツール	html,css,javascript,vscode,git,github,gulp,local,filezilla,notion
製作期間	17か月
URL	animo