WordPressテーマのAffinger6は、ライドショーを表示する機能がありますが限定的で個別記事内で画像を含むスライドショーを表示する機能がありません。 jQueryの"Slick"を使えば下に示す” Record Jackets Slide Show ”の様に簡単に個別記事に画像を含むスライドショーを表示させることが出来ます。
Record Jackets Slide Show
ロッシーニの「セビリアの理髪師」
ヴァルヴィーゾ揮者 ロッシーニ管弦楽団
ヴァルヴィーゾ揮者 ロッシーニ管弦楽団
ビバルディの”四季”
フェリックス・アーヨのイムジチ
フェリックス・アーヨのイムジチ
ヴェルディの「トロヴァトーレ」
セラフィン 指揮 スカラ座管弦楽団
セラフィン 指揮 スカラ座管弦楽団
チャイコフスキーの”悲愴”
カラヤン指揮 BPO
カラヤン指揮 BPO
Beethoven の 「第９」
カラヤン指揮 BPO
カラヤン指揮 BPO
プロコフィエフのVn協奏曲・第２番
Vn ヘンリック・シェリング
Vn ヘンリック・シェリング
マーラの「復活」
ショルティ 指揮 LSO
ショルティ 指揮 LSO
ベートーベンの交響曲７番
カラヤン指揮 BPO
カラヤン指揮 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 の２つです。
Affinger6で個別記事にスライドショーを表示させる方法
ブロックエディタで無く旧エディタでの説明になります。
スライドショーを設置する「投稿記事」（または、新規投稿記事を追加）を選択し、編集画面（旧エディタ）を開きます。
Step
1 head及びfooterに以下のコードを記述します。
個別記事でなく、ブログ全体に適用したい場合は、Affinger6の管理から、「その他」＞ 上級者のheadに出力するコードと</body>直前に出力するコード蘭に同じ様にCSSコード及びjQueryコードを記述します。
wp_head欄
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--slick.cssの読み込み--> <link rel="stylesheet" href="ドメイン/files/slick/slick.css"> <style> /*arrowの色*/ .slick-prev:before, .slick-next:before { color: black;} /*スライドショーの背景色*/ .slider_css2{background-color:#E8EAF6;} </style> |
wp_footer欄
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!--slick.min.jsの読み込み--> <script src="ドメイン/files/slick/slick.min.js"></script> <script type="text/javascript"> jQuery(function($){ $('.slider').slick({ autoplay: true,//自動でスライドショー autoplaySpeed: 2000,//スライドショー時間（2秒で設定） dots: false,//ドットの有無 infinite: true, // ループ再生 有効 slidesToShow: 3, // 一度に表示するスライドの数 3 slidesToScroll: 1, // 一度にスクロールするスライドの数 1 responsive: [{ // レスポンシブ対応 breakpoint: 700, // 横幅ブレイクポイント 700px settings: { // その場合のオプション設定 slidesToShow: 1, // 一度に表示するスライドの数 1 } }] }); }); </script> |
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]
スライドショー（プレビュー）