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

標準的なテキストフィールドを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「ACF」を使って作成したフィールドグループの中に、複数のカスタムフィールドを追加&設定する方法について解説していきます。
講師:
05:05

字幕

このレッスンでは Advanced Custom Fields略して「 ACF 」を使って標準的なのテキストフィールド作成する方法について解説していきます。それでは画面をみてみましょう。こちらの部分では前回のレッスンで作成した「補足情報」というフィールドグループが表示されてる状態になっていますね。今回はこちらの「補足情報」というフィールドグループに対して実際にカスタムフィールドを作成して追加していってみたいと思います。それではまずこちらのタイトルの部分をクリックします。するとこのような画面になりますね。今回カスタムフィールドを作成していく場所はこちらの枠の中となります。こちらの「フィールドを追加」という青いボタンをクリックすることによってそのカスタムフィールドを追加していくことができるようになっています。それでは早速こちらのボタンをクリックしてみましょう。するとこのような画面が表示されてきました。まずこちらの「フィールドラベル」にはこのカスタムフィールドのタイトルを入力してあげます。今回はこの部分に「補足タイトル」と入力してあげましょう。そして次にこちらの「フィールド名」、このフィールド名にはこの作成するカスタムフィールドを特定する為の ID の様なものを英単語で入力してあげます。 先程入力したフィールドラベルが自動的にこの枠の中に反映されてきますのでこちらの部分を削除してそして今回はこの部分に infoアンダーバーの title と入力してあげます。次にこちらの「フィールドタイプ」です。こちらの部分ではこのように選択ボックスから様々なタイプのフィールドタイプを選択することができるようになっています。今回は標準的なテキストボックスを作成したいのでこちらの「テキスト」を選択しておきましょう。そして次にこちらの「フィールド記入のヒント」この部分にはこのカスタムフィールドにどういった内容を入力すれば良いかなどヒントを入力してあげることができるようになっています。今回はこちらの部分にこのように「補足情報のタイトルを入力してください」と入れておきましょう。そしてこちらの下の部分にも他にも様々な設定項目がありますが、今回はデフォルトの状態のままで大丈夫です。ここまで入力したらこちらの「フィールドを閉じる」をクリックします。するここのように先程の入力画面が折り畳まれてコンパクトの状態になりました。再度こちらの内容を変更したいということであればこちらのタイトル部分をクリックすることでこのように編集画面を表示させることができるようになっています。 それではこちらをもう一度折り畳んでそして最後にこちらの「更新」ボタンをクリックします。これでこちらのテキストボックスのカスタムフィールドを追加することができました。それではこれと同じ様で次は本文を入力する為のエディタを追加してあげたいと思います。同じ様に「フィールドを追加」ボタンをクリックしてそしてこちらの「フィールドラベル」には「補足本文」と入力画面があげます。そしてこちらの「フィールド名」には「 info_body 」としてあげます。そして次にこちらの「フィールドタイプ」ですね。それをこちらを選択してあげます。そしてこちらの「ヒント」の部分には「補足情報の本文を入力してください」と入れてあげます。ここまで設定したら同じ様にこちらの「フィールドを閉じる」をクリックしてこのようにコンパクトな形にします。そして「更新」ボタンをクリックして反映させます。これでこの「補足情報」というフィールドグループには二つのカスタムフィールドが追加された状態になっています。以降のレッスンでは実際に追加したこの二つのカスタムフィールドに対して内容を入力してみたいと思います。以上でレッスンは終了です。今回はカスタムフィールドグループを使って標準的なテキストフィールドを作成する方法について解説致しました。

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

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

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

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

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

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