2026年4月30日

WordPress

CPT UI + ACF でカスタム投稿を運用するなら覚えておきたい便利ショートコード 5 選

CPT UI + ACF でカスタム投稿を運用するなら覚えておきたい便利ショートコード 5 選

WordPress は本来ブログシステムとして生まれたが、企業サイトの運用では「ブログ」ではなく「実績」「サービス」「スタッフ」といった独自の情報を構造的に管理したいというニーズが多い。この要件を満たすのがカスタム投稿タイプ + カスタムフィールドの組み合わせだ。
テーマ側で直接 register_post_type() を書く方法もあるが、GUI で完結させたいなら以下2つのプラグインが定番中の定番。

プラグイン紹介

Custom Post Type UI(CPT UI)

カスタム投稿タイプとカスタムタクソノミーを GUI で登録できるプラグイン。「実績」「お知らせ」「スタッフ紹介」などを、コードを書かずに追加できる。スラッグ、階層化の有無、アーカイブ対応など細かな設定も画面上で完結。
公式:https://wordpress.org/plugins/custom-post-type-ui/

Advanced Custom Fields(ACF)

投稿画面に独自の入力欄を追加できるプラグイン。テキスト、画像、URL、日付、繰り返しフィールド(Repeater)など豊富なフィールドタイプを持ち、「この投稿タイプだけ」「このページだけ」といった表示条件も細かく設定可能。無料版でも十分実用的で、Pro 版では Repeater や Flexible Content などが追加される。
公式:https://www.advancedcustomfields.com/

この2つで、記事管理を企業ニーズに沿った形にカスタマイズできる。ただ、実装だけで終わらせず、ACF に保存した値をページ内で柔軟に呼び出せる仕組みを作っておくと、運用が一気に楽になる。それがショートコード化だ。

以下、functions.php(子テーマ推奨)に追記して使える便利ショートコードを5つ紹介する。

ACF の任意フィールド値を取得する汎用ショートコード

一番使用頻度が高い基本形。フィールド名を指定して値を取り出す。

/**
 * 現在の投稿の ACF フィールド値を取得
 * 使い方: [acf_field name='field_name']
 */
add_shortcode('acf_field', function($atts) {
    $atts = shortcode_atts([
        'name' => '',
    ], $atts);

    if (empty($atts['name'])) {
        return '';
    }

    $value = get_field($atts['name']);
    if (!$value) {
        return '';
    }

    return esc_html($value);
});

使い方

[acf_field name='client_name']
[acf_field name='project_year']
テキストブロック内でもパンくずの一部としても使える。1つ作っておけば、フィールドが増えても同じショートコードで対応可能なのがポイント。

現在の投稿のタクソノミー(ターム)名を取得するショートコード

カスタム投稿にカスタムタクソノミーを紐付けると、ターム名(カテゴリー名)を表示したい場面が頻繁に出てくる。パンくず、詳細ページ、カード UI など。

/**
 * 現在の投稿に紐づくタームの「名前」を取得
 * 使い方: [term_name tax='taxonomy_slug' link='yes']
 */
add_shortcode('term_name', function($atts) {
    $atts = shortcode_atts([
        'tax'  => '',
        'link' => 'no',
    ], $atts);

    if (empty($atts['tax'])) {
        return '';
    }

    $terms = get_the_terms(get_the_ID(), $atts['tax']);
    if (!$terms || is_wp_error($terms)) {
        return '';
    }

    $term = $terms[0];

    if ($atts['link'] === 'yes') {
        return '<a href="' . esc_url(get_term_link($term)) . '">' . esc_html($term->name) . '</a>';
    }

    return esc_html($term->name);
});

使い方

[term_name tax='projects_category']
[term_name tax='projects_category' link='yes']
link='yes' を付ければカテゴリーアーカイブページへのリンク付き。パンくずリストを自前で組む際に便利。

ターム slug を取得するショートコード(CSS 切り替え用)

カテゴリーごとに CSS で見た目を変えたいとき、たとえばカテゴリーに合わせた背景画像、アイコン、色など…
slug をそのまま class 名として使える形で取り出せると強い。

/**
 * 現在の投稿に紐づくタームの slug を取得
 * 使い方: [term_slug tax='taxonomy_slug']
 */
add_shortcode('term_slug', function($atts) {
    $atts = shortcode_atts([
        'tax' => '',
    ], $atts);

    if (empty($atts['tax'])) {
        return '';
    }

    $terms = get_the_terms(get_the_ID(), $atts['tax']);
    if (!$terms || is_wp_error($terms)) {
        return '';
    }

    return esc_attr($terms[0]->slug);
});

使い方(HTMLで記述)

<div class="card cat-[term_slug tax='projects_category']">
  ...
</div>
これで .cat-[カテゴリースラッグ01]、.cat-[カテゴリースラッグ02] (例えばカテゴリースラッグがdogなら.cat-dog)のような CSS でカテゴリーごとに違うスタイルを当てることができる。アイコンの出し分け、色分け、背景画像の切り替えなどに使える万能型。

アーカイブページ自身の ターム slug を取得するショートコード

上の【ターム slug を取得するショートコード】は「個別投稿のターム」を取るが、カテゴリーアーカイブページそのもの(/taxonomy/term/)で「いま何のタームの一覧を表示しているか」を取りたいときは別のショートコードが必要。
WordPressのテーマの多くはカテゴリーのアーカイブを生成する機能が標準搭載されているものが覆い。ただし、生成されたページは、ユーザーがクリックした任意のカテゴリー。コード側でそれに合わせてCSSを管理するにはこれが便利。

/**
 * 現在表示中のアーカイブページのターム slug を取得
 * 使い方: [current_term_slug]
 */
add_shortcode('current_term_slug', function() {
    $term = get_queried_object();
    if ($term && isset($term->slug)) {
        return esc_attr($term->slug);
    }
    return '';
});

使い方(HTMLで記述)

<div class="archive-header cat-[current_term_slug]">
  <h1>カテゴリー別実績</h1>
</div>
カテゴリーアーカイブページのテンプレートに置いておけば、ページごとに cat-[カテゴリースラッグ01]、cat-[カテゴリースラッグ01] (例えばカテゴリースラッグがdogなら.cat-dog)のようなクラスが付与される。アーカイブページを1つのテンプレートで運用しながら、見た目だけカテゴリーごとに変えるのに有効。

ACF Textarea の改行を保持して出力するショートコード

ACF の Textarea フィールドに改行付きで書いた内容を、HTML でも改行を保持したまま出したい場合。

/**
 * ACF Textarea フィールドを、改行を <br> 保持で出力
 * 使い方: [acf_field_nl2br name='field_name']
 */
add_shortcode('acf_field_nl2br', function($atts) {
    $atts = shortcode_atts([
        'name' => '',
    ], $atts);

    if (empty($atts['name'])) {
        return '';
    }

    $value = get_field($atts['name']);
    if (!$value) {
        return '';
    }

    return nl2br(esc_html($value));
});

使い方

[acf_field_nl2br name='project_description']
ACF のフィールド設定で「New Lines」を No Formatting にして生のテキストを保存し、表示側でこのショートコードを通せば、改行が
に変換されてレイアウトが崩れない。住所、説明文、箇条書きの代用など、意外と使いどころが多い。

まとめ

上記5つを functions.php に入れておけば、投稿編集画面 → ACF 入力 → 公開ページで好きな位置にショートコードで呼び出しという運用がすぐに回る。

[acf_field name='...'] ← 基本のフィールド値取得
[term_name tax='...' link='yes'] ← ターム名表示(リンク付きも可)
[term_slug tax='...'] ← ターム slug で CSS 切り替え
[current_term_slug] ← アーカイブページ自身の slug
[acf_field_nl2br name='...'] ← 改行保持のテキスト出力

CPT UI でカスタム投稿タイプを、ACF でフィールドを設計したら、この5つをテンプレートに仕込んでおくだけで、かなり表現の幅が広がる。

テーマが Avada であれ、Cocoon であれ、自作テーマであれ、ショートコードは WordPress コアの機能なのでどこでも動くのが強み。プラグインの選択は好みでよいが、『CPT UI で箱を作り、ACF で入力欄を整え、ショートコードで表示する』という三点セットを押さえておけば、企業サイトの「CMS として使う WordPress」の要件はほぼカバーできる。
一度 functions.php に書き込めば資産になる。ぜひ手元の環境に入れて試してみてほしい。

Categories: Tips, WEBPublished On: 2026年4月 30日By
DTP Tips
  • テキストオーバーフローを自動で解消するスクリプト

    2026年4月24日

  • Excelから書き出したPDFをillustratorでベクター化した際に起こる色濁りを一発正規化!

    2026年3月2日

  • Adobe illustratorに配置した画像を同名のPDFに一括置き換え!

    2026年2月26日

  • バラバラのテキストをつないで1つに!

    2026年2月4日

  • Adobe illustrator Beta版「ターンテーブル」を使ってみた!

    2025年11月6日

  • Illustratorでつくる文字の囲み枠

    2024年8月22日

  • ドキュメントプロファイルを使って
    新規作業のストレスを軽減しよう

    2024年8月19日

WEB Tips
  • CPT UI + ACF でカスタム投稿を運用するなら覚えておきたい便利ショートコード 5 選

    2026年4月30日

  • Webページを丸ごとスクショできる便利ツール「FireShot」のご紹介

    2026年4月7日

  • HTMLベースの小規模サイトのCMSはヘッドレスCMSが主流に!?

    2026年4月4日

  • モヤッとする、あれ。JS+CSSで「項目間だけ線」をスッキリ解決!

    2025年8月8日

  • WordPressサイトをGoogle検索から除外したい?
    「robots.txt」の正しい活用方法

    2025年7月3日

  • WordPressで記事を投稿してみよう!

    2025年6月26日

  • WordPressアップデートしてますか?

    2024年8月9日

取り組み
  • 小学校低学年向け夏休みカレンダー2025を配付します

    2025年6月20日