[wordpress&ktai style] PCページ ⇔ スマフォページ 切り替え

公開日:2013年9月26日

スマフォ専用ページの内容が、PCページの内容を網羅できていない場合は「PCページを表示」できるようにしておきたいですね。
ktai styleには切り替えるテンプレートタグも用意されているのですが、設置に四苦八苦したのでメモしておきます。

設置の手順

(1)フィルターするのに必要なタグを</body>タグの前に書く

フィルターを利用するため、このコードが必須です。
#wrapperで囲んでいる場合が多いと思いますが、#wrapperの終了タグ</div>の直前でも大丈夫でした。多分このコードの部分に「携帯表示にする」を表示しています。

<?php wp_footer(); ?>
(2)スマフォ用テーマに「PCページを表示する」リンクを貼る

見栄えは<li class=”go-pc title”>のようにclass指定できるので、スマフォ用テーマのstyle.cssで制御できます。

<?php ks_switch_pc_view('<li class="go-pc title">','</li>'); ?>

 

ここまで作業を終えて、実際にスマフォページから、「PCページを表示する」リンクで切り替えてみると、小さく最下部に「携帯表示にする」と表示されています。
この状態では見つけにくいので、大きさや色、表示場所、リンクの名前を下記コードでフィルターできました。

以前に、Design Spiceさんで、コメント欄へ質問させていただいたのですが、大変丁寧に教えていただきました。ありがとうございました。

(3)PCページに表示される(スマフォ表示にする)リンク名をフィルターする

PCテーマのfunctions.phpに記述

/**/
function switch_mobile_view_txt($menu) {
$html = str_replace('携帯表示','スマフォ表示', $menu);
return $html;
}
add_filter(‘ktai_switch_mobile_view’, ‘switch_mobile_view_txt’);
(4)PCページに表示される(スマフォ表示にする)リンクのCSSをフィルターする

PCテーマのfunctions.phpに記述

function ktai_switch_mobile_view_css( $style ) {
	return $style . "";
}
add_filter( 'wp_footer', 'ktai_switch_mobile_view_css' );
(5)PCテーマのstyle.cssで「スマフォページに切り替える」リンクの見栄えのCSSを書く

下記はあくまで例です。#wrapperに(position:relative;)を指定しています。表示を確認しながら好きなように指定

#switch-mobile {
position:absolute;
top:6px;
right:10px;
margin:0px auto;
font-size:14px;
line-height:100%;
padding:5px 10px;
font-weight: normal;	
color:#1c0873;/* 文字色を変更 */	
border: 1px solid #b7a6f4;/* ボーダー色を変更 */
background-color: #6a67f5!important;/* 背景色を変更 */
border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
}
#switch-mobile a {
	display:block;
}

 

これで「PC⇔スマフォの切り替え」が完成です!
(4)のコードに直接cssを書くこともできるようです。

このブログにも設定していますので、よければご覧になってください。サイドバーに携帯QRコードを用意しています。スマフォページ最下段の「PC表示にする」をクリックでPCページへ移動します。PCページのメニューの部分に、赤の白抜きで「スマフォ表示にする」と表示しています。

オフィシャルサイトから転記
ks_switch_pc_view($before, $after, $color)
スマートフォン等「その他」端末の場合、PC表示に切り替えるかリンクを出力します。
$before: リンクの前に置く文字列
$after: リンクの後に置く文字列
$color: リンク色指定 (HTML 16 色の名前もしくは #RRGGBB の16進)
$echo: true の場合、画面に出力します (デフォルト)。false の場合、関数の返り値とします。
※引数は、”color=white” のようなクエリー文字列、array(’before’ => ‘|’, ‘color’ => ‘white’) のような配列で与えることも可能です。
ktai_switch_pc_view
引数: $menu, $uri, $before, $after
「PC 表示にする」の切り替えメニューをフィルターします。$menu は切り替えメニュー HTML、$uri は現在ページの URI、$before, $after は切り替えメニューの前後につく XHTML (switch_pc_view() の引数)です。
ktai_switch_mobile_view_css
引数: $style
PC表示に変更後に出る「携帯表示にする」の切り替えメニュー部分に適用されるスタイルシートをフィルターします。デフォルトのスタイルでは、PC表示が崩れてしまうときにフィルターを利用して見栄えを調整してください。
ktai_switch_mobile_view
引数: $menu, $path
PC 表示に変更後に出る「携帯表示にする」の切り替えメニューをフィルターします。$menu は切り替えメニュー HTML、$path は現在 URI のパス部分 (URI のスラッシュ以降) です。

Ktai Style サイト設定とテンプレートの改造より