ブログカードは、サイト内の別の記事を紹介したいときに使うカード型のパネルです。
このように、目につきやすく、クリックされやすいデザインになっています。

簡単にお引越しできると聞いてさくらサーバからXserverにお引越ししようとしたら簡単には行かなかった話、聞く？

htmlはこのような構造になっていて、

<div class="link-panel">
    <a href="/">
        <div class="link-panel_thumb">
            <img src="/wp-content/uploads/2023/11/inokashira.jpeg">
        </div>
        <div class="link-panel_desc">
            <h4>簡単にお引越しできると聞いてさくらサーバからXserverにお引越ししようとしたら簡単には行かなかった話、聞く？</h4>
        </div>
    </a>
</div>

このブログカードをつくるには、アイキャッチのサムネイルと記事のタイトル、URLが必要ですが、常に最新のものである必要があります。

投稿記事にhtmlを直書きした場合、画像やタイトルなどを変更したとき・URLが変わった場合などに都度修正が必要。それはちょっと管理に難がありすぎて。

例えば画像が削除されちゃったらこんなふうに

簡単にお引越しできると聞いてさくらサーバからXserverにお引越ししようとしたら簡単には行かなかった話、聞きたい？

間抜けな感じになってしまいます。

記事のタイトルやURL、画像を呼び出して引っ張ってくるショートコードを作りました。
管理が楽なのでぜひつかってください。

ショートコードの書き方

ショートコードはWordPressの中のコードを呼び出す機能です。
投稿するページでは通常、phpを記述して処理を実行することができませんが、ショートコードを使うと関数を呼び出すことができます。

[ショートコード名]

[] の中にコードを書きます。
カード型リンクを呼び出すときは [] の中にこれを入れます

card_link 数字ID

「card_link」の後ろに出したい記事のIDを入力します。
管理画面より記事詳細ページを開いたときのURLで記事のIDを確認します。

URLのパラメータの中に記事IDが入っていますので、IDを書いてください。
出力するとこうなります。

ボタン・テキストリンクの装飾