template-parts機能を利用したテーマ開発体制

自社の制作チーム向けに、WordPressテーマの構造を「テンプレートパーツ」単位で開発する体制を企画・整備しました。
1ページを構成する各セクションをパーツ化し、引数によってテキストや画像、レイアウトを柔軟に切り替えられる仕組みです。

① 開発体制を見直したきっかけ

従来の自社WordPressテーマは、各開発者がテーマ単位で開発を行っていたため、

お客様の希望テーマであっても、ご要望に沿う機能やセクションが実装されていない。
他テーマで実装されている機能やセクションを流用したくても、スタイルの影響範囲や動作を読めない。

という問題があり、案件のたびにイチからの開発の方が早くて安全という判断を招いてしまっていたことがきっかけでした。

② 取り組み内容

パーツのモジュール化：メインビジュアルやグローバルナビゲーション、コンテンツブロックなどを再利用可能なパーツに分割。
引数によるカスタマイズ：表示・非表示やテキスト、ボタンなどを $args で制御。
専用のSCSS / JS管理：パーツ単位でスタイルとスクリプトを分離して、パッケージ化。
FLOCSS＋独自レイヤー設計：template-partsレイヤを追加し、CSSの衝突を防止。

カスタマイズを簡単にする

パーツのカスタマイズは、呼び出し時の引数で行うように設計しました。
Webサイト制作において、コンテンツに求められる機能や構造はある程度の規則性があります。
メインビジュアルのコンテンツでは、

スライドショー
動画

を切り替え可能にするなどです。
それらのパターンをパーツに持たせておくことで簡単にカスタマイズできるようになっています。

<?php // 一つ目のコンテンツ（メインビジュアル）パーツの読み込み
    $args = [ // カスタマイズ可能な部分をあらかじめ決めておき、引数でカスタマイズする
        'displaySlider' => false,
        'slideImg' => 'top_slider1.jpg, top_slider2.jpg, top_slider3.jpg',
        'slideOverlay' => true,
        'videoSources' => [
            'default' => 'shinkawadaisei_pc_alt.mp4',
            'medium' => 'shinkawadaisei_pc_alt.mp4',
            'small' => 'shinkawadaisei_sp_alt.mp4',
        ],
        'catchContentType' => 'text',
        'catchContent' => '材木屋の造る家',
        'displaySiteTitle' => true,
        'displayLogo' => true,
        'logoContent' => 'daisei_03.png',
    ];
    get_template_part('template-parts/main-visual-y14', null, $args);
?>

パーツの流用性と資産化

たとえば、投稿記事の一覧を表示するようなパーツを

デザイン重視
機能重視
カスタムフィールド対応

などバリエーションを用意して開発することで、お客様の要望に合わせてパーツを流用することができます。

③ 新しい開発体制によって得られたメリット

特に下記のような大きな効果がありました。

お客様の要望に応えつつ、イチから機能やセクションを開発する必要がなくなった。
パーツ単位の管理により保守性が向上。
流行のデザイン研究や開発者の技術力向上に充てられる時間が増えた。

④ 新たに生まれた課題

この仕組みは、保守性や再利用性、時間的コスト価値を高めた一方で

template-parts機能とWordPress PHPに未習熟な人には扱いづらい

という課題を生み出しました。
これを解決するため、のちにパーツをデータとして管理できる「パーツマネージャープラグイン」開発へと発展しています。

WordPressオリジナルテーマ開発（template-parts構造）