WordPress のブログにはてなスターを設置してみた

WordPress のブログにしてから、はてなブログにあったスターがなく、さみしい感じがしたので、

以下の記事を参考にして、WordPress のブログに、はてなスターを設置してみました。

↓はてなスターの設置の仕方が書いてある。

この作業は、設置するコードを取得するまでが、けっこうめんどくさいです。

ブログの各ページに以下のコードを書きます。

<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
</script>

<script type="text/javascript">
Hatena.Star.SiteConfig = {
entryNodes: {
    'header.entry-header': {
        uri: 'a:nth-child(1)',
        title: 'h1',
        container: 'div.entry-meta'
    }
}
};
</script>

<script>
window.addEventListener("load", () => {
  document.querySelector(".hatena-star-add-button").src = "https://cdn.blog.st-hatena.com/images/theme/star/hatena-star-add-button.svg"

  const starContainer = document.querySelector(".hatena-star-star-container");
  const observer = new MutationObserver(e => {
    Array.from(document.querySelectorAll(".hatena-star-star")).forEach(star => {
      star.outerHTML = 
        `<span class="hatena-big-star-star-container">
           <img src="https://cdn.profile-image.st-hatena.com/users/${star.alt}/profile.png" tabindex="0" class="hatena-star-user" style="padding: 0px; border: none;">
           <img src="https://s.hatena.ne.jp/images/star.gif" tabindex="0" class="hatena-star-star" style="padding: 0px; border: none;" alt="${star.alt}" title="">
         </span>`
    })
  })
  observer.observe(starContainer, {childList: true})
})
</script>

以前、付けてもらったスターは、↓こちらのように表示することができました。