質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 507

uzr1709

score 18

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の分岐が出来るのでしたらショートコードでなくとも構いません。
どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

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でウィンドウの横幅を見てクラスを付け替えてやると良いと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/26 17:04

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

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

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

    キャンセル

  • 2018/02/26 17:08

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

    キャンセル

  • 2018/02/26 17:16

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

    キャンセル

+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' );

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/26 17:15

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

    キャンセル

  • 2018/02/26 17:47

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

    $content = str_replace( '<div class="aaa">', '<div class="bbb">', $content );

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

    キャンセル

  • 2018/02/27 10:33

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/27 10:35

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる