【Custom Field Suite】プラグインを使ってカスタムフィールドを作る【WordPress】

一応プラグインがなくても編集画面右上の「…」→「設定」→「パネル」→「カスタムフィールドをクリック」で使うことはできます。

が、正直デフォルトのカスタムフィールドが使いづらい気がするのは自分だけでしょうか…。

というわけで色々とプラグインはありますが今回は「Custom Field Suite」というプラグインを使ってカスタムフィールドを作ってみようと思います。

1.カスタムフィールドを使うメリット

こばゆた

その前にカスタムフィールドを使うメリットについてです

などのメリットがあります。

2.Custom Field Suiteをインストールする

こばゆた

WordPressのダッシュボードから「プラグイン」→「今すぐインストール」→ 「有効化」します。

3.カスタムフィールドを作成する

インストールが終わると「設定」→ 「Custom Field Suite」をクリックで作成画面に進めます。

ここまで作成したら右上にある「公開」をクリックします。

4.記事の作成を作成する

こばゆた

カスタムフィールドの準備ができたので次は記事の作成をします。

記事編集画面を見てみると、下の方に新しく編集できるところができているはずです。

以下のようにテキストを入力したりファイルを添付します。

5.タグを埋め込む

こばゆた

表示させたいところにタグを埋め込みます。

Custom Field Suiteでは以下のような独自のタグを埋め込んで呼び出します。

<?php echo CFS()->get('キー名');?>

2024年1月追記です
上のコードでは出力されなかったのですが以下のコードで出力できました！

<?php echo get_post_meta($post->ID, 'キー名', true); ?>

ここでの「キー名」というのは先程カスタムフィールドを作成した時に設定したものを使います。

これを埋め込みたいところと入れ替えます。

<h2><?php echo CFS()->get('company_ttl');?></h2>
<p><?php echo CFS()->get('company_text');?></p>
<div class="image_container">
  <div class="company_image_wrapper">
    <img src="<?php echo CFS()->get('company_image');?>" alt="会社写真">
  </div>
  <div class="company_image_wrapper">
    <img src="<?php echo CFS()->get('company_image_2');?>" alt="会社写真B">
  </div>
  <div class="company_image_wrapper">
    <img src="<?php echo CFS()->get('company_image_3');?>" alt="会社写真C">
  </div>
</div>

最後にCSSで整えて完成です。

おまけ

クリックすると拡大できる様にできます。

あんまり参考になりません…

手順１

カスタムフィールドのメニュー作成画面に戻って、画像ファイルの返り値を「添付ファイルID」にします。

手順２

画像を入れたいところに以下のコードを入れます。

<?php $attachment_id = $cfs->get('image');
  $full = wp_get_attachment_image_src( $attachment_id, 'full' );
?>

<a href="<?php echo $full[0];?>" rel="lightbox">
  <?php  $attachment_id=CFS()->get('image',$post->ID);
  echo wp_get_attachment_image($attachment_id,'thumwidth');?>
</a>

※1行目と6行目の”image”となっているやつをご自身で設定したキー名に変更して使用してください

こばゆた

「Easy FancyBox」などのプラグインを使った方が簡単かもしれません💦

6.まとめ

<?php echo CFS()->get('キー名');?>