Luxeritasクラシック環境でブロックを使って自前の商品リンク！WordPressの編集環境

wordpressのブロックエディタは様々なレイアウトができる為、デザインの幅が広がります。
ただ、文章主体だったり簡素なブログはクラシック環境の方が編集しやすい事も多い。

数100記事あるものをブロックエディタの環境にすると過去の記事が編集しづらい事も多いです。
場合によってはレイアウトも崩れ様々な不具合が出る事もあります。

実際、運営しているブログはレイアウトも崩れAMPでエラーも起こりました。
結局一旦クラシック環境に戻さざる得ない状況になり、現在はブロックエディタへの変更の時期を伺っている状態です。

クラシック環境にブロック要素を

ブロックエディタの良いところはレイアウトの幅が広がり綺麗に見せる事ができる点。
綺麗に見せるだけでなく読みやすくしたり説明しやすいデザインが手軽にできます。

クラシック環境でもブロックで扱えるボタンなども利用する事ができます。
ただ、同じテーマである必要がありますが、コードに手を加えれば異なったテーマでも使用できます。

本来ならばブロックエディタにしてクラシックブロックで作成すれば良いだけですが、全てをクラシック環境で作りたい事もあります。
クラシックエディタが使える限りは利用したい人も多くいるはずです。

ボタンで商品リンクを作る

オールクラシック環境で作っているブログで簡単に商品紹介用リンク（アフィリエイト）を作ってみました。
商品用リンクは「カッテネ」などを利用すれば簡単にできますが、同じようなものを自前でも作る事ができます。

商品リンク作成

下の商品紹介用リンクはLuxeritasのクラシック環境で使用しているものです。
2列表示や3列表示といったカラムはクラシック環境だとCSSで作る事ができます。
ただ、複雑だったり、微妙にズレが生じたりする事も多々あります。

HTML

上記のブロックのHTMLになります。
Luxeritasを使用している為「wp-block-luxe-blocks-border-block」が大元のCSSの呼び出しになります。
このブロックを使用すれば新たにCSSを追加しなくても本体のCSSを使用している事で直ぐ利用できます。

下記のHTMLは予め「パターン登録」しておけば記事作成中に挿入する事が可能です。

<div class="wp-block-luxe-blocks-border-block" style="margin-top: 10px; margin-bottom: 30px;">
<div class="wp-block-luxe-blocks-border-block-content" style="background-color: #f5f5f5; border: 1px solid #ffffff; border-radius: 0px; padding: 0px 15px 0px 15px;">
<h3>タイトル</h3>
<div class="wp-block-columns">
<div class="wp-block-column"><center>画像URL</center></div>
<div class="wp-block-column">
<p style="text-align: center;"><span style="font-size: 18px;"><a class="amazon-link" href="URL" target="_blank" rel="noopener">Amazonでチェック！</a></span></p>
<p style="text-align: center;"><span style="font-size: 18px;"><a class="rakuten-link" href="URL" target="_blank" rel="noopener">楽天でチェック！</a></span></p>

</div>
</div>
</div>
</div>

下記の部分に使用コードを挿入すればリンクが完成します。

• タイトル：商品名を記入します。
• 画像URL：商品画像のURLを記入します。
• URL：アフィリエイトリンクのURLを記入します。

それぞれの部分を削除して書き換えます。

CSS

リンクボックスはあらたにCSSを追加しないと表示されません。
子テーマのスタイルシートに下記のコードを追加します。

これでクラシック環境で編集していても自前の商品リンクを使用する事ができます。

編集画面では同じように表示されないので「投稿エディタ用スタイル」にも追加する事で表示されます。

/*******************************
* 楽天リンク
********************************/
.rakuten-link {
position: relative;
display: inline-block;
font-weight: bold;
width: 100%;
height: 60px;
text-align:center;
padding:12px 0;
text-decoration: none;
border-radius: 6px;
color: #ffffff;
background: #b0241a;
transition: .4s;
}
.rakuten-link:hover {
background: #8d1b13;
color: #ffffff;
}
/*******************************
* Amazonリンク
********************************/
.amazon-link {
position: relative;
display: inline-block;
font-weight: bold;
width: 100%;
height: 60px;
text-align:center;
padding:12px 0;
text-decoration: none;
border-radius: 6px;
color: #ffffff;
background: #f09b38;
transition: .4s;
}
.amazon-link:hover {
background: #c07d2b;
color: white;
}

BOXの色変更は各コードを書き換えれば自由に変更できます。

実際の商品リンク

実際に商品画像とリンクを挿入し、稼働させてみました。
タイトルはH3にしていますが、書き換えればどのようにもなります。
リンクにしたい場合やテキストを変えたい場合は、簡単に書き換えられます。

ボックスの幅は100％にしていますので環境に合わせて表示されます。
画像とボックスはレスポンシブになっているのでスマホでは縦に表示されます。

スライダーに変更した為削除いたしました。

画像はAmazonの画像リンクになりますが、楽天でも使用できます。

自前の商品リンクまとめ

カッテネなどはほとんどのブログで使用されているので、差別化したい時などは自前の商品リンクを使っても良いかもしれませんね。
ブロック環境でも使用できるコードなので、途中からブロックエディタに変更してもそのまま使用できます。

ブロックエディタにしたら同じように作り直す事は簡単です。
そのまま使用したい場合はカスタムHTMLで表示させる必要がありますので作り直す方が良いかもしれません。