ワードプレスをスマホでPC表示する3つの手順

カテゴリー: 記事 更新日: 2018年6月24日

 

ワードプレスをスマホでPC表示したいですよね。

でも、iPhoneで「デスクトップ表示」を押してもなぜか、デスクトップ表示できないことがあります。

そう私のテーマ「MAG(TCD036)」もそうなんですよ。

なのでこれから設定していきます。

WordPressテーマ「MAG(TCD036)」

1.テーマを複製する

こういう感じ!

そしたらテーマをインストールします!

次にテーマの編集から、新しくインストールした方のテーマを選択!

ちょこっとテーマ名を先ほどの複製テーマ名に変更します。

下準備は完了!

2.「Multi Device Switcher」をインストール

インストールしたら有効化まで実施しましょう。

設定をしていきましょう!

たったこれだけ!

さっき複製したものを設定すればいいです。

3.複製したテーマをモバイル表示できなくする!

ここからはみなさんに当てはまらないかもしれません。

テーマごとに違うので、もし「MAG(TCD036)」を使用していない場合は、「レスポンシブ 解除 (テーマ名)」で検索してみてください。

参考までに私の場合は、下記操作でできます!

まとめ

さて、ここまでの操作でスマートフォンでサイトを見た際、スマホ表示・PC表示の切り替えができるようになったかと思います。

でも、なんかダサい・・

ボタンの色を黒くする方法を伝授します。

1.ボタンの色を黒にする

/wp-content/plugins/multi-device-switcher/pc-switcher.css

の中身を下記コードにまるまる置き換えてください。

.pc-switcher {
  clear: both;
  text-align: center;
  margin: 1.4em auto;
}
.pc-switcher a,
.pc-switcher span {
  padding: 0.4em 8%;
  text-align: center;
/*  border: 1px solid #0059A8; */
  border: 1px solid #000000; 
  border-left: none;
  color: #fff !important;
  font-weight: bold;
  text-decoration: none;
}
/*
.pc-switcher a {
  background-color: #0074DA;
  background-image: -moz-linear-gradient(#0074DA, #004A8D);
  background-image: -o-linear-gradient(#0074DA, #004A8D);
  background-image: -ms-linear-gradient(#0074DA, #004A8D);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0074DA), to(#004A8D));
  background-image: -webkit-linear-gradient(#0074DA, #004A8D);
  background-image: linear-gradient(#0074DA, #004A8D);
}
.pc-switcher a:hover {
  background-color: #0059A8;
  background-image: -moz-linear-gradient(#0059A8, #004A8D);
  background-image: -o-linear-gradient(#0059A8, #004A8D);
  background-image: -ms-linear-gradient(#0059A8, #004A8D);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0059A8), to(#004A8D));
  background-image: -webkit-linear-gradient(#0059A8, #004A8D);
  background-image: linear-gradient(#0059A8, #004A8D);
}
.pc-switcher span.active {
  background-color: #00305C;
}
*/
.pc-switcher a {
  background-color: #8b8e91;
  background-image: -moz-linear-gradient(#8b8e91, #000000);
  background-image: -o-linear-gradient(#8b8e91, #000000);
  background-image: -ms-linear-gradient(#8b8e91, #000000);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8b8e91), to(#000000));
  background-image: -webkit-linear-gradient(#8b8e91, #000000);
  background-image: linear-gradient(#8b8e91, #000000);
}
.pc-switcher a:hover {
  background-color: #000000;
  background-image: -moz-linear-gradient(#000000, #595959);
  background-image: -o-linear-gradient(#000000, #595959);
  background-image: -ms-linear-gradient(#000000, #595959);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#595959));
  background-image: -webkit-linear-gradient(#000000, #595959);
  background-image: linear-gradient(#000000, #595959);
}
.pc-switcher span.active {
  background-color: #001426;
}
.pc-switcher a:first-child,
.pc-switcher span:first-child {
/*  border-left: 1px solid #0074DA; */
  border-left: 1px solid #000000; 
  -webkit-border-radius: 2.4em 0 0 2.4em;
  -moz-border-radius: 2.4em 0 0 2.4em;
  border-radius: 2.4em 0 0 2.4em;
}
.pc-switcher a:last-child,
.pc-switcher span:last-child {
  -webkit-border-radius: 0 2.4em 2.4em 0;
  -moz-border-radius: 0 2.4em 2.4em 0;
  border-radius: 0 2.4em 2.4em 0;
}

完成

 

2.ボタンが逆!!!

PCの時にPCボタンが押せて、スマホの時にモバイルはおかしい!!

でも直し方がわからない・・

今後わかった時点で更新します!

如何だったでしょう。お役立ちになれば幸いです。

追記:わかりました!

この部分をちょこちょこっていじると直ります!

/wp-content/plugins/multi-device-switcher/multi-device-switcher.php

<div class="pc-switcher"><a href="<?php echo esc_url( $uri ); ?>"><?php esc_html_e( 'PC', $this->textdomain ); ?></a><span class="active"><?php esc_html_e( 'Mobile', $this->textdomain ); ?></span></div>
    <?php
      }
      else {
        $uri .= add_query_arg( 'pc-switcher', 1 );
    ?>
<div class="pc-switcher"><span class="active"><?php esc_html_e( 'PC', $this->textdomain ); ?></span><a href="<?php echo esc_url( $uri ); ?>"><?php esc_html_e( 'Mobile', $this->textdomain ); ?></a></div>

上記が直した内容になってます。

42 total views, 1 views today


 
こちらの関連記事もおすすめですよ!
Copyright(c) 2010 xxx All Rights Reserved. Designed by o2BusinessTheme