• HOME > 
  • WordPress > 
  • ワードプレスのカスタムフィールドの使い方【表示されない時の対...

ワードプレスのカスタムフィールドの使い方【表示されない時の対処法】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

カスタムフィールドとは?

カスタムフィールドとは、プラグインなどで利用されることが多いページに任意の情報を追加できる入力フォームです。

入力フォームを活用することで、ページの作成をスムーズに行うことができます。

カスタムフィールドの例

フォームの項目を埋めていくだけでページができあがるので、ブロックなどワードプレスのエディターの使い方にも慣れないような方に作成を依頼する時や、同じレイアウトのページを量産する時に役立ちます。

カスタムフィールドが表示されないときは?

カスタムフィールドは固定ページエディターの下部に存在しているのですが、デフォルトの状態ではカスタムフィールドは表示されていません。

表示させる時は、エディター右上の「・・・」(オプション)を開きます。(WordPress5.9の場合)

エディター右上の「・・・」

オプション項目の一番下にある「設定」をクリックします。

「設定」をクリック

設定ウィンドウが開くので、「パネル」メニューの中の「カスタムフィールド」をオンにします。

設定ウィンドウ

これでカスタムフィールドが表示されるようになりました。

カスタムフィールドが表示される

カスタムフィールドの使い方

ここからは実際にカスタムフィールドを使って内容を入力し、ページに表示させる手順を説明します。

なお、カスタムフィールドに入力した内容をページ上に表示させるためにはPHPファイルを編集する必要があります。コードを追記するだけですが、自由にカスタマイズするにはワードプレスのテーマファイルの仕組みを理解している必要があります。

新しいカスタムフィールドを追加する

新しいカスタムフィールドを使用したい時はカスタムフィールドの「新規追加」をクリックします。

新規追加

任意の名前を入力し「カスタムフィールドを追加」をクリックします。

カスタムフィールドを追加

値は後から入力することもできます。

カスタムフィールドに入力する

一度追加したカスタムフィールドは投稿ページと固定ページのどちらでも利用することができます。

カスタムフィールドのプルダウンには利用可能なカスタムフィールドが表示されますのでそのページで使いたいものを選択します。

カスタムフィールドを選択

値を入力したら「カスタムフィールドを追加」を押します。

カスタムフィールドを選択

1ページで複数のカスタムフィールドを使うこともできますし、値は後から変更も可能です。入力したり変更したら「更新」をクリックして保存します。

カスタムフィールドを選択

使用しないカスタムフィールドは「削除」できます。(そのページから削除されるだけで、カスタムフィールド項目自体が削除されるわけではありません。)

カスタムフィールドをページに反映する

カスタムフィールドは追加したり入力しただけではページ上に反映されません。

カスタムフィールドの内容をページに表示するためには、専用の関数(テンプレートタグ)をテーマファイルに追記する必要があります。

テーマファイルの編集はサイトに予期せぬ不具合をもたらす恐れがあります。必ずバックアップを取ったうえで、あくまで自己責任で行って下さい。

the_meta()

そのページで入力されているカスタムフィールドの値を全て取得する場合はthe_meta()を使います。

the_metaの書き方

以下のコードをsingle.phpやpage.phpなどのページテンプレートファイルに追記すると、リスト形式で表示されます。

single.php

<?php the_meta(); ?>

プレビュー

the_metaの表示例

post_custom()

カスタムフィールドの内容を個別に取得したい場合はpost_custom()を使います。()の中にカスタムフィールド名を記載することで、そのフィールドの入力値を取得することができます。

post_customの書き方

取得した内容を表示するためにはphpのechoと組み合わせる必要があるので、実際には次のようなコードをテーマファイルの表示させたい部分に追記します。

PHP

<?php echo post_custom("カスタムフィールド名"); ?>

今回は投稿ページをカスタムフィールドの内容を反映できるようにカスタマイズします。

一度テーマファイルでカスタムフィールドを取り入れたレイアウトを作成してしまえば、あとはページごとにカスタムフィールドの項目を入力していくだけで同じレイアウトのページを作り上げることができます。

テーマファイルの編集は、テーマエディターで行います。

テーマエディター

投稿ページのテンプレートは「single.php」なのでこちらを開いて編集します。

single.php

今回は次のようにtableタグで表を作り、その中にカスタムフィールドの内容を表示させました。

single.php

<table class="myCustomField">
    <tr>
        <td rowspan="3"><?php the_post_thumbnail();//アイキャッチ ?></td>
        <th>商品名</th><td colspan="3"><?php the_title();//ページタイトル ?></td>
    </tr>
    <tr><th>産地</th><td><?php echo post_custom("産地"); ?></td><th>個数</th><td><?php echo post_custom("個数"); ?></td></tr>
    <tr><td colspan="4"><?php echo post_custom("商品説明"); ?></td></tr>
</table>

カスタムフィールドの入力例

カスタムフィールドの入力例

ページの表示例

カスタムフィールドの内容を表示

カスタムフィールドの内容を複製する

使用するカスタムフィールドはページごとに設定するため、新規ページを作る度に使用するカスタムフィールドを選択し、値を入力していかなくてはなりません。

カスタムフィールドがいくつもあったり、大量のページを作る際には非常に手間が掛かってしまいます。

そのような場合はページ複製プラグインを利用すればカスタムフィールドごとページをコピーすることができるので便利です。

リンク先のサムネイル
ワードプレスでページを複製する方法

ワードプレスで固定ページや投稿ページを複製したい場合にはプラグインを使います。クリックするだけでカテゴリーなどの情報を含めて、簡単にページを複製することができます。ここでは代表的な「Yoast Duplicate Post」の使い方について説明します...【もっと読む】

不要なカスタムフィールドを削除する

カスタムフィールドを利用していると、名前を間違えて作成してしまったり、作ったものの使わなくなってしまったカスタムフィールドが出てきます。

そのまま放置していても問題はありませんが、プルダウンに毎回表示されてしまうのでわずらわしく感じます。

不要なカスタムフィールドは削除したい所ですが、一度作成したカスタムフィールドは簡単には削除することはできません。

カスタムフィールドの削除には以下の2通りの方法があります。

  • データベースを開いて削除する
  • プラグインを使って削除する

データベースから削除する

カスタムフィールドを削除するためだけにわざわざプラグインをインストールするのは少しためらわれます。

データベースを操作できればカスタムフィールドはすぐに削除できます。

データベースの操作も間違えるとサイトのデータが失われるなど大きなエラーを起こす恐れがありますので、必ずバックアップをとった上で自己責任で行って下さい。

  1. phpMyAdminにログインします。
    phpMyAdminにログイン
  2. 左側のデータベース一覧の中から該当のサイトのデータベースを開きます。
    左側のデータベース一覧
  3. カスタムフィールドの情報は「wp_postmeta」というテーブルにあります。
    wp_postmeta
  4. 該当のカスタムフィールドの行を探して削除します。
    行を探して削除

プラグインを使って削除する

データベースの操作に不安を感じる方は、やはりプラグインを使う方法が確実です。

ここでは多くのサイトでも紹介されている「Delete Custom Fields」というプラグインの使い方を説明します。

DeleteCustomFields

プラグインの使用はサイトに予期せぬ不具合をもたらす恐れがあります。必ずバックアップをとり、自己責任でご使用ください。特にDelete Custom Fieldsはワードプレス5.9では動作しましたが10年以上更新されていませんので、今後も使用できるか保証はできないのでご了承下さい。

前述の通り、Delete Custom Fieldsは10年以上更新されていないため、公式プラグインにも関わらずプラグイン名で検索してもヒットしません。

作成者の名前で検索するとヒットしますので、検索ボックスに「sam margulies」と入力してください。

DeleteCustomFieldsの検索

インストールして有効化すると、ワードプレス管理画面左側のメニューの「ツール」の中に「Delete Custom Fields」という項目が追加されるのでクリックします。

ツールのDeleteCustomFields

プラグインページのプルダウンにカスタムフィールドが並んでいるので不要なものを選択して「完全に削除する」を押します。

DeleteCustomFieldsで削除

以上で削除は完了です。

DeleteCustomFieldsで削除完了

まとめ

カスタムフィールドを活用すれば効率よくページを作成することができます。商品説明ページを量産する必要があったり、ページの編集を委託する場合などは予めカスタムフィールドを用意しておけば入力漏れや既述の削除などによるエラーの予防策にもなります。

カスタムフィールドでプルダウンメニューを使うなど、カスタムフィールドの更なる活用を求める場合は「Advanced Custom Fields」というプラグインの導入をおすすめします。

関連する記事

サムネイル

ContactForm7でreCAPTCHAを設定する【安全……

2024年04月12日
ContactForm7で「安全でないメール設定が十分な防御策なく使われている」というエラーを解消するためにreCAPTCHAを設定した手順を紹介します。
サムネイル

WordPressでサイトマップページを作るプラグイン【WP……

2024年03月07日
サイトマップページを手作業で作ろとすると非常に手間が掛かりますが、WordPressの場合は専用のプラグインが存在するので、あっという間に実装することができます。
サムネイル

【無料レンタルサーバー】XREA FreeでWordPres……

2024年02月01日
「XREA Free」は複数のレンタルサーバーを提供しているGMOグループのひとつであるGMOデジロックが提供するXREA(エクセリア)というレンタルサーバーの無料プランです。
サムネイル

WordPressが使える無料レンタルサーバーおすすめ3選【……

2024年02月01日
最終更新日:2024年04月12日
無料レンタルサーバーはコストを掛けずにWebサイトを運用できるのという点でとても魅力的ですが、デメリットもあるので注意が必要です。
サムネイル

レンタルサーバー不要!WordPress.comの無料プラン……

2024年02月01日
WordPress.comの無料プランを使ってWebサイトを公開する方法をご紹介します。レンタルサーバーなしでWordPress使ったWebサイトを制作・公開・運用できるという手軽さが大きな魅力のサービスです。
サムネイル

WooCommerceとは?特徴やインストール方法を解説【W……

2024年01月05日
WooCommerceはWordPress用のECサイト構築プラグインです。WordPressで作成されたWebサイトにインストールすれば、誰でも簡単にECサイト開設・運営することができます。
サムネイル

ワードプレスでページURLの一覧をCSVで取得する【Expo……

2024年01月05日
ワードプレスでは「Export All URLs」というプラグインを使うと公開中のすべてページのURL一覧を簡単にCSVファイル化することができます。