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

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

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

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

PHP

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

942閲覧

WordPressのrel=”noopener noreferrer”で文字化けしてしまう

higvil

総合スコア12

WordPress

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

PHP

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2019/04/20 12:35

#概要
WordPressにて、rel=”noopener noreferrer”を含んだaタグを含む記事を投稿すると、記事本文が文字化けします。

こちらのブログで書いてある症状と同じものです。
https://99-box.net/blog-info/wp-noreferrer-mojibake

rel=”noopener noreferrer”を含んだaタグを記述すると、記事本文まるまるが文字化けするのが特徴です。サイドバーなど、記事本文以外の箇所には影響ありません。

#具体例
WordPressのエディタ(TinyMCE)に記述した文字列はこんな感じなのですが、

HTML

1<p>本文がこうなります</p> 2<a href="https://www.amazon.co.jp/exec/obidos/asin/4822289605/" target="_blank" rel="nofollow noopener noreferrer">ファクトフルネス</a>

記事を公開するとこのようになります↓
(ちなみにエディタ上では文字化けしておらず、公開記事を確認すると文字化けしています)

HTML

1<p>本文がこうなります</p> 2<p><a href="https://www.amazon.co.jp/exec/obidos/asin/4822289605/" target="_blank" rel="nofollow noopener" class="external">ファクトフルネス</a></p>

イメージ説明

#推測
WordPress内部のrel=”noopener noreferrer”を付加する箇所(wp_targeted_link_relなど)のコードに問題があるような気がしたんですが、原因はわかりませんでした。。

今回、「とある記事が文字化けしているよ」と読者から指摘があったので気づくことができましたが、他にも文字化けしている記事があるかどうか不安でなりません。
どなたかお知恵をお貸しください。

#環境
WordPress 5.1.1
サーバ:KUSANAGI on ConoHa 8.4.2-2
テーマ:Luxeritas 3.5.9

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

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

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

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

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

marlboro_tata

2019/04/21 01:20

twentynineteenテーマ+クラシックエディタ+TinyMCE Advancedプラグイン利用の環境でテストしましたが、再現できませんでした。 可能なら、テーマを変更してみたり、プラグインを一旦全て切ってみるなどしてみると原因についてもう少し詳しい状況がわかる気がします。また、WPのデバッグモードでそれらしいエラーがないか確認されてみるのはいかがでしょうか。 noreferrerが入ってる場合に記事が文字化けしているなら、管理画面から記事一覧を開き、検索に「noreferrer」を打ち込んで検索するとヒットするはずなので、「noreferrer」を含む記事が他にあるかを調べらると思います。
guest

回答1

0

自己解決

申し訳ありません、自己解決いたしました。
原因はAmazon Associates Link Builderというプラグインによるものでした。

皆様、誠にありがとうございました。

#原因
Amazon Associates Link Builderを有効化し、設定画面の
「Remove rel="noreferrer" for Amazon Affiliate Links from all posts」
にチェックが入った状態で、rel="noreferrer"を含むAmazonへのリンクがあると、当該プラグインがrel="noreferrer"を除去しようとするが、処理にバグがあるために記事全体が文字化けする。

#解決に至る経緯
記事編集画面では文字化けしていないのに、閲覧時に文字化けしていることを疑問視
"noreferrer"が消失していることも疑問視

データベースを確認したところ、データベース内の記事の記述は正常であることを確認

the_content()内のフィルターが原因かと思い、the_content()のフィルターを1つづつremove_filter()して確認

Amazon Associates Link Builderが原因であることを特定

投稿2019/04/22 07:52

higvil

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問