メタデータを簡単に取得するための便利メソッド 5. WordPressプラグインで出力している値も全ページに表示できます。 Advanced Custom Fieldsの値の場合.
Wordpressのプラグイン「Smart Custom Fields」の使い方を説明したページです。Smart Custom Fieldsは繰り返し機能が無料で使えるカスタムをフィールド生成できるプラグインです。Smart Custom Fieldsの設定方法から出力方法までこのプラグインの全てが分かります。 Googleのインデックスさせる申請方法の検証 GMOソリューションパートナー株式会社のWEB改善事例集で今回ご... 今回こちらの記事では、直帰率について詳しくお伝えします。 東京都渋谷区桜丘町26-1 セルリアンタワー 6F, WordPressのカスタムフィールド入門 (Smart Custom Fields使用), Smart Custom Fieldsにはカスタムフィールドを呼び出すためのコードが用意されています, ここがカスタムフィールドを導入する上で初学者がもっとも引っかかるポイントだと思います。, 『プラグイン』メニューをマウスオーバーして表示される「新規追加」をクリックします。, 『プラグインを追加』ページが開かれますので、「プラグインの検索」と書かれている入力フォームに『Smart Custom Fields』と入力してキーボードのエンターを押します。, すると一番左端のカラムに『Smart Custom Fields』が出現しますので、『今すぐインストール』をクリックしてWordPress内にプラグインをインストールします。, ボタンの表記が今すぐインストールから『インストール中...』と変わります。インストールが終わるまで待ちます。 Webサイトを運営している方なら... Googleマイビジネスに関して プロフィールページにもカスタムフィールドを設置可能 メタデータのリビジョンに対応 3. いやいや、検索できているよ、と言うなかれ。 WordPressでカスタムフィールドを扱うプラグインとしては「Advanced Custom Fields」(略して「ACF」とも呼ばれる)が有名ですが、最近は「Smart Custom Fields」というプラグインを使っています。 Googleのインデックス... 皆様こんにちは。 WordPress のプラグイン Advanced Custom Fields を使ったカスタムフィールド値の取得と表示方法を紹介します。値の取得方法と合わせて、表示されない時の注意点や対処方法も紹介します。 Home > Web制作 > WordPressのカスタムフィールド入門 (Smart Custom Fields使用), WordPressには様々な利用方法があります。扱う内容・商品によっては、以下のような悩みを持っている人は多くいらっしゃるのではないでしょうか?, これらの悩みは、もしかしたらWordPressの『カスタムフィールド』によって解決できるかもしれません。, WordPressには、記事を投稿する際に『カスタムフィールド』という任意の情報を追加できる機能があります。, このカスタムフィールドを上手く活用すれば、レイアウトを整えるのが面倒な商品ページの更新をすばやく対応できるようになったり、WordPressのエディターでは難しいデザイン性の高い画像ギャラリーを管理画面で管理できたりなど、投稿の利便性や自由度をより高めることができます。, しかしカスタムフィールドを初めて導入するとなると、導入の多様さもあって何から手を付けていけばいいのか分からないものです。そこで今回はカスタムフィールドの導入を、比較的簡単にできるように分かりやすさを意識して解説しようと思います。, WordPressのカスタムフィールドを標準のまま使用するとなると、少し使い勝手に難があります。今回は分かりやすさを重視したいので、この記事ではすぐにカスタムフィールドを使えるように、『Smart Custom Fields』というカスタムフィールドの管理を行うWordPressプラグインを利用して、カスタムフィールドの解説を行ってまいります。, すでにSmart Custom Fieldsがインストールされているならこの章は無視してかまいません。まだインストールをしていなければWordPressへインストールしましょう。以下でインストール手順を解説します。, 例として『今の気分』というカスタムフィールドを投稿画面に追加してみましょう。Smart Custom Fieldsには標準で様々な入力フォームをサポートしています。その中でもよく使うであろうテキストフォームをまずは追加してみます。, 今回はWordPressの公式テーマ『Twenty Seventeen』を使用して説明していきます。最終的なイメージ図は以下です。, では早速Smart Custom Fieldsを経由してテキストフォームのカスタムフィールドを作成します。, WordPressメニューに追加された『Smart Custom Fields』をマウスオーバーして表示される「新規追加」をクリックします。, 新規追加ページになりました。このページでカスタムフィールドを登録することができます。右側にもいろいろ見慣れないメニューが存在しますが、真ん中のメイン画面から見ていきます。以下のような入力欄がありますので、まずはタイトルを入力しましょう。今回は仮に『今の気分設定』とします。, 次はいよいよカスタムフィールドを設定します。『カスタムフィールド』項目にある『フィールド追加』をクリックします。, 必須項目は『タイプ』と『名前』になります。タイプはフィールド追加時に初期値としてテキストが追加されるようになっています。今回はタイプをテキスト、名前を仮に『test-text』と付けます。, 『ラベル』は必須ではありませんが、分かりやすいように『今の気分』と付けます。こちらは特に文字列の指定はありません。, 『デフォルト』はカスタムフィールドに予め指定しておく値を設定することができます。『説明文』『注記』はカスタムフィールドの入力欄において表示させることができる文字列です。せっかくですので値を入力してどういう挙動になるのか試してみます。仮に以下の値を入れます。, 表示条件は右側のサイドメニューにあります。表示条件を設定することによって、カスタムフィールドを利用・表示する範囲を指定することができます。, Smart Custom Fieldsの管理画面に用意されたカスタムフィールドの表示条件には以下の4つがあります。, 今回は投稿タイプ『投稿』だけに使用したいので、『表示条件 (投稿)』から投稿タイプの『投稿』にチェックを入れます。, これでカスタムフィールド『今の気分設定』が追加されました。実際にWordPressから投稿画面を確認し、以下画像のように追加したカスタムフィールドが表示されていればOKです。, もし表示されていなかった場合、表示設定が間違っている可能性がありますので、改めて確認してみましょう。, カスタムフィールドは作成しただけではウェブサイトに表示されません。表示させるにはWordPressのテーマファイルを編集する必要があります。, Smart Custom Fieldsにはカスタムフィールドを呼び出すためのコードが用意されていますので、今回はそれを使用してWordPressのテーマファイルに手を加えます。, ここがカスタムフィールドを導入する上で初学者がもっとも引っかかるポイントだと思います。自分でテーマを作成しているのであれば投稿ページを構成するテーマファイルの場所はすぐに分かると思いますが、そうでなければ自分で探す必要があります。, WordPrsss標準であればsingle.phpに当たる部分が、投稿タイプ『投稿』を表示するテーマファイルですので、まずはそれを探してみましょう。, 『Twenty Seventeen』の場合、single.phpは存在しますが、さらにsingle.phpで読み込まれているcontent.phpを編集しなければ上の画像のような表示位置にできないため、content.phpを編集することになります。, では実際にテーマファイルを編集してみます。『Twenty Seventeen』の場合は、~/template-parts/post/content.phpの69〜75行目付近にソースコードを記述すれば、上記画像のように表示されます。該当する行のソースコードを抜き出してみます。, Smart Custom Fieldsの専用コードを使用してカスタムフィールドを表示させるコードは以下となります。, SCF::getがSmart Custom Fieldsで作成したカスタムフィールドを呼び出すための記述となります。, 書式を簡単に説明すると、$変数 = SCF::get('カスタムフィールド名');という形となり、先ほどWordPressで追加したカスタムフィールドの名前を『カスタムフィールド名』に入れることで、変数にカスタムフィールドを格納することができます。そして4行目でPHPのechoを使用して変数の値を出力しています。, WordPress投稿画面を開き、カスタムフィールドを変更して更新してみましょう。, 以下画像は、新規でインストールしたWordPressに初めから入っている『Hello World』の投稿でテストしたものです。, 今回は1つのカスタムフィールドを追加する手順に絞って解説させていただきました。使いこなせればWordPrssの投稿を、商品詳細や不動産の物件紹介ページの更新システムにもカスタマイズすることが可能です。次回はそういったより実践的なカスタマイズを記事にしたいと考えておりますのでご期待ください。. We... 東京渋谷本社 WordPressのプラグインSmart Custom Fieldsで作成したカスタムフィールドを出力します。 カスタムフィールドの種類にあわせた、よく使うコードをサンプルコードとして紹介します。, WordPressのプラグインで、カスタムフィールドを簡単に作成することのできるプラグインです。 Advanced Custom Fieldでは有料オプションである繰り返しが標準で使うことができます。, カスタムフィールドの作り方については、別記事としてまとめていますので、そちらをご確認ください。 Smart Custom Fields(SCF)でカスタムフィールドを作成する, Smart Custom Fieldsの値を出力するためのサンプルコードを紹介します。 Smart Custom Fieldsでは簡単に値を取得するコードが用意されています。 カスタムフィールドの名前が「cf_sample」である場合、以下のコードで変数にカスタムフィールドの値を格納できます。, 上記のコードはSmart Custom Fieldsでのみの書き方になりますので、他のカスタムフィールド系のプラグインでは使えません。 プラグインに左右されなように書くには、post_customや、get_post_metaを使ってください。, テキストエリアのカスタムフィールドに入力された、改行を出力結果に反映させます。 カスタムフィールドの名前は「cf_sample」とします。, テキストエリアにHTMLタグが入力された場合、HTMLをエスケープします。 カスタムフィールドの名前は「cf_sample」とします。, 選択フィールド「チェックボックス」に設定された値を表示させます。 カスタムフィールドの名前は「cf_sample」とします。, コンテンツフィールド「画像」に設定された画像を表示させます。 カスタムフィールドの名前は「cf_sample」とします。, コンテンツフィールド「画像」に設定された画像のURLを取得し、表示させます。 カスタムフィールドの名前は「cf_sample」とします。, コンテンツフィールド「ファイル」に設定されたファイルのURLを取得し、表示させます。 カスタムフィールドの名前は「cf_sample」とします。, その他のフィールド「関連する投稿」に設定された記事のタイトルとURLを取得し、表示させます。 カスタムフィールドの名前は「cf_sample」とします。, その他のフィールド「関連するターム」に設定されたタームの名前・スラッグ・URLを取得し、表示させます。 カスタムフィールドの名前は「cf_sample」とします。, カスタム投稿フィールドのグループ名を「cf_group」とし、グループ内のカスタムフィールドの名前を「cf_sample」、「cf_sample2」の2つとします。, オプションページに設定したカスタムフィールドを表示します。 メニュースラッグは「theme-options」、カスタムフィールドの名前を「cf_sample」とします。, pre_get_postsで複数の並び替え条件を指定する(カスタムフィールドと日付), カスタムフィールドの値を取得し、ショートコードを使って投稿内に表示できるようにする. みなさま、こんにちは。今回、GMOソリューションパートナー株式会社のWEB改善事例集で... みなさま、こんにちは。GMOソリューションパートナー株式会社のWEB改善事例集にて今... 目次 使用頻度が高いAdvanced Custom Fieldsの値も、どこでも表示させることができます。 Smart Custom Fieldsの繰り返し値の場合. WordPressのプラグインSmart Custom Fieldsで作成したカスタムフィールドを出力します。 カスタムフィールドの種類にあわせた、よく使うコードをサンプルコードとして紹介します。 スポンサーリンク 目 … 朝ドラ大好きな管理人がホームページに関する記事を動画より分かりやすくをモットーに綴ります。, WordPressでホームページを構築していると、案件によってはデフォルトのビジュアルエディタでは無く、見出し用の入力フィールド、写真アップ用のフィールド等を別々で設置したいという場面に遭遇すると思います。そんな時、WordPressにはカスタムフィールドというものを追加することが出来ます。カスタムフィールドを追加する方法として、, と2パターンの方法があります。(僕が知らないだけで他のやり方があるかもしれませんが・・・)functions.phpに記述する方法についてはまたいずれ書いていこうと思います。今回はプラグインを使用した方法をご紹介したいと思います。, カスタムフィールドを追加出来るプラグインはいくつも存在します。有名どころで言えば、, そんな中、今回ご紹介するカスタムフィールドを生成できるプラグイン名は「Smart Custom Fields」です。, このプラグインの凄いところは何と言っても「繰り返し機能」が使えるところです。この「繰り返し機能」、先述のAdvanced Custom Fieldsの場合、有料版でしか使用することが出来ない機能となります。, そのため、僕はカスタムフィールドを作成する場合、このSmart Custom Fieldsを使用しています。もちろん使い方はとっても簡単です。, ちなみにこのブログサイトもSmart Custom Fieldsを使用して構築しています。, Smart Custom Fieldsの設定画面は上の画像の通りです。設定する部分, このカスタムフィールドの名前を決めます。名前は何でも大丈夫ですが、僕の場合はどこと紐づいているか一目でわかるように、カスタム投稿ならカスタム投稿名、固定ページなら固定ページ名をこのタイトル名にするようにしています。, 複数チェック可能な選択肢が作成できるフィールド(input[type=”checkbox”])キーと値を分ける場合はキー=>値という書き方をする。, 一つだけ選択できるボタンが作成できるフィールド(input[type=”radio”]), PDFなどのファイルをアップロード出来るフィールド(input[type=”file”]), input[type=”file”]のうち、画像専用のフィールド(input[type=”file”]), テンプレートファイルで出力する時はこの値を指定して出力します。詳しくは後述します。, 設定したカスタムフィールドをどの投稿タイプに表示するかを選択します。「固定ページ」を選択した場合、更にどのページに表示するかを選択します。以上の設定が終わったら「公開」ボタンを押して設定完了です。, Smart Custom Fieldsの繰り返し機能を使う場合はまず①の「繰り返し」という部分にチェックを入れます。そうすることで②の「グループ名」を設定するフィールドが表示されます。この「グループ名」の所に任意のグループ名を設定します。③の部分は単一のフィールドの時と同様に出力時に指定する値を設定します。④の「サブフィールドを追加」を押すとグループ内で更に入力フィールドを設定できるようになります。, フィールド「テキスト」に設定された値を表示させる方法です。カスタムフィールドの名前は「text」とします。上記のコードはSmart Custom Fieldsでのみの書き方なので、他のカスタムフィールド系のプラグインでは使えません。プラグインに左右されなように書くには、post_customや、get_post_metaを使ってください。, フィールド「真意値」に設定された値を表示させる方法です。カスタムフィールドの名前は「true-meaning」とします。「はい」を選んだ場合は「true」が、「いいえ」を選んだ場合は何も入りません。, フィールド「テキストエリア」に設定された値を表示させる方法です。カスタムフィールドの名前は「textarea」とします。そのまま出力すると改行が反映されないのでnl2br();関数を使用します。, フィールド「ラジオボタン」に設定された値を表示させる方法です。カスタムフィールドの名前は「radio」とします。, フィールド「チェックボックス」に設定された値を表示させる方法です。カスタムフィールドの名前は「checkbox」とします。, フィールド「セレクトボックス」に設定された値を表示させる方法です。カスタムフィールドの名前は「select」とします。, フィールド「ファイル」に設定された値を表示させる方法です。ファイルのURLを取得し、表示させます。カスタムフィールドの名前は「file」とします。, フィールド「画像」に設定された画像を表示させる方法です。カスタムフィールドの名前は「image」とします。下記コードのlargeの箇所が画像の大きさです。デフォルトでは「thumbnail」「small」「medium」「large」が選択できます。functions.phpに記述することにより他のサイズも指定することができるようになります。, wp_get_attachment_image関数の代わりにwp_get_attachment_image_src関数を使うことで画像のURLのみを表示させることも出来ます。, フィールド「WYSIWYG」に設定された値を表示させる方法です。カスタムフィールドの名前は「wysiwyg」とします。そのまま出力すると改行が反映されないのでnl2br();関数を使用します。, フィールド「カラーピッカー」に設定された値を表示させる方法です。カスタムフィールドの名前は「color」とします。出力される色は#付きの16進数のカラーコードです。, フィールド「日付ピッカー」に設定された値を表示させる方法です。カスタムフィールドの名前は「datepicker」とします。フィールド設定の際、日付形式を指定する必要があります。, フィールド「時刻付き日付ピッカー」に設定された値を表示させる方法です。カスタムフィールドの名前は「datepicker」とします。, フィールド「関連する投稿」に設定された記事の情報を取得し、表示させます。カスタムフィールドの名前は「relation」とします。, 他にも本文やカスタムフィールドの値なども表示することが出来ます。これらの情報は$fieldというオブジェクトの中に格納されていますのでvar_dump()を使用することで何が取得できるか確認出来ます。※
タグでvar_dump();で囲うことを見やすくすることが可能です。, フィールド「関連するターム」に設定されたタームの名前・スラッグ・URLを取得し、表示させます。カスタムフィールドの名前は「term」とします。, カスタム投稿フィールドのグループ名を「group1」とし、 グループ内のカスタムフィールドの名前を「group_title」、「group_content」の2つとします。, Smart Custom Fieldsの使い方を見てきましたが、いかがでしたか?とっても簡単に無料で繰り返し機能カスタムフィールドを追加できます。, Smart Custom Fieldsは個人的にはイチ押しのカスタムフィールド生成プラグインです。表示条件の柔軟さはAdvanced Custom Fieldsの方に軍配があがるかもしれませんが、このSmart Custom Fieldsの最大のポイントは何と言っても繰り返し機能が無料で使えること!是非みなさんもこのプラグインを使用しWordPressを更にカスタマイズしてみてはいかがですか?, 【WordPress】繰り返し機能が標準機能のSmart Custom Fieldsの使い方, 【jQuery】jQueryで動的に生成した要素に対してイベントが発生しない!?jQueryイベントを発生させる方法, 【朝ドラ】エール 37話 あらすじと感想/頑なに自分のやり方を変えようとしない祐一..
Pixiv ファンボックス R18 4, Hp 量販店モデル 違い 4, ウルトラサンムーン 御三家 色違い 12, 主婦 大学院 受験 6, Babymetal Mステ 動画 31, 黒にんにく 柔らか すぎ 21, 札幌 子犬 里親 20, Closedxml 行 高さ コピー 4, Bose サウンドバー 接続 5, Zenfone Zoom S 液晶交換 4, Enza かんたん認証 解除 4, Ff14 竜騎士 竜眼雷電 5, Googleカレンダー 一括 変更 5, オンライン すごろく 友達と 4, 結婚祝い 渡す日 仏滅 7, コンビニ バイト 一ヶ月 辞めたい 4, 美顔器 Ems やりすぎ 10, Omiai サクラ 2ch 6, Mwave 投票 できない 5, マイクの ピックアップ を 最適化 する 16, 本田翼 兄 顔 5, Bmw X2 フルモデルチェンジ 6, ポケモンgo ギフト 写真 保存 50, タイトルバー とウィンドウの境界線 グループ ポリシー 11, アクア メーター パネル 外し方 35, 犬 体 拭く 嫌がる 6, ローバー ミニ インジェクション ハイカム 22, プレミア プロ Nvidia 5, メダカ稚魚 餌 すり鉢 11, ネップリ 無断 バレる 34, Fire Hd 10 文書作成 4, てんとう虫 死骸 スピリチュアル 11, 三菱 炊飯器 内蓋 洗い 方 5, 日本語 発音 変化 4, ゲーム ロゴ 切り抜き 6, 海外fx アフィリエイト 違法 9, Sega Naomi Roms 5, Anker Powerconf Jabra 比較 6, Cities: Skylines アプデ 4, Garmin Connect 使い方 5, トレインスポッティング ダイアン 中学生 9, ホローテック ホローテック2 違い 5, P30 Lite Gps精度 10, Char 空文字 Java 44, コン ユ 兄弟 20, 協調性 サッカー 自己pr 16, 関西大学 野球部 新入生 5, 中村高校 偏差値 昔 4, ボルボ V50 トランク 開かない 4, Xperia Z3 Tablet Compact Root化 10, カインズ ダッチオーブン 12cm 16, 鍼 痛い 下手 15, Bl 英字 4文字 17, 大阪 裏カジノ 場所 8, 数研出版 数学b ベクトル 5, Minecraft Addon Wiki 7, 飲み会後 Line 男から 9, シンジ 使徒化 Ss 19, 余裕がない 彼氏 別れ 4, 黒い砂漠 キャラメイク 男の娘 11, Zoom 最前面 解除 21, Hig 音域 男 43, Config Vpn Ssl Settings Fortigate 16, Men's Tarmac Disc Comp 重量 12, R6s 銃声 周波数 13, サンヨー 冷蔵庫 エラーコード H5 6, ジムニー Jb23 エンジン不調 13, ハイキュー ネタバレ 284話 5, ドア ストライク 削る 10, 阪 大 院試 基礎工 6, ブラジリアンワックス 三河 メンズ 6, Pubg パルクール キー設定 4, Ricoh Theta 手振れ 8, 南 佳孝 試聴 5, 山崎紘菜 Going 卒業 5, 社内研修 参加 メール 返信 15, メモ帳 Csv 保存 5, Toefl Itp 平均点 東大 46, 関西 テレビ 韓国ドラマ 10, Trend Micro Officescan Listener サービスが 実行 され てい ません 12, Azr60 バックカメラ 配線 5, Wowow 名探偵コナン 2020 5, 足の甲 痛い 陸上 5, セレナ C27 後期 口コミ 6, ダイソー 三角巾 骨折 11, レック マウント Galaxy 11, 足場 火打ち 基準 11, 外水栓 お湯 後付け 4, Line 音楽 送る 著作権 6, 日ハム ファン 気持ち 悪い 25, 冷蔵庫 奥 水滴 6, Pso2 サブ垢 Ban 25, Bmw M140i 最終 モデル 20, エクセル 先頭 半角スペース 4, Vscode Plantuml Markdown 21, 月 土星 コンジャンクション 相性 6, パシオス くま みね 8, 川田アナ 結婚 妊娠 4, ドラマ Dvd ブルーレイ どっちを買う 4, 柳田 ドラフト なんj 9,