こんにちは、マルです。
こんな感じで簡単に各ステータスのレビューを行えるNOMAD CODEのCVボックス。
レビュー系のブロガーとしては是非活用したいということで僕も早速導入しました。
ちなみに僕も初心者ブロガーですが、NOMAD CODEのCVボックスを使えばかなりハイクオリティなレビュー記事を作り上げれそうです。
ただ、導入の際に少しつまずいた部分があったのでそこを踏まえてCocoonに導入する方法を紹介します。
導入方法
まずNOMAD CODEのホームページにアクセスします。
そしたら右上にあるWPデザインをクリック。
次に開かれたタグの中にcocoonがあり、その中にCVボックスがあるのでそこをクリック。
そうするとこのようなページに行きます。
まず行わなければならないのがアイコンの設定です。(最初の一回だけ設定が必要)
方法は「アイコンの設定が必要です。設定はこちら」
と表示されているのでクリック。
そうしたらこのようなページに行きます。
下にスクロールするとこの画面が表示されます。
この中の赤丸の部分をコピーしてください。
そうしたらワードプレスを開きます。
Cocoon設定をクリック。
アクセス解析、認証をクリック。
下にスクロールするとヘッド用コードがあるのでここに先ほどコピーしたものを貼り付け。
そして保存ボタンをを押せばOKです。
ただ403 Forbiddenと表示される可能性があります。これはWAF（ウェブアプリケーションファイアウォール）によりブロックされているからだそうです。
僕もブロックされたので困りましたが、Cocoon開発者のわいひらさんがすでに回答を出していてくれました。こちらに記事を載せておきますのでブロックされた方はどうぞ。
ヘッド用コード内にリンクが貼れたらNOMAD CODEに戻りCVボックスをクリックしたときの画面に戻ります。
この画面でボックスのスタイルとカラーを選択できます。
スタイルとカラーが決まったらコードを表示をクリック。
そうするとHTMLとCSSのコードが表示されます。
コピーマークを押すとコピーできます。
まずはCSSをコピーします。
そうしたらワードプレスのカスタマイズ画面にある追加CSSに貼り付けます。
次にHTMLをコピーします。
コピーしたら、書きたい記事のページを開きブロックの検索でカスタムHTMLを選択し、貼り付けます。
プレビューをすれば
このように表示されるはずです。(色は違うと思いますが)
あとは自分好みにカスタマイズするだけです。
カスタマイズ方法はNOMAD CODEに解説があるのでそちらを参考にどうぞ。
赤丸部分をクリックすれば解説が開きます。
コメント