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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

2790閲覧

Wordpressで、divタグのstyle要素内でショートコードが使えない

urdapple

総合スコア83

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2018/09/14 05:31

編集2018/09/19 05:22

タイトルの通りなのですが、Wordpressの記事を、「ビジュアル」ではなく「テキスト」編集中、divタグ内のstyle要素でショートコードが展開しません。

functions.php内

php

1//親テーマ 2add_shortcode('turl', 'shortcode_turl'); 3function shortcode_turl() 4{ 5 return get_template_directory_uri(); 6}

とした上で、

html

1<div style="background-image: url('[turl]/img/xxx.jpg');">テスト</div>

と入力すると、ソースコードにそのまま「[turl]」の文字が出力されてしまいます。


ありえないソースコードですが、以下の場合は普通に展開されます。

html

1<div style="color: [turl];">テスト</div>

 

むき身で書いたこの場合は展開されません。

html

1<div style="[turl];">テスト</div>

以前、Wordpressのアップデートでクロスサイトスクリプティングの脆弱性を防ぐために、あちこちでショートコードが使えなくなったので、そのエスケープ方法でfunctions.phpに

php

1add_filter('wp_kses_allowed_html', 'my_wp_kses_allowed_html', 10, 2); 2function my_wp_kses_allowed_html( $tags, $context ) 3{ 4 $tags["div"]["style"] = true; 5 return $tags; 6}

を加えましたが、style内では展開できませんでした。
おそらくはそのstyleの中でも要素ごとにチェックが効いているのだと思いますが、どなたかそのチェックをエスケープする方法をご存知でしたら教えてください。

2018/09/19 追記
現状ではどうにもならなそうなので、ユーザ側でdivのバックグラウンド画像をテンプレートURLから指定したいという特殊な場合は、素直にテンプレートまでのURLを打ち込んでもらうことにしました。
ただ、エスケープ方法があるなら未だ教えていただきたいので、質問の方は締め切らず置いておこうと思います。
よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

検証したら確かにショートコードが動かなかったですね。
エスケープ方法はわかりませんでしたが、下記の記述でしたら同様の結果が得られるかなと思います。
functions.php

php

1function shortcode_turl( $atts, $content = null ) { 2 extract( shortcode_atts( array( 3 'img_url' => null, 4 ), $atts ) ); 5 $temp_url = get_template_directory_uri(); 6 return "<div style=\"background-image: url('".$temp_url.$img_url."');\">" . $content . "</div>"; 7} 8add_shortcode('turl', 'shortcode_turl'); 9

記事内

[turl img_url="/img/xxx.jpg"]テスト[/turl]

「/img/xxx.jpg」の箇所以外をショートコードで書き出してしまうという方法です。

img_url="/img/xxx.jpg"

img以下の画像の指定はユーザー側で記述可能になっています。

投稿2018/09/19 06:27

su3

総合スコア38

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

urdapple

2019/01/18 00:14

あーなるほど! 画像タグそのものをテンプレートにしてしまうって方法ですね。 次回製作時には応用させてもらおうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問