サイト全体に「モダンブラック 」スキン適用中。

Lazy Load機能の除外処理について | 要望 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Lazy Load機能の除外処理につい...
 
Share:

[解決済] Lazy Load機能の除外処理について  

  RSS

bbn
 bbn
(@bbn)
Active Member
参加: 2週間 前
投稿: 9
2019年3月12日 21:17  

わいひらさん
こんにちは。最高のテーマと最高のメンテナンスをいつもありがとうございます。

現在運用中のメディアサイト(Cocoonテーマ)でSmartNews(スマートニュース)アプリで配信していただけるようSmartFormat( https://publishers.smartnews.com/ja/smartformat/specification/ )の登録を行いました。

そこでLazy Load機能の「imgタグをLazy Load用の画像タグに変換」との競合により画像が表示されないという問題がありましたのでご要望があります。

おそらくフィードページにLazy Load機能は不要かと思いますので、imgタグ置換の除外処理を入れていただけると幸いです。

現在親テーマの「/cocoon-master/lib/page-speed-up/minify-html.php」に直接以下の変更を加えて対処しております。

if (is_amp() || is_analytics_access_php_page()) {
  return $the_content;
}

if (is_amp() || is_analytics_access_php_page() || is_feed()) {
  return $the_content;
}

全てのブログ運営者にとって必要なものではないかもしれませんが、ご検討のほどよろしくお願いいたします。

■関連トピックス
https://wp-cocoon.com/community/cocoon-theme/lazy-load%E3%81%AE%E9%99%A4%E5%A4%96%E8%A8%AD%E5%AE%9A%E3%81%AF%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B/

またこちらはどうしてもという訳ではなく本当にできればという程度の要望ですが、
Cocoonテーマ自体に「/?feed=smartnews」のようなSmartFormatに対応したフィードページを実装していただけると嬉しいです。

あくまで世の中の1サービスで仕様変更などによるメンテナンスも大変かと思いますが、
もし余力がありましたら、多くのブログ運営者にとってもありがたいかと思いますので、こちらもご検討いただけると幸いです。

This topic was modified 2週間 前 by bbn

わいひら 件のいいね!
bbn
 bbn
(@bbn)
Active Member
参加: 2週間 前
投稿: 9
2019年3月13日 19:30  

度々申し訳ございません。
本日で「YouTube埋め込みの高速化機能」との競合もありましたので、追加でご報告いたします。

現在親テーマの「/cocoon-master/lib/youtube.php」に直接以下の変更を加えて対処しております。

if (is_amp()) {
  return $cache;
}

if (is_amp() || is_feed()) {
  return $cache;
}

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年3月13日 20:01  

Lazy LoadとYouTubeに関しては、フィードを除外しました。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。


bbn 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年3月13日 20:14  

SmartNewsに関しは、実装が結構大変(ロゴ画像設定項目を作ったりする必要がある)利用範囲が狭いので、今回は実装は見送ります。
http://blog.yuhiisk.com/archive/2017/02/02/wordpress-rss-to-smartnews.html

機能追加をする基準として、僕は以下の基準を満たすものを考えています。

  1. 開発コストがかからないか(実装が大変ではないか)
  2. 開発コストに見合う多くの人が利用するような機能か

今回のSmartNewsの実装は、そこまで多くの人が利用するような機能ではないと考えています。
※もちろん今後の要望等を鑑みて考えが変わることもあると思います。


bbn
 bbn
(@bbn)
Active Member
参加: 2週間 前
投稿: 9
2019年3月13日 21:03  

早速のご対応本当にありがとうございます。

Cocoonテーマアップデートの度に変更を加える必要がありそうでしたので、大変助かりました!


bbn
 bbn
(@bbn)
Active Member
参加: 2週間 前
投稿: 9
2019年3月13日 21:12  

実装見送りについて承知いたしました。

ロゴ画像設定の追加が必要などの配慮がすっかり抜け落ちていました。。

わいひらさんの「機能追加の基準」もしっかり念頭に置いておきます。

今後ともよろしくお願いいたします。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2073
2019年3月14日 06:29  

Cocoonテーマアップデートの度に変更を加える必要がありそうでした

知ってたら申し訳ないですが、/cocoon-master/lib/youtube.phpの該当箇所を変更したい場合など。

その関数を子テーマfunctions.phpに貼り付け、変更したい箇所を書き換えたら、親テーマアップデートのたびに書き換えする必要はないですよ。


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年3月14日 19:48  

SmartNewsフィードに関しては「あえてSmartNewsのために設定項目を設けるのは…」ということで引っかかっていました(設定が複雑になるので)。

ただ、ロゴであれば、サイトで使っているロゴを利用(無い場合はAMPロゴを利用)すればよいではないかと思い、全てCocoon設定内の設定値を用いて実装してみました。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

これだったら、設定項目も増えず利用者が戸惑うこともなくていけるかなと思います。


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年3月14日 19:51  

一応、実装した当サイトのSmartNewsフィードがこちら。

https://wp-cocoon.com/?feed=smartnews

こちらのチェックツールで試してみても問題ないようです。
http://validator.engine.smartnews.be/url

ただ、投稿コンテンツによっては、また引っ掛かる部分も出てくるかもしれないので、警告が出た場合は、また報告いただく必要はあるかもしれません。


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年3月14日 19:54  

一応、SmartNewsを利用する際に、推奨する設定はこちら。

  1. 「ヘッダー」のロゴを設定する(無い場合はAMPロゴが利用される)
  2. 「アクセス解析・認証」でGoogle AnalyticsのトラッキングIDを設定する(タグマネージャIDを入れていても重複カウントしないように対策済み)
  3. 「画像」の「NO IMAGE画像」を設定しておく(アイキャッチがない場合はこの画像が利用される)

これらの設定がなくても、一応使用できるようにはなっていますが、設定しておくことを推奨します。


bbn
 bbn
(@bbn)
Active Member
参加: 2週間 前
投稿: 9
2019年3月15日 15:24  

かうたっくさん

ご指摘ありがとうございます。

昔何かのサイトで子テーマのfunctions.php上書きを試したところ上手くいかず、しっかり原因解決しないままでしたので、その印象ばかりが残ってしまっていました。。

問題解決しましたのでしっかり覚えておきます!

今思うと当時の原因は単なる関数名の重複だったように思います。。


bbn
 bbn
(@bbn)
Active Member
参加: 2週間 前
投稿: 9
2019年3月15日 17:48  

わいひらさん。

SmartNewsフィードの実装本当にありがとうございます!

タグマネージャーの重複対策までありがとうございます。

1点ご共有です。
先日、投稿タイトルや本文などの文字にXMLの制御文字が紛れ込み、
エラーが発生するケースがありましたので、以下の要素に制御文字の除外処理を入れて対処しました。

・channel.title
・channel.description
・item.title
・item.content:encoded
・item.category
・item.dc:creator

http://ja.katzueno.com/2015/10/3517/


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年3月15日 23:01  

出来れば、どのファイルのどの部分をどのように変更したのか具体的に書いていただいてよろしいでしょうか。一部分だけで良いので。

僕の環境では、その不具合はなかったので。

もしこのコードを入れているのだとしたら、他の通常タグもエスケープされなかったでしょうか。

htmlspecialchars($string, ENT_XML1, "UTF-8")
This post was modified 1週間 前 by わいひら

bbn
 bbn
(@bbn)
Active Member
参加: 2週間 前
投稿: 9
2019年3月16日 19:10  

もしこのコードを入れているのだとしたら、他の通常タグもエスケープされなかったでしょうか。

htmlspecialchars($string, ENT_XML1, "UTF-8")

おっしゃる通り通常タグもエスケープされましたので、

function utf8_for_xml($string){
    return preg_replace ('/[^\x{0009}\x{000a}\x{000d}\x{0020}-\x{D7FF}\x{E000}-\x{FFFD}]+/u', ' ', $string);
}

を利用いたしました。

変更内容は以下の通りです。
※こちらはわいひらさん実装前のオリジナルのファイルを利用しております。

■変更前

<?php
/**
 * RSS2 Feed Template for displaying RSS2 Posts feed.
 *
 * @package smartnews
 */
do_action( 'rss_tag_pre', 'rss2' );
header('Content-Type: text/xml');
header('Content-Type: application/xml');
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/" xmlns:snf="http://www.smartnews.be/snf">
  <channel>
    <title><?php wp_title_rss(); ?></title>
    <link><?php bloginfo_rss('url'); ?></link>
    <description><?php bloginfo_rss('description'); ?></description>
    <pubDate>Sat, 16 Mar 2019 09:30:00 +0000</pubDate>
    <language><?php bloginfo_rss( 'language' ); ?></language>
    <copyright>© example</copyright>
    <ttl>1</ttl>
    <snf:logo>
    <url> https://example.com/wp-content/uploads/2019/03/logo.png </url>
    </snf:logo>

    <?php while(have_posts()){ the_post(); ?>
    <item>
      <title><?php the_title_rss(); ?></title>
      <link><?php the_permalink_rss(); ?></link>
      <pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
      <?php $content = get_the_content_feed('rss2'); ?>
<content:encoded>
<![CDATA[
<?php if(has_post_thumbnail()){ ?>
<figure>
<img src="<?php echo get_the_post_thumbnail_url($post->ID, 'large');?>">
<figcaption><?php echo get_the_post_thumbnail_caption($post->ID);?></figcaption>
</figure>
<?php } ?>
<?php echo $content; ?>
]]>
</content:encoded>
      <?php
      $taxonomy = 'post_tag';
      $terms = get_the_terms($post->ID,$taxonomy);
      if($terms){
        $count = 0;
        foreach($terms as $term){
          $count++;
          if($count == 1){
            $term_str = $term->name;
          }else{
            $term_str .= ','.$term->name;
          }
        }
      ?>
      <category><?php echo $term_str; ?></category>
      <?php } ?>
<dc:creator>
<![CDATA[<?php the_author(); ?>]]>
</dc:creator>
      <dc:language><?php bloginfo_rss( 'language' ); ?></dc:language>
      <?php
      $image_id = get_post_thumbnail_id();
      $image_url = wp_get_attachment_image_src($image_id, true);
      ?>
      <media:thumbnail url="<?php echo $image_url[0]; ?>" />
<snf:analytics>
<![CDATA[

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX', 'example.com');
ga('require', 'displayfeatures');
ga('set', 'referrer', 'http://www.smartnews.com/');
ga('send', 'pageview', '');

]]>
</snf:analytics>
    </item>
    <?php } ?>
  </channel>
</rss>

■変更後

<?php
/**
 * RSS2 Feed Template for displaying RSS2 Posts feed.
 *
 * @package smartnews
 */
do_action( 'rss_tag_pre', 'rss2' );
header('Content-Type: text/xml');
header('Content-Type: application/xml');
echo '<?xml version="1.0" encoding="UTF-8"?>';

//XML制御文字除外
function utf8_for_xml($string){
  return preg_replace('/[^\x{0009}\x{000a}\x{000d}\x{0020}-\x{D7FF}\x{E000}-\x{FFFD}]+/u','',$string);
}
?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/" xmlns:snf="http://www.smartnews.be/snf">
  <channel>
    <title><?php echo utf8_for_xml(get_bloginfo('name')); ?></title>
    <link><?php echo home_url(); ?></link>
    <description><?php echo utf8_for_xml(get_bloginfo('description')); ?></description>
    <pubDate>Sat, 16 Mar 2019 09:30:00 +0000</pubDate>
    <language><?php echo get_bloginfo('language'); ?></language>
    <copyright>© example</copyright>
    <ttl>1</ttl>
    <snf:logo>
      <url> https://example.com/wp-content/uploads/2019/03/logo.png </url>
    </snf:logo>

    <?php while(have_posts()){ the_post(); ?>
    <item>
      <title><?php echo utf8_for_xml(get_the_title($post->ID)); ?></title>
      <link><?php echo get_permalink(); ?></link>
      <pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
      <?php $content = get_the_content_feed('rss2'); ?>
<content:encoded>
<![CDATA[
<?php if(has_post_thumbnail()){ ?>
<figure>
<img src="<?php echo get_the_post_thumbnail_url($post->ID, 'large');?>">
<figcaption><?php echo utf8_for_xml(get_the_post_thumbnail_caption($post->ID));?></figcaption>
</figure>
<?php } ?>
<?php echo utf8_for_xml($content); ?>
]]>
</content:encoded>
      <?php
      $taxonomy = 'post_tag';
      $terms = get_the_terms($post->ID,$taxonomy);
      if($terms){
        $count = 0;
        foreach($terms as $term){
          $count++;
          if($count == 1){
            $term_str = $term->name;
          }else{
            $term_str .= ','.$term->name;
          }
        }
      ?>
      <category><?php echo utf8_for_xml($term_str); ?></category>
      <?php } ?>
<dc:creator>
<![CDATA[<?php echo utf8_for_xml(get_the_author()); ?>]]>
</dc:creator>
      <dc:language><?php echo get_bloginfo('language'); ?></dc:language>
      <?php
      $image_id = get_post_thumbnail_id();
      $image_url = wp_get_attachment_image_src($image_id, true);
      ?>
      <media:thumbnail url="<?php echo $image_url[0]; ?>" />
<snf:analytics>
<![CDATA[

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX', 'example.com');
ga('require', 'displayfeatures');
ga('set', 'referrer', 'http://www.smartnews.com/');
ga('send', 'pageview', '');

]]>
</snf:analytics>
    </item>
    <?php } ?>
  </channel>
</rss>

わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年3月16日 21:54  

utf8_for_xml

これを使ったんですね。それならば納得です。

あと出来れば、修正後のコードは以下の方法で貼り付けていただけると助かります。HTMLコードの中にはフォーラムに正しく出力されないものもあるので。

トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw

This post was modified 1週間 前 2 times by わいひら

bbn
 bbn
(@bbn)
Active Member
参加: 2週間 前
投稿: 9
2019年3月17日 00:51  

承知いたしました!

また、コードの件失礼いたしました。。
今後は「notopat.pwa」を利用いたします。


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年3月17日 00:55  

今度というか、今回「■変更後」のコードを「notopat.pwa」でいただければと思います。

前回書きこまれたものは、消えているタグもあるので。

 


bbn
 bbn
(@bbn)
Active Member
参加: 2週間 前
投稿: 9
2019年3月18日 11:33  

わいひらさん。
ご返信が遅くなりまして申し訳ございません。

大変失礼いたしました。。

「■変更後」のソースコードは以下の通りです。

https://notepad.pw/share/pt44oo9y


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年3月18日 20:33  

ありがとうございます。
同様の問題が頻発するようであれば、テーマ側でもコードを参考に修正しようと思います。


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
○アダルト・出会い系サイト可

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
○アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました