Gutenberg対応！jQueryでただの文字リンクをブログカードに置き換える

楽をしてブログカードを実装したい。

WordPressプラグインとかあるけど、正直ショートコードすらめんどくさいし、大げさなのはいらないし、パット見それっぽくなればいい。

人は楽をするために生きている。

省エネでやっていきましょう。

いきなりですが、デモです

サイト内リンクの場合

きょうのはるきょ

外部リンクの場合

Qiita

表示されていますか。とっても簡素なブログカードです。
外部リンクの場合はサムネイル無しです。

※サイト内リンクの場合、WordPressでは記事内に（自ブログの）URLを貼り付けると、自動的にブログカードを生成してくれるので、CSSいじって、それを使ったほうがいろいろ幸せかもしれん。

ソースコード

javascript（jQueryの読み込みが必要です）

$(document).ready(function(){
    var target = ".post_content";
    $(target+'>p').each(function(index, element){
        if($(this).length==1&&$(this).children("a").length==1){
            var all = $(this).text().length;
            var child_a = $(this).children("a").text().length;
            var child_a_url = $(this).children("a").attr('href');
            if(all==child_a){
                var child_a_url_domain = child_a_url.match(/^https?:\/{2,}(.*?)(?:\/|\?|#|$)/)[1];
                if(location.host==child_a_url_domain){
                    fetch(child_a_url).then(res => res.text()).then(text => {
                        const child_a_url_html = new DOMParser().parseFromString(text, "text/html")
                        const child_a_url_head = (child_a_url_html.head.children)
                        for(i=0;i<child_a_url_head.length;i++){
                            if(child_a_url_head[i].getAttribute("property")=="og:image"){
                              var image_url = child_a_url_head[i].getAttribute("content");
                              if(image_url!=""){
                                $(this).children("a").prepend(`
                                      <p class="ogp_image" style="background:url('`+image_url+`')"></p>
                                `);
                              }
                            }
                          }
                    });
                }
                $(this).children("a").addClass("blogcard");
                $(this).children("a").append(`
                    <span>`+child_a_url+`</span>
                `);
            }
        }
    });
});

.post_content は対象となる記事本文のラッパーを指定して下さい。

css

.blogcard{
    display: block;
    border: 1px solid #ddd;
    background-color: #fdfdfd;
    padding: 20px 30px;
    border-radius: 5px;
    font-size: 0.9em;
    line-height: 1.7;
    font-weight: bold;
}
a.blogcard{
    text-decoration: none;
}
a.blogcard::after{
    content: "";
    display: block;
    clear: both;
    margin: 0;
    padding: 0;
    line-height: 0;
}
a.blogcard span{
    display: block;
    color: #777;
    font-style: italic;
    font-size: 0.7em;
    margin-top: 0.2em;
    font-weight: normal;
}
a.blogcard p.ogp_image{
    display: block;
    width: 90px;
    height: 60px;
    padding: 0;
    margin: 0 18px 0 0;
    border-radius: 2px;
    float: left;
    background-size: cover !important;
    background-position: center;
}

デザインは好きにいじるといいです。