ブログ更新ってめんどくさい

ブログ更新は面倒くさい。

そんなこと分かり切っている。

なかでも面倒なことの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
}

これですこしブログ更新を楽にできる。

わからない部分はコメントに残してもらえれば解説します。