WordPressでChromeのtheme-colorタグを使う

普段あまりスマホでウェブを見ないので気が付かなかったのですが、Android版Chromeでステータスバーがウェブサイトに合わせて変わることに気が付きました。
lollipop以降+Chromeだとこんな感じ。

Screenshot_2016-02-06-21-00-24_com.android.chromeScreenshot_2016-02-06-20-54-50_com.android.chrome

簡単に対応できるのでメモ。

方法

ここ見ればOK。

metaタグに色を指定するだけです。簡単。

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

WordPress

headに突っ込むだけなのでfunctions.phpに追記しておきます。

function metacolor() {
    echo '<meta name="theme-color" content="#80abc8"><meta name="msapplication-navbutton-color" content="#80abc8"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">';
}
add_action('wp_head', 'metacolor');

Screenshot_2016-02-06-22-22-33_com.android.chrome

WordPressでChromeのtheme-colorタグを使う

コメントを残す

メールアドレスが公開されることはありません。