THE THOR フレームをPCで表示させてスマホで表示させないカスタマイズ

THE THOR フレームをPCで表示させてスマホで表示させないカスタマイズ

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。

ここでは、当サイトで施しているカスタマイズのうち、

フレームをPCで表示させてスマホで表示させないカスタマイズ

をする手順について解説しています。

その他のカスタマイズについては、下記ページを参照して下さい。

関連記事

現在、当サイトでは、WordPressテーマに「THE THOR」を使用しています。THE THORは標準で多くの機能を搭載している分、設定項目が多いのが特徴です。設定によって自在にデザインや表[…]

WordPressテーマ「THE THOR」でカスタマイズしている点

フレームとは?

THE THORは記事を表示させる部分(この記事を書いているまさにここの部分:メインカラム)でフレームを表示させるかどうかの設定ができます。

フレームというのは、下図の矢印の部分ですね。

このページもPCでの表示ではボーダーフレームを表示させています。

フレーム

THE THORでのフレームの設定の仕方

THE THORでは、フレームを表示する場合、カスタマイズの

・「共通エリア設定」-「メインカラムエリア設定」または

・「投稿ページ設定」-「スタイル設定」

で、シャドウフレーム又はボーダーフレームを表示させることができます。

フレームを設定すると輪郭がはっきりしてデザイン的にもすっきりします。

THE THORではPCとスマホでフレームの設定が同じ

しかし、フレームを表示させた場合、スマホでどう見えるかというと下図のようになります。

皆さんは、フレームありとなしではどちらがいいと思いますか?

好みの問題になりますが、私は、スマホの場合、フレームがあるとスマホ本体のフレームと被ってどうもしっくりきません。

フレームがあるとフレームの外側の余白が無駄な余白にも感じてしまいますし、フレームなしではページを広々と見せることができます。

かといって、THE THORの設定でフレーム無しにすると、逆にPCでの表示の時にフレームが無くなり、ボヤケてしまいます。

多くのWordPressテーマでは、PCで表示させた時は、フレームがあってもスマホで見るとフレームは表示されませんが、THE THORの場合はスマホでも設定を忠実に守っています。

そこで、当サイトでは、PCではフレームを表示させて、スマホでは表示させないようにカスタマイズしています。

PCではフレームを表示させて、スマホでは表示させないようにする手順

投稿記事のフレームを表示させるコードは、single.phpにコーディングされています。

ちなみに、

・TOPページは「front-page.php」

・カテゴリーページは、「category.php」

・タグページは、「tag.php」

にコーディングされています。

端末が何かを取得して端末毎にフレームありなしを設定

投稿記事でPCではフレームを表示させて、スマホでは表示させないようにするには、

single.phpの

<main class=”l-main<?php echo $frame.$layout; ?>”>

の箇所を以下のコードに書き換えます。

<?php
function ch_device(){$ua = $_SERVER['HTTP_USER_AGENT'];if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
// スマホからのアクセス
$check_device = "mobile";
} elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) {
// タブレットからのアクセス
$check_device = "tablet";
} elseif ((strpos($ua, 'DoCoMo') !== false) || (strpos($ua, 'KDDI') !== false) || (strpos($ua, 'SoftBank') !== false) || (strpos($ua, 'Vodafone') !== false) || (strpos($ua, 'J-PHONE') !== false)) {
// 携帯からのアクセス
$check_device = "old-phone";
} else {
// PCからのアクセス
$check_device = "pc";
}return $check_device;
}
?><?php
switch( ch_device() ){
case "old-phone":
echo '<main class="l-main">';
break;
case "mobile":
echo '<main class="l-main">';
break;
case "tablet":
echo '<main class="l-main u-border">';
break;
case "pc":
echo '<main class="l-main u-border">';
break;
}
?>

上段で端末が何か(スマホかタブレットか携帯かPCか)を判定し、

下段でそれぞれの端末の時にフレームを表示するか否か、表示する場合は、

・シャドウフレーム(u-shadow)にするか、

・ボーダ-フレーム(u-border)にするか

を設定します。

上記のコードでは、スマホ(モバイル)や携帯では、フレームを表示せず、タブレット端末とパソコンでは、ボーダ-フレーム(u-border)を表示するようにコーディングしています。

同じようにTOPページやカテゴリー・アーカイブのページ、その他でもコーディングを修正することでスマホとPCのフレーム表示を変えることができます。

THE THORの設定では、「無し(default)」を設定

私は、投稿記事以外は、PCでもスマホでもフレームページを表示させたくないので、

・「共通エリア設定」-「メインカラムエリア設定」でフレーム「無し(default)」を設定し、

single.php(記事の画面)だけに上記コードを加えています。

つまり、PCとタブレット端末の場合だけ記事のページに強制的にフレームを表示させています。

逆にフレームありを標準とし、特定のページだけフレームを外したい場合は、

・「共通エリア設定」-「メインカラムエリア設定」で「フレーム」を設定し、

特定のページだけに上記のよなコードを加えることで対応します。

以上、神経質な私ならではのカスタマイズでした!
関連記事

WordPressの管理画面を開こうとしたところ、・画面が真っ白になったり・「予期しない出力により Cookies がブロックされました」というエラーが表示されたりして管理画面にログインする[…]

WordPressのログイン画面で「予期しない出力によりCookiesがブロックされました」「画面が真っ白になった」の対処方法