[wp]ブログカード自作メモ

必要に迫られて。

参考
動作チェック
カスタマイズ案
没コード

参考

これいい。

ブログカードとは簡単にいうとオシャレなリンクのことです。ただ単に文字だけのリンクと違いCSSデザインなどを使ってより以下のような見栄えのいいリンク作成できます。以下に作り方を記...

標準状態だと構成はこうなってる。

    return '<a href="'. $url .'" class="'. $prefix .'-card" target="_blank" rel="noopener noreferrer">' .
               '<div class="'. $prefix .'-card-box">' .
                   '<div class="'. $prefix .'-card-thumbnail">' . 
                       '<img src="' . $image_url . '" alt="' . $title . '"/>' .
                   '</div>' .
                   '<div class="'. $prefix .'-card-content">' .
                       '<div class="'. $prefix .'-card-title">'. $title .' </div>' .
                       '<div class="'. $prefix .'-card-excerpt">'. $excerpt .'</div>' .
		               '<div class="'. $prefix .'-card-site">'. $site .'</div>' .
                   '</div>' .		          
               '</div>' .               
           '</a>';

動作チェック

[nmblogcard url="https://blog.megefeps.info/20220328/wp%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%e7%a8%bf%e4%b8%80%e8%a6%a7%e3%81%b8%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab/" title="" excerpt="抜粋文" length=抜粋文字数 image_url="画像url" site="サイト" prefix="cssクラスprefix"]

[nmblogcard url=”https://blog.megefeps.info/20220328/wp%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%e7%a8%bf%e4%b8%80%e8%a6%a7%e3%81%b8%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab/” title=”” excerpt=”抜粋文” length=抜粋文字数 image_url=”画像url” site=”サイト” prefix=”cssクラスprefix”]

[nmblogcard url="https://blog.megefeps.info/20220328/wp%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%e7%a8%bf%e4%b8%80%e8%a6%a7%e3%81%b8%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab/" title="" excerpt="aaa" length= image_url="" site="" prefix=""]

[nmblogcard url=”https://blog.megefeps.info/20220328/wp%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%e7%a8%bf%e4%b8%80%e8%a6%a7%e3%81%b8%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab/” title=”” excerpt=”aaa” length= image_url=”” site=”” prefix=””]

※url、excerptを空欄にすると致命的エラーが出る

[nmblogcard url="https://blog.megefeps.info/20220328/wp%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%e7%a8%bf%e4%b8%80%e8%a6%a7%e3%81%b8%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab/" excerpt="aaa"]

※空欄にできるコードは記述しなくても平気

[nmblogcard url="https://nomux2.net/wp-blogcard/" excerpt="aaa"]

[nmblogcard url=”https://nomux2.net/wp-blogcard/” excerpt=”aaa”]

[nmblogcard url="https://nomux2.net/wp-blogcard/" title="ああああ" excerpt="抜粋文" length=抜粋文字数 image_url="画像url" site="サイト" prefix="cssクラスprefix"]

[nmblogcard url=”https://nomux2.net/wp-blogcard/” title=”ああああ” excerpt=”抜粋文” length=抜粋文字数 image_url=”画像url” site=”サイト” prefix=”cssクラスprefix”]

※外部サイトの場合、情報は引っ張れない。各項目を埋めないと表示してるページの内容が出力される。

カスタマイズ案

特定の投稿タイプにより振り分け（投稿IDからタイプを取得。まあ頑張らなくてもタグ自体を分ければいい）

カスタムフィールドの情報を引っ張れるか

没コード

【WordPress】プラグインなしでブログカードを作る方法【コピペで完成】

ブログカードをプラグインなしでサクッと作成する方法を紹介します。コピペでOK。画像付きのリンクなので、リンクのクリック率も上がるので、一番オススメのリンク。デザインは2通り紹介しています。

これ、ほぼ同じ内容のものをいろんなサイトが記事にして、結構前から近い日付までパクられまくってんだけど、入れてみても動かなかった。なんでだろうね。