Dinesh Bafna

Successful Entrepreneur and Business Leader

advanced custom fields: extended 使い方 10

「Advanced Custom Fieldsの全項目解説・公開側表示編集編/フィールドタイプ・テキストエリア」を参照してみてください。 ページタイトル、または、設定の配列を指定します。 親のオプションページのメニュー機能の名前を指定します。必須項目です。デフォルトは「edit_posts」です。, この機能は、管理画面のサイドバーに新しいオプションページを追加します。 Dev – Added filter ‘acf/allow_unfiltered_html’ to customize if current user can save unfiltered HTML. Fix – Added “dateTime” attribute to JSX parser ruleset. Fix – Added dynamic metabox check compatibility with Gutenberg.   Dev – Added filter “acf/get_object_type” to customize WP object information such as “label” and “icon”. Fix – Fixed bug sometimes displaying validation errors when saving a draft. i18n – Added French Canadian language thanks to Bérenger Zyla. Le plugin nécessite pas mal de codes et de savoir faire mais il offre des possibilités incroyables et presque sans limite à un site WordPress. i18n – Updated French translation thanks to Maxime Bernard-Jacquet & Bérenger Zyla.  −  この機能は、admin_menuアクション(優先度 99)より前に使用する必要があります。, $page Fix – Fixed bug in Checkbox field missing “selected” class after “Toggle All”. WordPressでサイトを作る際にカスタムフィールドを知っておくと、できることの幅が広がります。, この記事では、Advanced Custom Fieldsという便利なプラグインをもとに、カスタムフィールドの使い方を紹介します。, 一般的なWordPressのテーマでは、タイトル、本文、カテゴリー、タグ、アイキャッチ画像くらいしか入力できる項目はありません。, 例えば、上の図は記事の投稿画面に「記事の概要」を入力できる欄を新たに追加しています。ここに情報を入力して更新ボタンを押せば、それがデータベースに登録されます。, カスタムフィールドとして登録した情報は自由に使えます。例えば上の図では、記事の一覧を表示する際に、アイキャッチ画像、タイトルに加えて、先ほど登録した記事の概要を表示しています。, また、記事の一覧以外にも、検索結果のスニペット(メタディスクリプション)やOGPタグに記事の概要を使うこともできます。, 「WordPressテーマギャラリー」というデモサイトでは、サイドバーにおすすめ記事のランキングを表示していますが、これにはカスタムフィールドを使っています。, 記事の投稿画面にランキングの項目をカスタムフィールドで作り、ランキングが入力された記事を順番に並び替えています。, 「ranking」というカスタムフィールドを作り、meta_keyに設定しています。, orderbyに「meta_value_num」、orderに「ASC」を指定することで、ランキングの数字が小さい順番に並び替えています。, meta_queryでは、「ランキングの数字が1以上」という抽出条件を設定しています。これによって、ランキングの項目がゼロだったり、入力されていない記事を除外しています。, counter-incrementを使って連番を付与しています。そして、一つ目の背景色は「gold」、二つ目の背景色は「silver」というように、ランキングの色を設定しています。, 二つ目の手順に関しては、単純に入力や選択をするだけです。そのため、ここからはカスタムフィールドの作成と表示について、やり方を説明していきます。, カスタムフィールドはWordPressの標準機能として使えますが、非常に便利なプラグインがあるのでそちらを紹介します。, 私が使っているのは「Advanced Custom Fields」というプラグインです。, プラグインをインストールして有効化すると、WordPressの管理画面のメニューに「カスタムフィールド」が追加されます。, ここで「フィールドグループ」をクリックすれば作成済みのカスタムフィールドを編集できて、「新規追加」をクリックすればカスタムフィールドを新たに作成できます。, 新規追加をクリックするとカスタムフィールドの作成画面が表示されます。項目が多くて難しそうに感じるかもしれませんが、画面を5つに分割して考えると分かりやすいです。, カスタムフィールドのグループには、一つまたは複数のカスタムフィールドを登録できます。それらをまとめる分かりやすいタイトルを入力します。上の例では「投稿のフィールドグループ」としています。, 「フィールドを追加」ボタンをクリックして、カスタムフィールドを設定します。「記事の概要」の例では、以下の設定をして、それ以外は初期値のままにしています。, なお、上の図に表示されていない「フィールド名」はシステムの内部で使う変数名のことで、カスタムフィールドを表示するプログラムを書くときに使用します。, 最初に説明したように、カスタムフィールドはテキスト以外にも様々な内容を作成できます。それを設定する項目が上の図にある「フィールドタイプ」です。, テキストエリアを選んだ場合には「行数」の設定が必要になるように、フィールドタイプによって設定すべき項目が変わるため、ここをまずは選択した方が良いです。, WordPressは標準で「投稿」と「固定ページ」の2種類があります。「投稿」だけで使うなら、上の図のように初期値のままで良いです。, 「投稿」と「固定ページ」の両方でカスタムフィールドを使うなら、上の図のように「ルールを追加」ボタンをクリックして「または」の条件を加えます。, カスタムフィールドの細かい内容を設定しますが、基本的には初期値のままで良いと思います。何か不都合があるなら後から調整してください。今回の例では「スタイル」を「シームレス」にしていますが、見た目が変わるだけなので好みです。, 全て設定が終わったら、「公開」ボタンをクリックすればカスタムフィールドの作成は完了です。, カスタムフィールドを新たに作成したら、それを表示させるプログラムを書きましょう。Advanced Custom Fieldsでは、とても簡単にカスタムフィールドの値を表示できます。, 上のように、表示させたい場所で「the_field」関数を使うだけです。また、表示ではなく、一度変数に格納する場合など取得するときは「get_field」関数を使います。, どこに処理を書くかはテーマによって異なるので一概には言えませんが、例えば投稿の個別ページに表示させるときは「single.php」になります。, 1行目のように引数を何も指定しないと現在の投稿に紐づくカスタムフィールドが表示されます。2行目のように投稿IDを指定すると、指定した投稿に紐づくカスタムフィールドが表示されます。, サンプルなので処理を簡略化していますが、簡単に言うと全ての投稿を取得して、カスタムフィールドの値を順番に出力しています。get_the_IDという関数は現在の投稿IDを取得します。, the_fieldはAdvanced Custom Fieldsの専用の関数です。Advanced Custom Fieldsを使わない場合には、上のようにWordPressの標準の関数であるget_post_metaでも表示できます。, Advanced Custom Fieldsは無料版の他に有料版(PRO)があります。, 無料版だけでも様々な機能を使えるのですが、有料版を購入すると以下の機能が追加で使えます。, それぞれの機能の詳しい使い方や有料版の購入などは、プラグインの公式サイトをご確認ください。, 有料版の記載時点の料金は、個人向けが25ドル、開発者向けが100ドルです。違いは個人向けは一つのサイトのみに使えて、開発者向けは好きな数のサイトに使えます。, 私は繰り返しフィールドとオプションページを複数のサイトで使いたかったので、開発者向けを購入しました。なお、ブラックフライデーのときに25%OFFのクーポンを配布していたように、時々安くなるみたいです。, 購入する場合は、名前や住所などをローマ字で入力して、クレジットカード決済できます。決済が完了すると、購入時に入力したメールアドレスとパスワードでマイページにログインできます。, マイページにAdvanced Custom Fields PROのzipファイルがあるのでダウンロードして、使いたいサイトで通常のプラグインと同じようにアップロードします。, 最後に、マイページに記載されているアクティベーションコードを入力したら使用できます。, まず最初は、カスタムフィールドを使って日付を登録して判定します。ここでは、イベントの投稿に対してイベントの開始年月日と終了年月日を登録して、現在の日付がイベントの開催期間内であれば「現在開催中です!」という文字を表示させます。, 上記のように、functions.phpに日付を判定するプログラムを書きます。カスタムフィールドからイベントの開始年月日と終了年月日を取得して、現在日付と比較しています。現在日付が開始年月日と終了年月日の間にあれば「true」を返しています。, archive.phpなどイベントの一覧を表示するテンプレートファイルの中で、先ほど作成した日付判定のプログラムを呼び出します。if文を使ってnow_event関数でtrueが返ってきたときのみ「現在開催中です!」の文字を表示します。, 通常、一覧ページの記事は投稿日付の順番で表示されますが、それを好きな順番に並び替えるやり方です。例えば、収益が多く発生している記事を一覧の先頭にもってくることで、さらに収益を伸ばすといった効果を期待できます。記事ごとにカスタムフィールドで数値を登録して、数値が大きい記事から順番に表示させます。, 「orderby」が並び替えの処理です。orderbyに「meta_value_num」を指定すると、「meta_key」に指定したカスタムフィールドの値(ここでは「display_priority」)で並び替えをしてくれます。orderbyは複数の条件を付けられるので、今回の例ではdisplay_priorityが同じ場合は「date(投稿日付)」で並び替えています。, カテゴリーに対してカスタムフィールドを使って背景色を登録します。例えば、上の図では「SEO」のカテゴリーは赤色、「WordPress」のカテゴリーは黄色の背景色を設定しています。目立たせたいカテゴリーは強めの背景色を設定するといった使い方ができます。, 注意点としては、これまでは位置のルールで「投稿タイプ」を選択していましたが、今回はカテゴリーの登録画面に背景色の項目を追加するので、ここには「タクソノミー」を選択します。, カスタムフィールドを作成すると、カテゴリーの登録画面には上のような背景色の項目が追加されます。, get_fieldでカテゴリーの背景色を取得して、それをstyle属性のbackground-colorに設定しています。「#6699FF」は初期値なので好きな色を設定してください。, カテゴリーに背景色を設定したときと同様に、位置のルールで「タクソノミー」を選択します。, カスタムフィールドを作成すると、記事の投稿画面に上の図のような関連記事を選択する項目が追加されます。記事の数が多くて関連記事を探すのが大変なときは、上部の検索機能を使うか、「タクソノミーを選択」からカテゴリーで絞り込みをしてください。, single.phpなど関連記事を表示させたいテンプレートファイルで、上のようなプログラムを書きます。get_post_metaで関連記事を取得して、それを「post__in」に指定することで、関連記事の投稿を取得します。表示する部分のHTMLやCSSは省略しています。, Advanced Custom Fieldsというプラグインを使ってカスタムフィールドを作成して表示させる方法を紹介しました。, 最初は難しいと感じるかもしれませんが、慣れてくればこんなに便利なプラグインはありません。ぜひ、色々と試して勉強してみてください。, 【徹底解説】Custom Post Type UIによるカスタムタクソノミーの作り方, ブログ歴は7年、通販歴は4年くらい。基本的にWordPressでサイトを作っています。地方の情報を発信するローカルメディアを立ち上げたり、企業のホームページや通販サイトの制作・運営をお手伝いした経験もあります。以前はシステムエンジニアとして働いていました。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。.   get_field_object() Advanced Custom Fieldsのフィールドタイプ「タクソノミー」の使い方. Fix – Fixed bug breaking Image field UI when displaying a scaled portrait attachment. Tweak – Improved punctuation throughout admin notices. これらのサブフィールドをループさせることで現在の行からサブフィールドの値を取得することができます。, 「has_sub_field()」関数のループ内で取得されるサブフィールドのオブジェクトを取得する関数です。 Fix – Fixed bug preventing block registration when no icon is declared. Fix – Fixed bug causing incorrect character count when validating values.   Fix – Fixed all metaboxes appearing when editing a post in WP 5.0. i18n – Updated Polish translation thanks to Dariusz Zielonka. オプションを配列で設定します。 サブフィールドの名称を指定します。必須項目です。 Fix – Fixed various plugin update issues. また、フィールドタイプがテキストエリア、WYSIWYGなどの自動処理がある項目に対しては、その自動編集処理を無効にすることもできます。 i18n – Updated French Canadian translation thanks to Bérenger Zyla. Advanced Custom Fieldsの全項目解説・公開側表示編集編   「get_field()」関数は、カスタムフィールドのフィールド名を指定して値を取得する関数でしたが、「get_fields()」関数は、全てのカスタムフィールドの値を一括して取得できます。 「get_field_object()」の全項目版が「get_field_objects()」です。 Dev – Bumped minimum supported PHP version to 5.4.0. このフォームをカスタマイズするための多くの設定方法があり、以下に説明するように「$options」配列を追加することにより設定することが出来ます。, この「acf_form()」関数は、データを入力するための入力フォームを作成しますが、データを保存するために必要なロジックは含まれていないことに注意が必要です。 Dev – Added “google_map_result” JS filter. Fix – Fixed unresponsive Select2 instances after duplicating a row or layout. 「repeater field」や「flexible content field」のループさせるフィールド名を指定します。必須項目です。 i18n – Updated French translation thanks to Maxime Bernard-Jacquet.   Fix – Fixed bug allowing Range field values outside of the min and max settings. Google+ページではブログ記事とは違う Web開発・運用に役立つ記事を中心に紹介しています。, // カテゴリを取得する場合は、タクソノミーの Slug+「_」(アンダースコア)+タームIDです。, /* (文字列)フォームの IDを指定します。デフォルトは「acf-form」。 */, /* (数値/文字列)Post IDは、データをロードして保存します。デフォルトは、現在の PostIDです。, /* (配列)投稿を作成するために投稿データを配列として作成します。使用可能なパラメータは「wp_insert_post」を参照してください。, 「post_id」の設定には「new_post」が指定されている必要があります。 */, /* (配列)フィールドグループの ID/キーの配列は、このフォームに表示されるフィールドを上書きします。 */, /* (配列)フィールドの ID/キーの配列は、このフォームに表示されるフィールドを上書きします。 */, /* (Boolean)投稿タイトルのテキストフィールドを表示するか、否かを設定します。デフォルトは false。 */, /* (Boolean)投稿コンテンツエディタのフィールドを表示するか、否かを設定します。デフォルトは false。 *, /* (Boolean)フォームの要素を作成するか、否かを設定します。現在あるフォームに項目を追加する場合に使用します。デフォルトは true。 */, /* (文字列)フォームを実行した後にリダイレクトする URLを指定します。デフォルトは現在の URLに GETパラメータで「?updated=true」が追加されたものです。, 特別なプレイスホルダー「%post_url%」は、投稿のパーマリンクに変換されます。(新しい投稿を作る場合に便利です。) */, /* (文字列)リダイレクトされた際にフォームの上部に表示されるメッセージを設定します。メッセージを表示しない場合は falseを指定します。 */, 選択肢は「top」(フィールドの上)か、「left」(フィールドの横)です。 */, /* (文字列)フィールドの説明の場所を指定します。デフォルトは「label」です。, 選択肢は「label」(ラベルの下)か、「field」(フィールドの下)です。 */, /* (文字列)画像やファイルのアップロード形式を WP形式か、ベーシック形式かを指定します。デフォルトは、「WP形式」です。, 選択肢は「wp」(WP形式)か、「basic」(ベーシック形式)です。Ver.5.2.4で追加されました */, // サブページの配列 ('Header, Footer, Home, etc'), // activation code for the repeater add-on (XXXX-XXXX-XXXX-XXXX), // activation code for the options page add-on (XXXX-XXXX-XXXX-XXXX), ',             // activation code for the flexible content add-on (XXXX-XXXX-XXXX-XXXX), // activation code for the gallery add-on (XXXX-XXXX-XXXX-XXXX). 投稿 IDだけではなく、オプション、タクソノミー、ユーザなども登録できます。, フィールドグループで登録した情報も含めてカスタムフィールドの値を取得できます。 カスタムフィールドを使いやすくしてくれるWordPressプラグイン「Advanced Custom Fields」。 よく使うので使い方をメモしておきます。 配布サイト:Advanced Custom Fields. Enhancement – Added experiment for preloading block HTML and reducing AJAX requests on page load. Please reload CAPTCHA. Fix – Added custom metabox location (acf_after_title) compatibility with Gutenberg. 「get_field()」関数と同じです。 So happy it exists lol, It is so versatile and powerful itself, plus has tons of official and third-party integrations (free and paid). 前回の記事でAdvanced custom field(以下ACF)をご紹介しましたが、 今回はもう少し踏み込んでご紹介しようと思います。 基本 ・記述方法は「the_field()」と「get_field()」の二通り 値の内容を表示したいときは、the_field()を使います。 これで、現在表示している投稿の「my_custom_01」というキーの値 … Tweak – Improved performance of PHP registered fields.   WordPressには色々なテンプレートタグやプラグインがありますが、 「良くわからないからコピペ」では、初心者からは抜け出せません。, 自由自在にWordPressをカスタマイズするためにも、 意味を理解し「使いこなせる」ようになることが重要! 「脱コピペ!WordPressを”使いこなす”講座」、 始めていきたいと思いますよ!, 私keishibukiも分からないことがまだまだありますが、 一緒に頑張っていきましょう!, 第一回はカスタムフィールド系プラグイン「Advanced Custom Fields(以下ACF)」についての講座。 基本機能についてと有料アドオンの紹介。出力方法の説明。それからACFを使ったカスタマイズ例などを紹介していきたいと思います。, 基本的な使い方、 各フィールドタイプと項目解説、 ACFの関数解説 と分けて解説していきます。, 管理画面のプラグイン→新規追加→「Advanced Custom Fields」で検索。 インストールしたら有効化してください。, 僕はインストール済みなので、 「今すぐインストール」の場所が「今すぐ更新」になっています。, ACFを有効化するとサイドメニューに「カスタムフィールド」 という項目が追加されているので、クリック。, フィールドグループページが表示されますが、まだ何もカスタムフィールドを作っていないので何も表示されません。ここから作ったカスタムフィールドを編集できます。 今回は新しく作るので、「新規追加」をクリック。, するとフィールドグループを新規追加ページが表示されます。 まずはカスタムフィールドのタイトルを入力しましょう。, このタイトルはフィールドグループページ(さっきの一覧ページです) に表示されるだけですので、わかりやすい名前を付けておきましょう。, タイトルを入力したら「+フィールドの追加」をクリックしてカスタムフィールドを追加します。 何やらいろいろ項目が出てきましたが、必須項目は3つ。それぞれ解説します。, フィールドラベル 編集画面で表示される名前です。 フィールド名 フィールドは入力しただけでは表示されないので、それを表示させるときに必要になります。フィールドラベルに関連した英語を半角英数で付けておくと分かりやすいです。 フィールドタイプ カスタムフィールドの種類。テキストや画像などいろいろあります。, フィールドタイプの種類や入力項目の説明などは後ほど解説するので、 今回はとりあえずテキストを出力する簡単なカスタムフィールドを作ってみましょう。 以下の通りに入力し、公開ボタンを押してください。, これでカスタムフィールドが作成できました。 では早速投稿の「新規追加」で確認してみましょう。, 先ほども言いましたがカスタムフィールドに入力しただけでは表示されないので、 カスタムフィールドで入力した値は出力されていません。, ACFで作ったカスタムフィールドでは、フィールドタイプによって出力タグが違います。 今回はテキストのみの解説ですが、後ほど改めて解説させていただきます。, $field_name 取得する入力フィールドの「フィールド名」を指定します。必須項目です。 $post_id 取得するPOST IDを指定します。省略可能で、その場合現在表示中のページのPOST IDを取得します。, get_fieldは値を変数に格納したい場合に使います。 ちなみにecho get_field( $field_name )は先ほどのthe_field( $field_name ) と同じ機能となります。, $field_name 取得する入力フィールドの「フィールド名」を指定します。必須項目です。 $post_id 取得するPOST IDを指定します。省略可能で、その場合現在表示中のページのPOST IDを取得します。 $format_value 取得した値をフォーマット対応にするかどうかを選択します。 falseを指定するとDBの情報をそのまま出力します。, フィールドグループで登録した情報も含めてカスタムフィールドの値を取得できる関数です。ほぼほぼ上記2つで処理を行うことが可能なので使うことはほとんどありませんが、 選択肢系のフィールドの選択しの項目でキーと値を別々にした場合は get_field_object()を使います。, 詳しくは「Advanced Custom Fieldsの関数を本気出して解説してみた」という記事を投稿予定ですのでこうご期待。, さて、今回は投稿に紐づけてカスタムフィールドを表示させましたが、 カスタム投稿や固定ページに紐づけたい!という場合でもACFで簡単に設定できます。, 1つの投稿に複数のカスタムフィールドを設置するときにその順番を指定できます。 0が一番上で、数値が増えていくにつれて順番が下になります。, カスタムフィールドを設置する位置です。 High (after title) 投稿のタイトルと本文の間に設置します。 Normal (after content) 投稿の後に設置します(デフォルト)。 Side 右サイドに設置されます。, 入力フォームのデザインを変更します。 WP metaboxにすると枠がつき、少しおしゃれになります。 Seamless (no metabox) Standard (WP metabox), 投稿画面に表示しないものを設定できます。 最初に見たときは表示しないなら作らなければいいのでは?, 以上ACFの使い方基礎編でした! 今回はテキストを出力しただけですが、 次回以降紹介する様々なフィールドタイプと関数を組み合わせることによって、 自由自在にカスタムフィールドを使いこなせるようになります!, ちなみに公式サイトは(英語ですが)様々な情報が載っているので ご参考までに紹介しておきます。, 専門学校に通いながらアルバイトとして働いていたが、 2017年度の春で晴れて正社員にランクアップ。, 新潟の生産者と全国の消費者を繋ぐ産地直送型通販サービス。新潟の逸品を独自の取材内容で紹介しています。, 新潟の食・観光・暮らしにフォーカスしたWEBマガジン。鋭意コンテンツの作成を行っています。, 脱コピペ!WordPressを使いこなす講座 第一回~Advanced Custom Fields~.

マクドナルド ピアス 絆創膏 6, パジェロ ショート 評価 5, Vba 印刷設定 手差し 13, M 12019 感想 11, 桜井クラブ 野球 中学 7, Acer 青点滅 5回 9, 子供 文房具 収納 無印 4, Tern Link N8 ブログ 6, 七夕 イベント 高齢者 4, ボディ ミスト サツドラ 7, 両思い なのに 片思い みたい 歌 18, E46 天井 張替え 費用 9, 32歳 結婚 遅い 11, しあわせタマゴ 剣盾 ペリッパー 27, アウディ Etc エラー 7, Kipon Senz Sony E Nik Z 4, 中学生 髪型 剛毛 6, ボディ ミスト サツドラ 7, 荒野行動 Ag えら 5, 旧車 レストア ブログ 14, キャリー 走行中 異音 4, Ff14 エウレカ:アネモス Nm 8, ヘラクロス 巣 座標 27, キューブ ナビ 何 インチ 4, Vepox 金庫 重さ 4, 看護師 栄養 セミナー 7, ミラジーノ グローブボックス 外し方 17, Ff14 白魔道士 装備 80 7, 240z レストア ベース 7, ユニクロ ギフトカード オンライン 4, 黒い犬 白い犬 茶色い犬 なぞなぞ 4, Ldk 映画 相関図 12,

TAGS