WordPress スマホとPCで表示内容を切り替えるカスタマイズ

今回は、スマホでブログを読んでくれる方のためのユーザビリティを高める手段として、

スマホからだけ見える、PCからだけ見えるという表示切り替え手順について、

Bank Academy」を運営する元銀行員ブロガーのRyoheiさん(@ryoheifree)の「サイトマップ」を例に紹介します。

改善方法にたどり着いた経緯もうざいんですが書いていきますので改善の手がかり探しの参考になれば幸いです。

アドバイスを受けた際の改善方法

ここはRyoheiさんさすがだと言わざるを得ない

Ryoheiさんはブログオーナーとしてやるべきことをきちんとわかってらっしゃいます。

ブログオーナーがすべき優先事項は記事を書くこと(記事のクオリティをあげること)

もしあなたも、有益な改善ヒントをいただいた場合にそれが技術的なものであった場合は、

詳しい人に任せちゃいましょう。

そういう人間関係を作っておくのもブロガーとして必要な要素かもしれません。

例:イラストについてもささっと依頼

 

 

指摘内容から課題が何かを探る

クロネさんの指摘を確認してみましょう。

画像は記事より拝借

サイトマップの画像が「ボタン」だと思ったらボタンではなかったという経験をした方がいるのではないかという点です。

「銀行員時代の話」のカテゴリーはすぐ下にあるのでいいですが、「大事なお金の話」のカテゴリーは下までスクロールしないと見えません

的確なアドバイスです。実は、僕も気づいていたんです。

僕のブログの「勝手にオススメブログ」も同様にスマホから見るとブログの紹介部分までとてもとても遠いのです。

なのでページ内ジャンプを使っています。それでもジャンプ元をどのように作るか現在も決めかねているところでした。

 

課題解決のネック

今回のネックは指摘の通り、クロネさんもボタンと思ったという画像です。実はこれ、1枚ものの画像です。
この部分にリンクを貼っても1つしか貼れません。

 

 

本当はこうしたい

 

クリアすべき課題(あるべき姿を設定)

クロネさんの指摘を受けて、Ryoheiさんのサイトマップのあるべき姿は何かを設定します。

僕が考えたのは以下の通り、

  1. スマホ1画面で4メニューがわかる
  2. スマホ1画面で4メニューに飛べる
  3. スマホで見てもデザイン性を崩さない
  4. この改善作業をRyoheiさんができる

 

です。

4はとても大切で、僕らみたいなエンジニアがやれば簡単にできるわけですが、

そうではない方に対して「助言」の域を超えるとそれはもう「お仕事」になってしまう。

それはもう僕の中ではGIVE」ではなくなってしまうのです

 

手段としてまず考えたのは、先ほどの画像のイメージのまま4分割することでした。

それでページ内ジャンプを仕込めればOKなわけです。

何ケースか考えましたが、Ryoheiさんとお話しして
最終的に表題の通り「スマホのみ表示できるページ内ジャンプメニューを作成する」ことにしました。

先ほどの4分割画像はPCの方だけに表示されるように残すために「PCだけで表示する」という機能も持たせる必要があります。

 

スマホとPCとで表示を切り替えるカスタマイズ

ようやく本題です。

以下の項目を順番通りに進めることでなんとかなりますw

同様の内容をRyoheiさんに作業手順書としてお渡ししたところ難なくクリアされたので他の方も大丈夫だと思います。

 

ステップ1:テストページをつくる

新規記事なら問題ないのですが、今回のように既存の記事に改善の形で導入する場合は

本来であればバックアップが欲しいところですが、新規でコピーページを作成してそちらでテストしてみてください。

そうすることで読者に迷惑をかけずにテストが可能です。

既存のページのテキストタブから中身を全部コピーして、「新規作成」でペーストしてみてください。同じページが作成されます。

通常の投稿記事の場合は公開にせず非公開の状態でテストしましょう。

 

 

ステップ2:function.php にプログラムコードを書き込む

注意!ここハードル高いかもしれませんので注意しながら進まれてください。

STORKテーマ内にある「function.php」というプログラムを直接編集することになるので注意が必要です。

追加するコードは以下の通りです。

 

STORK以外の方は、is_mobileがない場合があるため、wordpress標準であるwp_is_mobileと書き換えてください。

wp_is_mobile関数では、タブレットはスマホ側に加わってしまうのですが、

is_mobileでは区分けは以下の通りとなっています。
 sp:スマホのみ表示
 pc:タブレット+PC で表示

function.phpの編集はエックスサーバー(レンタルサーバー側)から作業を行います。

僕の環境でのファイルの場所

satoshisgarage●●●/●●●/wp-content/themes/jstork_custom/functions.php

エックスサーバーでの編集方法は「【WordPress】エックスサーバーでfunctions.phpなどの「テーマ」を編集する」を参照ください。

function.php の編集をミスるとブログが動かなくなりますので、慎重に行ってください。

本来であればこのようなリスクを伴う作業は行わせたくなかったというのが本音です。

上記のコードをファイルの一番下に追記してください。

例:これはロリポップサーバーの場合の編集機能画面です。

もし、文字コードという項目があったら必ず「UTF-8」としてください。

【更新!!】

親テーマのfunction.phpを編集すると、テーマアップデート時に上書きされてしまい編集内容が消えてしまうことがあります。

その場合は、子テーマのほうに逃がしてあげると気にせず安全に編集ができます。

参考>>>>>「子テーマにfunctions.phpを追加する時の注意点

 

追記が終わって保存できたら
まず、その時点でブログが正常に表示されているかを確認してください。
エラー画面や、「表示されない」などの状況になったらfunction.phpをすぐに元に戻してください。 

事前にバックアップを取っておくのが良いでしょう。

 

ステップ3:ショートコードを登録する

「AddQuicktag」というプラグインを使います。

STORKユーザーであれば導入していると思いますが、
STORK以外でもつかえるプラグインなので導入方法は「便利なプラグイン「AddQuicktag」の使い方を知らないWordPressユーザーは人生損してる」を参照ください。

 

ブログの管理画面、[設定]→[AddQuicktag]を使います。

 

以下の通り、2つ登録してください。

 

 

ステップ4:ショートコードを使ってページの編集する

先ほどショートコードを登録したので、登録されているのを確認してください。

 

 

次に、このような形での間にスマホだけで見せたいコンテンツを囲ってください。

 

さらに、とで既存のヘッダ画像を囲うことでPCでのみ表示する部分の設定が可能です。

 

ここまで作成したら、PCとスマホで確認して見てください。
Google ChromeであればWindowsの方はF12、Macの方はoption + command + i でデベロッパーモードにすることができますので、

全く同じではありませんが、スマホビューにすることができます。

 

ステップ5:ページ内ジャンプを作成する

まず、飛び元の画像を配置します。テキストリンクでも可です。

今回、Ryoheiさんの場合は4つのメニューをスマホ1画面でわかりやすくするために細めの画像にして縦に配列しました。

ちなみに、「Skitch」でさくさくと画像を作成しました。

 

 

画像上にマウスのカーソルをあてると「編集」がでてきますのでクリックします。

 

代替テキストにメニュー文言を記載します。 (別件でクロネさんが別の記事に書いてた改善点です)

リンク先を「カスタムURL」にし、その下の項目を「#sitemap1」とします。

sitemap1という文字列は例なのでなんでもいいのですが便宜上これで話を進めます。

 

 

次に飛び先をつくります。

テキストタブにします。

<a id=”sitemap1″></a>

このようなタグを飛ばしたいところに記載します。

こんな感じ

 

ここまでで作業は完了です。

ページ内ジャンプをテストしよう

きちんと作成できていれば、

Ryoheiさんのサイトマップのように、画像をタップすると

ぴょーんと同ページないの好きなところへ飛べます。

 

 

ながながとお付き合いいただきありがとうございました。

 

その他のWordPressカスタマイズも書いてますのでどうぞお読みください。

また、STORKの有能性は以下の記事に書いています。
記事作成に集中したい方はSTORKにおいでませ!

【WordPress】超有能 有料テーマ「STORK」をオススメする理由

2017.09.06

 

ストークを出しているOPENCAGEさんから新しいテーマがでています。

テーマ「スワロー」あのプロブロガーでmeee代表のやぎぺーさんとコラボした最新テーマです。きになる。。

こちらの記事も読まれています



コメントを残す

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ABOUTこの記事をかいた人

satoshi

Macブロガー 幼少の頃からMac中心の生活。 MacやiPhoneなどAple関連を中心に情報発信します。 最近は仮想通貨にもハマってます。 趣味のZOOMERカスタムも載せていきます!