賢威リンクカードのショートコードを簡単に表示させる方法

あなたは「賢威リンクカード」を使用したことはありますか?

WordPressの仕様でURLを貼り付けると下記のようにブログカードが生成されます。

賢威8(WordPress版)でOGP画像が設定したアイキャッチと相違する場合に確認すること

賢威でも似たような機能として、賢威リンクカードが準備されています。

賢威リンクカードを使うと横幅のサイズがぴったりになるので見栄えがいいですよね♪

賢威リンクカードについて

「賢威リンクカード」を利用するには、ショートコードを記述する必要があります。

「ここにURLを入力」部分に任意のURLを入力することで、自動的に賢威リンクカードが生成されます。
プレビュー画面または公開画面で確認することができます。

とても簡単で便利なショートコードですが、ど忘れしてしまったり、半角と全角を間違えて上手く表示ができないことが多々あります。
それを防ぐために、今回ボタン一つで「賢威リンクカード」が表示されるようにしてみました!!!

賢威リンクカードをボタン一つで表示する方法

今回、「ビジュアルエディタ」と「テキストエディタ」にボタンを追加し、ボタンを押すと賢威リンクカードが表示されるという動作になります。

下記の3つの動作ができるようになります。

  • 「ビジュアルエディタ」で、ボタンを押すと賢威リンクカードが表示される
  • 「ビジュアルエディタ」で、URLを選択した後にボタンを押すと賢威リンクカードで囲まれる
  • 「テキストエディタ」で、ボタンを押すと賢威リンクカードが表示される

動作としては動画のようになります。

 

カスタマイズをおこなっていきましょう!

賢威でカスタマイズを行う際は、子テーマの利用をオススメしています。
詳しくは下記の記事をご覧ください。

「ビジュアルエディタ」に「<>」ボタンを表示させよう!

子テーマの functions.php に下記のコードを書きます。

次に、子テーマの中に js ディレクトリを作成します。

下記のコードを keni-linkcard.js というファイル名で保存し、 js ディレクトリ内に入れます。

以上で、ビジュアルエディタに「<>」ボタンが表示されるようになります。

「テキストエディタ」に「リンクカード」ボタンを表示させよう!

子テーマの functions.php に下記のコードを書きます。

以上で、テキストエディタに「リンクカード」ボタンが表示されるようになります。

あると便利な機能になりますので、皆さんもぜひ試してみてください♪