何が面倒って、アイキャッチ画像を設定するほど面倒なことはない
投稿日：2021年12月04日
ブログ更新でめんどくさいことの1つにアイキャッチ画像の選定がある。そこで簡単にアイキャッチ画像を作成するツールを作成した。
目次
ブログ更新ってめんどくさい
ブログ更新は面倒くさい。
そんなこと分かり切っている。
なかでも面倒なことの1つにアイキャッチ画像の選定がある。
面倒なことを楽にできるのがエンジニアの特権だ。
ということでアイキャッチ画像を簡単に作れるようにした。
作成されるアイキャッチ画像
本ツールを作成できるアイキャッチ画像はこんな感じ。
「本ツールを作成できるアイキャッチ画像」の部分を簡単に変更できる。
作成するうえでの考え方
- JavaScriptのCanvasに背景画像を描画する
- その上にCanvas で文字を書く
作成したコード
<div id="creatEyeCatch">
<div class="input">
<input type="text" id="input" placeholder="記事タイトルを記入する">
</div>
<canvas class="canvas" id="canvas--background" width="788px" height="486px"></canvas>
<div class="operation">
<button id="deleteTitle">タイトルを削除</button>
</div>
</div><script>
// var
const deleteTitle = document.getElementById('deleteTitle')
// 背景CANVASの作成
const canvasGround = document.getElementById('canvas--background')
const ctxGround = canvasGround.getContext('2d')
const nove = new Image();
nove.src = '画像のパス';
ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height);
// 入力されたタイトルを描画する関数
const drawFont = (el) => {
ctxGround.font = '32px Noto Sans JP';
ctxGround.fillStyle = '#000000';
const x = (canvasGround.width - ctxGround.measureText(el).width) / 2
const y = (canvasGround.height + 32 / 2) / 2 + 40
ctxGround.fillText(el, x, y, 708);
}
// テキストが入力確定で出力
const input = document.getElementById('input')
input.addEventListener('change', () => {
drawFont(input.value)
clearCanvas()
window.setTimeout(() => {
drawFont(input.value)
}, 500)
})
// テキストの削除
deleteTitle.addEventListener('click', () => {
clearCanvas()
input.value = ''
})
const clearCanvas = () => {
ctxGround.clearRect(0, 0, canvasGround.width, canvasGround.height);
nove.src = '画像のパス';
ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height);
}
// タイトルの文字量をチェック
input.addEventListener('input', () => {
if (input.value.length > 21) {
alert('今はまだ、タイトルは20文字以内にしてください。')
}
})
</script>基本的にコメントアウトを残したので、それ通りに作れば特に難しい点もないと思う。
投稿画面にリンクを張る
最後に作成したツールに飛ぶためのリンクを投稿画面に貼る。
add_action('admin_footer-post-new.php', 'add_custom_text');
add_action('admin_footer-post.php', 'add_custom_text');
function add_custom_text()
{
?>
<script>
const selectEyeCatch = document.getElementById('postimagediv')
selectEyeCatch.insertAdjacentHTML('afterend', '<p class="creatEyeCatch"><a href="URL" target="_blank" rel="noopener noreferrer">nove のアイキャッチを生成する</a></p>');
</script>
<?php
}これですこしブログ更新を楽にできる。
わからない部分はコメントに残してもらえれば解説します。
- # JavaScript
- # Wordpress
- # 作ってみた
- # 効率化
次に読むおすすめ記事
JavaScriptを使用してWordPressの投稿に目次を挿入する
JavaScriptで2つの配列を比較し、一致したものを取り出す方法コード
[…] アイキャッチ画像生成ツールを作成 […]