2018年12月3日

デザイン

Atomic Designを使って、WordPressをコーディング!

Atomic Design を使って、WordPressサイトをコーディング!Atomic Design を使って、WordPressサイトをコーディング!

目次

  1. はじめに
  2. Atomic Designとは?
  3. WordPressへの導入
  4. まとめ

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay3です!

eishisでは主にRubyを用いたWebシステムの開発、React Nativeによるシステム開発、JavaScriptによるWebVR/WebARの開発を行っています。

昨日はGoogle Data Portal(旧Google Data Studio)を使用し、無料で様々なデータを可視化する方法を紹介する記事でした。

Google Data Portalでデータを可視化する

今回はAtomicDesignを使った、WordPressサイトのコーディングの一例についてご紹介したいと思います。
Webサイト制作ではスタンダード「WordPress」ですが、ページ数の多いWebサイトになればなるほど、コードが複雑になり、管理が大変になります。そこで、コンポーネントベースで管理していく「Atomic Design」の考え方をWordPressでも取り入れ、より管理のしやすいWebサイトのコーディングについて考えてみたいと思います。

Atomic Designとは?

まずAtomic Designについて簡単に説明したいと思います。
Atomic Designはアメリカのデザイナーであるブラッド・フロストさんの提唱したUIデザインの手法でUIのコンポーネント・パーツ単位で定義していく手法です。

スクリーンショット 2018-11-29 15.22.23.png (510.9 kB)

例えばボタンをAtoms(原子)として定義し、そのボタン複数ある集合体をMolecules(分子)、そのさらに大きな集合体をOrganisms(生体)、といった形で定義していきます。

Sketchを使っている方でしたらシンボルで機能で似たような手法でデザインをしている方も多いのではないのでしょうか。
どのコンポーネントをAtomsとして定義するのか等の、コンポーネントの粒度については、議論の余地がありますが、ここでは一旦割愛いたします。

WordPressへの導入

では実際にAtomic Designの手法をWordPressで取り入れたらどうなるのか、考えてみたいと思います。

WordPressでは任意のテンプレートを呼び出す代表的な関数としてget_template_part()というものがあります。テンプレートパーツを呼び出す関数で、使用方法も呼び出したいパーツのスラッグを引数に指定するだけでとても簡単です。
しかし、このget_template_part()、単体ではテンプレートに引数を渡すことができません。
そこで登場するのがset_query_var()get_query_var()です。

それぞれの関数について

set_query_var()

set_query_var()はWP_Queryオブジェクトの中に値をセットする関数です。ここに引数として任意のキーと値をセットします。

get_query_var()

get_query_var()はWP_Queryオブジェクトの引数で指定したクエリの値を戻してくれる関数です。ここで先ほど設定した任意のキーを引数にセットします。

コード例

それでは実際にコードにした時どうなるのかみてみましょう。
今回はボタンコンポーネントを呼び出す例をとってみます。

親コンポーネント側(molecules)

// 子コンポーネントに渡す引数の定義
set_query_var( 'btn_style', 'default' );
set_query_var( 'btn_url', 'https://bagelee.com/' );
set_query_var( 'btn_text', 'トップへ戻る' );

// 子コンポーネントの呼び出し
echo '< div class="m-inner" >';
get_template_part( 'components/atoms/btn' );
echo '< /div >';

子コンポーネント側(atoms)

// 親コンポーネントから受け取りたい引数のクエリを指定
$btn_style = get_query_var( 'btn_style' );
$btn_url = get_query_var( 'btn_url' );
$btn_text = get_query_var( 'btn_text' );

// 出力内容
$item .= '< a'; $item .= ' href=" . $btn_url . '"'; $item .= ' class="a-btn a-btn-' . $btn_style . '" >';
$item .= $btn_text;
$item .= '< /a >';

echo $item;

今回の場合は親コンポーネントからbtn_type(style情報)、btn_url(リンク先)、btn_text(出力させたい文字列)の三つを渡してあげました。これにより違う文字を表示させたいときやリンクの飛び先、スタイル等を引数に指定するだけで柔軟に対応が可能になります。

Atomic Designではコンポーネントを組み合わせてWebサイトを構成していくので、
今回のボタンのように他にもタイトルやフォームのパーツなどのAtomsを定義して、それらを合わせたMoleculesを作り、
また出来上がったMoleculesを組み合わせてページを構成していくといった流れになります。

注意点

注意点としてはset_query_var()はWP_Queryオブジェクトの中に定義されるため、pagedやposts_per_pageなどの既存のものと同じ名前をキーとして設定すると他の箇所に影響がでる可能性があります。
そのため、セットするキーはオリジナルの名前をつけるようにしましょう。

まとめ

Webサイトの制作では、CSSはしばしば共通クラスを作るなどしてAtomic Designの考え方を取り入れて制作を行うことがあります。

ですが、WordPressの場合は関数をうまく使うことで、上記に加えてHTMLも共通なものはコンポーネントとして(WordPressではテンプレート)定義することができるため、より良いコードを書くことができるのではと考えました。

wordpressのお仕事に関するご相談

Bageleeの運営会社、palanではwordpressに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

2

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP