WordPressプラグインで入稿画面をカスタマイズする

「関連」フィールドを投稿に追加する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「関連」フィールドを投稿に追加して、投稿に関係のある他のページなどを投稿に紐付ける方法について、解説していきます。
講師:
06:57

字幕

このレッスンでは Advanced Custom Fields略して「 ACF 」で関連フィールドを投稿に追加する方法について解説していきます。まずは画面の方をみてみましょう。こちらは WordPress で作成している。ウェブサイトですね今回はこちらのウェブサイトの方に各投稿の中のこちらの補足情報の下にこの部分ですね、この部分に関連した情報が掲載されているページのリンクを一覧で表示させる枠をつけていきたいと思います。よくインターネット上のウェブサイトで見かけるような他にもこう言った記事が読まれていますといった感じのリストですね。今回はその部分の実装をAdvanced Custom Fields の関連フィールドを使って自分で投稿の中でその関連したページを選択してそしてこちらの部分に表示させてくる方法について見ていきたいと思います。それでは WordPress の管理画面の方に移ります。はいこちらが WordPress の管理画面ですね、画面にはカスタムフィールドのフィールドグループ一覧の画面が表示されています。それではこちらの部分に新たに関連情報というフィールドグループを作成します。まずは「新規追加」をクリックします。 そしてこちらのタイトル部分に「関連情報」と入力します。そしてこちらの「位置」はそのままそしてこちらの「オプション」の方でまず「順序番号」をこちら「1」としておきましょう。これはこちらにも書いている通り低い方から高い方へ投稿画面の中でフィールドグループが表示されてきます。前回までのレッスンで作成した補足情報の順序番号が「0」となっていましたので今回は「1」としてその補足情報の下にこちらの関連情報のフィールドグループが表示させるようにしておきます。そして次にこちらのスタイルの方を「 Standard 」にしておきます。こちらの「 style 」はフィールドグループの投稿画面上での表示デザインを指定するものになります。それではここまで入力できたらまずはこちらの「公開」ボタンをクリックします。するとこのように関連情報のフィールドグループが出来上がりました。それでは次にこちらの部分で実際にカスタムフィールドを追加しましょう。まずは「フィールドを追加」をクリックします。すると新規のフィールドの追加画面が表示されてきますのでまずはこちらにフィールドのラベルを入れてあげましょう。こちらは日本語表記で大丈夫です。 今回は「関連ページ」としておきます。そしてこちらの「フィールド名」には英語でこちらのフィールドの名前を付けてあげます。まずはこちらの関連ページという内容を削除してアルファベットで「 relational_pages 」と打ってあげます。そして次にこちらの「フィールドタイプ」ですこちらの部分を選択して、そしてこちらの「 Relational 」の中の「関連」をクリックして選択してあげます。そして次にこちらの「フィールド記入のヒント」です。こちらの部分にはこのように「関連するページを選択してください」と入力しておきましょうか。そして次にこちらの「投稿タイプ」です。ここではこの関連フィールドを使って投稿に紐付けをさせたい投稿タイプ要するに「 post type 」と呼ばれるものです。それを選択することができます。「 post 」は投稿「 page 」は固定ページ「 attachment 」いわゆるファイルですね。ここでは「 post 」と「 page 」を選択してあげます。Shift を押しながら選択することによって複数選択することができる様になっています。そしてこのまま下に移動していきまして次にこちらの「フィルター」の「 Post Type Select 」をチェックを入れておきます。 このようにすることで表示されたカスタムフィールドから該当する関連したページを見つけ出す為に検索機能や「 Post Type 」によって絞り込む機能を利用することができるようになります。次にこちらの「 Elements 」の部分ではこちらの「アイキャッチ画像」にチェックを入れておきましょう。そうすることによってカスタムフィールド内でそのそれぞれのページに入庫されているアイキャッチ画像もサムネイルで標準うになります。ここまで入力が完了したらこちらの「フィールドを閉じる」をクリックします。するとこのように入力枠がコンパクトに折り畳まれてこの「関連情報」の中に一つの関連ページと呼ばれるカスタムフィールドが生成された状態になりました。それではこの状態で「更新」ボタンをクリックします。このすることによってこれまで設定してきた内容が保存されました。それでは実際にどのように投稿画面に表示されているのかを確認してみたいと思います。まずはこちらの左メニューのから「投稿」、そして「投稿一覧」をクリックします。そしてこちらの「カピバラ」を選択してみましょう。すると投稿入力画面が表示されてきますのでこちらの下の方にスクロールしていきます。 するとまずは前回までのレッスンで作成したカスタムフィールド「補足情報」ですね。こちらが表示されて そしてその下に「関連情報」というものがでてきました。こちらの部分でこの投稿に関連したページなど指定するこができるようになりました。それでは今回は試にこちらの「エランド」、そして「キリン」「クジャク」を選んでみましょう。そしてこの状態で上に戻ってこちらの「更新」ボタンをクリックします。こうすることによって先程選択した内容がこのように保存されましたね。以上でレッスンは終了です。今回は関連フィールドを投稿に追加する方法について解説致しました。以降のレッスンではこの関連ページで選択された内容を実際にウェブサイトに反映する方法についてみていきたいと思います。

WordPressプラグインで入稿画面をカスタマイズする

WordPressは世界中で使われている無料のWeb制作ソフト/CMSです。その機能を拡張してさらに便利にしてくれるのがAdvanced Custom Fieldsです。このコースではその機能の紹介からプラグインの入手先やインストール方法、さらにはフィールドグループの作成やサイトへの出力まで詳しく紹介します。

1時間36分 (19 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 1,990
発売日:2016年01月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。