アイキャッチ画像は、記事個別ページにあり、トップページには表示されておりません。
スクリプトで
記事ページにアクセス⇒メタタグのog:imageを取得⇒取得した画像を背景に設定
という方法なのかなと考えているのですが、記事ページにアクセスの段階で躓いております。
技術的に可能なのかどうかも僕の拙い知識では分からず、途方に暮れております。
もし、可能なようでしたらヒントで構いませんので教えて頂けると助かります。
こんな感じ。
$(function() { $(".entry-see-more").each(function() { var see_more = this; var xhr = new XMLHttpRequest(); xhr.open('GET', see_more.href, true); xhr.onload = function(e) { if (e.target.status <= 200) { var d_ = e.target.response; var eye_catch = $('meta[property="og:image"]', d_)[0].content; // og:image の content が取れてるのが分かるはず console.log(eye_catch); // サイズの調整とか何とかはあるだろうけれども... see_more.style.backgroundImage = 'url(' + eye_catch + ')'; } }; xhr.responseType = 'document'; xhr.send(null); }); });
jQuery の $.ajax じゃなくて XMLHttpRequest を使っているのは、取得した結果を文字列じゃなくて DOM で欲しかったから。
$.ajax で取得して、文字列で切り出しても同じことができます。
$(function(){ function productImg() { var pi = document.getElementsByTagName('meta'); for(i=0;i<pi.length;i++){ if(pi[i].getAttribute("property")=="og:image"){ return pi[i].getAttribute("content"); } } return ""; } var topEntries = $(".entry-inner"); var presentCategory2 = ""; topEntries.each(function(){ var archiveEntry = $(this); var esm = archiveEntry.find(".entry-see-more"); pi=esm.load(esm.attr("href"),productImg()); esm.css({backgroundImage: 'url(" + pi + ")'}); }); });
拙いですが、途中までのスクリプトを載せておきます。