お問い合わせはコチラから

WordPress popular postを使うとimgタグのsrcsetが消える場合の対策

サイト運営

wordpress popular postは便利なプラグインです。

ショートコードやテンプレートタグで自由にランキングのHTMLを出力できます。

ランキングのサムネイルを見ていたら、imgタグに付けていたレスポンシブ対応のsrcsetなどが綺麗さっぱり消えていることに気が付きました。

原因を色々調べていくと、wordpress popular postはHTMLを出力する時に、wp_ksesを通していて、そこでimgタグからsrcsetなどが消えていました。

wp_kses自体はwordpress popular postとは関係ないのですが、さすがにsrcsetが無いのはまずいので回避方法を見つけて対処しました。

この記事では、wordpress popular postのテンプレートタグやショートコードを使った時にimgタグが期待と違うものになってしまったという人や、wp_ksesを通すとimgタグが変わってしまうという問題の解決方法になります。

WordPress popular postのHTML最終出力部分

ショートコード(テンプレートタグも同じ)の最後でwp_ksesを通っています。

        $this->output->set_data($popular_posts->get_posts());
        $this->output->set_public_options($shortcode_ops);
        $this->output->build_output();

        $shortcode_content .= $this->output->get_output();

        // Sanitize and return shortcode HTML
        $allowed_tags = wp_kses_allowed_html('post');

        if ( isset($allowed_tags['form']) ) {
            unset($allowed_tags['form']);
        }

        if ( ! empty($shortcode_ops['theme']['name']) ) {
            $allowed_tags['style'] = [
                'id' => 1,
                'nonce' => 1,
            ];
        }

        return wp_kses($shortcode_content, $allowed_tags);
    }

}
wordpress-popular-posts/Front.php at 1aafc26b18f09841de9fb6dbdcce80e1aeb94e49 · cabrerahector/wordpress-popular-posts
WordPress Popular Posts - A highly customizable WordPress widget that displays your most popular posts. - wordpress-popular-posts/Front.php at 1aafc26b18f09841d...

wp_ksesはimgタグからsrcsetを削除する

wp_ksesは、使用禁止のタグを決めて、そのタグが含まれていると削除してくれる関数です。

imgタグのsrcsetは使用禁止のタグになっているので削除されてしまいます。

使用禁止のタグは自分で変更できますので、その部分をフックで変更すれば大丈夫です。

function starter_wpkses_post_tags( $tags, $context ) {
    $tags['img']['sizes']  = true;
    $tags['img']['srcset'] = true;
    $tags['source'] = array(
        'srcset' => true,
        'sizes'  => true,
        'type'   => true,
    );
    return $tags;
}
add_filter( 'wp_kses_allowed_html', 'starter_wpkses_post_tags', 10, 2 );
Escape post image attachments added to template
What is the secure way to use wp_get_attachment_image() in a template?

まとめ

WordPress popular postはフックが用意されているので自由にカスタマイズできますが、最終出力段階でwp_ksesを通っているので、意図しないようなHTML変更が入ってしまうようでした。

今回のカスタマイズはwordpress popular post以外にも影響しますが、一般的な内容ですので、特に影響はないはずです。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました