WP Ulikeをnote風の追尾型にする方法

前書き

• これはWordPressのプラグイン「WP Ulike」を使った記事です

• この方法はウィジェットに「記事下エリア」が存在するテーマ向けです。私が使っているSWELLテーマ以外だとCOCOONなどの国内ブログ向けテーマならあるかも…無料海外テーマだとない気がするな～。

---

SWELLのウィジェットはこんな感じです。「トップページ下部」や「記事下部」が記事下エリアになります。

いちおう、WordPressテーマに記事下エリアウィジェットがある前提で書きますね。

ウィジェットの、いいねボタンを追加したい「記事下エリア」に、カスタムHTMLで以下のコードを記述します。

<div class="like-button-mobile">[wp_ulike]</div>

WP Ulikeショートコードにクラスを与えているだけです。あとはCSSで追尾させて終わりです。追尾させるCSSはこんな感じ。

.like-button-mobile .wpulike .wp_ulike_general_class {
    position: fixed;
    bottom: 1em;
    z-index: 9;
    right: 2em;
    font-size: 20px;
}

他の色や形はデベロッパツールを使ってお好みで調整します。CSSよりWPUlikeの設定の方が優先されるので、CSSを使う時はWP Ulikeの「設定」→「コンテンツタイプ」をデフォルト設定のままにしておくといいと思います。