WhiskyStudios

現在はWEB作成企業数社と契約し年間100件以上の案件を手掛る。 All Rights Reserved. ここでは、画像のurlを取得して画像を表示する方法をご紹介します。, グループ名「imggroup」カスタムフィールド名（画像）「imgA」でシンプルに画像だけを繰り返すサンプルを用意しました。 次のコードは、if 構文を使った場合の表示方法です。, if 構文の時には代入演算子を使うと便利です。 Copyright © 2019 WEBクリエイターの部屋 All Rights Reserved. 次のコードをリーピーターフィールドのループ内に追加してください。, リピーターフィールドの取得がうまくいかない場合は the_sub_field() や get_sub_field() になっていることを確認しましょう。 やはりそうでしたか。。。 ここで、10件ごとにページネーションを付ける仕様にすると思います。, つまり、スマートカスタムフィールドの繰り返し機能でコンテンツを増やすのではなく、カスタム投稿タイプの記事としてコンテンツを増やす、ということです。 代入演算子を使う場合は必ず get_field() を使います。, ACF の有料機能リピーターフィールド（繰り返しフィールド）を使う場合は the_sub_field() を使います。 それと、もう一つ可能であれば、おっしゃっていた100件以上の記事があって10件ごとにページネーションを付けたいそのページのURLも解決策の参考になるかもしれないのでお教えいただけますでしょうか。 else{ それがもし可能であれば、大変お手数ですが、その記事のURLをまた当記事のコメント欄に張り付けていただいて、私がその記事を見に行ってソースを確認する・・・というのは・・・いかがでしょうか・・・. もし私なら、まず、CPT UI を使ってカスタム投稿（「sample」としておきます）を作ります。 オプションページの詳しい表示方法は、Advanced Custom Feld のアドオン Options Page の表示方法をご覧ください。, 条件分岐を使った表示方法を紹介します。 このフィールドタイプは単一の文字列値を格納するのに適しています。, if 構文の時に代入演算子を使う場合は get_field() を使います。 Smart Custom Fieldsの使い方【カスタムフィールド繰り返し出力】 WordPress web制作者 「カスタムフィールドの繰り返し出力をwebサイトに取り入れたいんだけど、やり方がわからない…できれば無料で実現できる方法を知りたい！ 次のコードは、フィールド名が file で返り値がファイル配列の場合、ファイルのパスをファイル名のテキストリンクで表示する方法です。, ファイルサイズを取得したい場合はWordPress メディアのファイルサイズを表示する方法をご覧ください。, WordPress のプラグイン Advanced Custom Fields を使ったカスタムフィールド値の取得と表示方法を紹介しました。 次のコードは YYYYMMDD の形式で保存された生の値を取得し、それを修正するために数値を変換する方法です。, その他に、直接日本語表記に変更したい場合は、管理画面で以下のフィールドの設定を任意で変更してみましょう。, ギャラリーフィールドの表示方法を紹介します。 そして、カスタム投稿「sample」に記事を増やす要領でコンテンツを増やし、固定ページにカスタム投稿タイプ「sample」の記事一覧を出力します。 次のコードは、フィールド名が colors 登録している値とラベルが red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。, セレクターフィールドで値を条件付きで表示する方法を紹介します。 本サイトは可能な限り画像を少なくし、余計なcssやjsを使わず表示速度を速め、ユーザーの方々のデータ通信料を使わないよう設計しております。, Smart Custom Fields愛用者が常用する全カスタムフィールド出力方法, Windows10でMacのApple純正キーボードを使う方法【キーボードカスタマイズ】. 次コードは、ページIDが 123 の場合の表示方法です。, 現在表示しているページの親ページIDを取得するには WordPress 直上の親ページのIDやスラッグを取得をご覧ください。, ACF のアドオン Options Page（オプションページ）を使ってカスタムフィールド値を取得して表示する場合は、フィールド名の後に option を追加します。, ACF のアドオンオプションページを使用する場合はパラメーターに option を追加します。 次は実践的な表示方法を紹介していきます。, フィールドタイプ「テキスト」「テキストエリア」「数値」「メール」「パスワード」の表示方法を紹介します。 次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合に red を表示します。, セレクターフィールドで登録した値が複数の場合の表示方法です。 Smart Custom Fields は繰り返し機能が無料で使えてとてもありがたいですよね！ 解決策を探します・・・申し訳ありませんm(_ _;)m, では、とても回りくどいやりかたになって恐縮なのですが、そのソースを張り付けただけの記事を作っていただくことは可能でしょうか。 ーーーーーーーーーーーーーーーーーーーーーーー Repeater Field については、Advanced Custom Feld のアドオン Repeater Field の表示方法で詳しく紹介しています。, ACF を使う上での注意点をリストアップしました。 フィールド名が colors 登録している値が red:赤 の登録があるかどうかを判別して表示する方法です。, ラジオボタンフィールドでラベルを取得して表示する方法を紹介します。 まずは ACF の基本的な表示方法と、表示されない時の注意点や対処方法を紹介します。, 投稿に入力されているカスタムフィールド値を「表示」する場合は the_field() を使用します。, フィールド名を変更する場合は the_field('text_field') 内のフィールド名 text_field を変更します。, 投稿に入力されているカスタムフィールド値を「取得」したい場合は get_field() を使用します。, 別の投稿のカスタムフィールド値を取得する場合は フィールド名の後にポストIDを指定することでフィールド値を取得できます。 セレクターフィールドはチェックボックスとラジオボタンに似た表示方法になります。, セレクターフィールドで値が一つ場合の表示方法を紹介します。 次のコードは、フィールド名が colors 登録している値が red：赤 の場合にラベル（赤）を表示します。, セレクタフィールドの表示方法を紹介します。 次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合に値 red を表示します。, チェックボックスフィールドで登録した値が複数の場合の表示方法です。 この出力された情報をひとまず変数にまとめて（ここでは“$ groupA”）phpの繰り返し「foreach」をつかって繰り返しを出力します。 『Smart Custom Fields』のインストール. まずはソースをご確認ください。, これは先ほど例に挙げた質問と答えが繰り返されるFAQ形式のサンプルに、条件分岐を追加したものです。この条件分岐を設置することにより、FAQのカスタムフィールドに登録された値が一つもない場合、「Q.」、「A.」の部分は表示されず、「現在表示できる情報がありません」という部分が表示されるようになります。 以前の記事「無料！簡単！便利！カスタムフィールドの繰り返しが使えるプラグインSmart Custom Fieldsの使い方」でもサンプルとして使用した、質問と答えが繰り返されるFAQ形式の出力を「Smart Custom Fields」で出力する場合を今回もサンプルとして使用します。, ちなみに、質問内容[faq_q]のタイプはテキスト、質問の答え[faq_a]のタイプはテキストエリアで設定しました、それによっての書き方の変化も注目してみてください。これがそのソースです。, 質問の答え[faq_a]はテキストエリアで改行を含んだ内容を登録できますが、改行も出力したい場合はカスタムフィールドの出力部分をnl2br()で囲ってあげる必要があります。, カスタムフィールドをテンプレート内で出力する際、もし値がない場合は代替えを表示させるなど、条件によって表示方法を変えたり非表示にしたりといったことがよくあると思いますが、「Smart Custom Fields」の繰り返しにこういったものを設置する場合の方法を解説します。 [1] 画像の幅(width) WordPress のプラグイン Advanced Custom Fields を使ったカスタムフィールド値の取得と表示方法を紹介します。 = $kiji){ 値の取得方法と合わせて、表示されない時の注意点や対処方法も紹介します。, Advanced Custom Fields（以下ACF）は、WordPress で柔軟なカスタムフィールドを制作できる便利なプラグインです。 「foreach」内で、カスタムフィールドを出力するときは、$fields[‘【カスタムフィールド名】’];　とします。, ここでは、具体例を使って「Smart Custom Fields」の繰り返しの出力方法を解説したいと思います。 私の仕事柄、WordPressでサイトを1からカスタマイズして作ったりリニューアルのメンテナンスやカスタマイズ仕直しの業務が多々あり、毎回非常にお世話になっているのが「Smart Custom Fields（SCF）（スマートカスタムフィールド）」なんです。, もちろん他にもお世話になっているWordPressのプラグインは多々ありますが、今回はスマートカスタムフィールドという超便利なプラグインの使い方を備忘録がてら書いてみます。, 今回はSmart Custom Fieldsのインストール方法は割愛して進めようと思います。, ある程度ワードプレスを使いこなしている方がこのページにたどり着いていると思うので。, 「echo」を使うと「” ”」で囲ってしますのでコードヒントが適用されなくなってしまいます。, 配列の内容を出力する場合は「foreach」を使ってループして出力する、という方法を使います。, スマートカスタムフィールドではチェックボックスのフィールドでは「値」を出力できないので、どうしても値を出力したい場合は、, これで実際に出力してみると、なんと、スマートカスタムフィールドで設定した「キー」が出力されます。, Smart Custom Fields（SCF）はどうしても「値」は出さしてくれないようです(笑), このように書くと、2行目のそのままecho で出力すると、ファイルのIDが出力されます。, 「ファイル」カスタムフィールドで画像をアップロードして選択しているならwp_get_attachment_image_srcを使うことができます。, スマートカスタムフィールドに限らずですが、カスタムフィールドで「画像」を選択した場合、タグごと出力する方法と、URLを出力する方法があります。, と書いているんですが、0にするとURLが出力されます。これを変えると、URL以外の情報も出力することができます。, とすると、bool(false)と出力されるんですが、正直何なのか分かっていません（笑）, スマートカスタムフィールドで上記のように画像に関する情報は一部出力できますが、wp_get_attachment_image_src();ではalt（オルト）を出力できません。, これで、スマートカスタムフィールドで登録した画像のalt（オルト）を出力できます。(￣▽￣;), ポイントは「get_post」を使ってアップロードした画像の情報を取得している部分です。, ともかく、altを出力できる記事をなかなか見つける事ができませんでしたので、同じように悩んでいるwebエンジニアの方はどうぞ使ってください！！, 上で使っているのは wp_get_attachment_image_src(); ですが、, ただ、改行が反映されませんので、下記のように改行を反映する nl2br(); を使います。, 実は当サイトTechStock（テックストック）でもカラーピッカーのカスタムフィールドを使っています。, この仕組みは、各記事にカラーピッカーをスマートカスタムフィールドで作り、背景色と文字色を選んで、, ただ、デイトピッカーのフィールドを作るときに「日付形式」を設定する必要があります。, 「関連する投稿」では、デフォルトの投稿や固定ページ、カスタム投稿などから、記事を選択して出力することができます。, 記事のIDが分かるとタイトルだけでなくリンクや属するタームなど、おそらくすべての情報が取得できるのではないでしょうか。, 初めまして、こんにちは。 ここで重要なのは、グローバル変数へセットした時は必ずポストオブジェクトをリセットすることです。 次のコードは、フィールド名が gallery の場合の表示方法です。, ギャラリーフィールドの詳しい表示方法はAdvanced Custom Fields のアドオン Gallery Field の表示方法をご覧ください。, ファイルフィールドの表示方法を紹介します。 まずはSmart Custom Fieldsで入力域の大枠を追加する部分です。 /** * カスタムフィールドを定義 … Smart Custom Fieldsでは「値」を出力することができない . Wordpressのプラグイン「Smart Custom Fields」の使い方を説明したページです。Smart Custom Fieldsは繰り返し機能が無料で使えるカスタムをフィールド生成できるプラグインです。Smart Custom Fieldsの設定方法から出力方法までこのプラグインの全てが分かります。 [2] 画像の高さ(height), 画像の大きさはキーワードとなる文字列 (thumbnail, medium, large, full)を使います。初期値は「thumbnail」です。, WEB制作者としてフリーランスで10年以上。 固定ページで10件ごとにページネーションを付けたいのです。 まずは、次のソースをご確認ください。, これは、グループ名が「groupA」で「kurikaeshiB」というカスタムフィールドを繰り返す場合の出力方法です。 By following users and tags, you can catch up information on technical fields that you are interested in as a whole you can read useful information later efficiently By … それでは早速書き方をみてみましょう。, 「Smart Custom Fields」には、独自の出力方法がいくつかあるのですが、繰り返しを出力する際には、特にこの方法が必要になります。 お答えできるかどうかはわかりませんが・・・（汗）, 状況が詳しく分からないのでトンチンカンなことになるかもしれませんが、 次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合にラベル赤を表示します。, チェックボックスフィールドでラベルを取得して表示する方法を紹介します。 フィールドの表示と取得方法が何通りかあるので、使用する場面を見て使い分けていきましょう。, チェックボックスフィールドとラジオボタンフィールドで値が一つの場合の表示方法を紹介します。 テキストフィールドと同じくらい頻繁に使うのが画像フィールドです。 foreach ($groupA as $fields ) {　【ここに繰り返す内容をいれる】} WordPressのカスタムフィールドの繰り返しが使えるプラグイン「Smart Custom Fields」を以前紹介しましたが、今回はその繰り返しをテンプレート上で出力する方法です。, 「Smart Custom Fields」の基本についてはこちらをご確認ください。, とても便利な「Smart Custom Fields」ですが、出力方法がわからなければ意味ないですよね？ ここでポストオブジェックトをリセットしないと、ページの残りの部分が正常に動作しない場合があります。, 表示される投稿のデータが最初の一件を繰り返してしまう場合は、global $post; を追加して $post>ID; プラグインの使い方に慣れるまで苦労しますが、慣れてしまえば様々な案件に対応できる便利なプラグインなので、使い方をぜひマスターしましょう！, 不明点があればお気軽にご質問ください。 foreach ($groupA as $fields ) {　【ここに繰り返す内容をいれる】}, 【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右), 【css】背景色(background-color)のみを透過させ文字などは透過させない方法, 【html】ファイルをダウンロードさせる最も簡単な方法 - JavaScript不要！download属性使用！. いかがでしょうか。, 現在までは記事一覧表示で100件以上表示させていましたが、スクロールが長くなるので、10件ごとにページネーションを付けたいのです。, 度々ありがとうございます。 フィールド値が表示されない場合は次の点を確認してみましょう。, リピーターフィールドや柔軟コンテンツ内で、フィールド値を取得や表示する場合は the_sub_field になります。 WordPressのプラグインSmart Custom Fieldsで作成したカスタムフィールドを出力します。 カスタムフィールドの種類にあわせた、よく使うコードをサンプルコードとして紹介します。 スポンサーリンク 目 … break;} ?> カスタムフィールドをテンプレート内で出力する際、もし値がない場合は代替えを表示させるなど、条件によって表示方法を変えたり非表示にしたりといったことがよくあると思いますが、「Smart Custom Fields」の繰り返しにこういったものを設置する場合の方法を解説します。 デザイン教科書 (Webデザイナー養成講座). （その記事にはnoindex,nofollowを付けた方がいいですね。） WordPress のプラグイン Advanced Custom Fields を使ったカスタムフィールド値の取得と表示方法を紹介します。値の取得方法と合わせて、表示されない時の注意点や対処方法も紹介します。 確認させていただきます。 出力方法をササっと確認したい時にどうぞ^^ 同じテーマの記事 【WordPressプラグイン】Smart Custom Fields (SCF) 出力方法一覧 【WP】Smart Custom Fields 表示条件(投稿)でカスタム投稿タイプの投稿も選べるようにする(投稿IDを表示) 現在のコードを入れておきます。 次のコードは、フィールド名が colors 登録している値とラベルが red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。, 値をタグなどで囲む場合は次のような方法があります。 リピーターフィールドの場合は get_sub_field() になります。, 画像フィールドの表示方法を紹介します。 などで取得できるか試してみてください。, 表示される日付の値をカスタマイズしたい場合は、次のように調整することが可能です。 次のコードは、フィールド名が colors の場合に項目をリストにして表示する方法です。, チェックボックスフィールドとラジオボタンフィールドで値を条件付きで表示する方法を紹介します。 wp_get_attachment_image_srcは画像のurlやサイズを取得できる関数で、配列には次のものを含みます。, [0] 画像のurl テレビ ソニー デメリット, 白い恋人達 歌詞 意味, 雑所得 住民税 いくら, マック コーヒー 作り方, 黒い砂漠 マノス細工所 場所, パフスリーブ 肩幅 広く見える, Outlook 本文 表示されない, アラフォー 独身 女 実家暮らし, スマホ 写真 データ 保存場所, モバイル エクセル 読み取り専用, 遊戯王 環境トップ 歴代, 楽天 ショップid 調べ方, Ipad Word 名前を付けて保存, パワーポイント ハイパーリンク 色, Hope のあと 名詞, Pc 壁紙 高画質 おしゃれ アニメ, 生活科 あさがお 指導案, 英語 括弧 読み方, 大分 素泊まり ファミリー, 外国人労働者 問題 簡単に, Smap 夜空ノムコウ カラオケ, クラブチーム 部活両立 サッカー, Seventeen メンバー同士 呼び方, ハイエース リフトアップ シャックル 車検, Iphone メール 表示件数 Ios13, キレイモ 広告 電車,