復習3日目_20251125

IT

🔷 Day3：WordPress テーマ改善（UI向上）

 

🧩 STEP 1：テーマ構造の全体把握

✔ wp-content/themes の中にあるフォルダは？

 

どちらかの方法で確認できる。

① WordPress 管理画面か、またｈ、② Docker 環境から確認

 

②の手順は以下

↓EC2 に SSH 接続

↓WordPress コンテナに入る

docker exec -it wordpress bash

このコマンドの意味は

docker:Docker（コンテナ仮想化）のコマンドを使うよ、という宣言。

exec: 既に動いているコンテナの中でコマンドを実行する という意味

-i:コンテナの中で “入力” ができる状態にする（interactive）

t:ターミナル（シェル）を割り当てて、人間が操作できるようにする

-it:コンテナの中に入って、人間が操作できるようにする というオプション。

wordpress:コンテナ名

bash：Linuxのコマンドを操作できる bashシェル を立ち上げる。

↓themes ディレクトリへ移動

cd /var/www/html/wp-content/themes

↓フォルダ一覧を表示

ls -la

↓表示結果は以下

astra index.php my-original-theme twentytwentyfive twentytwentyfour twentytwentythree

📌 インストール済みテーマ一覧

My Original Theme（有効） ← 今使ってるテーマ

Astra

Twenty Twenty-Five

Twenty Twenty-Four

Twenty Twenty-Three

 

↓テーマの中身を確認

cd /var/www/html/wp-content/themes/my-original-theme
ls -la

🎨 テーマ構造（完全版）

my-original-theme の中身は以下：

ファイル名 役割
header.php サイト全体で共通のヘッダー（メニュー・タイトル周り）
footer.php サイト共通のフッター（著作権表記など）
front-page.php トップページ専用テンプレート
index.php テンプレート階層の最終フォールバック。一覧ページやアーカイブも担当
page.php 固定ページ用テンプレート
single.php 投稿記事（ブログ記事）用テンプレート
functions.php テーマ固有の処理（スクリプト読み込みなど）
style.css テーマ情報＋スタイルシート

＊一覧ページテンプレートが無い

このテーマには archive.php がなく、カテゴリ一覧・タグ一覧・年月別アーカイブなど すべての一覧ページが index.php にフォールバック されている。

archive.php が無いため、一覧系ページのデザインがトップページや記事ページと統一されていない可能性がある。

何故ならば、WordPress テンプレート階層では、一覧ページを表示する優先順位は下記のため。

archive.php
→ index.php（フォールバック）

 

✨ 今日やること：

①archive.php を新規作成
→ ブログ一覧が“ブログらしく”なる

②single.php を整える
→ 記事の読みやすさが大幅UP

③page.php を調整
→ 固定ページがスッキリわかりやすく

④front-page.php を強化
→ サイト全体の印象UP（最優先効果）

 

作業に着手

①archive.php を新規作成

↓archive.php ファイルを作る

my-original-themeにいるので、

touch archive.php

↓archive.php を編集する

nano archive.php

以下を記載

 

<?php get_header(); ?>

<main class=”archive”>

<header class=”archive-header”>
<h1 class=”archive-title”>
<?php the_archive_title(); ?>
</h1>
<?php if ( get_the_archive_description() ) : ?>
<div class=”archive-description”>
<?php the_archive_description(); ?>
</div>
<?php endif; ?>
</header>

<?php if ( have_posts() ) : ?>

<div class=”archive-post-list”>
<?php while ( have_posts() ) : the_post(); ?>
<article <?php post_class( ‘archive-post-item’ ); ?>>
<a href=”<?php the_permalink(); ?>” class=”archive-post-link”>
<?php if ( has_post_thumbnail() ) : ?>
<div class=”archive-post-thumb”>
<?php the_post_thumbnail( ‘medium’ ); ?>
</div>
<?php endif; ?>

<div class=”archive-post-body”>
<h2 class=”archive-post-title”>
<?php the_title(); ?>
</h2>

<time class=”archive-post-date” datetime=”<?php echo esc_attr( get_the_date( ‘c’ ) ); ?>”>
<?php echo esc_html( get_the_date() ); ?>
</time>

<div class=”archive-post-excerpt”>
<?php the_excerpt(); ?>
</div>
</div>
</a>
</article>
<?php endwhile; ?>
</div>

<div class=”archive-pagination”>
<?php
the_posts_pagination( array(
‘mid_size’ => 1,
‘prev_text’ => ‘&laquo;’,
‘next_text’ => ‘&raquo;’,
) );
?>
</div>

<?php else : ?>

<p class=”archive-no-posts”>記事がありません。</p>

<?php endif; ?>

</main>

<?php get_footer(); ?>

Ctrl + O → Enter（保存）

Ctrl + X（終了）

🔥 archive.php が使われるページはどこ？

https://xxxx/category/カテゴリ名/

↓カテゴリ名でソートされているか？を確認する。

私の場合は、https://k-stone.click/category/it/

 

見た目を整えるフェーズへ

CSSで一覧デザインを整える

↓style.css を開いて編集

nano style.css

↓一覧ページ用のCSSに下線内を最後に追記

「壊したら怖い…」というときは、
今の style.css を 一回コピーしてバックアップ にしてから触るのもあり。

cp style.css style.css.backup-$(date +%Y%m%d-%H%M)

 

✅ nano の Undo（ひとつ前に戻る）
Alt + U
🔁 Redo（やっぱり戻したやつをやり直す）
Alt + E

1行づつけすときは、

Ctrl+K

/* ========================================
Archive Page Layout (Post List)
======================================== */

.archive {
max-width: 960px;
margin: 0 auto;
padding: 40px 16px;
}

/* Heading */
.archive-header {
margin-bottom: 24px;
}

.archive-title {
font-size: 1.8rem;
margin: 0 0 8px;
}

.archive-description {
color: #555;
font-size: 0.9rem;
}

/* Card List Wrapper */
.archive-post-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}

/* Each Card */
.archive-post-item {
background: #ffffff;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.archive-post-link {
display: block;
text-decoration: none;
color: inherit;
}

/* Thumbnail */
.archive-post-thumb img {
display: block;
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
}

/* Card Body */
.archive-post-body {
padding: 12px 14px 16px;
}

.archive-post-title {
font-size: 1.1rem;
margin: 0 0 6px;
}

.archive-post-date {
display: block;
font-size: 0.8rem;
color: #777;
margin-bottom: 8px;
}

.archive-post-excerpt {
font-size: 0.9rem;
line-height: 1.6;
}

/* Hover Effect */
.archive-post-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Pagination */
.archive-pagination {
margin-top: 32px;
text-align: center;
}

.archive-pagination .page-numbers {
display: inline-block;
margin: 0 4px;
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #ddd;
font-size: 0.9rem;
}

.archive-pagination .page-numbers.current {
background: #333;
color: #fff;
border-color: #333;
}

/* Responsive Layout for Small Screens */
@media (max-width: 600px) {
.archive {
max-width: 100%;
padding: 24px 12px;
}

.archive-post-list {
grid-template-columns: 1fr;
gap: 16px;
}
}

↓✅ CSSでカードレイアウト（2カラム）実装

▼ style.css が反映されない場合のチェックポイント

もし archive.php を作って CSS を書いたのに反映されない場合は、
functions.php に style.css を読み込むコードが必要

function my_original_theme_enqueue_styles() {
wp_enqueue_style(
‘my-original-theme-style’,
get_stylesheet_uri(),
[],
‘1.0.0’
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_original_theme_enqueue_styles’ );

また、style.css が反映されない場合、多くは wp_enqueue_style が無い ことが原因。

<span style=”color:red”>/**
* Load main stylesheet
*/
function my_original_theme_enqueue_styles() {
wp_enqueue_style(
‘my-original-theme-style’,
get_stylesheet_uri(),
[],
‘1.0.0’
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_original_theme_enqueue_styles’ );</span>

🟥【追記：style.css が反映されないときのチェックリスト】

  • テーマのヘッダーコメントが崩れていないか
  • functions.php に wp_enqueue_style があるか
  • ブラウザキャッシュを削除したか
    （プライベートモードで更新すると反映されることが多い）
②single.php を整える
→ 記事の読みやすさが大幅UP

以下にする。

<header>
タイトル
日付
カテゴリ
</header>

アイキャッチ画像

<article class=”post-content”>
本文
</article>

<footer>
タグ
前後記事リンク
</footer>

↓single.php の編集

まずバックアップ取っておくと安心：

cp single.php single.php.bak-$(date +%Y%m%d-%H%M)

cp：copy（コピー）の意味
→ ファイルを複製する

single.php：コピー元（元ファイル）

single.php.bak-$(date +%Y%m%d-%H%M)：コピー先のファイル名

single.php.bak-：「バックアップですよ」という目印

$(date +%Y%m%d-%H%M)： シェルの”日付コマンド”を実行して、結果を文字として挿入する という意味

<?php get_header(); ?>

<main class=”single”>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<article <?php post_class(‘single-post’); ?>>

<!– POST HEADER –>
<header class=”single-header”>

<h1 class=”single-title”><?php the_title(); ?></h1>

<div class=”single-meta”>
<time class=”single-date” datetime=”<?php echo esc_attr( get_the_date(‘c’) ); ?>”>
<?php echo esc_html( get_the_date() ); ?>
</time>

<?php
$cats = get_the_category();
if ( $cats ) :
?>
<span class=”single-category”>
<?php echo esc_html( $cats[0]->name ); ?>
</span>
<?php endif; ?>
</div>

</header>

<!– FEATURED IMAGE –>
<?php if ( has_post_thumbnail() ) : ?>
<div class=”single-thumbnail”>
<?php the_post_thumbnail( ‘large’ ); ?>
</div>
<?php endif; ?>

<!– CONTENT –>
<div class=”single-content”>
<?php the_content(); ?>
</div>

<!– FOOTER –>
<footer class=”single-footer”>

<!– tags –>
<div class=”single-tags”>
<?php the_tags( ‘<span class=”tag”>’, ‘</span><span class=”tag”>’, ‘</span>’ ); ?>
</div>

<!– prev/next –>
<div class=”single-nav”>
<div class=”prev-post”><?php previous_post_link(); ?></div>
<div class=”next-post”><?php next_post_link(); ?></div>
</div>

</footer>

</article>

<?php endwhile; endif; ?>

</main>

<?php get_footer(); ?>

上の線内の意味は以下

部分 内容
single-header タイトル、日付、カテゴリ
single-thumbnail アイキャッチ画像
single-content 記事本文
single-tags タグ一覧
single-nav 前後記事リンク
post_class() WordPressが自動で post, category, tag などを付与

もとのバージョンとの変更点

1️⃣ 囲い方・クラス名の整理

2️⃣ メタ情報の中身

3️⃣ フッター部分（タグ＋前後記事ナビ）

 

③page.php を調整
→ 固定ページがスッキリわかりやすく

改善効果 内容
🎨 デザインがしやすい クラスがキレイに整理され、CSS が当てやすい
📱 レスポンシブ対応が楽 固定ページだけスマホ調整が可能
🏗 コードが美しい 構造が分かりやすく、あとで見返しても迷わない
🔍 SEO にも良い 意味のある HTML 構造になる
🔧 拡張しやすい 独自デザインに簡単に成長させられる

↓page.phpの編集

nano page.php

<?php get_header(); ?>

<main class=”page”>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<article <?php post_class(‘page-post’); ?>>

<!– PAGE HEADER –>
<header class=”page-header”>
<h1 class=”page-title”><?php the_title(); ?></h1>
</header>

<!– CONTENT –>
<div class=”page-content”>
<?php the_content(); ?>
</div>

<!– Optional: ページの更新日を表示したければここに追加 –>
<!–
<footer class=”page-footer”>
<p class=”page-updated”>最終更新日：<?php the_modified_date(); ?></p>
</footer>
–>

</article>

<?php endwhile; endif; ?>

</main>

<?php get_footer(); ?>

CSSもあてなおした。←ここは実はよく理解していない。

 

④front-page.php を強化
→ サイト全体の印象UP

ここはChatGPTであまり、うまくいっていない。

<?php get_header(); ?>

<main class=”front-page”>

<!– Hero section –>
<section class=”front-hero”>
<h1 class=”front-hero-title”>K_StoneのPAGE</h1>
<p class=”front-hero-lead”>
家庭菜園とIT学習の記録サイト。AWS / Docker / WordPress / AI アプリのメモを残しています。
</p>
</section>

<!– Latest posts section –>
<section class=”front-latest”>
<h2 class=”front-latest-title”>最新の投稿</h2>

<?php
$front_query = new WP_Query( array(
‘post_type’ => ‘post’,
‘posts_per_page’ => 3,
) );

if ( $front_query->have_posts() ) : ?>
<div class=”archive-post-list”>
<?php while ( $front_query->have_posts() ) : $front_query->the_post(); ?>
<article <?php post_class( ‘archive-post-item’ ); ?>>
<a href=”<?php the_permalink(); ?>” class=”archive-post-link”>

<?php if ( has_post_thumbnail() ) : ?>
<div class=”archive-post-thumb”>
<?php the_post_thumbnail( ‘medium’ ); ?>
</div>
<?php endif; ?>

<div class=”archive-post-body”>
<h3 class=”archive-post-title”><?php the_title(); ?></h3>

<time class=”archive-post-date” datetime=”<?php echo esc_attr( get_the_date( ‘c’ ) ); ?>”>
<?php echo esc_html( get_the_date() ); ?>
</time>

<div class=”archive-post-excerpt”>
<?php the_excerpt(); ?>
</div>
</div>

</a>
</article>
<?php endwhile; ?>
</div>
<?php else : ?>
<p>まだ投稿がありません。</p>
<?php endif;

wp_reset_postdata();
?>
</section>

</main>

<?php get_footer(); ?>

CSSもあてた

/* Front page layout */

.front-page {
max-width: 960px;
margin: 0 auto;
padding: 32px 16px 48px;
}

.front-hero {
margin-bottom: 32px;
padding: 24px 20px;
background: #f5f7ff;
border-radius: 8px;
}

.front-hero-title {
margin: 0 0 8px;
font-size: 2.1rem;
}

.front-hero-lead {
margin: 0;
font-size: 1rem;
line-height: 1.7;
}

.front-latest-title {
font-size: 1.4rem;
margin: 0 0 16px;
}