WordPress講座(個別相談)

カスタムフィールドは便利ですが初期設定の入力欄は使いづらいかもしれません。次のように純粋なテキストエリアで文章や画像を編集する必要があるからです。次の例では、クイズの答えをカスタムフィールドに入力していますが長くなると編集しづらいです。

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

カスタムフィールドの入力欄は使いづらいかも

Advanced Custom Fieldsプラグインを使えば、カスタムフィールドの入力欄でビジュアルエディタを使えるようになります。長い文章などを編集するにも使いやすくて便利です。以下、手順を紹介します。

カスタムフィールドでビジュアルエディタを使う

カスタムフィールドでビジュアルエディタを使う

既存のカスタムフィールドで試す場合は少なくとも記事をバックアップしてから自己責任で試すようにしてください。
スポンサーリンク

ビジュアルエディタを使ってカスタムフィールドを編集する

Advanced Custom Fieldsプラグインのインストール

まずは、「プラグイン」‐「新規追加」メニューからAdvanced Custom Fieldsプラグインをインストール、有効化します。

Advanced Custom Fieldsプラグインのインストール

Advanced Custom Fieldsプラグインのインストール

カスタムフィールドの作成

「カスタムフィールド」メニューを開いてフィールドグループの「新規追加」をクリックします。

カスタムフィールドグループの新規追加

カスタムフィールドグループの新規追加

任意のフィールドグループ名(1)を入力して、「フィールドを追加」(2)をクリックします。

フィールドグループ名の入力

フィールドグループ名の入力

任意のフィールド名(1)、フィールドラベル(2)を入力して、フィールドタイプで「Wysiwyg エディタ」(3)を選択します。

カスタムフィールドの設定

カスタムフィールドでビジュアルエディタを使う設定

フィールドラベル(2)は管理画面に表示されるラベルです。日本語で大丈夫です。フィールド名(1)はシステムで使う名称なので、できれば日本語ではなくアルファベット(英語)で入力した方が無難です。この例では日本語の「答え」になっていますが筆者の事情です。

画面を下にスクロールして「ルール」セクションで、このカスタムフィールドが表示される条件を確認しましょう。「投稿タイプ」「等しい」「post」は、このカスタムフィールドが投稿の編集画面のみで表示されることを示しています。

カスタムフィールドの表示条件を確認

カスタムフィールドの表示条件を確認

完了後、画面を上にスクロールして「公開」ボタンをクリックすると設定完了です。

投稿の編集画面でカスタムフィールドの入力欄を確認

投稿の編集画面を開くとカスタムフィールドの入力欄でビジュアルエディタが使えるようになります。これで長い文章や画像などもレイアウトしやすく、使いやすくなるでしょう。

カスタムフィールドでビジュアルエディタが使えるようになる

カスタムフィールドでビジュアルエディタが使えるようになる

カスタムフィールドの入力内容によってはうまくいかない場合があります。
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク