【WordPress】共通パーツはコンポーネントを作成しよう！

皆さんは、WordPressで共通パーツはどのように管理していますか？

BEMやOOCSSなどのCSS設計で、静的にパターン別で管理している人も多いかと思います。
CSS設計は奥が深く、ルールを細かく決めていないと、後から修正・運用をする際や、他のエンジニアが触る際にめちゃくちゃ苦労します😭

今回の内容

WordPressでは、動的にサイトを作ることができるので、以下の2つを解説しています。
①テンプレートで分ける方法
②コンポーネントを作成する方法

まあどっちも一緒ですね。笑

この記事では、
テンプレート→使い回せる静的ファイル
コンポーネント→テキストやクラス名などを、引数を渡して動的に変更可能な部品
と定義させていただきます！

テンプレートで分ける方法

同じ内容のものを繰り返し使えるので、使っている人も多いかもしれません。
オリジナルテーマ配下に、templatesフォルダを作成します。
その中に、foo-list.phpを作成します。

_foo-list.php

<?php
$args = array(
  'post_type' => 'your-post-type',
  'posts_per_page' => '-1',
);
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()) : ?>
  <ul>
    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
      <li>
        <a href="<?php the_permalink(); ?>">
          <p><img src="<?php the_post_thumbnail(); ?>" alt=<?php the_title(); ?> /></p>
          <p><?php the_title(); ?></p>
        </a>
      </li>
    <?php endwhile; ?>
  </ul>
  <?php wp_reset_postdata(); ?>
<?php endif; ?>

上記では、サブクエリでカスタム投稿タイプを取得し、一覧として出力するものを想定しています。
クラス名をつけてスタイルを当てれば、類似箇所で使い回すことが可能です。

呼び出す際は、WordPressで用意されている関数を使います。

_{front-page.php}

<?php get_template_part('templates/foo-list'); ?>

とても簡単なので、内容が変わらない場合は上記の方法でテンプレートフォルダ内に、格納して呼び出しましょう！

コンポーネントを作成する方法

静的データではなく、ページや場所によってスタイルや文字を変えたい場合も多いかと思います。
今回は、一番よく使う「ボタン」コンポーネントを作成していきます！

例えば以下のようなイメージですね。

基本的には、①で解説した方法と同じですが、予めコンポーネントファイルの設定が必要です。
templatesフォルダ配下に、button.php を作成します。

_button.php

<div class="common-button common-button-<?php print $args['color']  ?>">
  <a href=<?php echo esc_url(home_url($args['link'])) ?> class="common-button__link common-button-<?php print $args['color'] ?>__link">
    <?php echo $args['text'] ?>
  </a>
</div>

上記を簡単に解説すると、呼び出し先で使いたい情報を3つに分けて連想配列として管理します。
①クラス名（今回は色でクラス名を分ける）
②各リンク先
③テキスト

これで呼び出す際に、連想配列を渡すことでbutton.phpに情報が入力されて返却されます。
呼び出す際は、先ほどの関数に連想配列を引数として渡すだけになります。

_{front-page.php}

<?php

// 会社概要
$args = ['color' => 'white', 'link' => 'company', 'text' => '会社概要'];
get_template_part("templates/button", null, $args);

// 採用情報
$args = ['color' => 'black', 'link' => 'recruit', 'text' => '採用情報'];
get_template_part("templates/button", null, $args)

おわり

上記のコンポーネントをうまく活用すれば、記事の取得件数などもページごとに変えることができます！
get_template_partはかなり使えるので、ぜひ使って効率と保守性を上げていきましょう🐕