広告 Affinger・改善 オーディオ一般

Affinger6で個別記事にレコードジャケット等のスライドショーを表示させる方法(slick.js を利用)

スポンサーリンク

 

WordPressテーマのAffinger6は、ライドショーを表示する機能がありますが限定的で個別記事内で画像を含むスライドショーを表示する機能がありません。 jQueryの"Slick"を使えば下に示す” Record Jackets Slide Show ”の様に簡単に個別記事に画像を含むスライドショーを表示させることが出来ます。

 Record Jackets Slide Show

ロッシーニの「セビリアの理髪師」
ヴァルヴィーゾ揮者 ロッシーニ管弦楽団

ビバルディの”四季”
フェリックス・アーヨのイムジチ

ヴェルディの「トロヴァトーレ」
セラフィン 指揮 スカラ座管弦楽団

チャイコフスキーの”悲愴”
カラヤン指揮 BPO

Beethoven の 「第9」
カラヤン指揮 BPO

プロコフィエフのVn協奏曲・第2番
Vn ヘンリック・シェリング

マーラの「復活」
ショルティ 指揮 LSO

ベートーベンの交響曲7番
カラヤン指揮 BPO

管弦楽組曲 第2番ミュンヒンガー 指揮
シュトゥットガルト室内管弦楽団

 

スポンサーリンク

 

 

当サイトのWordpress環境

  • WordPress :バージョン 6.5.5
  • テーマ・Affinger6:バージョン20240625
  • WP Fastest Cache Premium(有料版):バージョン 1.7.1

 

Slick(スライダー)の準備

  • Slickの公式サイトから、ページ上部の get it now をクリック > 【Download Now】 ボタンをクリックして、slick-***.ZIPファイルをダウンロードして展開します。
  • 展開されたファイル中の、slick フォルダー(170KB程度)以下の全てを、自サイトのドメイン内の適当なフォルダー(ここではfiles)にアップロードします。

使用するファイルは、slick フォルダー中のCSS用のslick.css と jQuery用のslick.min.js の2つです。

 

Affinger6で個別記事にスライドショーを表示させる方法

ブロックエディタで無く旧エディタでの説明になります。 

スライドショーを設置する「投稿記事」(または、新規投稿記事を追加)を選択し、編集画面(旧エディタ)を開きます。

Step
1
head及びfooterに以下のコードを記述します。

Affinger6の場合、投稿編集画面の下に「head / footer に出力するコード」欄がありますので、wp_head欄にCSSコードを、wp_footer欄にjQueryコードを記述します。 (他の投稿ページには影響しないので便利です。)
個別記事でなく、ブログ全体に適用したい場合は、Affinger6の管理から、「その他」> 上級者のheadに出力するコードと</body>直前に出力するコード蘭に同じ様にCSSコード及びjQueryコードを記述します。
wp_head欄

wp_footer欄

 

Step
2
投稿編集(ビジュアルエディタ)で以下のコードを記述します。

Affinger6のタグ > レイアウトからDIVのメイン【st-div】とサブ【st-div-a】を使い、下の様にビジュアルエディタに記述します。 プレビューすると[st-div-a]〜[/st-div-a]で囲まれた”1st 画像”から”最後の画像”まで順次横に画像が横にスライドして表示されます。

 ビジュアルエディタ
[st-div class="slider slider_css2" margin="0 0 20px 0" padding="0 0px 0 0" add_style=""]
[st-div-a class="slider_css2" margin="0 0 20px 0" padding="20px 0px 0 0px" add_style=""]
センタリングーー>1st 画像等を
センタリングーー>埋め込む
[/st-div-a]
[st-div-a class="slider_css2" margin="0 0 20px 0" padding="20px 0px 0 0px" add_style=""]
センタリングーー>2nd 画像等を
センタリングーー>埋め込む
[/st-div-a]
[st-div-a class="slider_css2" margin="0 0 20px 0" padding="20px 0px 0 0px" add_style=""]
センタリングーー>3rd 画像等を
センタリングーー>埋め込む
[/st-div-a]
[st-div-a class="slider_css2" margin="0 0 20px 0" padding="20px 0px 0 0px" add_style=""]
センタリングーー>最後の画像等を
センタリングーー>埋め込む
[/st-div-a]
[/st-div]

 

スライドショー(プレビュー)

1st 画像等を
埋め込む

2nd 画像等を
埋め込む

3rd 画像等を
埋め込む

最後の画像等を
埋め込む

 

 

以上、Affinger6で個別記事にスライドショーを表示させる方法 でした。

 

スポンサーリンク

 

スポンサーリンク

 

t