wordpress ショートコードについて
解決済
回答 3
投稿
- 評価
- クリップ 0
- VIEW 1,040
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
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でウィンドウの横幅を見てクラスを付け替えてやると良いと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+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' );投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
こんなプラグインありますけどどうですか？ユーザーエージェントに応じてコンテンツを切り替えられるものです。「UserAgent Content Switcher」
https://ja.wordpress.org/plugins/useragent-content-switcher/
多分やりたいことはできると思うのですが・・・。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.06%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/02/26 17:04
メディアクエリを使用する方法は考えたのですが、
個別ページ/投稿ページの途中で挿入する事は出来ませんよね？
「Custom CSS and JS」プラグインは使用しておりますが、
これでばページ全体のcss設定になってしまい、
希望はhtmlの途中でPCとスマホ用のclassを出し分ける事です。
メディアクエリを途中に差し込むことも可能なのでしょうか？
2018/02/26 17:08
<style></style>で囲む事でHTML中に含む事もできます。
2018/02/26 17:16
cssに定義する方で管理したいと思います。