など開発業務の受託案件もお引き受けしています。お仕事のご依頼、ご相談はお問い合わせページからお願いいたします。お気軽にどうぞ!, EasyRamble は、技術ネタやスマホ考察、子育て、英語学習などを綴るブログです。Ruby on Rails や Swift などで、Webサービス/アプリを作っています。, 【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!, WordPress は人気ナンバーワンのブログ・ウェブサイトの管理ツールです。PHP を使えればカスタマイズできるので、ぜひトライされてみてください。, Ruby on Rails で Web サービスを作っています。Twitter で英語学習中の親バカ。. ・カスタムフィールドに入力したデータを、自由に出力できる 例えば、大手ECサイトでは食品から家電製品、衣類まであらゆるカテゴリーの商品が販売されています。仮にすべての商品情報を、編集画面で一から手で打ち込んだらどうでしょうか?食品にはアレルギー表示、家電製品には保証期間の掲載…など、販売カテゴリーによってユーザーへ伝えたい情報はさまざま。想像するだけで、工数の多さに気が引けてしまいますよね。 ⑤右上の「公開」をクリック ・英語版のみ(2020年6月時点) WordPressの機能「カスタムフィールド」について、初心者~中級者向けに解説します。ECサイトやコレクションサイト運営の際にコンテンツ管理が楽になる設定方法、メリットやおすす … 記事入力フォームの下に、カスタムフィールドのフォームが表示される。名前に「keywords」を入力、初回は値が空だとエラーになるので「hoge」など適当なキーワードを入力して、「カスタムフィールドを追加」する。, 3. WordPressの【カスタムフィールド】を設定する方法を初心者向けに解説した記事です。カスタムフィールドを使うと、タイトルと本文に追加した情報をサイトに掲載することが可能です … 「〇〇から〇〇まで行った」という文字表現に比べると分かりやすくなりますし、 「Googleマップの埋め込みコード貼付け」に比べると手間が省略できる且つコードミスを防げます。 次回以降の記事投稿時には、カスタムフィールドの名前に選択メニューが表示されるので、設定した「keywords」を選択します。値には、meta keywords に設定するキーワードをカンマ区切りで入力する。下の例では、meta keywords に「wordpress,カスタムフィールド,設定」の3つのキーワードを入力しました。, 投稿毎に、カスタムフィールドの名前の選択メニューで「keywords」を選択して、値に meta keywords で設定するキーワードをカンマ区切りで入力するようにします。, 続いて、WordPress テーマ内の functions.php に、カスタムフィールドに設定されたキーワードを取得して、meta keywords タグを出力する関数を定義します。以下のような関数です。, の行で、カスタムフィールドの情報を取得している部分です。記事ページでは、前半で設定した keywords カスタムフィールドの値から、meta keywords に設定するキーワードを取得しています。, 関数リファレンス/get post custom – WordPress Codex 日本語版, 最後に、WordPress テーマ内の meta タグを出力する header.php 内に echo_meta_description_tag() を記述します。header.php は、single.php, category.php, index.php などから get_header() でインクルードされるテンプレートです。, これで、header.php をインクルードする single.php, category.php, index.php のテンプレートファイルで、meta keywords タグが出力されます。, 関数リファレンス/get header – WordPress Codex 日本語版, 後は、新規投稿時に keywords カスタムフィールドを忘れないように入力すればOKです。意外と簡単ですので、むやみにプラグインを増やしたくない方はお試しください!, - Ruby / Ruby on Rails ②編集画面になるので、右側の編集ブロックの上にある「 ⁝ 」をクリックする。 ・カスタムフィールドの種類が豊富 WordPressを扱っているなら絶対に知っておきたいカスタムフィールドの使い方を解説していきます。 カスタムフィールドの設定は、初心者にとっては難しいところもあるので、便利なプラグインをつ … - Swift / iOS アプリ / Chrome 拡張 上記で設定は完了しますが、サイト上に情報が反映されません。そのため、以下の手順でテーマファイルを編集する必要があります。また、使用しているテンプレートによって編集場所が異なるため事前によく確認しておきましょう。 - WordPress カスタマイズ / テーマ作成 WordPress のカスタムフィールドの機能を使い、functions.php で meta keywords のタグを出力する関数を定義する方法です。ちなみに、プラグインを増やしたくないのは、WordPress 本体のアップ … 後は表示内容をより見やすくするために、 CSS を整えたりするといいですね。, ちなみに各投稿画面の内容を確認してみると上図のように。こちらもより見やすくするために CSS を整えると良さそうですね。, WordPress の標準機能でカスタムフィールドを追加したり編集することもできますが、管理面や設定する内容によっては技術力が必要となってきます。そうした時やはり頼りになるのが WordPress のプラグイン群。, WordPress の公式サイトでは、以下の 3つのプラグインが紹介されています。, Meta-Box はフレームワーク型のプラグインで、 これをインストールしただけではカスタムフィールドを使うことはできません。 Meta-Box インストール後にカスタムフィールド用のプラグインを自作する必要があるのですが、この時カスタムフィールド用プログラムを作るにあたって必要な関数を Meta-Box は提供。ゼロベースでカスタムフィールドを開発するよりか早く楽にカスタムフィールドタスクを管理できるというものです。 PHP や HTML 等のスキルが必要となってくるでしょう。, PIKLISTは情報量が少ないので飛ばさせていただき、 Advanced Custom Fields(ACF)をご紹介。ACFは、プラグインをインストールした段階でカスタムフィールドを編集していくことができます。 カスタムフィールド分野では一番の人気プラグインで、その理由は「無料」「豊富なカスタムフィールドの種類」「情報量の多さ」「簡単操作」が挙げられるでしょう。 投稿を書いたあと、カスタムフィールドの欄までスクロールします。注: WordPress バージョン3.1 より、投稿・固定ページ編集管理画面の表示オプションではいくつかのものがデフォルトで非表示になっています。カスタムフィールドも、以前に使用されたことがない場合はデフォルトで非表示になっています。 2. しかし、カスタムフィールドではテンプレートを自由自在にカスタマイズできます。カテゴリーごとに絶対に入力が必要な項目をあらかじめ作成しておくことで、コンテンツ管理がしやすくなるのです。 また、カスタムフィールドはグーテンベルクに搭載されている機能ですが、プラグインを使って利用することも可能です。ちなみに「プラグイン」とは、ソフトウェアに機能を追加するために組まれたプログラムのこと。これを自身のWordPressに導入することで、カスタムフィールドをより簡単に設定できます。一方で、プラグインを利用すると性能の高さからサイトが重くなったり、相互性に問題が生じたりといった不具合がでる場合もあるので注意しましょう。 また、ECサイトを利用するユーザーにとって嬉しい、絞り込み機能の搭載も可能です。「1,000円以下の商品を見たい」「送料込みのものだけ表示させたい」「評価が高い国産商品を調べたい」など、さまざまなニーズに応えることができますよ。必要事項を一から記載しなくてよいので、編集の時短にも繋がるのが嬉しいですよね。 カスタムフィールドのプラグインの中でも、最も定番といえるのがこちら。何よりも、初心者にやさしい操作性が人気のひみつです。無料プランでも、カスタムフィールドの種類が豊富に用意されているので、初めて利用する方にとっては十分な機能が備わっています。インストール後、すぐに編集ができるので難しい工程がないのもポイントです。, サイトを毎日運営するのは大変ですが、Webにおいてスピード感はとても大切なものです。ユーザーにとって魅力あふれるサイトにするためにも、ぜひカスタムフィールドを使ってみてくださいね。今までよりも時短での編集が可能になり、管理もしやすくなるはずです。 ・ユーザーに伝えたい情報の漏れがなくなる ・自由にレイアウトできる範囲が広がる ・利用したい機能に応じ価格帯が豊富(無料、$79、$149、$349) 以上より、設定したい項目が多い・簡単にカスタムフィールドを利用したいという場合にはプラグインを利用し、数種類設定できれば構わない・ITの知見に自信があり設定をカスタマイズしたいという方はプラグインなしの設定をおすすめします。, これまでカスタムフィールドについて解説してきましたが、使うことで得られるメリットは何でしょうか? ⑦編集したい該当箇所にタグを挿入する。 ・コードが比較的シンプルなので初心者でも使いやすい カスタムフィールドとは、名前からも分かる通り自分好みに任意の情報を追加できる機能のことを指します。ユーザーに伝えたい情報を、漏れなく提供しやすくなりますよ。, カスタムフィールドを使ってできることをひとことで表すと、カテゴリーごとの情報テンプレートの作成です。 すると見事お目当てとする所で、文字を表示することができました。 ④編集画面の下側に「カスタムフィールド」が表示されるので、テンプレートにしたい項目を「名前」に、内訳を「値」に記入する。 ・比較的細かい設定が可能  (例)酵素ドリンクの価格(680円)を表示させたい場合 主には、上記のようなメリットがあげられるでしょう。冒頭でも説明した通り、カテゴリーごとに入力事項のテンプレートを作成できるので、コンテンツ管理が楽にできます。 ・インストール後にカスタムフィールド用プログラムを作る必要がある いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応, WordPressにOGP設定・プラグインなしでFacebook/Twitter Cards対応, wp_list_categoriesでリンクなしで投稿数ゼロのカテゴリを表示 – WordPress, Rails ActiveRecordでdatetime型カラムのGROUP BY集計にタイムゾーンを考慮する, マークダウンのHTML表示確認にChrome拡張Markdown Preview Plusが便利, React.js用にESLintをインストールして設定、JavaScriptコードを楽に検証しよう, RailsプラグインGemの作成方法、RSpecテストまで含めたrails pluginの作り方. ※「カスタムフィールドを追加」をクリックすることで、次回からプルダウンでの選択が可能になります。 データ出力ができるという点もメリットとしてあげられます。「商品全体の販売個数を確認したい」「衣類カテゴリーだけの売り上げが知りたい」「○○支店のデータだけ見たい」など、特定データの取り出しが可能です。マーケティングの視点からも使い勝手がよい機能といえるのではないでしょうか。レイアウトを変更できる箇所もあるので、WordPressに慣れてきたら自分好みにカスタマイズするのも楽しいかもしれませんね。 ・操作が簡単 上記の例に基づいて、実際にカスタムフィールドを使ってみましょう。ここでは、「今読んでいる本」と、「今日の天気」というカスタムフィールドの値を追加します。 1. また WooCommerce など他のプラグインとな連動性もよく、即戦力に優れていますWooCpmmerce + Advanced Custom Fields の例。, カスタムフィールドの表示設定も、テンプレートファイルの PHP コード編集によるものだけでなく、ショートコードにも対応。 WordPress 初心者から上級者まで幅広く使えるというのが Advanced Custom Fields の特徴でしょう。, 今回は一番人気の Advanced Custom Fields を実際に使ってみる様子をご紹介していきたいと思います。, Advanced Custom Fields は、「有料プラン」と「無料プラン」ありますが、今回は無料プランを利用。 WordPress の公式プラグインページから Advanced Custom Fields をダウンロード。, 画面左側に追加されたカスタムフィールドを左クリック。 そして画面上部 フィールドグループの横に表示されている「新規追加」ボタンを左クリック。, フィールドグループ名を入力し、「フィールド追加」ボタンを左クリック。 今回はフィールドグループ名を 「商品情報」 としました。, Advanced Custom Fields は、上図のようにカスタムフィールドを「フィールドグループ」と「フィールド」の 2つエリアで管理。 一つ一つのカスタムフィールドの名前やスタイルをフィールドグループで一括管理するというシステム。, 「フィールド追加」ボタンのクリックで表示された「フィールドラベル」や「フィールド名」等、必要事項を入力。, 複数のカスタムフィールドを使いたい場合は「フィールドを追加」 ボタンをクリックすると新たにフィールド入力欄が表示されます。, また投稿ページ以外の固定ページ等でカスタムフィールドを扱いたい場合は、フィールドグループのルールを変更する必要があります。今回は投稿ページのみなので、デフォルト設定のまま作業を進捗。, そして投稿編集画面に移動すると、画面の一番下に先ほど設定したフィールドグループの項目が表示されています。情報を入力して投稿内容を公開してみましょう。, 残念ながらこの段階ではカスタムフィールドの値を表示することはできません。カスタムフィールドの出力は、ショートコードもしくはテンプレートファイルの編集で実行することができます。今回は、 Advanced Custom Fields のチュートリアルを参考にテンプレートファイルを編集して、カスタムフィールドの値を表示してみました。, 設定したカスタムフィールドの値が表示できました。ただ単位や項目の説明がないので、少しプログラムを編集します。, HTML を編集する感じで、単位や項目の追加情報を設定することができます。後は必要に応じて CSS を設定すると良さそうですね。, 過去に投稿した分も カスタムフィールド値を入力すると、Webページが仕上がりますね。, ここで一旦データベースを確認してみますと、プラグイン Advanced Custom Fields で入力したカスタムフィールド値も、プラグインを使わなかった場合同様 wp_postmeta のテーブルに情報が入力されています。, カスタムフィールド値の非表示は、プラグインのフィールドグループ設定画面から Active ・ Deactive を選択できるようになっていますが、 Active を「いいえ」に変更してもカスタムフィールド値を非表示にすることはできませんでした。, これはプラグイン全般にいえることですが、 WordPress のバージョンや他のプラグインとの干渉によってエラーが出たり機能が果たされなかったりするということがあります。プラグイン Advanced Custom Fields は、便利で早くカスタムフィールドを設定できる一方、エラーが発生するかもしれないというリスクがあります。, 当メディアを運営しているCodeCampではWordPressコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴は, 無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。, WordPress のカスタムフィールドが使えるようになると Web ページの表現力はグッと高まりますし、ライターさんに投稿をお願いする場合も編集内容を管理しやすくなると思います。, またカスタムフィールド値を元に演算やグラフ化、マッピング化などデータ応用していくと、ユーザーが感動するような機能も実装できることでしょう。, WordPress の利用目的というと、一昔前は個人用の Web サイトやブログが多かったように思いますが、今では就職・転職用の材料として WordPress を利用する・学習する方も少なくないと思います。 Wantedly で 「WardPress テンプレート」 *と検索すると 1045件 の募集案件がヒットし、その内容の多くで WordPress テンプレートのカスタマイズスキルが書かれています。, 「 WordPress テンプレートのカスタマイズ」には、カスタムフィールド・スキルも含まれますので、今までプラグインに頼っていたという方も「プラグインなし」に挑戦してみるというのもいいかもしれませんね。, 「カスタムフィールド以前に WordPress の設定方法がわからない」「 WordPress 以前に PHP や データベース 意味が分からない」、諦めたり一人でストレスを抱え込む前に一度 学習環境を見直してみる・・・・・・・・・・・ というのはどうでしょうか。, プログラミングスクールの CodeCamp ではプログラミングをやったことない、パソコン操作はちょっと苦手、そういった方でもプログラミングを楽しく学習できるようなプラットフォームを提供中。, オンラインでマンツーマン、そして現役エンジニアによるレッスン、 こうした結果 2万名以上の方が受講し、満足度 94.6% という高評価を得ています。「プログラミングスクール高くない?」「自分でも続くのかな?」 そう不安に思われてる方、まずは無料体験で自分に合うかどうかテストしてみませんか?無料体験や無料相談は随時受け付けていますので、 ご興味ある方は 公式ページ より確認してみてください。, 【AWS&Docker初心者向け】WordPressをAWSのDockerで公開 ~Mac編~, 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】, 入力データを値として扱えるようになる。その結果、演算やマッピング、グラフ化などデータの表現性が上がる。. Copyright(c) EasyRamble All Rights Reserved. ①管理画面左側の項目から「投稿>新規追加」を選択する。 WordPress Popular Posts プラグインで人気記事を表示・カスタマイズする方法, 【jQuery,JavaScript】jQueryのプログラムが動かない時の対処法、仕組み, Google Chromeブラウザ「ウェブの高速化」を目指し"バッジ"の表示を検討, 【2020年6月28日〜2020年7月4日】ミンウェブ編集部おすすめの注目記事10選, 初心者でも簡単!無料で簡単に動画広告が作れる ”YouTube Video Builder”使い方まとめ3選, ビジネスを成功へと導くWebコンサルティング・インターネット広告・Web制作を提供する会社です。, WordPressには投稿項目を統一できるカスタムフィールドという機能があります。カスタムフィールドで設定した内容を記事に反映させるには、カスタムフィールドを投稿画面に表示させてテーマを編集する必要があるのでその方法を解説します。, 記事URLhttps://min-web.com/wordpress-custom-field/, WordPressの投稿画面にデフォルトで用意されている入力フィールドは ・タイトル ・本文 のみです。, しかし、WordPressの機能の1つ「カスタムフィールド」を利用することで以下のように入力フィールドを増やすことができます。, カスタムフィールドを活用することで、いちいち本文画面に入力項目と値を書き込まなくても必要な情報をすぐに表示させることができます。, カスタムフィールドは、以下のようなWebサイトを制作するときに便利な機能です。 ●お店紹介サイトや不動産サイトのように、1つのページに多数の情報を掲載するサイト ●決まったフォームで記事を量産するサイト ●商品やサービスを販売するショッピングサイト ●複数人で運営しているサイト 今回はカスタムフィールドを導入して、投稿作業をスムーズにする方法をご紹介します。, デフォルト設定のWordpress投稿画面には、タイトルと本文2つの入力フィールドしかありません。, しかしカスタムフィールドを活用すれば、独自の入力フィールドを追加することができます。カスタムフィールドの追加例としては以下の項目が挙げられます。, カスタムフィールドは本文とは異なった入力フィールドですので、単体で編集することができます。, 例えば、不動産サイトやショッピングサイト、お店の口コミサイトのように、記事ごとに内容は違うが固定の項目で情報を入力したいというときに活用されます。 また、カスタムフィールドは、本文とは別の位置に入力内容を表示することができます。, 複数人でブログを投稿している場合、入力項目にばらつきがでてしまう場合があります。 カスタムフィールドは入力項目の固定が可能なので、投稿内容を統一することができます。, カスタムフィールドを追加し、プレビュー画面で表示させる手順は以下の通りです。 ●カスタムフィールドを追加する ●カスタムフィールドを表示させるテンプレートを作り、phpファイルに書き込む, カスタムフィールドはデフォルトの投稿画面では表示されていません。 したがって、プラグインを導入するか表示オプションから表示させる必要があります。, 本文の下にカスタムフィールドのウィジェットが表示されますので、カスタムフィールドの設定をおこないます。, 「名前」の部分に入力項目名を入れます。(※今回は「サービス価格」と設定) 名前の隣は値を入力する部分です。(※今回は「50000円」と設定) 入力が完了したら、「カスタムフィールドを追加」をクリック。, 「カスタムフィールドを追加」で追加することで、次に新規投稿する場合はプルダウンメニューからカスタムフィールドを選択することができるようになります。, カスタムフィールドはプラグインを使って表示させることも可能です。 カスタムフィールドを表示させるプラグインはいくつかありますが、今回は「Advanced Custom Fields」というプラグインを使用します。 このプラグインは、通称「ACF」と呼ばれており、カスタムフィールドプラグインの定番です。 文字だけでなく画像、PDF、カレンダーなど様々なカスタムフィールドを簡単に追加することができます。, 検索窓に「Advanced Custom Fields」と入力し、プラグインをインストールします。, サイドバーに「カスタムフィールド」が追加されます。 「カスタムフィールド」→「新規追加」でカスタムフィールドを設定できます。, 投稿画面に表示させるカスタムフィールドを設定します。 今回は「商品価格」を入力できるカスタムフィールドを作ります。 例えば、以下のように設定します。, カスタムフィールドを投稿した記事に表示させるには、phpファイルにコードを記述する必要があります。 「投稿」なら投稿のphpファイル、「固定ページ」なら固定ページのphpファイルに記述します。今回は、投稿画面にカスタムフィールドを追加したので「singular.php」にコードを記述します。 (Webサイトによって、phpファイルの名称は異なります。), テーマエディタを開くとphpファイルのコードが表示されます。 書き込むphpファイルは赤枠の部分で選択できます。, コードを記述する際は、バックアップを取るか、コードを全てコピーしトラブルに備えましょう。 また、記述方法プラグインを使った場合と使わなかった場合で記述内容がそれぞれ違うので注意してください。, 「singular.php」ファイルを開き、カスタムフィールドを表示させるための関数を記述します。記述場所は、titleの直下などカスタムフィールドを表示させたい場所です。, カスタムフィールドを表示させるための関数はいくつか種類があります。 全ての情報を表示させるなら「get_post_custom()」という関数を使用します。, 今回は、サービス価格というカスタムフィールドを追加したため、(”)内が「サービス価格」になっています。, またテンプレートタグ「the_meta()」を使う方法もあります。 その場合、以下のコードを記述します。, さらに、テンプレートタグ「the_meta()」では表示フォントや色をカスタマイズすることもできます。, 「$post_id」は、データの値を取得する記事のID、「$key」は表示させるカスタムフィールドの名前、「$single」はtrueあるいはfalseを入れます。 trueに設定されている場合、結果が1つの文字列、falseの場合にはカスタムフィールドの配列が表示されます。, プラグインを使う場合、phpファイルに入力するコードがプラグインごとに異なります。 今回は、「Advanced Custom Fields」を使用したので、専用のコードをご紹介します。, Advanced Custom Fieldsの場合は、「the_field();」という関数を使用します。 ()内にはカスタムフィールド作成時に設定したフィールド名を入れます。 今回は、「price」を設定したので、コードは「the_field(‘price’);」になります。, カスタムフィールドは複数人で運営しているサイトやショッピングサイトに便利な機能です。カスタムフィールドを設定するには、 ●投稿画面に表示させる ●phpファイルにプレビューで表示させるためのコードを記述する といったことが必要です。 phpファイルを編集することになるので、バックアップやコピーを取ってから作成しましょう。, バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。, お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。, 今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。, 最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、 以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。, この記事がお役に立ちましたら、"いいね!"をお願いしますminwebの最新情報をお届けします, ”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、企画し実装まで支援する伴走型Webコンサルティング会社です。, Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。, コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。, Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。 考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。, 課題解決のポイント、目標達成のプロセスなどWebサイトの成長につながる具体的な手段をご提示いたします, https://min-web.com/wordpress-custom-field/, Googleアナリティクスサーチコンソール使い倒し活用術 -AOHON(あおほん)-.