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

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

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

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

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

賢威8（WordPress版）でOGP画像が設定したアイキャッチと相違する場合に確認すること｜開発ブログ
https://01w.dev/post-517/
賢威8 で運用しているサイトで Facebookでのシェアを行うと記事に設定したアイキャッチや賢威の設 …

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

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

賢威8（WordPress版）でOGP画像が設定したアイキャッチと相違する場合に確認すること｜開発ブログ
https://01w.dev/post-517/
賢威8 で運用しているサイトで Facebookでのシェアを行うと記事に設定したアイキャッチや賢威の設 …

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

[keni-linkcard url="ここにURLを入力"]

1	[keni-linkcard url="ここにURLを入力"]

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

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

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

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

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

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

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

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

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

賢威8 の子テーマを適用する方法｜開発ブログ
https://01w.dev/post-543/
賢威8 のカスタマイズは本体のファイルを直接いじることなく「子テーマ」をインストールし、子テーマのファイルを …

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

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

// 賢威リンクカードのボタン追加：ビジュアルエディタ
add_filter( 'mce_external_plugins', 'add_add_shortcode_button_plugin' );
function add_add_shortcode_button_plugin( $plugin_array ) {
  $plugin_array[ 'shortcode_button_plugin' ] =  get_theme_file_uri( '/js/keni-linkcard.js');
  return $plugin_array;
}

add_filter( 'mce_buttons', 'add_shortcode_button' );
function add_shortcode_button( $buttons ) {
  $buttons[] = 'linkcard';
  return $buttons;
}

// 賢威リンクカードのボタン追加：ビジュアルエディタ

add_filter( 'mce_external_plugins', 'add_add_shortcode_button_plugin' );

function add_add_shortcode_button_plugin( $plugin_array ) {

$plugin_array[ 'shortcode_button_plugin' ] = get_theme_file_uri( '/js/keni-linkcard.js');

return $plugin_array;

}

add_filter( 'mce_buttons', 'add_shortcode_button' );

function add_shortcode_button( $buttons ) {

$buttons[] = 'linkcard';

return $buttons;

}

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

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

(function(){
	tinymce.create( 'tinymce.plugins.shortcode_button',{
		init: function( editor,url ){
			editor.addButton( 'linkcard',{
				title: '賢威リンクカード',
				icon: 'code',
				cmd: 'linkcard_cmd'
			});

			editor.addCommand( 'linkcard_cmd',function() {
				var selected_text = editor.selection.getContent();
						return_text = '';
				if(selected_text != ''){
					return_text = '[keni-linkcard url="' + selected_text + '"]';
				}else{
					return_text = '[keni-linkcard url="ここにURLを入力"]';
				};
				editor.execCommand( 'mceInsertContent',0,return_text );
			});
		},
		createControl : function( n,cm ){
			return null;
		},
	});
	tinymce.PluginManager.add( 'shortcode_button_plugin',tinymce.plugins.shortcode_button );
})();

(function(){

tinymce.create( 'tinymce.plugins.shortcode_button',{

init: function( editor,url ){

editor.addButton( 'linkcard',{

title: '賢威リンクカード',

icon: 'code',

cmd: 'linkcard_cmd'

});

editor.addCommand( 'linkcard_cmd',function() {

var selected_text = editor.selection.getContent();

return_text = '';

if(selected_text != ''){

return_text = '[keni-linkcard url="' + selected_text + '"]';

}else{

return_text = '[keni-linkcard url="ここにURLを入力"]';

};

editor.execCommand( 'mceInsertContent',0,return_text );

});

createControl : function( n,cm ){

return null;

});

tinymce.PluginManager.add( 'shortcode_button_plugin',tinymce.plugins.shortcode_button );

})();

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

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

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

//賢威リンクカードのボタン追加：テキストエディタ
function custom_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script>
    QTags.addButton( 'keni-linkcard', 'リンクカード', '[keni-linkcard url="ここにURLを入力"]','', '', 'keni-linkcard', '' );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'custom_add_quicktags' );