WordPressもくもく勉強会 at コエド第９回 15.09.19

スマートフォンユーザーのためのQRコード設置と

ホーム画面へのアプリアイコン設置

TickleCode.

Yoshinori Kobayashi 1

WordPressで作る焼き鳥サイト

もくもく会（自主勉強会） を複数の運営メンバーや アドバイザーの方々と ともに、定期開催しています。

勉強会を開催しています)^o^(

2

【CoEdo.rb】 Ruby / Ruby on Rails

ビギナーズ勉強会

Swiftビギナーズ勉強会

WordPressもくもく 勉強会

3

最初にデモします。

・QRコードオペレーション

・スマホのホーム画面へのアイコン追加

http://yakitori-ya.net/

4

QRコードについて

・利点は、ユーザーがPCからスマホデバイス にあっさりと移行しやすい！

・スマホデバイスで、別途、 QRコードリーダーアプリが必要。

・QRコードはWebサイトで簡単に作れる。

5

QRコード[二次元バーコード]作成

QRコードの作成と設置

6

ホーム画面追加時にタイトルを指定

// iOS Safari のみ対応できる。

<meta name="apple-mobile-web-app-title" content="焼き鳥屋検索" />

タイトルは日本語だと6文字

まで表示可能

通常のサイト名は長すぎる。

わかりやすい名前で指定で

きるのがよい。

7

ホーム画面のアプリアイコン

// iOS Safari の場合

<link rel="apple-touch-icon" sizes="180x180" href="touch-ico180x180.png">

// Android標準ブラウザ(一部)

<link rel="shortcut icon" href="touch-ico180x180.png">

デバイスに応じてサイズが多

数ある。

大きいサイズを指定しておく

と、小さいデバイスのときは

調整してくれる。

8

WordPressへの組み込み

[functions.php]

function apple_app_title(){

// アプリタイトル

echo '<meta name="apple-mobile-web-app-title" content="焼き鳥屋検索" />';

// 親テーマの場合は、get_template_directory_uri() を使う。

$touch_ico_uri = get_stylesheet_directory_uri() . '/images/touch-ico180x180.png';

// iOS Safari

echo '<link rel="apple-touch-icon" sizes="180x180" href="' . $touch_ico_uri . '">';

// iOS Safari(旧) / Android標準ブラウザ(一部)

echo '<link rel="apple-touch-icon-precomposed" href="' . $touch_ico_uri . '">';

// Android標準ブラウザ(一部)

echo '<link rel="shortcut icon" href="' . $touch_ico_uri . '">';

// Android Chrome

echo '<link rel="icon" sizes="192x192" href="' . $touch_ico_uri . '">';

}

functions.php で挿入するmeta、linkを関数でまとめる。

9

WordPressへの組み込み [functions.php]

function apple_app_title(){

// アプリタイトル

echo '<meta name="apple-mobile-web-app-title" content="焼き鳥屋検索" />';

：

// Android Chrome

echo '<link rel="icon" sizes="192x192" href="' . $touch_ico_uri . '">';

}

add_action('wp_head','apple_app_title', 5 );

関数を実行する場所を、add_action で指定する。

WordPress Codex 日本語版 関数リファレンス add action

説明：add_action(動く場所,動かす内容,動く場所での優先)

「add_actionは、wp_head()がある場所で、apple_app_title() を優先順位５で動かす。優先が５ぐらいだと、ちょうどよい位置に挿入される。」

2015年版: ホームアイコンの指定方法まとめ

10

参考になるリンク集

HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ

WordPress Codex 日本語版 関数リファレンス add action

ご清聴ありがとうございました。

11