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;
}

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


使い方

記事の編集画面で、新しく段落を作って、そこにリンク付きのテキストを入れるだけです。

aタグだけが入っているpタグを見つけて、勝手にブログカードを作ってくれます。
段落内にリンク以外の他の要素が一緒に入っていたり、文の途中にリンクが入っている場合、あるいは段落内に複数のリンクが含まれている場合はブログカードを生成しないようになっています。

外部リンクの場合はOGPは取得しません。
fetchを弾かれるし、取ってこれたとしても画像をそのまま使うわけにはいかないので…(直リンクやめとこう的な気遣い)

ブログカードにしたくない時
ブログカードじゃなく、普通にテキストリンクにしたい場合は、リンクの後に全角スペースを入れると生成を止めれます。(行末尾の半角スペースはクリーンツール系のプラグインとかで削除されることがあります)

きょうのはるきょ 

おわり🏆


※改良の余地はいくらでもあると思う。ツッコミや、こうしたらいいよ、みたいなご意見大歓迎です。


参考にした記事

公開日