CODE

WordPressを学ぶ前に知っておきたいWebサイトの基本仕組みを解説。どんな高度な技術を使って作られたWebサイトでも、ブラウザが理解できる要素は実は限られています。現代のWebサイト運営に動的HTMLが必要な理由を初心者にもわかりやすく説明します。

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

「Webデザイナーになりたい」と考える人の多くが、実は大きな誤解をしています。Webサイト制作には複数の専門工程があり、それぞれに異なる技術と役割が存在します。制作工程の全体像を理解することが成功の鍵となります。Webサイト制作に関わりたい方が押さえておくべき基礎知識を詳しく解説します。

ノーコードからフレームワークまで、Webサイトを構築する5つの現実的な方法を徹底比較。それぞれの手法がどのような課題を解決し、どこに限界があるのか。これからサイト制作に取り組む方に向けて、最適な選択肢を見つけるための視点を紹介します。

今回はWordPressについて学びます。そもそもCMSとは何なのか？なぜWordPressが世界で43%ものシェアを占めているのか？技術的な仕組みから実用性まで、WordPressの全体像を理解し、次回から始まる実践学習への準備を整えましょう。

WordPress学習を始める際の開発環境選択について解説します。3つの主要な選択肢を費用、設定の簡単さ、学習効率、失敗への寛容性など多角的に比較分析。環境構築で挫折することなく、WordPress本来の学習に集中できる最適解を提案します。

WordPressの学習環境としてLocalのダウンロードからインストール、初回テストサイト作成まで完全解説します。わずか数分で完成し、環境構築の悩みから解放されて純粋にWordPressの学習に集中できるようになります。初心者が迷いがちなサイト名の付け方や設定のポイントも丁寧に説明しています。

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

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

Visual Studio Code（VSCode）のインストール手順を解説。無料のコードエディターVSCodeは、PHPやCSSファイルの編集に必要な機能を提供します。公式サイトからのダウンロード方法、インストール時の重要設定、起動確認まで詳しく説明。

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

VSCodeをWordPress開発用にカスタマイズする方法を詳しく解説します。日本語化から始まり、WordPress開発に必須の3つの拡張機能の導入手順を紹介。各拡張機能がどのように開発効率を向上させるかを初心者にも分かりやすく説明しています。

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