直帰率の改善にウフフ！スマホサイトのメニューをアプリっぽくしてみたら

メニューをアプリっぽくフッターに固定してみたら、直帰率が10%ほど改善しました。昨日の今日の話なのであまりアテにはならぬ的な見方もできますが、これをポジティブに捉えた方がさらなる工夫への弾みになります。

それで、新たに前後の記事へ移動できるボタンを加えました。利用したjQueryのプラグインやアイコンフォントは前記事で紹介してるので、今回は知っ得な「WordPressの条件分岐」について、触りだけにはなりますが書いておこうと思います。

現在のメニューの様子

これでメニュー作りはひと段落です。以前は画面上にナビゲーションがまったくなかったので、それに比べるとずいぶん色々な記事を読んでもらいやすくなったなあと自己満。

前後の記事へリンクするテンプレートタグ

前後の記事へリンクするには、WordPressにあらかじめ用意されている「previous_post_link」と「next_post_link」を使いました。

一番シンプルな使い方は、リンクを表示したいところに以下の記述をするだけです。ただし、ループの中でしか動作しないので注意しておかないと意外とハマります。

<?php previous_post_link(); ?>

<?php next_post_link(); ?>

• テンプレートタグ/next post link – WordPress Codex 日本語版
• テンプレートタグ/previous post link – WordPress Codex 日本語版

もうひとつ忘れてはいけないのが、最新記事の次と最古記事の前には記事が存在しないことです。前後の記事があるかないかによって、メニューの表示具合を変える必要があります。

最新の記事の場合

最新記事の場合は次の記事が存在しませんよね。なので「 次の記事」のボタンを表示してはダメ。逆に、最古記事の場合は「 前の記事」のボタンは不要です。このような表示／非表示を条件によってコントロールできるのが「条件分岐」です。

条件分岐

WordPressの「条件分岐タグ」とphpの「if構文」を組み合わせて使えば、「もし◯◯の場合は▲▲をしろ」という命令が可能になります。

たとえば、「トップページだけに更新情報を表示したい」や今回のような「スマホサイトだけにメニューを表示したい」という機会に応用できます。

記述方法

◯◯に条件分岐タグを、▲▲へ実行したいHTMLを書き入れます。

<?php if(◯◯): ?>
	▲▲
<?php endif; ?>

条件分岐タグの例

• is_home() 「メインブログページが表示されている場合」
• is_front_page() 「サイトのフロントページが表示されている場合」
• is_single() 「投稿ページの場合」
• is_page() 「固定ページが表示されている場合」

このうちひとつを試してみましょう。『もし固定ページの場合は電話リンクを表示しろ』の記述は、◯◯に「is_page() 」をあてはめて、

<?php if(is_page()): ?>
	<a href="tel:090-123-4567">電話</a>
<?php endif; ?>

あるいは、IDを指定すれば『IDが5の固定ページの場合は電話リンクを表示しろ』にもできたりします。

<?php if(is_page(5)): ?>
	<a href="tel:090-123-4567">電話</a>
<?php endif; ?>

条件分岐タグの種類と詳しい使い方は公式サイトをどうぞ。

• 条件分岐タグ – WordPress Codex 日本語版

if構文をうまく記述すれば、複数の条件を組み合わせることも可能です。

今回は、「スマホからのアクセスの場合」「前後記事が存在する場合」「カテゴリーページの場合」などの条件を組み合わせ、ページ毎に適切なメニューを表示してます。

if構文の詳しい使い方をしるには、公式のマニュアルが最も信頼性が高いのですが、ちょっと堅すぎる印象もあります。

ググると、たくさんのサンプルを試せるサイトが見つかります。聞き慣れない言葉の連続に構えてしまいますが、使うより慣れろ。最初はコピペでokなので、実際に何度も使ってみて挙動を試すことが大切です。

• 公式：PHP: 制御構造 – Manual

以上！

メニューの動きと操作性に微妙な不満が残る部分もあるのですが、いちおうこれで一段落させ、次はサイト表示の高速化に取り組みたいなあ（深刻…）

ほな、ごゆるりとー