Dev – Added new ACF_MAJOR_VERSION constant. 項目数が少ない場合は「水平」で横並びにしています。, ●柔軟コンテンツ（有償アドオン Flexible Content Field 必要） Advanced Custom Fields Pro V5.8.7. 投稿や固定ページの編集画面に項目を追加するプラグイン「Advanced Custom Fields」の紹介, Advanced Custom Fieldsを使って「テキスト」項目を追加し画面に出力する. ●テキスト・テキストエリア 「Advanced Custom Fields」は、フィールドビルダを使用して好きな場所にフィールドを作成できるプラグインです。今回はこの便利なプラグイン「Advanced Custom Fields」の使い方を完全解説していきたいと思います。 WordPress Advanced Custom Fields の使い方（入門編） BLOG ネクストページブログ. 次は、読み込んだ CSS ファイルに次のコードを追加します。, 領域の高さの最小値を auto にすることで、テキストエリアの行数を8行以下にできるようになります。 WordPress のプラグイン Advanced Custom Fields を使ったカスタムフィールド値の取得と表示方法を紹介します。値の取得方法と合わせて、表示されない時の注意点や対処方法も紹介します。 長くなりそうなので、使い方はまた次の機会に。, インストールしたものの、フィールド登録画面が盛りだくさんなため挫折していたアナタ。 ●Repeater（有償アドオン Repeater Field 必要） 有償アドオンは個別売りとアドオン4つ搭載の以下のタイプがあります。, ※他にも無償も含めACFのアドオンは100以上あるみたいなので探してみるのもよいかもしれません。, ACFをサイトからダウンロードし、WP管理画面、プラグインの「新規追加」の「プラグインのアップロード」でインストール。 ●チェックボックス・ラジオボタン 前回の記事でAdvanced custom field（以下ACF）をご紹介しましたが、 今回はもう少し踏み込んでご紹介しようと思います。 基本 ・記述方法は「the_field()」と「get_field()」の二通り 値の内容を表示したいときは、the_field()を使います。 これで、現在表示している投稿の「my_custom_01」というキーの値 … 有料の ACF PRO の場合は CSS をいじことなく行数を設定できます。お金に余裕がある場合は迷わずプロ版を購入しましょう。, 不明点があればお気軽にご質問ください。 例えば、「自己PR」というラベルがあっても人により書く内容は異なります。そういったときに④に「過去の経歴、取得資格を記載」と書いてあれば何を書けばいいか明確になりますね。, No formatting は、入力された内容をそのまま出力します。HTMLタグが書かれた場合にもHTMLタグを文章として画面に出力します。, Convert new lines into
tags は、改行が自動的にHTMLの改行タグ
に置換されて出力されます。何も無ければこれがよさそうです。, Convert HTML into tags は、HTMLタグを書いたらHTMLタグと認識して出力してくれます。改行をする場合は自分で改行タグを入力する必要があります。, 通常のWEB開発時には改行コードをHTMLの改行タグに置換する必要がありますが、このプラグインでは項目を作成するときに選択しているのでそれ通りに出力されます。, でも、これは固定ページのデフォルトで、特別なページを作成したい場合には page.php をコピーしてテンプレートファイルを作成します。, WordPress管理画面の「外観」→「テーマ編集」から編集したいファイルを選択し編集することも出来ます。, 今回の対応程度なら比較的簡単なので後者の方法で対応できるかと思いますが、新しくテンプレートファイルの作成はできたっけな？, 項目を追加する手順としては、作成したフィールドグループに追加したいフィールド（項目）を追加。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. 最近では使わないことがない位のレベルになり、ここらでまとめてみようと思いました。, WordPress（以下WP）の投稿には「タイトル」と「本文」があります。 東京都中央区銀座6-6-1 プログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。, WordPressの使い方 プログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。, WordPressの使い方 Advanced Custom Fieldsで扱える全項目の説明、出力方法、活用事例などを丁寧に説明していきます。 賃貸サイトやECサイトなど、ページの型が決まっているサイトの場合、WordPressの投稿編集ページにデフォルトでついているエディタを使用して1ページずつ作成していては面倒ですよね。 カテゴリーごとの投稿を一覧表示するカテゴリーページには、タイトルと投稿一覧は表示 ... WordPressでカテゴリーページに別々の画像を表示したいこともあります。カス ... カスタムフィールドは便利ですが初期設定の入力欄は使いづらいかもしれません。次のよ ... WordPressで使える「3つのカスタム」、ご存じですか？カスタムフィールド、 ... get_categories関数を使ってカテゴリーを一覧表示するときに好きな順番 ... WordPressサイトを運営していると編集者や投稿者を管理者に変更したいことも ... PHPの独学にチャレンジするWordPressユーザーに贈る言葉「入門書は読むな！」. Fix – Fixed bug incorrectly escaping HTML in the Link field title. ©Copyright2020 むねひろ@プログラマー.All Rights Reserved. これを機会に、はじめてでももう一度でも触ってもらえたらよいと思います。 Download. もしくはWP管理画面、プラグインの「新規追加」のプラグインの検索で「Advanced Custom Fields」を検索しインストールしてください。, インストールすると「カスタムフィールド」メニューが追加されます。 あとは、管理画面から指定の行数を変更して確認してみてください。, WordPress のプラグイン Advanced Custom Fields のフィールドタイプのテキストエリアを8行以下に縮める方法を紹介しました。 地下鉄銀座駅B5出口から徒歩2分 WordPressに慣れてきた方に。「そろそろPHPをマスターしたい」と思ってい ... サイトにYouTubeの動画を貼り付けることもありますが問題はレスポンシブ対応で ... 不完全なSSL対応が原因で問題が起きることはよくありますが、「httpとhttp ... 次のようなHTMLでボックス内にリンクを設置した場合、「ボックス全体をリンクにし ... 【住所】 advanced custom fields, advanced custom fields repeater, advanced custom fields tutorial, advanced custom fields woocommerce, advanced custom fields get field, advanced custom fields shortcode, advanced custom fields shopify, advanced custom fields extended, advanced custom fields gallery, advanced custom fields not showing on page, advanced custom … AFCをインストールすると、管理画面の左メニューに「カスタムフィールド」というメニューが追加されます。 「カスタムフィールド」をクリックして設定画面を開き、フィールドグループの「新規追加」をクリックします。 企画・ディレクション・デザイン・システム等の各分野から専門的な目線で、技術的な役立つ情報を発信します。 WordPress Advanced Custom Fields の使い方（入門編） Tweet. カスタムフィールドを出力するにはPHPのコードを記述する必要があります。ここでは、Advanced Custom Fieldsプラグインで作成した定番のカスタムフィールドを画面に表示する例で説明します。, 表示イメージは次のようになります。イベント情報の記事の中で3種類のカスタムフィールドを使っています。, ここではAdvanced Custom Fieldsプラグインを使って次のようなカスタムフィールドを準備しました。, Advanced Custom Fieldsプラグインで作成したカスタムフィールドを画面に表示するにはthe_fieldという命令を使って次のように記述する方法があります。, 「カスタムフィールド名」を実際のカスタムフィールド名に変更します。たとえば、「event_copy」という名のカスタムフィールド「キャッチコピー」の場合は次のようになります。, 上記のthe_fieldという命令はAdvanced Custom Fieldsプラグインで作成したカスタムフィールドを表示するための命令です。Advanced Custom Fieldsプラグインを使わない場合など、他の書き方がいくつかありますが、話が長くなるので説明は省略します。, 画像のカスタムフィールドもthe_fieldを使って画面に表示することができます。その前に、画像フィールドでURLを表示する設定になっているか確認しましょう。, それには、Advanced Custom Fieldsのカスタムフィールドの編集画面を開きます。, 続いて、カスタムフィールドを出力するテンプレートに次のように入力してみましょう。「event_image」は実際のカスタムフィールド名に変更してください。, ここでは、画像URLを表示することが目的ではないのでimgタグを使ってレイアウトします。紛らわしいですが、上記のthe_fieldの1行をimgタグのsrc属性の中に入れるイメージです。, ファイルをアップロードするフィールドの場合も上記のテキストフィールドや画像フィールドと同じようにthe_fieldを使うことができます。その前に、画像フィールドと同じように設定を確認しましょう。, Advanced Custom Fieldsのカスタムフィールド設定画面を開きます。, 画面を下にスクロールしてファイルフィールドの「返り値」を「ファイルURL」に設定します。, 続いて、カスタムフィールドを出力するテンプレートに次のように入力してみましょう。「event_flyer」は実際のカスタムフィールド名に変更してください。, ファイルのURLを表示することが目的ではないので、クリックしたらファイル（この例ではPDF）が開くようにリンクとしてレイアウトしましょう。, これで、アップロードしたファイルがリンクとして表示され、クリックするとファイルが開くようになります。, このようにthe_fieldを使うと、Advanced Custom Fieldsプラグインで作ったカスタムフィールドの内容を出力することができます。ただし、画像フィールドやファイルフィールドのようにそのまま出力しても意味がない項目もあるので、用途に応じてHTMLタグを使ってレイアウトを整える必要があります。, この記事ではカスタムフィールドを出力するために最も手軽な方法を紹介しました。他にいくつもの方法があるので、画像フィールドやファイルフィールドは出力がうまくいかないこともあります。また、コードを簡略化するため、あえて必要な処理を省略した部分もあります。, 足りない部分の仕上げはWordPress個別サポートで対応いたしますので、よろしければご相談ください。. 今回は「advanced custom fields」プラグインを使ってテキストエリア項目を追加し、画面に表示する方法をご紹介します。 WordPressのプラグイン「advanced custom fields」は投稿や固定ページの編集画面に項目を追加するプラグインです。 Dev – Ensure Checkbox field value is an array even when empty. 2019.01.01munehiro, 今回は「advanced custom fields」プラグインを使ってテキストエリア項目を追加し、画面に表示する方法をご紹介します。, WordPressのプラグイン「advanced custom fields」は投稿や固定ページの編集画面に項目を追加するプラグインです。, ≫ 投稿や固定ページの編集画面に項目を追加するプラグイン「Advanced Custom Fields」の紹介, ④これは、どういった内容を入力してもらうかラベル名だけじゃ分からないときに、より具体的に入力例などを使って説明する場合に使います。 銀座風月堂ビル5F フォーマットのタイプの選択, メディアにキャプションや代替テキストを登録してる場合は「画像オブジェクト」を そこで今回は、CSSを調整してテキストエリアの行数を8行以下に縮めてみたいと思います。, そもそもテキストエリアの行数が8行以下にできない原因は、プラグインのCSSの指定にあります。 Tweet to @t93hirashima, Advanced Custom Fields で登録したタームのフィールド値を取得する方法. WordPress のプラグイン Advanced Custom Fields のフィールドタイプのテキストエリアを8行以下に縮める方法を紹介します。例えば、管理画面の縦幅を縮めたい時に便利な方法です。 2018.12.30 Fix – Fixed PHP warning when loading meta from Post 0. 企画・ディレクション・デザイン・システム等の各分野から専門的な目線で、技術的な役立つ情報を発信します。, めっきり増えましたWordPress案件（ありがたいことです） 次のコードは、プラグインのテキストエリアのCSSの指定内容です。, テキストエリアの高さ指定の最小値を min-height: 150px; を min-height: auto; にしてしまえば問題解決なんですが、プラグインのCSSはアップデートのタイミングで設定が元に戻ってしまう可能性があります。 Fix – Fixed bug showing Discussion and Comment metaboxes for newly imported field groups. 2019.01.01 項目の追加・出力方法は以下のサイトに細かい説明があるので参照してください。, ちなみに以下は、私がよく使うフィールドと作成時、気をつけていることです。 このようにthe_fieldを使うと、Advanced Custom Fieldsプラグインで作ったカスタムフィールドの内容を出力することができます。ただし、画像フィールドやファイルフィールドのようにそのまま出力しても意味がない項目もあるので、用途に応じてHTMLタグを使ってレイアウトを整える必要があります。 アップデートの度に同じ修正をするのは面倒なので、今回は管理画面に上書き用のCSSを読み込んで対応することにします。, 管理画面に上書き用のCSSを読み込む場合は、次のコードを functions.php に追加します。, コードを追加すると、管理画面内に独自のCSSファイルを読み込めるようになるので、テーマファイルのディレクトリに admin.css をアップロード。ファイル名やディレクトリは開発環境に応じて自由に変更してください。 Advanced Custom Field で フィールドグループを設定する. この有償アドオン項目は最近マストで使用しています！ 様々なフィールドタイプが作成できるだけに管理画面も縦長になりがち、特にテキストエリアがタテ積みになってしまうと更新もし辛くなってしまいますよね。 2019.01.07munehiro, 紹介ページには「名前」「名前（英語）」「顔写真」「所属部署」「紹介文」の5つを表示する場合などです。, そういう場合、タイトルに「名前」を入れて、アイキャッチに「顔写真」、本文に「名前（英語）」「所属部署」「紹介文」を入れてもいいですが、本文の内容が書く人によりレイアウトがバラバラになってしまう可能性も出てきます。, そういう場合に、ちゃんと「名前（英語）」なら「名前（英語）」を入力する項目があると便利です。, WordPress管理画面サイドメニューより、「プラグイン」→「新規追加」をクリック, 検索フォームに「Advanced Custom Fields」と入力して「インストール」からの「有効化」, 追加出来る項目の種類はテキストだけでなく色々ある為、良く使いそうなものを紹介します。, どこに表示する項目か、何の為の項目かなどを簡潔にまとめてグループ名にしておくと後々便利です。, 例えば上記の画像だと「投稿タイプ」「等しい」「post」とあります。（「post」は投稿のことで、「page」は固定ページになります。）, 「固定ページ」にだけ表示したい場合は、「投稿タイプ」「等しい」「page」とすれば良いです。, 上記画像の通り投稿タイプの指定以外にも条件を選択出来ますが、「投稿タイプ」と「ログインしているユーザーのタイプ」だけ知っていれば充分です。, 「Administrator」の場合は管理者のことなので、管理者にだけ表示したい場合はこの条件をつければ良いです。, 例えば、管理者にだけ投稿編集画面に項目を追加したい場合は、複数の条件を入れることも出来ます。, 赤枠の「and」ボタンを押すと、新しく条件を追加出来、上記画像のように入力すれば、投稿タイプがpostで且つ、ユーザーが管理者の場合にのみ表示することになります。, 投稿タイプが「投稿」もしくは「固定ページ」の場合にだけ表示したい場合は、下の画像のようになります。, あまり条件を追加すると訳が分からなくなってしまいますが、上記のパターンだけ知っていればかなり使えると思います。, 編集画面で入力した値を表示する場合にはフィールド名を使って取得しますので、他の項目と重複してはいけません。, 「基本」「Content」「選択肢」の項目はよく使いますし、それだけでほぼ対応できます。, デフォルト値に「あいうえお」と設定したら上記のように最初から「あいうえお」が入ります。, このまま「投稿」ボタンで投稿を完了すると、タイトルや本文だけでなく、追加した項目の値も登録されます。, 柔軟に項目を増やすためには「Advanced Custom Fields」プラグインを使うと便利。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. Advanced Custom Fieldsを使って「テキストエリア」項目を追加し画面に出力する, Advanced Custom Fieldsを使って「画像」項目を追加し画面に出力する, Advanced Custom Fieldsを使って「テキスト」項目を追加し画面に出力する. 投稿や固定の編集画面の拡張に欠かせないのが「Advanced Custom Fields」というプラグインです。 投稿の編集ではタイトルとコンテンツしか入力できないので、URLを別の独立した値として持っておきたい、テキストを独立した値として持っておきたい、ってなった時に、どうしようもありません。 それ以外で項目を使用したい時、WPには標準でカスタムフィールドを追加できる機能があります。, WP標準のカスタムフィールドを使用してもよいのですが、投稿ごとにカスタムフィールド名を設定しなければならない等、入力者側に手間がかかるため、プラグインを使用することをオススメします。, プラグインには、Custom Field Template や Advanced Custom Fields 等たくさんありますが、弊社でも出番の多い、Advanced Custom Fieldsについて触れたいと思います。, ※標準のカスタムフィールド機能も（UIはともかく）データ取得しやすくなったりと便利になっているみたいです。, Advanced Custom Fields（以下ACF）のプラグインは無償です。 (adsbygoogle = window.adsbygoogle || []).push({}); WordPressサイトを運営していると編集者や投稿者を管理者に変更したいこともあります。通常は管理者がログインして「ユーザー」メニューから任意のユーザーの権限を変更できますが、問題は管理者がログインできないケースです。 […], WordPressに慣れてきた方に。「そろそろPHPをマスターしたい」と思っていませんか？ 確かに「PHPを使ってWordPressのテーマやプラグインをカスタマイズしたい」という要望は多いです。 そんなわけで多くの方が […], サイトにYouTubeの動画を貼り付けることもありますが問題はレスポンシブ対応です。 貼り付け方やテーマによってはYouTubeがレスポンシブ対応になっていないので次のように動画の両端が切れるなどの問題が起きます。 この […], 不完全なSSL対応が原因で問題が起きることはよくありますが、「httpとhttpsの両方でアクセスできてしまう」もその1つです。 元々「http」で始まるURL（例：http://example.com/）をSSL対応し […], 次のようなHTMLでボックス内にリンクを設置した場合、「ボックス全体をリンクにしたい」がうまくいかない場合があります。 こんな感じです。ボックス全体がリンクになっていないためクリックしても反応しないエリアがあります。 問 […].
tags は、改行が自動的にHTMLの改行タグ
に置換されて出力されます。何も無ければこれがよさそうです。, Convert HTML into tags は、HTMLタグを書いたらHTMLタグと認識して出力してくれます。改行をする場合は自分で改行タグを入力する必要があります。, 通常のWEB開発時には改行コードをHTMLの改行タグに置換する必要がありますが、このプラグインでは項目を作成するときに選択しているのでそれ通りに出力されます。, でも、これは固定ページのデフォルトで、特別なページを作成したい場合には page.php をコピーしてテンプレートファイルを作成します。, WordPress管理画面の「外観」→「テーマ編集」から編集したいファイルを選択し編集することも出来ます。, 今回の対応程度なら比較的簡単なので後者の方法で対応できるかと思いますが、新しくテンプレートファイルの作成はできたっけな？, 項目を追加する手順としては、作成したフィールドグループに追加したいフィールド（項目）を追加。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. 最近では使わないことがない位のレベルになり、ここらでまとめてみようと思いました。, WordPress（以下WP）の投稿には「タイトル」と「本文」があります。 東京都中央区銀座6-6-1 プログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。, WordPressの使い方 プログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。, WordPressの使い方 Advanced Custom Fieldsで扱える全項目の説明、出力方法、活用事例などを丁寧に説明していきます。 賃貸サイトやECサイトなど、ページの型が決まっているサイトの場合、WordPressの投稿編集ページにデフォルトでついているエディタを使用して1ページずつ作成していては面倒ですよね。 カテゴリーごとの投稿を一覧表示するカテゴリーページには、タイトルと投稿一覧は表示 ... WordPressでカテゴリーページに別々の画像を表示したいこともあります。カス ... カスタムフィールドは便利ですが初期設定の入力欄は使いづらいかもしれません。次のよ ... WordPressで使える「3つのカスタム」、ご存じですか？カスタムフィールド、 ... get_categories関数を使ってカテゴリーを一覧表示するときに好きな順番 ... WordPressサイトを運営していると編集者や投稿者を管理者に変更したいことも ... PHPの独学にチャレンジするWordPressユーザーに贈る言葉「入門書は読むな！」. Fix – Fixed bug incorrectly escaping HTML in the Link field title. ©Copyright2020 むねひろ@プログラマー.All Rights Reserved. これを機会に、はじめてでももう一度でも触ってもらえたらよいと思います。 Download. もしくはWP管理画面、プラグインの「新規追加」のプラグインの検索で「Advanced Custom Fields」を検索しインストールしてください。, インストールすると「カスタムフィールド」メニューが追加されます。 あとは、管理画面から指定の行数を変更して確認してみてください。, WordPress のプラグイン Advanced Custom Fields のフィールドタイプのテキストエリアを8行以下に縮める方法を紹介しました。 地下鉄銀座駅B5出口から徒歩2分 WordPressに慣れてきた方に。「そろそろPHPをマスターしたい」と思ってい ... サイトにYouTubeの動画を貼り付けることもありますが問題はレスポンシブ対応で ... 不完全なSSL対応が原因で問題が起きることはよくありますが、「httpとhttp ... 次のようなHTMLでボックス内にリンクを設置した場合、「ボックス全体をリンクにし ... 【住所】 advanced custom fields, advanced custom fields repeater, advanced custom fields tutorial, advanced custom fields woocommerce, advanced custom fields get field, advanced custom fields shortcode, advanced custom fields shopify, advanced custom fields extended, advanced custom fields gallery, advanced custom fields not showing on page, advanced custom … AFCをインストールすると、管理画面の左メニューに「カスタムフィールド」というメニューが追加されます。 「カスタムフィールド」をクリックして設定画面を開き、フィールドグループの「新規追加」をクリックします。 企画・ディレクション・デザイン・システム等の各分野から専門的な目線で、技術的な役立つ情報を発信します。 WordPress Advanced Custom Fields の使い方（入門編） Tweet. カスタムフィールドを出力するにはPHPのコードを記述する必要があります。ここでは、Advanced Custom Fieldsプラグインで作成した定番のカスタムフィールドを画面に表示する例で説明します。, 表示イメージは次のようになります。イベント情報の記事の中で3種類のカスタムフィールドを使っています。, ここではAdvanced Custom Fieldsプラグインを使って次のようなカスタムフィールドを準備しました。, Advanced Custom Fieldsプラグインで作成したカスタムフィールドを画面に表示するにはthe_fieldという命令を使って次のように記述する方法があります。, 「カスタムフィールド名」を実際のカスタムフィールド名に変更します。たとえば、「event_copy」という名のカスタムフィールド「キャッチコピー」の場合は次のようになります。, 上記のthe_fieldという命令はAdvanced Custom Fieldsプラグインで作成したカスタムフィールドを表示するための命令です。Advanced Custom Fieldsプラグインを使わない場合など、他の書き方がいくつかありますが、話が長くなるので説明は省略します。, 画像のカスタムフィールドもthe_fieldを使って画面に表示することができます。その前に、画像フィールドでURLを表示する設定になっているか確認しましょう。, それには、Advanced Custom Fieldsのカスタムフィールドの編集画面を開きます。, 続いて、カスタムフィールドを出力するテンプレートに次のように入力してみましょう。「event_image」は実際のカスタムフィールド名に変更してください。, ここでは、画像URLを表示することが目的ではないのでimgタグを使ってレイアウトします。紛らわしいですが、上記のthe_fieldの1行をimgタグのsrc属性の中に入れるイメージです。, ファイルをアップロードするフィールドの場合も上記のテキストフィールドや画像フィールドと同じようにthe_fieldを使うことができます。その前に、画像フィールドと同じように設定を確認しましょう。, Advanced Custom Fieldsのカスタムフィールド設定画面を開きます。, 画面を下にスクロールしてファイルフィールドの「返り値」を「ファイルURL」に設定します。, 続いて、カスタムフィールドを出力するテンプレートに次のように入力してみましょう。「event_flyer」は実際のカスタムフィールド名に変更してください。, ファイルのURLを表示することが目的ではないので、クリックしたらファイル（この例ではPDF）が開くようにリンクとしてレイアウトしましょう。, これで、アップロードしたファイルがリンクとして表示され、クリックするとファイルが開くようになります。, このようにthe_fieldを使うと、Advanced Custom Fieldsプラグインで作ったカスタムフィールドの内容を出力することができます。ただし、画像フィールドやファイルフィールドのようにそのまま出力しても意味がない項目もあるので、用途に応じてHTMLタグを使ってレイアウトを整える必要があります。, この記事ではカスタムフィールドを出力するために最も手軽な方法を紹介しました。他にいくつもの方法があるので、画像フィールドやファイルフィールドは出力がうまくいかないこともあります。また、コードを簡略化するため、あえて必要な処理を省略した部分もあります。, 足りない部分の仕上げはWordPress個別サポートで対応いたしますので、よろしければご相談ください。. 今回は「advanced custom fields」プラグインを使ってテキストエリア項目を追加し、画面に表示する方法をご紹介します。 WordPressのプラグイン「advanced custom fields」は投稿や固定ページの編集画面に項目を追加するプラグインです。 Dev – Ensure Checkbox field value is an array even when empty. 2019.01.01munehiro, 今回は「advanced custom fields」プラグインを使ってテキストエリア項目を追加し、画面に表示する方法をご紹介します。, WordPressのプラグイン「advanced custom fields」は投稿や固定ページの編集画面に項目を追加するプラグインです。, ≫ 投稿や固定ページの編集画面に項目を追加するプラグイン「Advanced Custom Fields」の紹介, ④これは、どういった内容を入力してもらうかラベル名だけじゃ分からないときに、より具体的に入力例などを使って説明する場合に使います。 銀座風月堂ビル5F フォーマットのタイプの選択, メディアにキャプションや代替テキストを登録してる場合は「画像オブジェクト」を そこで今回は、CSSを調整してテキストエリアの行数を8行以下に縮めてみたいと思います。, そもそもテキストエリアの行数が8行以下にできない原因は、プラグインのCSSの指定にあります。 Tweet to @t93hirashima, Advanced Custom Fields で登録したタームのフィールド値を取得する方法. WordPress のプラグイン Advanced Custom Fields のフィールドタイプのテキストエリアを8行以下に縮める方法を紹介します。例えば、管理画面の縦幅を縮めたい時に便利な方法です。 2018.12.30 Fix – Fixed PHP warning when loading meta from Post 0. 企画・ディレクション・デザイン・システム等の各分野から専門的な目線で、技術的な役立つ情報を発信します。, めっきり増えましたWordPress案件（ありがたいことです） 次のコードは、プラグインのテキストエリアのCSSの指定内容です。, テキストエリアの高さ指定の最小値を min-height: 150px; を min-height: auto; にしてしまえば問題解決なんですが、プラグインのCSSはアップデートのタイミングで設定が元に戻ってしまう可能性があります。 Fix – Fixed bug showing Discussion and Comment metaboxes for newly imported field groups. 2019.01.01 項目の追加・出力方法は以下のサイトに細かい説明があるので参照してください。, ちなみに以下は、私がよく使うフィールドと作成時、気をつけていることです。 このようにthe_fieldを使うと、Advanced Custom Fieldsプラグインで作ったカスタムフィールドの内容を出力することができます。ただし、画像フィールドやファイルフィールドのようにそのまま出力しても意味がない項目もあるので、用途に応じてHTMLタグを使ってレイアウトを整える必要があります。 アップデートの度に同じ修正をするのは面倒なので、今回は管理画面に上書き用のCSSを読み込んで対応することにします。, 管理画面に上書き用のCSSを読み込む場合は、次のコードを functions.php に追加します。, コードを追加すると、管理画面内に独自のCSSファイルを読み込めるようになるので、テーマファイルのディレクトリに admin.css をアップロード。ファイル名やディレクトリは開発環境に応じて自由に変更してください。 Advanced Custom Field で フィールドグループを設定する. この有償アドオン項目は最近マストで使用しています！ 様々なフィールドタイプが作成できるだけに管理画面も縦長になりがち、特にテキストエリアがタテ積みになってしまうと更新もし辛くなってしまいますよね。 2019.01.07munehiro, 紹介ページには「名前」「名前（英語）」「顔写真」「所属部署」「紹介文」の5つを表示する場合などです。, そういう場合、タイトルに「名前」を入れて、アイキャッチに「顔写真」、本文に「名前（英語）」「所属部署」「紹介文」を入れてもいいですが、本文の内容が書く人によりレイアウトがバラバラになってしまう可能性も出てきます。, そういう場合に、ちゃんと「名前（英語）」なら「名前（英語）」を入力する項目があると便利です。, WordPress管理画面サイドメニューより、「プラグイン」→「新規追加」をクリック, 検索フォームに「Advanced Custom Fields」と入力して「インストール」からの「有効化」, 追加出来る項目の種類はテキストだけでなく色々ある為、良く使いそうなものを紹介します。, どこに表示する項目か、何の為の項目かなどを簡潔にまとめてグループ名にしておくと後々便利です。, 例えば上記の画像だと「投稿タイプ」「等しい」「post」とあります。（「post」は投稿のことで、「page」は固定ページになります。）, 「固定ページ」にだけ表示したい場合は、「投稿タイプ」「等しい」「page」とすれば良いです。, 上記画像の通り投稿タイプの指定以外にも条件を選択出来ますが、「投稿タイプ」と「ログインしているユーザーのタイプ」だけ知っていれば充分です。, 「Administrator」の場合は管理者のことなので、管理者にだけ表示したい場合はこの条件をつければ良いです。, 例えば、管理者にだけ投稿編集画面に項目を追加したい場合は、複数の条件を入れることも出来ます。, 赤枠の「and」ボタンを押すと、新しく条件を追加出来、上記画像のように入力すれば、投稿タイプがpostで且つ、ユーザーが管理者の場合にのみ表示することになります。, 投稿タイプが「投稿」もしくは「固定ページ」の場合にだけ表示したい場合は、下の画像のようになります。, あまり条件を追加すると訳が分からなくなってしまいますが、上記のパターンだけ知っていればかなり使えると思います。, 編集画面で入力した値を表示する場合にはフィールド名を使って取得しますので、他の項目と重複してはいけません。, 「基本」「Content」「選択肢」の項目はよく使いますし、それだけでほぼ対応できます。, デフォルト値に「あいうえお」と設定したら上記のように最初から「あいうえお」が入ります。, このまま「投稿」ボタンで投稿を完了すると、タイトルや本文だけでなく、追加した項目の値も登録されます。, 柔軟に項目を増やすためには「Advanced Custom Fields」プラグインを使うと便利。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. Advanced Custom Fieldsを使って「テキストエリア」項目を追加し画面に出力する, Advanced Custom Fieldsを使って「画像」項目を追加し画面に出力する, Advanced Custom Fieldsを使って「テキスト」項目を追加し画面に出力する. 投稿や固定の編集画面の拡張に欠かせないのが「Advanced Custom Fields」というプラグインです。 投稿の編集ではタイトルとコンテンツしか入力できないので、URLを別の独立した値として持っておきたい、テキストを独立した値として持っておきたい、ってなった時に、どうしようもありません。 それ以外で項目を使用したい時、WPには標準でカスタムフィールドを追加できる機能があります。, WP標準のカスタムフィールドを使用してもよいのですが、投稿ごとにカスタムフィールド名を設定しなければならない等、入力者側に手間がかかるため、プラグインを使用することをオススメします。, プラグインには、Custom Field Template や Advanced Custom Fields 等たくさんありますが、弊社でも出番の多い、Advanced Custom Fieldsについて触れたいと思います。, ※標準のカスタムフィールド機能も（UIはともかく）データ取得しやすくなったりと便利になっているみたいです。, Advanced Custom Fields（以下ACF）のプラグインは無償です。 (adsbygoogle = window.adsbygoogle || []).push({}); WordPressサイトを運営していると編集者や投稿者を管理者に変更したいこともあります。通常は管理者がログインして「ユーザー」メニューから任意のユーザーの権限を変更できますが、問題は管理者がログインできないケースです。 […], WordPressに慣れてきた方に。「そろそろPHPをマスターしたい」と思っていませんか？ 確かに「PHPを使ってWordPressのテーマやプラグインをカスタマイズしたい」という要望は多いです。 そんなわけで多くの方が […], サイトにYouTubeの動画を貼り付けることもありますが問題はレスポンシブ対応です。 貼り付け方やテーマによってはYouTubeがレスポンシブ対応になっていないので次のように動画の両端が切れるなどの問題が起きます。 この […], 不完全なSSL対応が原因で問題が起きることはよくありますが、「httpとhttpsの両方でアクセスできてしまう」もその1つです。 元々「http」で始まるURL（例：http://example.com/）をSSL対応し […], 次のようなHTMLでボックス内にリンクを設置した場合、「ボックス全体をリンクにしたい」がうまくいかない場合があります。 こんな感じです。ボックス全体がリンクになっていないためクリックしても反応しないエリアがあります。 問 […].