kdcsライブラリー

条件分岐で「モバイルでiOS以外」とし、グーグルフォントを読み込ませる
下の例は、明朝体フォントを読み込ませる記述

<?php if( wp_is_mobile() && !is_iOS()): ?>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap">
<?php endif; ?>

前記事の「疑似要素「::before」を利用した画像固定」はスマホでも使えるが、1か所限定。
1枚の画像をずっと固定したままで動きがない。

今回試したのは「position: sticky;」スティッキー
例によってIEでは機能しないがスマホで使える。

Safariやios対策 -webkit-sticky display: blockまたはflexは必須
css

.inner { max-width: 1080px; margin: 0 auto; }

#content {
    margin: 0 auto;
    text-align: center;
}

.block {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}
p {
  display: inline-block;
  font-size: 60px;
  font-family: 'Great Vibes', cursive;
  padding: 0;
  margin: 0;
}
img {
  width: 100%;
  height: auto;
}
.block-one {
  background: #212E32;
  color: #fff;
  z-index: 500;
}
.block-two {
  background: #85937A;
  z-index: 400;
}
.block-three {
  background: #212E32;
  color: #fff;
  z-index: 300;
}
.block-four {
  background: #85937A;
  z-index: 200;
}
.block-five {
  background: #212E32;
  color: #fff;
  z-index: 100;
}

html

<section>
<div id="content">
<div id="contentArea" class="inner clearfix">

  <div class="block block-one">
    <p>One</p>
  </div>
  <div class="block block-two">
    <div>Two<br><img src="./images/sample.jpg"></div>
  </div>
  <div class="block block-three">
    <p>Three</p>
  </div>
  <div class="block block-four">
    <p>Four</p>
  </div>
  <div class="block block-five">
    <p>Five</p>
  </div>

</div><!--/contentArea-->
</div><!--/content-->
</section>

背景固定のパララックス効果は「background-attachment:fixed;background-size: cover」で背景画像を固定することで実装できるが、iPhoneなどios機ではこの方法が使えない。そこで背景画像固定用のブロック要素を用意してブロック要素自体を固定するという手段。
固定する要素には疑似要素「::before」を使い、z-indexで位置を下位にする。

div.hoge::before{
  display:block;
  content:"";
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(./images/bg-image.jpg) center no-repeat;
  background-size:cover;
}

「wp_is_mobile」を使ってPCとモバイルの条件分岐ができますがタブレット（iPad）も
モバイルに含まれてしまいます。（wordpress 3.4から実装）

そこでfunctions.phpに以下のコードを記述し「is_mobile」という条件分岐タグを有効にします
※この方法ならバージョンが3.4以前でも有効です

<?php
function is_mobile() {
    $useragents = array(
        'iPhone',          // iPhone
        'iPod',            // iPod touch
        'Android',         // 1.5+ Android
        'dream',           // Pre 1.5 Android
        'CUPCAKE',         // 1.5+ Android
        'blackberry9500',  // Storm
        'blackberry9530',  // Storm
        'blackberry9520',  // Storm v2
        'blackberry9550',  // Storm v2
        'blackberry9800',  // Torch
        'webOS',           // Palm Pre Experimental
        'incognito',       // Other iPhone browser
        'webmate'          // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
?>

これで以下のように条件分岐が行えます

<?php if(is_mobile()) { ?>
スマホで出力したいもの
<?php } else { ?>
タブレット・PCで出力したいもの
<?php } ?>

同一URLでPCサイトとスマホサイトを振り分ける場合、インターネットのネットワーク上にキャッシュされている
データーが利用されることがあるので、うまく振り分けられないという可能性がある

その場合の対処法として「HTTPヘッダーでVaryを指定」がある

.htaccessファイルに以下を記述する　（ユーザーエージェントによって内容が変わるという場合）

Header set Vary User-Agent