サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-11-10 10:39
TikTokの動画を埋め込んだページのAMPページではTikTok動画が正しく出てこないようです。tmp/amp-header.phpの40行目付近にコード1を追加し、lib/amp.phpのconvert_content_for_amp関数の410行目付近にコード2を挿入すると動くようになると思います。
また、スタイルシートからamp-tiktokやamp-tiktokにつくクラスへの指示を誤って消してしまわないように、amp.phpのis_comma_splited_selector_exists_in_body_tag関数のコード3をコード4に置き換えるとよいのではないかと思います。
現在、子テーマのtmp/amp-header.phpで親テーマのものを置き換え、functions.phpで'convert_content_for_amp'にフィルタを追加し、is_comma_splited_selector_exists_in_body_tagを定義することで対処をしています。
コードはこちらです。よろしくお願いいたします。
This topic was modified 2年前 by tanakan
Akira reacted
Topic starter
2021-11-10 11:11
すみません、i-amphtml-で始まるスタイルは利用してはいけなかったようです（AMPテストでエラーが出ました）。コード4は3行目までのみとするのが適切かもしれません。
Topic starter
2021-11-10 11:56
すみません、さらに追加です。
Pinterestにも対応するため、tmp/amp-header.phpの40行目付近にコード5を追加し、lib/amp.phpのconvert_content_for_amp関数の410行目付近にコード6を追加していただきたいです。
2021-11-10 14:51
実際に試してみての補足情報や気になった点を書きます。
① TikTok
TikTok 公式の埋め込みコードを使った場合でも、WordPress の TikTok ブロックを使った場合でも、tanakan さんのコードのコピペで何も問題ありませんでした。
ただ、コード 2 の最後の preg_replace は、str_replace でいいかもと思いました（その上の $pattern は正規表現でなくともよい）。
以下の動画で試しました。
amp-tiktok のドキュメント
https://amp.dev/documentation/components/amp-tiktok/
② is_comma_splited_selector_exists_in_body_tag() の変更
変更は不要に感じました。
例えば、このような CSS を書いても CSS は消えません。
amp-tiktok {
margin-left: 100px;
}
また、amp-tiktok タグに class を付ける置換処理はしていらっしゃいません。
どのようなケースで CSS が消えるのか分かりませんでした。
embedPin とあるので、以下のものでしょうか？
https://developers.pinterest.com/tools/widget-builder/?type=pin
amp-pinterest のドキュメント
This post was modified 2年前 by Akira
Topic starter
2021-11-10 16:01
ありがとうございます。
ただ、コード 2 の最後の preg_replace は、str_replace でいいかもと思いました（その上の $pattern は正規表現でなくともよい）。
おっしゃるとおりでした。
例えば、このような CSS を書いても CSS は消えません。
amp-tiktok {
margin-left: 100px;
}
こちらではamp.cssに同じものを入れてみましたが、is_comma_splited_selector_exists_in_body_tag()を変更しないと消えてしまいます。どういう条件の違いがあるのかわかりません。
ただし、is_comma_splited_selector_exists_in_body_tag()を変更してamp-tiktokをCSSに入れても結局効かない（要素のstyle属性で上書きされてしまう）ので、この変更は不要だと判明しました。
embedPin とあるので、以下のものでしょうか？
はい、そうです。embedショートコードで https://www.pinterest.jp/pin/xxxxxxxx/ をURLを囲むとこれが出てきます。
2021-11-10 19:05
こちらではamp.cssに同じものを入れてみましたが、is_comma_splited_selector_exists_in_body_tag()を変更しないと消えてしまいます。どういう条件の違いがあるのかわかりません。
大変申し訳ありません。tanakan さんのおっしゃるとおり、CSS が消えました。消えなかったのは、私が親テーマを編集していたためでした。
コード 4 の以下の部分にしたところ、CSS が消えないようになりました。
if (strpos($comma_splited_selector, 'amp-') !== false) {
return true;
}
ちなみに、私が親テーマでやっていたカスタマイズでも CSS が消えないため、一応書いておきます。
lib / amp.php の 1064 行目の部分を…
$body_tag = convert_content_for_amp($body_tag);
1045 行目の下に移動します。
$body_tag = $m[0]; $body_tag = convert_content_for_amp($body_tag);
これで 1055 行目が実行される時に AMP 用に変換した HTML でセレクターを調べるので、CSS が消えなくなります。また、tanakan さんがご指摘の is_comma_splited_selector_exists_in_body_tag() 内の以下の部分（ notepad のコード 3）が不要になります。
if (strpos($comma_splited_selector, 'amp-img') !== false) {
return true;
}
This post was modified 2年前 by Akira
Topic starter
2021-11-10 22:27
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。