スマフォ専用ページの内容が、PCページの内容を網羅できていない場合は「PCページを表示」できるようにしておきたいですね。
ktai styleには切り替えるテンプレートタグも用意されているのですが、設置に四苦八苦したのでメモしておきます。
設置の手順
（１）フィルターするのに必要なタグを＜/body＞タグの前に書く
フィルターを利用するため、このコードが必須です。
#wrapperで囲んでいる場合が多いと思いますが、#wrapperの終了タグ＜/div＞の直前でも大丈夫でした。多分このコードの部分に「携帯表示にする」を表示しています。
[php]
<?php wp_footer(); ?>
[/php]
（２）スマフォ用テーマに「PCページを表示する」リンクを貼る
見栄えは＜li class=”go-pc title”＞のようにclass指定できるので、スマフォ用テーマのstyle.cssで制御できます。
[php]
<?php ks_switch_pc_view(‘<li class="go-pc title">’,'</li>’); ?>
[/php]
ここまで作業を終えて、実際にスマフォページから、「PCページを表示する」リンクで切り替えてみると、小さく最下部に「携帯表示にする」と表示されています。
この状態では見つけにくいので、大きさや色、表示場所、リンクの名前を下記コードでフィルターできました。
以前に、Design Spiceさんで、コメント欄へ質問させていただいたのですが、大変丁寧に教えていただきました。ありがとうございました。
（３）PCページに表示される（スマフォ表示にする）リンク名をフィルターする
PCテーマのfunctions.phpに記述
[php]
/**/
function switch_mobile_view_txt($menu) {
$html = str_replace(‘携帯表示’,’スマフォ表示’, $menu);
return $html;
}
add_filter(‘ktai_switch_mobile_view’, ‘switch_mobile_view_txt’);
[/php]
（４）PCページに表示される（スマフォ表示にする）リンクのCSSをフィルターする
PCテーマのfunctions.phpに記述
[php]
function ktai_switch_mobile_view_css( $style ) {
return $style . "";
}
add_filter( ‘wp_footer’, ‘ktai_switch_mobile_view_css’ );
[/php]
（５）PCテーマのstyle.cssで「スマフォページに切り替える」リンクの見栄えのCSSを書く
下記はあくまで例です。#wrapperに（position:relative;）を指定しています。表示を確認しながら好きなように指定
[css]
#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;
}
[/css]
これで「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 のスラッシュ以降) です。