November 15, 2020
by

「Advanced Custom Fields」の方をすすめられたりもしてたんですが、元々フィールドタイプにLoopが有る(入力項目のセットをボタン一発で投稿フォーム上で追加できる機能)って事で「Custom Field Suite」にしてみました。 IE8以下ではコロン二つに対応していませんが、現在IE8はサポート切れてるのでいいんじゃないかな^ ^; 変更後は必ず、それぞれ名前の下に表示されている「更新」ボタンをクリックして保存してください。, 変更を保存した後には、一度商品ページの編集画面から離脱し、一旦違うページへ移ることをおすすめします。, 2)画面右のキーワード入力欄に、「Custom Field Suite」と入力します。検索され、画面にプラグインが表示されます。, 5)有効化すると、レフトナビの一番下に「フィールドグループ」が表示されます。これでインストール完了です。, 1)レフトナビの「設定」→「Custom Field Suite」をクリックします。, 4)「フィールド」エリアの右下にある「新規フィールドを追加」ボタンをクリックします。, 2)表示オプションのボックスが開きますので、その中にある「カスタムフィールド」にチェックを入れてください。, 3)先ほど設定した2つのフィールドエリアの下に、「カスタムフィールド」が表示されます。, 4)「商品詳細説明欄」と「カートボタン下説明欄」のフィールドのビジュアル部分に、仮にテキストを入力して、商品ページの変更を保存します。, 1)入力編集後、こちらの「変更」ボタンを押さずにページ全体の「更新」ボタンをクリックしてしまうと、フィールドのビジュアル入力が優先されてしまうため、値エリアに入力したタグが消えてしまいます。, 2)名前の下に表示されている「更新」ボタンをクリックして変更を保存しても、フィールドのビジュアル入力エリアは更新されません。そのため、ページ全体の「更新」ボタンをクリックしてしまうと、1)と同じ状態になってしまうため、値エリアに入力したタグが消えてしまいます。. Advanced Custom Fields-フィールドタイプ – CMS with Komodo Edit; 上記2つのプラグインの、ラジオボタンの設定の仕方は以下になります。 Custom Field Template. ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね?, 今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。, ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できないという難点があります。 Wordpressのプラグイン「Custom Field Suite」の使い方についてまとめています。仕事上、Wordpressでサイト構築をする事が割と頻繁にあるのですがほぼ必須のプラグインとなっています。このプラグインについてまとめているサイトは多いですが、私が使用したい情報が1つのサイトにまと … ワードプレスでカスタムフィールドの作成にAdvanced Custom Fields(以下ACF)を使用している方は多いと思います。長ったらしいカスタムフィールドのコードを書かずに済む、とっても便利なプラグインですよね。, 選択タイプのカスタムフィールド(セレクトボックス・ラジオボタン・チェックボックス)に、ACFのフィールド作成画面から直接選択肢を設定するのではなく、変数などを入れたいと思った事はないでしょうか。, 今回は、ACFの選択系フィールドに変数などを取り込んで、選択肢を動的に設定する方法です。, ちょっと伝わりづらいかもしれませんので書いておきますが、今回やりたい事は以下のような事です。, たとえば、サッカー教室のサイトがあったとします。 Wordpressのプラグイン「Advanced Custom Fields」を使ったカスタムフィールドのチェックボックスとラジオボタンによる値の出力や条件分岐について説明します。 ラジオボタンの見た目をかっこよくしたい(ザックリ) inputのtype属性はradioのままで実現したい; CSSの編集は最低限にとどめたい; やったこと. 1)レフトナビの「設定」→「Custom Field Suite」をクリックします。 商品ページに必要なフィールドグループを作成します。 2)左上にある「新規追加」ボタンをクリックします。 ラジオボタンの表示コード; 画像の表示コードに関して; Advanced Custom Fields4.3.4に追加されているフィールドタイプ「Google Map」の表示コード; 表示コードをどこに入れるか? Advanced Custom Fields … 仕様方法が分かればCSSだけでもかなり表現できることが広がります。, 擬似クラス:checkedはCSS3で追加されたセレクターです。ラジオボタンやチェックボックスがチェックされた状態を指定する擬似クラスです。, それではcssでラジオボタンをスタンダードな感じに装飾してみます。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。 「loop_child」の部分は子ループです。ループの中でループを回す場合に必要です。 before/afterを使う時のポイントはcontentプロパティに必ず値が必要で、あくまで指定した要素内に追加されるということを理解しておきましょう。 こんにちは、リードスペースです。 ※2017/04/19確認 プラグインページからのリンクは切れていました。, 画像の場合はIDが出力されるので、下記のように画像IDからURLを取り出す必要があります。, wp_get_attachment_image_src の使い方は下記からご確認ください。 前回の記事でAdvanced Custom Fieldsの設定方法をご紹介したので、今回はその設定したカスタムフィールドを取得して表示(出力)する方法をご紹介したいと思います! ... フィールドタイプ:ラジオボタン. 前回の記事の補足になりますが、そもそもテキストしか扱えないカスタムフィールドでどうやってラジオボタン使うの? ということと、カスタムフィールドのラジオボタンの値での条件分岐の方法(ループ内・ループ外・ループに組み込む)をご紹介します。, カスタムフィールドで出来ることは想像以上に多くカバーしきれていないので、今回はラジオボタンにのみ焦点を絞って解説します。, プラグインを使うまでもないという時やもっとレイアウトを思い通りにしたいとかそういった場合は、おなじみfunctions.phpにadd_meta_box()とカスタムフィールドのCRUD関数を使ってコードを追加します。, ※カスタム投稿タイプで使いたい場合は、add_meta_box内のpost部分をカスタム投稿タイプ名に変更します。, 設定するカスタムフィールドが多い場合、簡単で管理が楽なプラグインの使用を検討してみてください。個人的にはCustom Field TemplateかAdvanced Custom Fieldsをよく使っているのでこちらを薦めます。, 上記2つはカスタムフィールドの機能を支援・拡張してくれるプラグインです。もうちょっとこうだったらいいのにと思うWordpressのカスタムフィールドの使い勝手を抜群に良くしてくれます。使い方はたくさんの方が紹介してくれているのでここでは割合させてください。, valueに選択肢を、#を挟んで選択肢を増やします。ここでは選択肢を「OK」と「NG」とします。 | 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。, 下記のようにidとforの値を同じにすればそれぞれを関連付けることができます。 イマジンポケット齋藤秀峰公式サイト All Rights Reserved. WordPressでカスタムフィールドを扱うプラグインとしては「Advanced Custom Fields」(略して「ACF」とも呼ばれる)が有名ですが、最近 ... ラジオボタン; ... G SuiteからGoogle Workspaceにアップグレードしたのでその流れなどのメモ 関数リファレンス/wp get attachment image src - WordPress Codex 日本語版, ※2019/10/1 コメントにてご指摘頂きましたが、表記が一部間違っていたため修正しました。 wordpressのプラグインCustom Field Suite、基本の使い方からネストループ(入れ子)の実装まで解説 4月 11, 2015 by ひさっち in wordpress. なお、子ループでforeachの中で(array)を使用している理由は、, というエラーが出てしまうためです。 WordPressでカスタムフィールドを扱うプラグインとしては「Advanced Custom Fields」(略して「ACF」とも呼ばれる)が有名ですが、最近は「Smart Custom Fields」というプラグインを使っています。, 基本的には管理画面で入力フィールドの定義をすればそれでOKですが、ローカル環境(開発環境)で作って、本番環境に移すことを考えると、項目数が多くなると結構ツライことになります。(フィールド定義のエクスポート・インポート機能がないようなので…), ただ、フィールド定義をPHPコード上で行う方法があるようなので、そのフィルターフック・関数の使い方をまとめておこうと思います。, Smart Custom Fieldsはコードベースでカスタムフィールドの定義ができるようになっているので、テーマのfunctions.phpなどで入力項目の定義が可能です。, カスタムフィールドを定義する配列で使える項目はまとめるのが面倒なので…プラグインのコードを直接確認してみてください(/plugins/smart-custom-fields/classes/fields/*), という、わかりみしかない1文が書いてあったので、コードを眺めて自分でまとめてみたいと思います。, 入力項目はSCF::add_settingで追加した設定に対してadd_groupでグループ・項目の追加をします。, 編集項目は上のコード内の$fields配列にいろいろ定義していく形になります。(とりあえず上のコードをコピペして必要な部分をカスタマイズすれば楽だぞ!未来の俺!), カスタム投稿タイプによって振り分けを行う場合は、$typeと$meta_typeを使って条件判定します。, ACFでは有料プラグインとなっている繰り返しフィールドも作れるので非常に助かってます!, あと、管理画面でフィールドを作っているときに、名前はそのままタイプだけ変えようとすると、名前までクリアされてやや面倒なのでコード上でやったほうが楽ですね(汗, 群馬でフリーランスとして活動するWordPressテーマ・プラグインデベロッパー。「暁」代表(https://yosiakatsuki.net/), WordPressを使った中小企業・店舗のホームページ制作や情報発信アドバイス、ブロガー・アフィリエイター様のWordPressサイトのカスタマイズなどのご相談を受けております。お仕事のご相談はお問い合わせページから。, 【WordPress】カスタムタクソノミーのターム一覧だけ一覧表示件数を変更する方法, 【WordPress】投稿やカスタム投稿タイプでも表示テンプレートを管理画面から選択できるようにする方法, 【WordPress】パスワード保護ページのタイトルに表示される「保護中:」を削除する方法, 【WordPress】スパム対策!Contact Form 7のreCAPTCHA機能を設定してお問い合わせフォームに画像認証を追加する方法, 【WordPress】Docker for Mac & Docker ComposeでWordPressの開発環境を作ってみる, 【WordPress】KUSANAGIでWP_Filesystemが動作せずファイルの内容を取得できないときの対処方法, G SuiteからGoogle Workspaceにアップグレードしたのでその流れなどのメモ, 【WooCommerce】Stripe決済画面にJCBカードのアイコンを追加するカスタマイズ, yStandard Theme by yosiakatsuki Powered by WordPress, Contribute to inc2734/smart-custom-fields development by creating an account on …, Smart Custom Fields をバージョンアップして、コードベースでカスタムフィールドの定義ができる…, Smart Custom Fields でカスタムフィールドの定義を Git で管理できるようになりました! – モンキーレンチ. 「label」とは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。 ラジオボタンを使うテンプレートのテンプレートコンテンツに以下を記述します。 「Custom Field Suite」は、オリジナルのカスタムフィールドを設定できるプラグインです。今回は、商品ページのSKU部分に表示する入力フィールドを作成します。, ①~③の設定ができたら、次に「カートボタン下説明欄」のフィールドを作成するので、④「新規フィールドを追加」をクリックします。, 今回作成するのは上記2つのフィールドになるので、「カートボタン下説明欄」の設定をした後に「新規フィールドを追加」ボタンはクリックしないでよいです。, ビジュアルモードのみの表示になるので、テキストを入力したり画像を挿入するだけの編集ならこのままで構いませんが、HTMLタグで編集したい場合は「表示オプション」の設定が必要です。, カスタムフィールドの値エリアにタグを入力し編集したら、それぞれ名前の下に表示されている「更新」ボタンをクリックして変更を保存します。, 「②SKU詳細説明のフィールドグループ作成」で作成したフィールドを、商品ページSKUの下図の位置に表示されるように設定します。, 表示させるためには、「wc_item_single.php」と「wc_sku_select.php」の編集が必要です。詳しくは『行列ショップカリキュラム 5-10』をご覧ください。. Getting Started - Custom Field Suite もちろん、idなので他のパーツと値は重複不可です。, [code title=”html”] WordPressのプラグインの使い方を解説している記事です。Advanced Custom Fieldsという独自のカスタムフィールドを作成することができるプラグインの説明をしています。オリジナルの投稿機能を加えたいという人にはおすすめです。 ラジオボタンを使うテンプレートのテンプレートコンテンツに以下を記述します。 type = radio value = OK # NG label = ON・OFF設定 default = ON clearButton = true. カスタム投稿タイプ「教室」と、カスタム投稿タイプ「先生」があります。 Custom Field Templateにはこれ以外にチェックボックス、ラジオボタンなどもありますが、それらについては触れませんので、Custom Field Templateの配布ページ等で確認してください。 Wordpressのプラグイン「Custom Field Suite」の使い方についてまとめています。, 仕事上、Wordpressでサイト構築をする事が割と頻繁にあるのですがほぼ必須のプラグインとなっています。, このプラグインについてまとめているサイトは多いですが、私が使用したい情報が1つのサイトにまとまっていないため出来る限り1つのサイトで解決出来るようにまとめページを作ってみました。, 公式ドキュメント カスタムフィールドってwordpressを使用する上でほぼ必須になってきましたね。 手動でfunctions.phpに記述していたのが懐しいですが、現在はプラグインが多く配布 … [/code], labelタグを利用して擬似的にパーツを作ります。 CSSの擬似セレクタ、擬似要素、擬似クラスなどを利用しますので、それらの仕組みは理解しておいた方が良いです。 それでは、おさらいしてみましょう。, 隣接セレクタ(E + F)とは要素と要素が直接隣接している場合(直後の要素)に適用されるセレクタです。要素と要素の間に別の要素が有る場合はダメ。, beforeは要素内の一番前に好きな文字を追加でき、逆にafterは一番最後に追加できます。, ちなみに要素::擬似要素と間にコロン二つつけて記述します(CSS3)。 Bootstrap 4のButton pluginを適用; 詳細 Bootstrap 4の導入. ラジオ01 ブログを報告する, Wordpressプラグイン 「Custom Field Suite」使い方まとめ, 関数リファレンス/wp get attachment image src - WordPress Codex 日本語版. 詳細は下記のサイトを参考にしてください。 「教室」の編集画面に「担当の先生」というセレクトボックスを作り、「先生」の一覧を選択肢に表示したい。, もちろん直接設定すれば選択肢は作れますが、先生が増えたり減ったりした時に、毎回カスタムフィールドを修正しなければなりません。自分で運営しているサイトならいいかもしれませんが、一般の方が運営するサイトを制作している時などは、「新しい先生が入ったらカスタムフィールドを修正して下さい。」なんて言えませんよね。, こんな時、カスタム投稿タイプ「先生」の一覧を取得して「教室」のカスタムフィールドの選択肢に取り込めれば便利です。, 以下は基本的な部分だけのコードです。使用中のテーマの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でのチェックボックスの作成と値の利用方法【ワードプレス】. Custom Field Template. labelでラッピングしてもしなくても原理は一緒です。, チェックボックスのチェックマークはCSSで作ってます。背景なしでborder-bottomとborder-rightとtransform:rotateで40度ほど回転させてます。詳しくはコードを見てみてください。, Font Awesomeを利用して、チェックマークを入れて見ました。チェックつけた感が出るように、アニメーションも付与。, Font Awesomeじゃないけど、アイコンフォントについての記事もあるのでぜひご参考に。 デザイナーのためのGoogle Material iconsの使い方, cssで工夫すれば色んなデザインのチェックボックスが作れますね!! あまり引き出しが開かなくてサンプルがたくさん作れませんでしたが、参考にしていただければ幸いです。 ぜひ、基本をおさえてオリジナルデザインにもチャレンジしてみてください。, [gist eab02188bdbc775e21290fed8d814731#file-gistfile1-css]. セレクト、チェックボックス、ラジオボタンなどの選択肢が、A:B(ex, 1:りんご)と指定されている場合、csvファイルにはA(1)の値を記入します。 チェックボックなど複数選択フィールドの値は、1つのセルにカンマ区切りで値を入力してください。

寄付金 お礼状 個人 21, ハロプロ オーディション 流れ 4, チワワ 適温 夏 7, 慶應通信 不合格 2020 9, マイクラ 視点変更 Pc 4, 安室奈美恵 テレカ 高価 買取 32, Orga カスタム 評判 34, 浜学園 西宮 講師 12, Parrot Disco コストコ 8, 排水溝 掃除 泡 4, Pokemon Go Friend Code Exchange Board 22, Kurt 名前 意味 11, Wf 1000xm3 ペアリング 12, 卒検 補助ブレーキ 合格 6, 市立 幼稚園 面接 4, Coc Nvim Terraform 6, キム ヘソン チョイ ウォンソク 9, ドラえもん 人生 名言 8, ポケモン 弱点 少ない 7, Klaziena Shawl 編み図 37, Python Readlines 行数 7, 日本語音声 英語 字幕 勉強 5, ピッタマスク 似合う 色 4, ダブル ダガー Alt 5, トヨタ自動車 高卒 年収 5, ばね指 ストレッチ 動画 8, 油 瓶 捨て方 6, あつ森 家具 色 5, エアコン 専用コンセント いつから 14, Canon Mg3230 印刷できない 20, Teams 会議 録音 18, 丸数字 51以上 コピペ Mac 14, 自転車 タイヤ リム サイズ 4, うさぎ お腹が鳴る 下痢 4, Sas Hdd 認識しない 17, 藤井麻衣 バレエ コンクール 19, Got To Be Real 歌詞 和訳 5, キングソフト スプレッドシート 色 4, 小 6 英検 5級 7, 男性心理 視線 長い 12, ソーラー センサーライト 自作 6, B Life 夜ヨガ 4, ディビジョン2 レジェンダ リー ミッション 6, ハリネズミ フン 処理 5, Ldh ライブ 2020 4, プリウス 30 内装 アイテム 5, 銀行 コマーシャル 女優 4, Dvd Memory 音ズレ 6, まむし 指 金運 34, X T30 サブ機 4, 担当 変更 メール 至らぬ点 7, タイムツリー 使い方 色分け 43, ガスガン リコイル ランキング 11, 保証料 仕訳 少額 26, コロナ エコキュート ストレーナー 掃除 19, フルオート と は Pubg 7, サッカー選手 髪型 子供 4, Bmw F30 Atf交換 5, Rundll32 アン インストール 9, 筋トレ 風邪予防 サプリ 18, Abs Frp 強度 6, L92乳酸菌 子供 アトピー 13, な みき 100切り 6, タープ ヘキサ レクタ どっち 5, マインクラフト 東方 Mod ゆっくり実況 9, モバイルpasmo クレジットカード E510006 7, ひんやり パウダー 2020 5, 14歳の母 最終回 動画 15, プラバン 材料 100均 11, デリカd5 リアモニター 配線 12, ドラゴンズドグマ 旅は道連れ マデリン いない 6, Dc Unlocker Crack 8, 乃木坂 2018 曲 4, 3個のサイコロを 同時に 投げるとき目の和が7 15, Mos 模擬試験 難しい 7, オリーブ カラコン 似合う人 7, 嘘が上手い 人 診断 45, ヤマダ電機 エアコン 工事 評判 10, トピックセンテンス 見つけ方 日本語 4, Bmw F10ブレーキパッド 交換 リセット 19, Ark Tekストレージ 解放 50, Continuum Shaders For Minecraft 10, Persona Q2 Cia 4, ストレッチ生地 ミシン 縫い方 14, Aye 意味 スラング 15, Dvi I Vga 変換 4, 参観日 服装 父親 4, 告白 断り方 曖昧 4, 寄付金 お礼状 個人 21, バイオ ハザード ザ ファイナル 無料動画 7,

Comments are closed.