実技 CMS構築実習②-WordPressのカスタマイズについて- 2026・01・24


-本日のアジェンダ-

1限目
実技 CMS構築実習②
WordPressサイトのフォルダ構成と移行対象物について

2限目
実技 CMS構築実習②
WordPressのカスタマイズついて

3限目
実技 CMS構築実習②
課題作成

4限目
実技 CMS構築実習②
課題作成

5限目
実技 CMS構築実習②
課題作成


本日のテーマ

WordPressサイト移行手順を確認しましょう。

WordPressサイトのフォルダ構成について

WordPressのフォルダで移行に関連するフォルダは、以下の通りです。投稿ページや固定ページなどのコンテンツデータは、ファイルではなくデータベースに格納されているためファイルとして確認することはできません。

  • テーマフォルダ:/wp-content/themes
  • プラグインフォルダ:/wp-content/plugins
  • メディアライブラリィフォルダ:/wp-content/uploads

また、WordPressサイトの移行にAll-in-One WP Migrationプラグインを使用した場合は、以下のフォルダに移行用データが作成されます。

  • 移行データフォルダ:/wp-content/ai1wm-backups

WordPressサイト移行時の対象物について

WordPressサイトを移行する場合には、以下の対象物の移行が必要になります。

  • WordPressサイト環境(テーマ、プラグインなど)
  • 設定情報、投稿データ、固定ページデータ
  • メディアデータ

WordPressのカスタマイズについて

WordPressのカスタマイズを行うには、以下の方法があります。
それぞれのカスタマイズ方法の特徴と実施方法を理解しましょう。

  • テーマが提供するカスタマイズ機能でのカスタマイズ
  • プラグインを利用したカスタマイズ
  • 追加 CSS を利用したカスタマイズ
  • 子テーマを利用したカスタマイズ

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。リオのまとめやコーディングの続きを進めましょう。


クラシックテーマの場合

追加CSSのやり方

やり方① <もともとあるCSSを直して適用するパターン>

1、検証ツールで変更したい場所を探す

2、検証ツールでその場所を変更し、そのCSSをコピー

3、ダッシュボードより外観→カスタマイズ→追加CSSにコピーしたものを貼り付ける

※これを行うとCSSの一番下に記述されるので、下に書かれたCSSが適用される仕組み。

やり方② <先にクラスを付与して適用させるパターン>

1、固定または投稿ページ内の変更したい部分のブロックを選択

2、右側の設定マークの中の高度な設定に追加CSSクラスにクラス名(例:ABC)を入れる

3、ダッシュボードより外観→カスタマイズ→追加CSSに自分で変更したい内容をCSSで記述する。

※特別なブロックを作りたい時に使える!

子テーマを利用したカスタマイズ <HTMLを直したい時>

※大浜先生のサイト A4.6.2 参照

外観→テーマファイルエディターを書く

※大元のテーマの作者が更新してしまうと消えてしまうので注意!


本日の感想

WordPressのカスタマイズ方法を教わった。
どうやってカスタマイズするのか疑問だったので、具体的なやり方を学べてよかった。
また、大浜先生に以前から自分のポートフォリオサイトの線幅が揃っていないのが気になっていたことを相談したら、
一瞬でCSSを書いて直してくれた。実践が目の前で見れたので、
参考に他にも変更したい部分があったら自分でも追加CSSを書いてみようと思う。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

PAGE TOP