wordpress ショートコードについて

Question

wordpressにてレスポンシブサイトを構築中です。
個別ページでPCとスマホでcssの設定を出し分けたい箇所が複数あり
PC表示用のclassとスマホ表示用のclassを作り、
classの出し分けをショートコードで行いたいと思っています。

is_mobileを使い、functions.phpにショートコードを登録しました。
PC表示時は[PCview]、スマホ表示時は[SPview]で登録しています。

■個別投稿ページ
[PCview]

<div class="aaa"> test </div> </PCview>

[SPview]

<div class="bbb"> test </div> </SPview>

■style.css
.aaa{background-color:red;}
.bbb{background-color:blue;}

上記は問題なく動くのですが（PC、スマホにあわせ正しい方が表示される）
htmlの中にショートコードを挿入すると
公開したページの途中でショートコードが表示されてしまいます。
動作はしています。

※分岐が正常に動いているか確認するために分岐の後ろに数字を入れています。

■個別投稿ページ

<div class="wrap"> sample [PCview] <div class="aaa">1 [/PCview] [SPview] <div class="bbb">2 [/SPview] test </div> </div>

■style.css
.aaa{background-color:red;}
.bbb{background-color:blue;}

■結果
sample[SPview]2[/SPview]test

上記のように作成したページにショートコードが表示されてしまいます。
個別ページのhtml途中でショートコードを挿入しても
[SPview]等が表示されなくなる方法はないでしょうか？

classの分岐が出来るのでしたらショートコードでなくとも構いません。
どうぞよろしくお願いいたします。

Answer 1

CSSをPCとスマホで切り分けるだけなら**メディアクエリ**を使った方が楽です。

例：

@media screen and (min-width: 641px) {
  // ここにPC用のCSS
  .aaa {
    background-color: red;
  }
}
@media screen and (max-width: 640px) {
  // ここにスマホ用のCSS
  .aaa {
    background-color: blue;
  }
}

クラス名を絶対に変えなければならない、という場合にはjQueryでウィンドウの横幅を見てクラスを付け替えてやると良いと思います。

Comments

[uzr1709]

ご回答ありがとうございます。
メディアクエリを使用する方法は考えたのですが、
個別ページ/投稿ページの途中で挿入する事は出来ませんよね？

「Custom CSS and JS」プラグインは使用しておりますが、
これでばページ全体のcss設定になってしまい、
希望はhtmlの途中でPCとスマホ用のclassを出し分ける事です。

メディアクエリを途中に差し込むことも可能なのでしょうか？

[退会済みユーザー]

CSSファイルに予め定義しておくのが推奨されますが
<style></style>で囲む事でHTML中に含む事もできます。

[uzr1709]

ありがとうございます。
cssに定義する方で管理したいと思います。

Answer 2

ショートコードとか使わずにis_mobileで判定された端末のみclassを書き換えた方が簡単ではないですか？

function my_content( $content ) {
	if( is_mobile() ) {
		$content = str_replace( '<div class="aaa">', '<div class="bbb">', $content );
	}
return $content;
}
add_action( 'the_content', 'my_content' );

Comments

[uzr1709]

回答有難う御座います。
PHP初心者のため、サンプルが多くあったショートコードを使用していました。

上記のコードは個別ページに挿入して動作するものなのでしょうか？
個別ページにPHPの挿入で検索するとどれもショートコードを使うやり方ばかり出てきてしまい、
せっかく教えて頂いたコードをどのように生かしたら良いかまだ試せておりません。

[退会済みユーザー]

テーマのfunctions.phpに書いてください。

[uzr1709]

ありがとうございます。
検討したのですが、スマホとPCとで書き換えたい箇所（class）が多く、教えていただいたやり方ですと
classの分、「$content = str_replace( '<div class="aaa">', '<div class="bbb">', $content );
}」を増やさないといけなくなりますよね？

[退会済みユーザー]

なら完全な置換ではなく文字を追加するようにしたらどうです？
モバイル端末の時は-mobileを追加する

$content = str_replace( '<div class="aaa">', '<div class="bbb">', $content );
↓
$content = preg_replace( '/<div class="(.*?)">/', '<div class="$1-mobile">', $content );

[uzr1709]

こういったやり方もあるのですね。
置換ですと単語の中の文字列も拾ってしまいそうで不安だったのですが
追加でしたら問題なさそうです。
ただ、今回はメディアクエリで対応してしまいましたので、次回ためさせて頂こうと思います。
ありがとうございました。

Answer 3

こんなプラグインありますけどどうですか？ユーザーエージェントに応じてコンテンツを切り替えられるものです。「UserAgent Content Switcher」

https://ja.wordpress.org/plugins/useragent-content-switcher/

多分やりたいことはできると思うのですが・・・。

Comments

[uzr1709]

ありがとうございます。
可能な限りプラグインなしでやりたいので、メディアクエリか、文字列の追加を試してみたいと思います。