SAMPLE001

WordPress学習の実践編がスタート。架空のカフェサイト「WPCAFE」を題材に、一から制作プロセスを解説します。すべてをダッシュボードで管理できる設計、カスタム投稿タイプ、自作お問い合わせフォーム、Instagramフィード連携など、実務で必要な技術を習得。運用しやすいサイト制作のノウハウを学びましょう。

カフェサイト制作、最初の一歩。Localでサイトを立ち上げ、オリジナルテーマの基本構成を作り、WordPress初期設定を行います。なぜこの段階でプラグインを入れるのか？一つ一つの「なぜ？」を理解しながら、実践的なサイト制作をスタートしましょう。

サイトの骨組みとなるページ構成を整えます。固定ページを作成し、それぞれに対応するテンプレートファイルを準備。WordPressのテンプレート階層を活用して、各ページに専用テンプレートを割り当てる方法を学びます。

WordPressのメニュー機能を有効化し、ヘッダーにナビゲーションメニューを実装します。独自コードでデザインの自由度を高めながら、ダッシュボードから管理できる保守性も保つ、両立した実装方法を学びます。

WordPressテーマ開発において、サイト全体で使用する共通情報（SNS、住所、連絡先など）を効率的に管理する方法を解説します。固定ページとカスタムフィールドを活用することで、無料で保守性の高いオプションページを実装し、簡単に情報を更新できる環境を構築します。

WordPressでCSS/JavaScriptを読み込む正しい方法を学びます。外部ライブラリの読み込み、依存関係の管理、バージョン管理によるキャッシュ対策など、テーマ開発で必須となる基礎知識を身につけます。

CSSをSCSSに移行し、効率的に管理できる環境を構築します。SCSSのメリットを解説し、現状のCSSをファイル分割してSCSS化します。VSCodeでの自動コンパイル環境の構築方法、出力先の設定方法を学びます。

フッターに表示する問い合わせ先、営業時間、住所、Googleマップの情報を登録します。SNS情報の登録方法の復習として、SCFとACFを使って固定ページ「共通情報」にカスタムフィールドを追加し、サイト全体で使う情報を一元管理します。

テーマオプション取得の共通関数を作成し、カスタムフィールドからのデータ取得を効率化します。フッターのHTML構造を実装し、登録した情報をループで出力します。スタイリングではFlexboxとGridを活用したレイアウト、iframeの高さを制御する地図表示のテクニックを学びます。

WordPressのheadタグ整理とセキュリティ対策を実装します。デフォルトで出力される不要な情報を削除し、自分で必要なタグを適切な順序で出力できるようにします。また、バージョン情報の非表示、ユーザー列挙対策、REST API制限などのセキュリティ対策も実施。今後のサイト制作でも使える重要なノウハウを身につけます。

カフェサイトの核となるメニュー管理機能をカスタム投稿タイプで実装します。カスタムタクソノミーによる分類、カスタムフィールドでのデータ管理、そしてすべてのコンテンツをダッシュボードで管理する設計思想について学びます。