WhiskyStudios

Wordpressのプラグイン「Custom Field Suite」の使い方についてまとめています。, 仕事上、Wordpressでサイト構築をする事が割と頻繁にあるのですがほぼ必須のプラグインとなっています。, このプラグインについてまとめているサイトは多いですが、私が使用したい情報が1つのサイトにまとまっていないため出来る限り1つのサイトで解決出来るようにまとめページを作ってみました。, 公式ドキュメント Getting Started - Custom Field Suite [/code], labelタグを利用して擬似的にパーツを作ります。 CSSの擬似セレクタ、擬似要素、擬似クラスなどを利用しますので、それらの仕組みは理解しておいた方が良いです。 それでは、おさらいしてみましょう。, 隣接セレクタ(E + F)とは要素と要素が直接隣接している場合（直後の要素）に適用されるセレクタです。要素と要素の間に別の要素が有る場合はダメ。, beforeは要素内の一番前に好きな文字を追加でき、逆にafterは一番最後に追加できます。, ちなみに要素::擬似要素と間にコロン二つつけて記述します(CSS3)。 詳細は下記のサイトを参考にしてください。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。 なお、子ループでforeachの中で（array）を使用している理由は、, というエラーが出てしまうためです。 ラジオボタンの表示コード; 画像の表示コードに関して; Advanced Custom Fields4.3.4に追加されているフィールドタイプ「Google Map」の表示コード; 表示コードをどこに入れるか？ Advanced Custom Fields … defaultは最初からチェックが入っている値（checkedにしておいてくれる）を選べます。, フィールドタイプを[選択肢]のラジオボタンに設定、あとは選択肢を入れ、お好みでデフォルト値を入れます。, 条件分岐させたいループの前に下記のコードを記述します。例ではget_posts()を使用しています。, [WordPress]カスタムタクソノミーに親子関係（階層）を持たせ、複数選択したタームの並び順を親＞子の順番に表示する, [WordPress]登録済みのサムネイル画像（アイキャッチ）を自動で作り直してくれるプラグイン AJAX Thumbnail Rebuild, [WordPress]taxonomy.phpで現在のカスタムタクソノミーを取得しカスタムフィールドの値で条件分岐させる, Custom Field Templateの使い方[WordPress] –　KoToRi Blog, Advanced Custom Fields－フィールドタイプ – CMS with Komodo Edit, How To Create A Better Meta Box In WordPress Post Editing Page – Deluxe Blog Tips, How to Display Custom Fields Outside The Loop in WordPress – wpbeginner, カスタムフィールドでよく使うタグ・関数 – CMS with Komodo Edit, [MH4G版]G級を駆けるためのオススメ狩猟笛｜モンハン Advent Calendar 2014, [Wordpress]カスタムフィールドでラジオボタンを作り、ラジオボタンの値で条件分岐（ループ内・外・組み込み）させる. labelでラッピングしてもしなくても原理は一緒です。, チェックボックスのチェックマークはCSSで作ってます。背景なしでborder-bottomとborder-rightとtransform:rotateで40度ほど回転させてます。詳しくはコードを見てみてください。, Font Awesomeを利用して、チェックマークを入れて見ました。チェックつけた感が出るように、アニメーションも付与。, Font Awesomeじゃないけど、アイコンフォントについての記事もあるのでぜひご参考に。 デザイナーのためのGoogle Material iconsの使い方, cssで工夫すれば色んなデザインのチェックボックスが作れますね！！ あまり引き出しが開かなくてサンプルがたくさん作れませんでしたが、参考にしていただければ幸いです。 ぜひ、基本をおさえてオリジナルデザインにもチャレンジしてみてください。, [gist eab02188bdbc775e21290fed8d814731#file-gistfile1-css]. ラジオボタンの見た目をかっこよくしたい（ザックリ） inputのtype属性はradioのままで実現したい; CSSの編集は最低限にとどめたい; やったこと. 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。, 下記のようにidとforの値を同じにすればそれぞれを関連付けることができます。 WordPressのプラグインの使い方を解説している記事です。Advanced Custom Fieldsという独自のカスタムフィールドを作成することができるプラグインの説明をしています。オリジナルの投稿機能を加えたいという人にはおすすめです。 Custom Field Templateにはこれ以外にチェックボックス、ラジオボタンなどもありますが、それらについては触れませんので、Custom Field Templateの配布ページ等で確認してください。 ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できないという難点があります。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。 「label」とは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。 IE8以下ではコロン二つに対応していませんが、現在IE8はサポート切れてるのでいいんじゃないかな^ ^; wordpressのプラグインCustom Field Suite、基本の使い方からネストループ（入れ子）の実装まで解説 4月 11, 2015 by ひさっち in wordpress. Bootstrap 4のButton pluginを適用; 詳細 Bootstrap 4の導入. © 2020. 「Custom Field Suite」は、オリジナルのカスタムフィールドを設定できるプラグインです。今回は、商品ページのSKU部分に表示する入力フィールドを作成します。, ①～③の設定ができたら、次に「カートボタン下説明欄」のフィールドを作成するので、④「新規フィールドを追加」をクリックします。, 今回作成するのは上記２つのフィールドになるので、「カートボタン下説明欄」の設定をした後に「新規フィールドを追加」ボタンはクリックしないでよいです。, ビジュアルモードのみの表示になるので、テキストを入力したり画像を挿入するだけの編集ならこのままで構いませんが、HTMLタグで編集したい場合は「表示オプション」の設定が必要です。, カスタムフィールドの値エリアにタグを入力し編集したら、それぞれ名前の下に表示されている「更新」ボタンをクリックして変更を保存します。, 「②SKU詳細説明のフィールドグループ作成」で作成したフィールドを、商品ページSKUの下図の位置に表示されるように設定します。, 表示させるためには、「wc_item_single.php」と「wc_sku_select.php」の編集が必要です。詳しくは『行列ショップカリキュラム　5-10』をご覧ください。. | 仕様方法が分かればCSSだけでもかなり表現できることが広がります。, 擬似クラス:checkedはCSS3で追加されたセレクターです。ラジオボタンやチェックボックスがチェックされた状態を指定する擬似クラスです。, それではcssでラジオボタンをスタンダードな感じに装飾してみます。 もちろん、idなので他のパーツと値は重複不可です。, [code title=”html”] ※2017/04/19確認 プラグインページからのリンクは切れていました。, 画像の場合はIDが出力されるので、下記のように画像IDからURLを取り出す必要があります。, wp_get_attachment_image_src の使い方は下記からご確認ください。 こんにちは、リードスペースです。 ラジオ01 セレクト、チェックボックス、ラジオボタンなどの選択肢が、A:B(ex, 1:りんご)と指定されている場合、csvファイルにはA(1)の値を記入します。 チェックボックなど複数選択フィールドの値は、1つのセルにカンマ区切りで値を入力してください。 Advanced Custom Fieldsでセレクトボックスなどの選択肢を動的に設定する方法 2019年6月10日 Advanced Custom Fieldsでラジオボタンを作成し値を出力する方法 2019年1月16日 ショートコードでWarning: Illegal string offsetエラーが出る時の解決策【ワードプレス】 2018年8月24日 WordPressでカスタムフィールドを扱うプラグインとしては「Advanced Custom Fields」(略して「ACF」とも呼ばれる)が有名ですが、最近 ... ラジオボタン; ... G SuiteからGoogle Workspaceにアップグレードしたのでその流れなどのメモ ブログを報告する, Wordpressプラグイン 「Custom Field Suite」使い方まとめ, 関数リファレンス/wp get attachment image src - WordPress Codex 日本語版. 「Advanced Custom Fields」の方をすすめられたりもしてたんですが、元々フィールドタイプにLoopが有る（入力項目のセットをボタン一発で投稿フォーム上で追加できる機能）って事で「Custom Field Suite」にしてみました。 「教室」の編集画面に「担当の先生」というセレクトボックスを作り、「先生」の一覧を選択肢に表示したい。, もちろん直接設定すれば選択肢は作れますが、先生が増えたり減ったりした時に、毎回カスタムフィールドを修正しなければなりません。自分で運営しているサイトならいいかもしれませんが、一般の方が運営するサイトを制作している時などは、「新しい先生が入ったらカスタムフィールドを修正して下さい。」なんて言えませんよね。, こんな時、カスタム投稿タイプ「先生」の一覧を取得して「教室」のカスタムフィールドの選択肢に取り込めれば便利です。, 以下は基本的な部分だけのコードです。使用中のテーマのfunctions.phpに追記します。, 最終行のname=teacher_nameの部分が、カスタムフィールドの名前です。この場合、teacher_nameという名前のフィールドの選択肢を書き換えています。ここは実際のフィールド名に合わせて変更して下さい。, 上のコードを追記すると、最終行で指定したフィールドの選択肢が”ラベル1”と”ラベル2”に変更されます。5行目と6行目でそれぞれ設定していますので、ここを書き換えれば変更できます。配列$field[‘choices’]に、キー（選択肢のvalue）と中身（選択肢のlabel）を入れていきます。, 下のコードは、”teachers”というカスタム投稿タイプの記事のタイトルをすべて取得して、”teacher_name”という名前のカスタムフィールドの選択肢にする例です。labelにタイトル、valueに投稿IDを取り込んでいます。IDをvalueに入れておくことで、その記事のデータも好きなように活用できます。, さすがAdvanced Custom Fields！ナイスなフィルターフックを用意してくれていますね。, 同じやり方で、テキストボックスもラジオボタンもセレクトボックスも、とっても簡単に動的な書き換えができます。, ちなみに、このコードは以下のページを参考にしています。英語ですが、興味のある方はどうぞ。, こんな時、カスタム投稿タイプ「先生」の一覧を取得して「教室」のカスタムフィールドの選択肢に取り込めれば便利, Dynamically populate a select field’s choices, Advanced Custom Fieldsでのチェックボックスの作成と値の利用方法【ワードプレス】.

J Balvin Flower Hat, つくばエクスプレス 駅 地図, 養老の星 幸ちゃん 激レアさん, 紅蓮華 ピアノ 楽譜 中級 無料, Amazon デビットカード ゆうちょ, 阪急電車 すみっこぐらし 運行状況, 京阪バス 茨木市駅 時刻表, 楽天 アプリ ポイント 表示, スマホ 写真 データ 保存場所, 輸入 キャンピングカー カタログ, 英語 ビジネスレベル 英検, 広島県高校駅伝 2020 結果, キャン メイク アイシャドウ 新作, 光村図書 国語 6年 漢字50問テスト, ダイソー 扇風機 600円, Nvidia アカウント ディスプレイ名, 養老の星 幸ちゃん 激レアさん, 小さな恋のうた ギター 2本, 関西 ハロウィンイベント 2020, ファイト 歌詞 意味 海になりました, 北海道 周遊 モデルコース, 夏 車中泊 夜, 坂の上の雲 再放送 2020, 聖剣伝説3 マシンゴーレムs バグ, アプリ インストール制限 解除 方法, チューダー ズ 配信, 28歳 女優 堀越出身, プロ野球 チケット 値段 京セラ, 車 リース 1万円, ジルスチュアート 財布 高校生,