【完全版】WordPressプラグイン Advanced Custom Fields【表示編】

プラグイン

【完全版】WordPressプラグイン Advanced Custom Fields【表示編】

2019年09月23日 8:00 

【完全版】WordPressプラグイン Advanced Custom Fields【表示編】

おはようございます!社員Aです👩

今回はWordPressプラグイン「Advanced Custom Fields」で値を表示する方法をご紹介したいと思います。

 



 

万能プラグイン「Advanced Custom Fields」

「Advanced Custom Fields」は、フィールドビルダを使用して好きな場所にフィールドを作成できるプラグインで、多くのユーザーに愛用されています。

「テキストエリア」や「画像フィールド」など、追加できるフィールドの多さも特徴ですが、出力が複雑なものもあり、今回分かりやすくまとめてみました。

あらかじめ「Advanced Custom Fields」プラグインをダウンロードの上、ご覧ください。

 



Advanced Custom Fieldsでテキストを表示する方法

テキストフィールドは、単純なテキスト入力を作成します。一番よく使うフィールドです。

 

表示

 

 

Advanced Custom Fieldsでテキストエリアを表示する方法

Textareaフィールドは、テキストエリアを作成します。テキストとの違いは複数行入力できる点です。

 

表示

 

 

Advanced Custom Fieldsで範囲を表示する方法

範囲フィールドは、数値を選択するためのフィールドです。

 

表示

フィールドは数値を返します。

今回は、選択した値をすべての<h2>要素の「font-size」スタイルとして使用する方法になります。

 

 

Advanced Custom Fieldsでチェックボックスを表示する方法

チェックボックスフィールドを作成できます。設定画面で「選択肢」の部分を設定しておけば、値の取得が便利です。

 

表示

チェックボックスフィールドは、選択された選択肢の配列を返します。

基本の表示
 

選択した複数の値を読み込んで表示
 

値とラベルを表示

この例は、「値のフォーマット」設定を使用せずに、選択した値とラベルをロードする方法です。

 

条件付きで表示
 

 



Advanced Custom Fieldsでラジオボタンを表示する方法

ラジオボタンフィールドは、選択可能なリストを作成します。

 

表示

基本の表示
 

値とラベルを表示

この例は、「値のフォーマット」設定を使用せずに、選択した値とラベルをロードする方法です。

 

条件付きで表示
 

 

Advanced Custom Fieldsでセレクトフィールドを表示する方法

選択フィールドは、ドロップダウン選択または複数選択入力を作成します。

 

表示

基本の表示
 

複数の表示

選択した複数の値を読み込んで表示する方法です。

 

値とラベルを表示
 

条件付きで表示
 

 

Advanced Custom Fieldsで真/偽を表示する方法

True / Falseフィールドでは、1または0の値を選択できます。

 

表示

True / Falseフィールドは、trueまたはfalseのブール値を返します。値は、「1」または「0」としてDBに保存されます。

 

基本的な条件付きの表示

値を使用して条件付きでタスクを実行する方法です。

 

クエリの投稿

この例は、true値を持つ投稿をクエリする方法です。

 

 



Advanced Custom Fieldsでファイルを表示する方法

ファイルフィールドでは、ファイルをアップロードして選択できます。

 

表示

ファイルフィールドは、return valueセットに応じて、配列、文​​字列、またはint値を返します。

 

基本の表示(オブジェクト)

この例は、arrayを使用するときに選択したファイルを表示する方法です。

 

カスタマイズされた表示(オブジェクト)

この例は、object戻り値の型を使用するときにカスタムリンクを表示する方法です。

 

基本の表示(ID)

この例は、IDを使用するときに選択したファイルを表示する方法です。必要なデータのみを効率的にロードできます。

 

基本の表示(URL)

この例は、URLを使用するときに選択したファイルを表示する方法です。

基本的なリンクを効率的に表示できますが、ファイルに関する追加データを読み込むことはできません。

 

 

Advanced Custom Fieldsで画像を表示する方法

画像フィールドでは、画像をアップロードして選択できます。

このフィールドは、WPメディアポップアップを使用して、アップロードおよび選択プロセスを処理します。

 

表示

画像フィールドは、return valueセットに応じて、配列、文​​字列、またはint値を返します。

 

基本の表示(ID)

この例は、image IDを使用するときに選択した画像を表示する方法です。

この例では、wp_get_attachment_image()関数を使用して画像HTMLを生成します。

 

基本の表示(配列)

この例は、image arrayを使用するときに選択した画像を表示する方法です。

この戻り型により、alt、キャプション、サイズなどの追加の画像データに簡単にアクセスできます。

 

arrrayを使用した表示

この例では、image array戻り値の型を使用するときに、選択した画像のカスタムサイズを表示する方法です。

この戻り型により、サイズ、幅、高さなどの追加の画像データに簡単にアクセスできます。

 

基本の表示(URL)

この例は、URLを使用するときに選択した画像を表示する方法です。

この戻り型により、基本的な画像を効率的に表示できますが、画像に関する追加のデータを読み込むことはできません。

 

 

Advanced Custom FieldsでWysiwygエディタを表示する方法

Wysiwygフィールドは、投稿およびページで使用される一般的な方法でWordPressコンテンツエディターを作成します。

これは、テキストとマルチメディアの両方を単一の領域内で編集およびスタイル設定できるため、コンテンツの編集に最も役立つフィールドの1つです。

 

表示

 

 



Advanced Custom Fieldsでカラーピッカーを表示する方法

カラーピッカーフィールドでは、javascriptポップアップを使用して色を選択できます。

 

表示

 

 

Advanced Custom Fieldsでデイトピッカーを表示する方法

デイトピッカーフィールドは、jquery日付選択ポップアップを作成します。このフィールドは、テーマで使用する日付を設定するのに役立ちます。

 

表示

基本の表示
 

応用の表示

値(YYYYMMDD形式で保存)を取得し、数値に変換してさらに変更する方法です。

 

 

Advanced Custom Fieldsでデイトタイムピッカーを表示する方法

デイトタイムピッカーフィールドは、jQueryの日時選択ポップアップを作成します。

このフィールドは、テーマで使用する特定の日時を設定するのに役立ちます。

選択した値は、さまざまな形式で返されて表示できますが、常に「Ymd H:i:s」としてDBに保存されます。

 

表示

日時ピッカーフィールドは、フィールドの設定で指定された形式で日時値を含む文字列を返します。

 

 



Advanced Custom Fieldsでタイムピッカーを表示する方法

タイムピッカーフィールドは、jQuery時間選択ポップアップを作成します。

このフィールドは、テーマで使用する特定の時間を設定するのに役立ちます。

選択した値は、さまざまな形式で返されて表示できますが、常に「H:i:s」としてデータベースに保存されます。

 

表示

タイムピッカーフィールドは、フィールドの設定で指定された形式で文字列値を返します。

 

 

Advanced Custom Fieldsでユーザーを表示する方法

ユーザーフィールドでは、1人以上のユーザーを選択できます。

このフィールドタイプは、データオブジェクト間の関係を作成するのに役立ちます。

値をWP_User IDとして保存し、取得時に完全なWP_Userデータを返すことができます。

 

表示

選択した単一のユーザーを表示

選択したユーザーを表示する方法です。

 

選択した複数のユーザーを表示

選択した複数のユーザーをリストに表示する方法です。

 

 

Advanced Custom Fieldsでリンクを表示する方法

リンクフィールドは、リンク(URL、タイトル、ターゲット)を選択できます。

 

表示

リンクフィールドは、戻り値の設定に応じて配列または文字列を返します。

 

Arrayを使って表示
 

リンクURLを使って表示
 

 



Advanced Custom Fieldsでページリンクを表示する方法

ページリンクフィールドでは、1つ以上の投稿、ページ、またはカスタム投稿タイプを選択できます。

このフィールドは、投稿のURL(パーマリンク)を返すため、別の投稿に簡単にリンクするのに役立ちます。

 

表示

基本の表示

選択したページリンク値をロードして表示する方法です。

 

複数のページリンクを表示

選択された複数のページリンク値を読み込んで表示する方法です。

 

 

Advanced Custom Fieldsで投稿オブジェクトを表示する方法

投稿オブジェクトフィールドは、ページ+投稿+カスタム投稿タイプを選択できる選択フィールドを作成します。

このフィールドは、別のページ/投稿へのリンクに役立ちます。

 

表示

APIは、単一の投稿オブジェクト(APIはget_postを使用)または投稿オブジェクトの配列(APIはget_postsを使用)を返します。

 

単一の投稿オブジェクトのデータを表示
 

複数の投稿オブジェクトのデータを表示
 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!