WordPressのフォルダ：CMS構築実習②

2025/6/28の記録です。

講師：大浜先生

WordPressにログインできなくなったときの対処法（テーマが原因の場合）

もし、WordPressに新しいテーマを入れたあとでログインできなくなってしまった場合は、FTPソフトを使って該当テーマのフォルダ名を変更することで対処できます。

手順の概要

1. FTPソフト（例：FileZillaなど）でサーバーに接続
2. /wp-content/themes/ フォルダを開く
3. 問題のテーマのフォルダ名を変更（例：theme-name → theme-name_backup）
4. これにより、WordPressが自動的に別の有効なテーマ（Twenty Twenty系など）に切り替わり、再びログインできるようになります

ブロックエディタでブロックに名前（追加CSS）を付ける

WordPressのブロックエディタ（Gutenberg）では、**「追加CSSクラス」**という機能を使って、特定のブロックに独自のスタイル名（クラス）を付けることができます。これにより、そのブロックだけにCSSでデザインを適用できるようになります。

🔧 追加CSSクラスとは？

「追加CSSクラス」は、ブロック単位で任意のクラス名を付けて、スタイルシート（CSS）でそのクラスに対して装飾を加えるための機能です。たとえば、特定の段落だけ文字色を赤くしたり、背景に枠線をつけたりできます。

📝 設定手順（初心者向け）

1. ブロックを選択
   投稿や固定ページの編集画面で、スタイルを適用したいブロックをクリックします。

2. 右側の「ブロック」設定パネルを開く
   サイドバーの「ブロック」タブを選びます。

3. 「高度な設定」→「追加CSSクラス」にクラス名を入力
   例：highlight-box
   ※ピリオド（.）や class="..." は不要です。クラス名だけを入力します。

4. CSSを記述する
   外観 > カスタマイズ > 追加CSS などに以下のようなコードを追加します：

   .highlight-box {
     background-color: #ffffcc;
     border: 2px solid #ffcc00;
     padding: 1em;
   }
   

💡 活用例

• .red-text → 文字色を赤にする
• .fade-in → アニメーションでふわっと表示
• .underline-list → 箇条書きリストに下線を追加

✅ メリット

• 特定のブロックだけにデザインを適用できる
• サイト全体のデザインに影響を与えずにカスタマイズ可能
• 一度作ったクラスは他のブロックでも再利用できる

⚠️ 注意点

• クラス名は 半角英数字・ハイフン・アンダースコアのみ使用可能
• 先頭は 英字 で始める必要があります
• CSSの基本的な知識が必要です

子テーマとは

WordPressの子テーマは、親テーマを安全にカスタマイズするための仕組みです。以下のような役割があります：

🎯 子テーマの主な役割

1. 親テーマのアップデートに備える
   親テーマを直接編集すると、アップデート時に変更が上書きされて消えてしまいます。子テーマを使えば、カスタマイズ内容を保持したまま親テーマを更新できます。
2. 安全なカスタマイズ環境を作る
   子テーマでは、CSSやテンプレートファイル（例：header.php）を親テーマから継承しつつ、必要な部分だけ上書きできます。これにより、エラーのリスクを減らしながら自由に編集できます。
3. テーマの構造を学びやすくする
   親テーマのコードを壊さずに試行錯誤できるので、WordPressの構造やテーマ開発の学習にも最適です。

🧩 具体的にできること

• style.css に独自のデザインを追加
• functions.php に独自の機能を追加
• テンプレートファイル（例：single.php）を差し替えて表示を変更
• JavaScriptや画像などの追加リソースを読み込む

⚠️ 注意点

• 子テーマは親テーマがインストールされていないと動作しません
• 子テーマを使っても、PHPやCSSの知識はある程度必要です

その他

• ワードプレスにも標準でエクスポート機能があるが、テーマやプラグインはエクスポートできない
• COCOONはカスタマイズ性が高い

自分メモ

引っ越し先の新ポートフォリオサイトに追加変更すること

• この記事を追加
• アイキャッチを作品集に掲載する
• プラグイン「Easy Table of Contents」を追加