このブログのクオリティを上げていく企画の第4回。
前回、記事を見やすくするためにスタイルを追加した。
今回は以下の問題に対応していく!
- いいねボタンを設置したい
- タグクラウドを設置したい
いいねボタンを設置する
Like Button Ratingをインストールした。
記事一覧画面に「よく気づきました」ボタンが表示された。
なんなの「よく気づきました」って・・・。
一覧画面より記事詳細画面に表示したいなぁ。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-197.png)
どうやら色々とカスタマイズするにはLikeBtn.comに会員登録しないといけないらしい。
(めんどうくせぇ。やるけど。)
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-198.png)
記事一覧にはいいねボタンを表示したくないのでチェックを外す。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-199.png)
テーマが選んでデザインをカスタマイズできる。
でも、ちょっと好みのデザインがないなぁ。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-200.png)
Custom theme & image
を選べば細かくカスタマイズできるっぽい。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-201.png)
デフォルトだとlikeボタンとそれを取り消すDislikeボタンが表示される。
Dislikeボタンは不要なのでオフにする。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-202.png)
プレビューで確認しながらカスタマイズできる。
なんか想像してたデザインと違うんだよな。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-203.png)
カスタマイズ項目がたくさんあるけど痒い所に手が届かなくてモヤモヤするわ。
赤枠の箇所を消したいけど消せないっていうね。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-205.png)
まぁこれでいいか。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-206.png)
実際に記事画面で確認するとこんな感じ。
余白を調整したいな。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-207.png)
外観
→ カスタマイズ
→ 追加CSS
に以下を追記して余白を調整した。
.likebtn_container { margin: 20px 0; }
とりあえずこんなもんかな。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-208.png)
タグクラウドを導入する
次はタグクラウドを導入する。
てっきりこれもプラグインが必要なのかと思ってたんだけど、ウィジェットにあるんすねコレ。
全然気づかなかった。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-209-1024x533.png)
で、有効にして確認するとこんな感じで表示された。良いじゃん。
でもこれクローラーが拾ってノイズになりそうな気がしなくもない。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/04/image-210.png)
今日はここまで。
Webエンジニアをやっています
UX/UIデザインからプログラミング、DB設計、SEO、インフラ構築など幅広く対応してます
PHP/PHPUnit/Laravel/Vue/Nuxt/Docker/Terraform
ご連絡はTwitterのDMまで。
「WordPressにいいねボタンとタグクラウドを設置する!」への1件のフィードバック