当サイトは 2023年8月よりリニューアル致しました。

★★★ ワードプレス 設定 記録 (更新担当者用)

記事をランダムに 表示するプラグイン   Advanced Random Posts Widget     山下 2023/08/06

記述例: 一覧ページの作り方 ブログパーツ → ウィジェット → カスタムHTMLをヘッダー内部へ → 呼び出しコードをペースト

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

●●お店・会社情報バナー ランダム表示  

横表示用ブログパーツ 

藤沢市民会館レストラン
image008
私たちFSCはイベントの企画
運営・実施をトータルに
プロデュースする会社です。
[イベント企画・レストラン]

シルフィード
ウインドサーフィン
ボディボード・スクール
ショップ・レンタル
[サーフィンスクール]

湘南中央病院
shonan hospital
地域の人々と共に歩み、
健康を守り良質な医療介護を
提供します。
[病院]

えのぽ 広告募集
enopo boshuu
湘南藤沢の情報がいっぱいの
当サイトに広告しませんか?
藤沢・湘南
の地域情報サイトです。
[藤沢市と協働運営サイト]

湘南台司法書士事務所
相続、不動産の名義変更の
スペシャリスト
[司法書士]

江の島巳待ち横丁
江の島内。赤い鳥居の
すぐ下に軒を連ねる
江の島巳待ち横丁。
[観光みやげ品・小売販売]

レストラン ふじ
パーティー、ランチ
お弁当、お飲み物などを
お手頃価格でご提供
[レストラン]

ウチダ☆ダンススタジオ湘南
未経験の方、大歓迎!
見学だけでもOKです。
[ダンススタジオ]

株式会社 田辺工務店
木造住宅専門の工務店優れた
デザイン・技術で新築から
リフォームまで
住宅建築 リフォーム 防音工事

鈴木幼児教室 私立小学校受験
鈴木幼児
湘南白百合学園小学校
横浜雙葉小学校等
自宅で受験準備の特別コース
[私立小学校受験塾]

湘南ふじさわシニアネット
会員募集中
シニアの居場所です。
やり甲斐を求めて
IT(仕事、活用する、楽しむ)
趣味、スポーツ、地域貢献
[NPO法人]

相和設備工業株式会社
暮らしに響く、
水のハーモニー。
給排水衛生設備
設計 施工
[給排水衛生設備 設計施工]

  
縦表示         
 

エディターコードで 必要客先バナーの数 追加


下方の random-banner-152801 → ブログパーツの番号に変更


参考URL https://point-of-view.blog/swell-customize-randam-banner/

② ランダムバナーのブロックパターンをコピペしてブログパーツを新規作成

続いて、ランダムバナーのひな形となるブロックパターンのコードをコピペして、ブログパーツを新規作成します。

STEP
ブロックパターンのコードをコピー

以下の「コードをコピー」をクリックして、ランダムバナーのひな形となるブロックパターンのコードをコピーします。

"” 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;”>

コードをコピーコピーしました
STEP
ブログパーツを新規作成し、ブロックパターンのコードをペースト

「ダッシュボード>ブログパーツ>新規作成」より、ブログパーツ新規作成画面を開き、先ほどコピーしたブロックパターンのコードをペーストします。

ペースト後の画面はこのようになります。

「リッチカラム」ブロックにカラムが4つ、その中に「ショートコード」ブロックを登録しています。

「カスタムHTML」ブロックには、ランダムバナー用のJavascriptコードとCSSが定義されています。

ペースト後の状態

ペースト時に「このブロックには、想定されていないか無効なコンテンツが含まれています。」メッセージが表示された場合、「ブロックのリカバリーを試行」をクリックしてください。

保存時に「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」メッセージが表示される場合は、サーバー側のWAF設定を一時的に解除してから保存してみてください。

STEP
ブログパーツの初期設定

ブログパーツの初期設定を行います。

  • タイトル:(わかりやすい任意の名前)
  • 用途:ブロックパターン

この状態でいったん「下書き保存」をクリックし保存します。

保存すると、このブログパーツにIDが付与されるので、一覧画面で確認し控えておいて下さい。(後ほど指定するクラス名に使用します)

例:blog_parts id="153"

ブログパーツ下書き保存

ブログパーツ下書き保存後 一覧画面

③ ブログパーツに広告タグのショートコードを埋め込み

STEP
広告タグの登録とリッチカラムブロックの設定

下書き保存したブログパーツを開き、①で登録した「広告タグ」の呼び出しコードを、ブログパーツに設定します。

設定する広告タグの数にあわせて、「リッチカラム」ブロックのカラム数を変更します。

例では広告タグの数を「3つ」にしています。

続けて「リッチカラム」ブロックの設定を行います。

  • 列数:1 (すべて)
  • カラムの余白:0(左右・上下ともに)
  • 追加CSSクラス:random-banner-153 ※XXXXのところをIDに変更しています

※Javascriptで特定するためユニークなクラス名にします。先ほど確認したブログパーツのIDを付けるとよいです。

STEP
JavascriptとCSSのクラス名を変更

「リッチカラム」ブロックに設定したクラス名を、「カスタム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>
  • 1、2行目.random-banner-XXXX 部分(2か所)
    「リッチカラム」ブロックのクラス名に変更します。 例;.random-banner-153
  • 2行目:.swell-block-column:nth-child(n+2)
    数値「2」は「2番目以降のカラムを非表示にする」設定です。この設定により「1番目」のカラムしか表示されません。
    「3」にすれば「3番目以降を非表示」、つまり2個表示することもできます。
STEP
ランダムバナーのブログパーツ完成

④ ランダムバナーを表示したいエリアに、ブログパーツの呼び出しコードを埋め込み

上記の例では「①コンテンツ領域:ビッグバナー」にしましたので、コンテンツ領域の任意の位置に埋め込みます。

STEP
投稿記事の編集画面でプログパーツの呼び出しコードを埋め込み

表示したい箇所にブログパーツの呼び出しコードを埋め込みます。
blog_parts id="153" ※[]で括ってください

*********************************

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録

設定の説明、記録