PHPの配列を活用してWordPressのコーディング作業を効率化しよう！
こんにちは！Webコーダーのこんかいです！
WordPressの固定ページでLPを実装して欲しいと頼まれる時ありますよね！
特に繰り返しの要素が多いランディングページでは、
コードがどんどん膨らんでいってしまい管理が大変になることも…。
今回はそんな悩みを解決する、コーディングを速くする方法をご紹介します！
PHPの配列を使って、繰り返しコンテンツをスッキリと実装する方法をご紹介しますので、ぜひ最後までお読みください！
この記事の目次
- 4.コードの解説
- 5-1.メリット①：入力作業が楽
- 5-2.メリット②：更新＆追加作業が楽
- 6.まとめ
PHPの配列は『繰り返しコンテンツ』で使用すると便利
PHPの配列機能は、FAQやリストアイテムのような繰り返しのコンテンツの際に特に威力を発揮します。例えば以下のような場面で活用できます：
- 特典やサービス内容の一覧
- よくある質問（FAQ）セクション
- スタッフ紹介や実績紹介
- プランや料金表
今回も『デイトラ for Students』のデザインを例に、
配列化してコードをスッキリさせる方法をご紹介します！
配列を使わない場合のコード
まずは配列を使わない状態でコーディングした場合を見てみましょう。
<ul class="p-college__list">
<li class="p-college__list-item">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/college-item1.webp" alt="いつでも楽しく学習オンライン自習室の画像" class="p-college__list-item-img" width="242" height="242" loading="lazy" />
<div class="p-college__list-item-label">
<span class="p-college__list-item-label--ja">特典</span>
<span class="p-college__list-item-label--no" lang="en">01</span>
</div>
<h3 class="p-college__list-item-ttl">いつでも楽しく学習<br />オンライン自習室</h3>
<p class="p-college__list-item-sentence">24時間いつでも参加OK！他の学生と交流しながら、モチベーションを高く保って学習できるオンライン自習室！</p>
</li>
<li class="p-college__list-item">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/college-item2.webp" alt="リアルでも交流！オフラインイベントの画像" class="p-college__list-item-img" width="242" height="242" loading="lazy" />
<div class="p-college__list-item-label">
<span class="p-college__list-item-label--ja">特典</span>
<span class="p-college__list-item-label--no" lang="en">02</span>
</div>
<h3 class="p-college__list-item-ttl">リアルでも交流！<br />オフラインイベント</h3>
<p class="p-college__list-item-sentence">定期開催の交流会で、他の学生と直接会って情報交換や仲間作りができる！</p>
</li>
<li class="p-college__list-item">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/college-item3.webp" alt="チームを組んでプロジェクトに挑戦！の画像" class="p-college__list-item-img" width="242" height="242" loading="lazy" />
<div class="p-college__list-item-label">
<span class="p-college__list-item-label--ja">特典</span>
<span class="p-college__list-item-label--no" lang="en">03</span>
</div>
<h3 class="p-college__list-item-ttl">チームを組んで<br />プロジェクトに挑戦！</h3>
<p class="p-college__list-item-sentence">Web制作、デザイン、動画編集…自分にない様々なスキルを持つ仲間と出会い、チームを組んでプロジェクトに挑戦できる！</p>
</li>
<li class="p-college__list-item">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/college-item4.webp" alt="就活や起業に関するセミナー受け放題！の画像" class="p-college__list-item-img" width="242" height="242" loading="lazy" />
<div class="p-college__list-item-label">
<span class="p-college__list-item-label--ja">特典</span>
<span class="p-college__list-item-label--no" lang="en">04</span>
</div>
<h3 class="p-college__list-item-ttl">就活や起業に関するセミナー受け放題！</h3>
<p class="p-college__list-item-sentence">起業家やキャリアアドバイザーによるセミナーで、就活対策や起業ノウハウを学べる！</p>
</li>
</ul>この例だと4つのアイテムしかないので、まだなんとか管理できそうに見えますが、これがもし10個とかに増えると…コードの山に埋もれてしまいます。修正が入ったときも該当箇所を探すのが大変ですよね。
PHP配列を使ったコード
では、同じ内容をPHP配列を利用して実装してみましょう！
<?php
/**
* ▼ ① 編集が必要なのはこの配列だけ ▼
* ────────────────────────
* ・br タグ OK（wp_kses_post で出力）
* ・画像ファイルは college-item{連番}.webp で用意しておく
*/
$college_items = [
[
'title' => 'いつでも楽しく学習<br />オンライン自習室',
'sentence' => '24時間いつでも参加OK！他の学生と交流しながら、モチベーションを高く保って学習できるオンライン自習室！',
],
[
'title' => 'リアルでも交流！<br />オフラインイベント',
'sentence' => '定期開催の交流会で、他の学生と直接会って情報交換や仲間作りができる！',
],
[
'title' => 'チームを組んで<br />プロジェクトに挑戦！',
'sentence' => 'Web制作、デザイン、動画編集…自分にない様々なスキルを持つ仲間と出会い、チームを組んでプロジェクトに挑戦できる！',
],
[
'title' => '就活や起業に関するセミナー受け放題！',
'sentence' => '起業家やキャリアアドバイザーによるセミナーで、就活対策や起業ノウハウを学べる！',
],
];
?>
<ul class="p-college__list">
<?php foreach ( $college_items as $i => $item ) : ?>
<?php
$index = $i + 1; // 1,2,3…
$img_uri = get_template_directory_uri() . '/assets/img/college-item' . $index . '.webp';
$alt = preg_replace( '/<br\s*\/?>/i', '', $item['title'] ) . 'の画像';
?>
<li class="p-college__list-item">
<img src="<?php echo esc_url($img_uri); ?>" alt="<?php echo esc_attr($alt); ?>" class="p-college__list-item-img" width="242" height="242" loading="lazy" />
<div class="p-college__list-item-label">
<span class="p-college__list-item-label--ja">特典</span>
<span class="p-college__list-item-label--no" lang="en">
<?php echo esc_html( sprintf( '%02d', $index ) ); ?>
</span>
</div>
<h3 class="p-college__list-item-ttl">
<?php echo wp_kses_post( $item['title'] ); ?>
</h3>
<p class="p-college__list-item-sentence">
<?php echo esc_html( $item['sentence'] ); ?>
</p>
</li>
<?php endforeach; ?>
</ul>すごくスッキリしましたね！
コードの解説
このコードで何をしているのか簡単に解説します：
まず、$college_itemsという配列にすべてのデータを集約しています。
各項目は配列の中に「title」と「sentence」というキーで保存されています。
$college_items = [
[
'title' => 'タイトル',
'sentence' => '説明文',
]
];
?>次にforeachループを使って、配列の各要素を順番に処理しています
✅$iには配列のインデックス（0から始まる）が入ります✅$itemには各特典の情報（titleとsentence）が入ります
画像のパスは$index（1から始まる）を使って動的に生成
alt属性用のテキストは、titleからbrタグを取り除いたものを使用しています
番号表示はsprintf('%02d', $index)で01, 02…のように2桁の数字にフォーマットしています
<?php foreach ($college_items as $i => $item) : ?>
<?php
$index = $i + 1;
$img_uri = get_template_directory_uri() . '/assets/img/college-item' . $index . '.webp';
$alt = preg_replace('/<br\s*\/?>/i', '', $item['title']) . 'の画像';
?>
<?php endforeach; ?>それぞれの出力時には適切なエスケープ処理（esc_url, esc_attr, esc_html, wp_kses_post）を行っています
<li class="p-college__list-item">
<img src="<?php echo esc_url($img_uri); ?>" alt="<?php echo esc_attr($alt); ?>" class="p-college__list-item-img" width="242" height="242" loading="lazy" />
<div class="p-college__list-item-label">
<span class="p-college__list-item-label--ja">特典</span>
<span class="p-college__list-item-label--no" lang="en">
<?php echo esc_html(sprintf('%02d', $index)); ?>
</span>
</div>
<h3 class="p-college__list-item-ttl">
<?php echo wp_kses_post($item['title']); ?>
</h3>
<p class="p-college__list-item-sentence">
<?php echo esc_html($item['sentence']); ?>
</p>
</li>PHP配列を利用するメリット
メリット①：入力作業が楽
入力欄が一つにまとまるので、かなり入力作業が効率化されます。
配列にしないと、コードの海の中をさまよいながら入力する必要があるので超面倒です！
特に繰り返し要素が多いLPでは、差を実感できます
メリット②：更新＆追加作業が楽
LP制作では、途中で文言修正が入ることはよくありますよね。
配列を使えば、修正作業もかなり楽になります。
該当箇所を探して直接コードを書き換えると、意図しないミスを引き起こしたり、違うところを修正してしまったりするリスクがあります。
配列なら修正箇所がまとまっているので、ミスを起こしづらい構成になっています。
さらに、新しい項目を追加したい場合も、配列に1項目増やすだけでOK！便利～！
メリット③：画像や数字をindexで自動的に変更できる
これが超便利なポイントです！
上記のコードでは、配列のインデックスを利用して画像ファイルのパスや連番を自動生成しています。手入力だと番号の入力ミスはつきものですが（私はこういうの大抵ミスります笑）、
配列で回したループの回数で自動管理してくれるので大変便利です。
まとめ
いかがでしたか？
PHPの配列を活用することで、WordPressのLPコーディングが格段に効率化できることがお分かりいただけたと思います。
特にクライアントからの修正依頼が多いプロジェクトでは、
このような工夫が作業時間の短縮と品質向上につながります。
配列を使った書き方に最初は慣れが必要かもしれませんが、
一度マスターすれば今後のコーディング作業がぐっと楽になるはずです。
ぜひ皆さんも次のWordPressコーディングで試してみてください！
最後まで読んでいただき、ありがとうございました！
この記事が「いいね！」と思ったら
ハートをタップ！
1
2
3
4
5
6
7
8
9
10
累計 10 いいね！
注目度急上昇中！人気記事！
良ければシェアお願いします！
記事情報
PHPの配列を活用してWordPressのコーディング作業を効率化しよう！
