WordPressでMaterial Design Liteを手軽に利用する方法

マクドナルドアプリ
マクドナルドアプリ

Googleが提唱するマテリアルデザインですが、最近ではマクドナルドのAndroid版公式アプリや人気のフリマアプリ「メルカリ」などでも利用されるなど、徐々にAndroidアプリの標準デザインの地位を確立しつつあるように思います。

また、Wordpressでもマテリアルデザインを取り入れたテーマが数多くリリースされており、「MaterialWP」などは定番のテーマでしょうか。

さらに、「今使っているテーマの一部にマテリアルデザインチックなボタンを配置したい」といったカジュアルな利用を求める場合には、Googleが純正のフレームワーク「Material Design Lite」を公開しています。

今回は、このMaterial Design LiteをWordpressテーマに組み込む方法を紹介します。

  1. デモ
  2. 子テーマを作成する
  3. Material Design LiteのCSS&JSを読み込む
  4. 使い方
  5. 参考サイト

1.デモ

マテリアルデザインの特徴的なボタンやスイッチなどのコンポーネントを簡単に設置することができます。

Badges account_box Mood
Buttons
Toggles
Text Fields
Input is not a number!

2.子テーマを作成する

デフォルトテーマ「Twenty Fifteen」の子テーマで利用する方法を例とします。

(1) 用意するフォルダ・ファイル

2015mdl (フォルダ)
–style.css
–functions.php

(2) style.cssの記述

「2015mdl」という名前の「TwentyFifteen」子テーマを作成します。

/*
 Theme Name: 2015mdl
 Template: twentyfifteen
 Description: TwentyFifteen with Material Design Lite
 Version: 1.0
 */

(3) functions.phpの記述

親テーマのCSSを読み込みます。

<php
 /*
  * Enqueue stylesheets & Javascript
  */
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
   // stylesheets
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 }

これで、TwentyFifteenを親テーマとする一般的な子テーマが作成されたかと思います。2015mdlフォルダをアップロードし、管理画面から有効化して表示チェックを行ってみてください。TwentyFifteenと全く同じ表示であることを確認してください。

3.Material Design LiteのCSS&JSを読み込む

さきほど作成したfunctions.phpにMaterial Design LiteのCSSとJSファイルを読み込む記述を追記します。

以下のコードが記述追記後のコードです。

<?php
 /*
 * Enqueue stylesheets & Javascript
 */
  add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
  function theme_enqueue_styles() {
    // stylesheets
    wp_enqueue_style( 'material-style', 'https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.css' );
 wp_enqueue_style( 'material-icons', 'https://fonts.googleapis.com/icon?family=Material+Icons' );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    // Javascript
    wp_enqueue_script( 'material-script', 'https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js', array(), null, true );
  }

4.使い方

Material Design Liteのパーツを利用するには、公式サイトを参考に指定のクラス名を付けるだけです。

Components – Material Design Lite –

Bootstrapなどのフレームワークを使い慣れている人なら簡単ですね!

5.参考サイト

以下、参考サイトです。

Material Design Lite