ショートコードは便利だけど数が増えると管理が大変。そんな時は見えるところに一覧を作ろう

ショートコードは管理が大変

ここ最近、2つほどショートコードを作成した。

Amzonアフィリエイトリンクをショートコードで作成する

ASPのツールもアソシエイトツールバーも使わずにアマゾンのアフェリエイトリンクをそれなりのデザインで生成する方法

こんなのと・・・

内部リンク用のブログカードをショートコードで作成する

ワードプレスでは記事中の内部リンクはURLを貼り付ければ自動的にブログカードになるが使い勝手が悪いので自作してみる

こんなの。

ブロックで作るのが面倒だからとショートコードにしたんだよね?w

ツン子

(余計なことを・・・。)

ちたまん

ただショートコードには弱点がある。それはショートコード名や引数を把握していないと使えないという点。

長いこと使っていないとショートコードの存在自体忘れてしまって似たようなショートコードを再度作成してしまうこともある・・・。

と、言うわけで編集中にすぐに参照できるように編集画面に一覧を作ってしまおう。ってわけ

ショートコードの作成方法を基本から応用まで注意点を含めて説明

複数の記事で使用する内容や、PHPで生成が必要な場合はショートコードを作成することで記事の任意の場所に手軽に挿入が可能になり…

そもそもショートコードって?という人は上記の記事を参考に。

カスタムメタボックスを作成する

編集画面に表示させるにはカスタムメタボックスを作ればよい。

メタボックスとは?

メタボックス例

記事編集画面の右側に図のようにカテゴリーやタグの設定をするためのボックスが並んでいると思う。このように右側、もしくは下部にあるボックスのことをメタボックスという。

このメタボックスは追加することが可能。独自で作成したメタボックスのことをカスタムメタボックスと呼ぶ。

functions.php

function add_custom_box(){

	add_meta_box( 
		'custom-box-sc', // IDとしてhtmlに出力される
		'ショートコード', // 表示タイトル
		'sc_custom_box', // 出力用のfunction名
		array('post','fr_post'), // 適用する投稿タイプ
		'side', // 位置
		'high' // 優先順位
	);
	//複数作る場合はここにadd_meta_box()を追加
}

add_action( 'add_meta_boxes', 'add_custom_box',1 );

function sc_custom_box($post){
	?>
	<ul id="scList">
		<li><button onClick="copyClip(this)">[inLink id=]</button></li>
		<li><button onClick="copyClip(this)">[amzLink dp='' title='' brand='']</button></li>
		
	</ul>
	<style>
		@media screen and ( min-width:1280px) {
		#scList{
			padding:1rem;
			position:fixed;
			top:20%;
			left:20px;
			border:1px solid #aaa;
			background-color:rgba(255,255,255,0.6);
		}
	</style>
	<script>
		function copyClip(obj){
			navigator.clipboard.writeText(obj.innerText);
		};
	</script>
	<?php
}

実行結果

実行結果

こんな感じで追加される

使いやすいように2点ほど工夫してみた

上記のコードではstyleタグやscriptタグが記述されているが、それは使い勝手向上のために少々手を加えた結果。

クリックでクリップボードにコピー

今回はクリックすることでクリップボードへのコピー機能をJavascriptで実装した

function copyClip(obj){
	navigator.clipboard.writeText(obj.innerText);
};

Javascriptはあまり詳しくないので、これでいいのか不安だけどとりあえず動いている。

MEMO

通常クリップボードにコピーするときは普通は「document.execCommand(“copy”)」を使用するけど、これは選択範囲をコピーするものなので、今回のようにクリックした要素のinnerTextをコピーする場合は向いていない。

スクロールが面倒なのでフロートさせてみた

メタボックスは最初から5個くらいあるのでスクロールが必須になる。そこで今回ウィンドウ幅が1280px以上の場合は図のようにフロートするようにした。

ボックスをフロートさせる

このようにすぐにクリックできる位置に配置した。尚、記事中に入力カーソルが表示されている場合メタボックスは非表示になるので、執筆の邪魔になることはない。

	<style>
		@media screen and ( min-width:1280px) {
		#scList{
			padding:1rem;
			position:fixed;
			top:20%;
			left:20px;
			border:1px solid #aaa;
			background-color:rgba(255,255,255,0.6);
		}
	</style>

styleタグ内のこのコードで実現している。

注意

body内の任意の位置にstyleタグでCSSを記述するのは、お行儀の悪いことなので真似をしない。今回は管理画面のコードなので良しとした。

あといくつかショートコードを作る予定だからこれで安心だね

ちたまん

珍しく準備が良いね。多分裏目に出るよw

ツン子

おい!www

ちたまん

追記:さらにショートコードが増えたので・・・

一覧を作成後、さらにショートコードが増えた。ただ数が増えただけなら一覧に追加すればいいだけだけど、引数が複雑なショートコードは単純にコピペしても使えないので少々カスタマイズした。

改良版ショートコード一覧

現在はこのようになっていて「データ参照」の部分は別ウィンドウが表示されるようになった。

詳しくは以下の記事

投稿画面にAmazonアソシエイトの商品一覧を表示する

アマゾンの商品を管理画面で管理するようにしたけど、今度は記事への挿入が面倒になったので、記事から参照できるように修正しよう