🌐 WordPress活用法⑤

■ WordPressとは？

世界で最も使われているCMS（コンテンツ管理システム）
PHP＋MySQLで動く
ブログだけでなく企業サイト・メディア・ECなど幅広く利用
日本国内シェア 83.8%（圧倒的）

👉 Webデザイナーが扱えると仕事の幅が一気に広がる

■ CMSとは？

Webサイトの文章・画像などのコンテンツを管理する仕組み
コードを書かなくても更新できる
WordPressはその代表格

■ WordPressでポートフォリオを作る理由

デザイナーの「作品集」＝就職・営業で必須
作品だけでなく「考え方」「個性」も伝えられる
WordPressで作ることで
- 更新しやすい
- 記事として学習記録を残せる
- 操作に慣れる
- PCスキルも上がる

👉 目標は100ページ（学習の証明＋実績化）

■ WordPressの仕組み（重要ポイント5つ）

① サーバーとは？

Webサイトを置く「土地」
自作もできるが難しい → レンタルサーバーを使うのが基本
サーバーがないとサイトは公開できない

② MySQLとは？

WordPressの「データの倉庫」
投稿内容（タイトル・本文・カテゴリなど）が保存されている
PHPがMySQLからデータを取り出して画面に表示する

👉 WordPress＝PHPがMySQLのデータを読み書きして動く仕組み

③ PHPとは？（HTML/CSS/JSとの違い）

HTML：文章の構造
CSS：見た目
JavaScript：動き
PHP：データと連携して“動的なページ”を作る

例：

投稿ページのタイトルを自動で表示
サイト名を自動で挿入
記事一覧を自動生成

👉 WordPressを理解するにはPHPの基礎が必要

④ WordPressのテーマとは？

サイト全体のテンプレート
PHP・CSS・画像ファイルの集合体
テーマを変えるだけでデザインが一気に変わる
編集したい場合はテーマ内のファイルを触る

⑤ WordPressの仕事で必要なスキルレベル

WordPress案件は3段階に分かれる：

● レベル1：運用更新

投稿ページの編集
固定ページの更新 → 初心者でも可能

● レベル2：デザイン変更（HTML/CSS編集）

テーマの調整
CSSの修正 → Webデザイナーとしてよくある仕事

● レベル3：オリジナルテーマ制作（PHP編集）

管理画面のカスタム
システム開発要素 → 上級者向け

👉 まずはレベル2まで扱えれば実務で十分戦える

■ PHPとWordPressの関係

WordPressはPHPで作られている
HTMLの中にPHPを埋め込んで使う
PHPがあるから「投稿内容を自動で表示」できる

例：

php

<title><?php wp_title(); ?></title>

→ 投稿ページでは自動で記事タイトルが入る

👉 PHPは“HTMLの延長”として理解するとスムーズ

■ ポートフォリオ制作のポイント

WordPressで100ページ作る＝
- 学習記録
- 実績
- 操作スキル
- 思考の整理
- 企業へのアピール
毎日の訓練内容を記事化する
作品＋制作意図を必ずセットで載せる

👉 「何を作ったか」より「どう考えたか」が評価される

■ WordPressを学ぶ順番（おすすめ）

HTML
CSS
WordPressの投稿・固定ページ
テーマの仕組み
PHPの基礎
テーマ編集
ポートフォリオ100ページ

👉 基礎 → 実践 → 応用の順で進めると挫折しない

■ 最終まとめ

WordPressは世界で最も使われるCMS
PHP＋MySQLで動く
テーマ＝サイトのテンプレート
デザイナーは「更新・デザイン変更」ができれば実務で強い
ポートフォリオ100ページは“最強の実績”
WordPressを使うことで
- 思考
- 言語化
- 制作力
- PCスキル

　　　　がすべて伸びる

🌐 WordPress活用法⑥

とても分かりやすい要点まとめ

■ インターネットの基本構造

ネットワーク＝複数のコンピュータがつながった仕組み
家・会社・学校などのネットワークがさらに外とつながる → インターネット
情報を提供する側＝サーバー
情報を受け取る側＝クライアント（PC・スマホなど）

👉 WordPressは「サーバー上で動く仕組み」を使ってサイトを表示している。

■ サーバーサイドプログラムとは？

サーバー内部で動くプログラム
データベースと連携し、必要な情報をフロント側に返す
WordPressは PHP（サーバーサイド言語） で動いている

👉 フロント（見える部分） と バックエンド（裏側） の役割を理解することが大切。

■ フロントエンドとバックエンドの違い

● フロントエンド（見える部分）

必要スキル

HTML / CSS / JavaScript
UIデザイン
レスポンシブ対応
デバッグ
コミュニケーション能力

● バックエンド（裏側）

必要スキル

PHP / Java / Python など
SQL（データベース）
セキュリティ
情報整理力
問題解決力

👉 WordPressは フロント＋バックエンドの両方が関わる。

■ レンタルサーバーとは？

Webサイトを置くための「土地」
1台を複数人で使うため安価
管理はサーバー会社が行うので初心者でも安心
サーバーがないとサイトは公開できない

● ドメインとの関係

ドメイン＝住所
サーバー＝土地
Webサイト＝家

👉 サーバー＋ドメイン＝サイト公開の必須セット

■ メールサーバーとは？

サーバー内に「メール専用の仕組み」がある
Webサイトと同じドメインのメールが作れる例：サイト → example.com メール → info@example.com

👉 信頼性が上がるため、企業サイトでは必須。

■ WordPressの簡単インストール

多くのレンタルサーバーに「自動インストール機能」がある
手動で設定するより圧倒的に早い
初心者は必ず使うべき

主要サーバー例

エックスサーバー
ConoHa WING
ロリポップ
さくらのレンタルサーバーなど

👉 サーバー選びは最初に必ず確認すること！

■ WordPressが動く仕組み（重要）

WordPressは以下の流れで動く：

PHP が動く
MySQL からデータを取り出す
テーマ（PHP＋CSS＋画像） が表示を整える
ブラウザにページが表示される

👉 WordPress＝PHPとデータベースの組み合わせで動くCMS

■ PHPとHTML/CSS/JSの違い

HTML：文章の構造
CSS：見た目
JavaScript：動き
PHP：データと連携して動的にページを作る

例：投稿ページのタイトルを自動で表示 → PHPがデータベースから取得している

👉 WordPressを触る＝PHPの基礎を理解すること

■ WordPressのテーマとは？

サイト全体のテンプレート
PHPファイル：機能・構造
CSSファイル：デザイン
画像ファイル：サイト内で使う素材

👉 テーマを編集することでデザインや構造を変えられる

■ WordPressの仕事レベル（3段階）

● レベル1：運用更新

投稿ページの編集
固定ページの更新 → 初心者でもできる

● レベル2：デザイン変更（HTML/CSS編集）

テーマの調整
CSSの修正 → Webデザイナーが最も担当する領域

● レベル3：オリジナルテーマ制作（PHP編集）

管理画面のカスタム
システム開発 → 上級者向け

👉 まずはレベル2まで扱えれば実務で十分戦える

■ WordPressを学ぶポイント

PHPは「HTMLの延長」として理解すると良い
まずはHTML/CSSをしっかり理解する
WordPressは「仕組みを知る」ことで怖くなくなる
サーバー・ドメイン・PHP・データベースの関係を理解する

■ 最終まとめ

インターネット＝ネットワークの集合
サーバー＝サイトを置く場所
ドメイン＝住所
WordPress＝PHP＋MySQLで動くCMS
テーマ＝サイトのテンプレート
実務では「更新」「デザイン変更」ができれば十分
サーバー選びは最初に必ず確認する
PHPはWordPressの基礎になるので少しずつ理解する

👉 WordPressは“仕組みを理解すれば怖くない”。 Webデザイナーとしての実務力が一気に上がる領域。

参考サイト

MEMO

PHPの基礎を学んだ。三時限目以降は自由時間だったので、ポートフォリオの見直しをした。

固定ページでの作品のアップが一通りできたと思う。

ただ、順番がバラバラなので、登校した時に聞いてみようと思う。

サーバーサイドスクリプトとクライアントサイドスクリプト

スクリプト（プログラミング）にはサーバー側で動くものとクライアント側（PC側）で動くものがあります。違いについて理解しましょう。

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。Webサーバは必須ではありません。これは、Webブラウザ内でプログラムが実行されるためです。このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

PHP入門

PHPはプログラミング言語なのでIT技術者が利用するのが一般的です。但し、WordPressがPHPで作成されていることもありWordPressの独自テーマ作成などを行う時にPHPに接する機会もあります。

参考サイト

ワンポイントアドバイス

PHPはHTMLの延長と考えて、Wordpressの利用でよく見かける技術として今後に備えておきましょう。まずは、しっかりとHTML・CSSを理解しましょう。
PHPのファイルにHTMLを記述できるわけですから必要性と使いどころをまずは理解して、一つ一つ理解していくのが良いでしょう。

５・９ 学科 サーバーサイドプログラム基礎【オンライン】

🌐 WordPress活用法⑤

■ WordPressとは？

■ CMSとは？

■ WordPressでポートフォリオを作る理由

■ WordPressの仕組み（重要ポイント5つ）

① サーバーとは？

② MySQLとは？

③ PHPとは？（HTML/CSS/JSとの違い）

④ WordPressのテーマとは？

⑤ WordPressの仕事で必要なスキルレベル

● レベル1：運用更新

● レベル2：デザイン変更（HTML/CSS編集）

● レベル3：オリジナルテーマ制作（PHP編集）

■ PHPとWordPressの関係

■ ポートフォリオ制作のポイント

■ WordPressを学ぶ順番（おすすめ）

■ 最終まとめ

🌐 WordPress活用法⑥

とても分かりやすい要点まとめ

■ インターネットの基本構造

■ サーバーサイドプログラムとは？

■ フロントエンドとバックエンドの違い

● フロントエンド（見える部分）

● バックエンド（裏側）

■ レンタルサーバーとは？

● ドメインとの関係

■ メールサーバーとは？

■ WordPressの簡単インストール

■ WordPressが動く仕組み（重要）

■ PHPとHTML/CSS/JSの違い

■ WordPressのテーマとは？

■ WordPressの仕事レベル（3段階）

● レベル1：運用更新

● レベル2：デザイン変更（HTML/CSS編集）

● レベル3：オリジナルテーマ制作（PHP編集）

■ WordPressを学ぶポイント

■ 最終まとめ

参考サイト

サーバーサイドスクリプトとクライアントサイドスクリプト

サーバサイドスクリプト

クライアントサイドスクリプト

PHPとは

参考サイト

PHP入門

ワンポイントアドバイス

関連投稿

７・１７ 発表会

７・１５ 自主学習

７．１３ 学科 SNS運用基礎⑥【オンライン】

コメントを残す コメントをキャンセル

５・９　学科サーバーサイドプログラム基礎【オンライン】

７・１７　発表会

７・１５　自主学習

７．１３　学科 SNS運用基礎⑥【オンライン】

コメントを残すコメントをキャンセル