【開発日誌 #17】ACFによるユーザー情報の登録と出力

はじめまして。フロントエンドエンジニアの橋本と申します。
異業種から転職し、約半年が経ちました。
今回は、某進学塾のWordPressサイトを構築するにあたって、プラグイン：Advanced Custom Fieldの活用の新たな知見を得ることができたのでご紹介するとともに、未経験から挑戦するなかで感じたやりがい等もお伝えしたいと思います！

概要

実装したい機能

• 複数名のユーザー(塾の先生方)がブログ投稿を行うにあたって、投稿者の氏名や顔写真だけでなく、担当している教科等の補足情報も表示されるようにする。
• 上記情報は、ユーザーがログインし、記事を執筆/投稿した時点で自動的に反映されるようにする。

使用するプラグイン

Advanced Custom Field（以下ACF）
こちらの記事でも紹介されています。

【開発日誌 #12】多言語プラグインWPMLとACFカスタムフィールドのオプションページ組み合わせ時の注意点 | COMMUDE 開発日誌

フロントエンジニアの韓と申します。 現在某大手商社様のコーポレートサイトを構築しています。今回は構築中の案件で気づいたことを共有したいと思います。 ・wordpress案件 ・多言語サイト（日・英・中） ・お客様が更新しやすいカスタムフィールドで構築する ・ACFカスタムフィールド 「Advanced Custom Fields」は、 WordPressのカスタムフィールドの仕組みを拡張して、さまざまな形式の入力項目を追加できる様にする ためのプラグインです。 ・WPML 主な特徴 WPMLは１つのWor

https://www.wantedly.com/companies/commude/post_articles/377045

実装までの手順

①カスタムフィールドの作成

ACFの設定画面から登録したいユーザー情報に関するカスタムフィールドを作成します。
このとき、フィールドグループを表示する条件は、ユーザーフォームに等しくなるよう設定します。

②ユーザー(ブログ投稿者)情報の登録

ユーザー部分を確認すると、WordPress標準のユーザー画面に加えて、登録したカスタムフィールドが表示されています。ここで必要な情報を登録します。

③ユーザー(ブログ投稿者)情報の出力

今回は、ブログ投稿の詳細ページに情報を出力しました。
ユーザーのメタデータを返すget the author meta( )関数を使用します。
下記の記述では、カスタムフィールド【氏名】の情報を出力しています。

<p>ブログ投稿者</p>
<p><?php $aID = get_the_author_meta('ID'); the_field('author_name', 'user_' . $aID); ?></p>

ブログの投稿画面に、投稿者の情報を記入するカスタムフィールドを作成することも一つの手段ですが、投稿者の情報が固定されている場合は、今回の手法をとることで毎回の入力を削減することができます！

ACFの新たな利便性を知ることができました。

未経験からWeb業界に挑戦して感じたこと

私は以前まで接客中心の業務を行っていましたが、職業訓練校で約半年のカリキュラムを修了し、コムデに入社しました。
研修や運用案件を通して、WEBサイト制作の基本の流れやコーディングルールの基礎を身につけ、その後は新規案件や今回ご紹介した案件のようにWordPressサイトも任せていただいています。

アニメーションの実装、WordPressの複雑な仕様など難しい場面に直面する機会もありますが、それを経て成長することができます。また、何よりも自分が制作に関わったサイトが公開されることは大きなやりがいにつながります！

私の所属する札幌拠点は昨年9月に設立され、現在在籍する6名のメンバーは全員未経験からこの業界に挑戦しています。そのため、疑問点を教えあったり、新しい知識を共有したりする動きが活発にあり、前向きに仕事を取り組むことができる点も魅力です。
引き続き他メンバーとともに、多種多様な案件に挑戦していきたいと思います！

おわりに

当社の案件はとにかく「多彩」！
求められる技術レベルも日に日に高まっています。
今後はモダンな技術を用いたサイト／アプリケーション構築が増えていく見込みです。
多彩な案件や大型案件に挑戦してみたい方は、まずはカジュアル面談にお越しください！

株式会社コムデでは一緒に働く仲間を募集しています