記事をランダムに 表示するプラグイン Advanced Random Posts Widget 山下 2023/08/06
記述例: 一覧ページの作り方 ブログパーツ → ウィジェット → カスタムHTMLをヘッダー内部へ → 呼び出しコードをペースト
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
●●お店・会社情報バナー ランダム表示
横表示用ブログパーツ
記事をランダムに 表示するプラグイン Advanced Random Posts Widget 山下 2023/08/06
記述例: 一覧ページの作り方 ブログパーツ → ウィジェット → カスタムHTMLをヘッダー内部へ → 呼び出しコードをペースト
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
●●お店・会社情報バナー ランダム表示
横表示用ブログパーツ
参考URL https://point-of-view.blog/swell-customize-randam-banner/
続いて、ランダムバナーのひな形となるブロックパターンのコードをコピペして、ブログパーツを新規作成します。
以下の「コードをコピー」をクリックして、ランダムバナーのひな形となるブロックパターンのコードをコピーします。
"” style=”margin-top: 0px !important; margin-right: auto; margin-bottom: 0px !important; margin-left: auto; padding: 0.8em; box-sizing: border-box; font-family: inherit; font-size: inherit; line-height: inherit; transition: background-color 0.25s ease 0s; border: 1px solid; align-items: center; background: rgb(255, 255, 255); border-radius: var(–swl-radius–2,0); color: inherit; cursor: pointer; display: block; justify-content: center; text-align: center; text-decoration: none; position: relative; width: 260.182px;”>
「ダッシュボード>ブログパーツ>新規作成」より、ブログパーツ新規作成画面を開き、先ほどコピーしたブロックパターンのコードをペーストします。
ペースト後の画面はこのようになります。
「リッチカラム」ブロックにカラムが4つ、その中に「ショートコード」ブロックを登録しています。
「カスタムHTML」ブロックには、ランダムバナー用のJavascriptコードとCSSが定義されています。
ペースト時に「このブロックには、想定されていないか無効なコンテンツが含まれています。」メッセージが表示された場合、「ブロックのリカバリーを試行」をクリックしてください。
保存時に「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」メッセージが表示される場合は、サーバー側のWAF設定を一時的に解除してから保存してみてください。
ブログパーツの初期設定を行います。
この状態でいったん「下書き保存」をクリックし保存します。
保存すると、このブログパーツにIDが付与されるので、一覧画面で確認し控えておいて下さい。(後ほど指定するクラス名に使用します)
例:blog_parts id="153"
下書き保存したブログパーツを開き、①で登録した「広告タグ」の呼び出しコードを、ブログパーツに設定します。
設定する広告タグの数にあわせて、「リッチカラム」ブロックのカラム数を変更します。
例では広告タグの数を「3つ」にしています。
続けて「リッチカラム」ブロックの設定を行います。
※Javascriptで特定するためユニークなクラス名にします。先ほど確認したブログパーツのIDを付けるとよいです。
「リッチカラム」ブロックに設定したクラス名を、「カスタムHTML」ブロックのJavascriptとCSSに反映します。
以下の部分を変更してください。
<script>window.addEventListener('DOMContentLoaded',(event)=>{let elmRandom=document.querySelector('.random-banner-XXXX > .swell-block-columns__inner');for(let i=elmRandom.children.length;i>=0;i--){elmRandom.appendChild(elmRandom.children[Math.random()*i|0])}})</script>
<style>.random-banner-XXXX .swell-block-column:nth-child(n+2){display:none}</style>
.random-banner-XXXX
部分(2か所).random-banner-153
.swell-block-column:nth-child(n+2)
上記の例では「①コンテンツ領域:ビッグバナー」にしましたので、コンテンツ領域の任意の位置に埋め込みます。
表示したい箇所にブログパーツの呼び出しコードを埋め込みます。blog_parts id="153"
※[]で括ってください
*********************************
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録
設定の説明、記録