maxImage Scaling Pluginをwordpressに実装させる方法を教えてください。

maxImage Scaling Pluginをwordpressで使用し、トップ画面にのみ使いたいです。

現状：
ローダー画像は動いています。
ですがスライドショーが動いてないです。

ソース：
header.php

html
1  <?php wp_head(); /* Template Name: WP */ ?>
2  <?php wp_enqueue_script( 'maximage', get_template_directory_uri() .'/js/jquery.maximage.min.js', array( 'jquery'),'1.8.3' ); ?>
3  <?php wp_enqueue_script( 'slicknav', get_template_directory_uri() .'/js/jquery.slicknav.min.js', array( 'jquery'),'1.10.2' ); ?>
4</head>
5<body <?php body_class(); ?>>
6  <header>
7    <div id="header">
8      <img src="<?php echo get_template_directory_uri(); ?>/images/loader.gif" class="loader" />
9      <img src="<?php echo get_template_directory_uri(); ?>/images/background01.jpg" alt="" class="bgmaximage" alt="" />
10      <img src="<?php echo get_template_directory_uri(); ?>/images/background02.jpg" alt="" class="bgmaximage" alt="" />
11      <img src="<?php echo get_template_directory_uri(); ?>/images/background03.jpg" alt="" class="bgmaximage" alt="" />
12      <div id="maincontent">
13        <h1>テストテスト</h1>
14      </div>
15    </div>
16  </header>

footer.php

  <?php /* Template Name: WP */ wp_footer(); ?€>
  <script>
    (function($){
      $(document).ready(function(){
        $('img.bgmaximage').maxImage({
          isBackground: true,
          slideShow: true,
          slideShowTitle: false,
          slideDelay: 5,
          overflow: 'auto',
          verticalAlign:'top'
        });
      })
    })(jQuery);
  </script>

css

css
1/* maximage__________________________________ */
2.bgmaximage{
3  position:fixed !important;
4  display:none;
5}
6#maincontent {
7  position: absolute;
8  top: 40px;
9  text-align: center;
10  z-index: 50;
11  width: 100%;
12}
13.loader {
14  position:absolute;
15  z-index:9999;
16  width:39px;
17  height:39px;
18  top:40%;
19  left:49%
20}

funstions.phpにはjQueryに関する設定はしていません。
スライドショーを使いたいのですがうまくいきません。
読み込み方に問題があるでしょうか？
画像のパスは問題ないようです。

追記

これはどうすればいいかわかりますか？
自分のテーマに組み込んで試しています。
ちなみにスライドショーはまだ動いていません。
画像表示はなしです。

html
1  <script>
2    jQuery(function($){
3      $('.bgmaximage').maximage({
4        isBackground: true,
5        slideShow: true,
6        slideShowTitle: false,
7        slideDelay: 1,
8        overflow: 'auto',
9        verticalAlign:'top'
10      });
11    });
12  </script>

さらに追記します。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta charset="UTF-8">
6<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3'></script>
7<style>
8.bgmaximage{
9  display:none;
10}</style>
11<script>
12jQuery(function(){
13  jQuery('img.bgmaximage').maxImage({
14    isBackground: true,
15    slideShow: true,
16    slideShowTitle: false,
17    slideDelay: 3,
18    overflow: 'auto',
19    verticalAlign:'top'
20  });
21});</script>
22</head>
23<body id="top">
24        <article>
25    <p><img alt="" src="http://webdesignrecipes.com/MdN-Samples/max-image/images/ajax-loader.gif" class="loader" width="66" height="66" /><br />
26<img src="http://webdesignrecipes.com/wp-content/uploads/2012/04/DSC03597.jpg" alt="" title="" width="1000" height="666" class="bgmaximage size-full" /><br />
27<img src="http://webdesignrecipes.com/wp-content/uploads/2012/04/DSC03310.jpg" alt="" title="" width="940" height="626" class="bgmaximage size-ful" /><br />
28    </article>
29<script type='text/javascript' src='http://webdesignrecipes.com/wp-content/themes/WebDesignRecipes/js/jquery.maximage.min.js?ver=1416354398'></script>
30</body>
31</html>

webデザインレシピさんで紹介されていたソースを出来得る限り省略させていただきました。
このソースを拡張子htmlで表示するとスライドショーが発生するんですね。
この原理がわかりません。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、ライブラリのドキュメントを読むことをオススメします。サンプルコードも掲載されていますし必読です。ドキュメント読んでも分からない場合は、デモページの HTML ソースをブラウザで表示して、真似てみるのがいいです。

また、動かない時は何かしらのエラーがでています。エラーの内容は、ブラウザのデベロッパーツールのコンソールで確認できます。エラー文をみることで、意外とあっさり解決することもあるので、デベロッパーツールと仲良くなるとよいと思います。

MaxImage 2.0
http://www.aaronvanderzwan.com/maximage/

取り急ぎ試してみましたが、正常に表示されました。本日時点で公開されているバージョンで試しています。私が、試した手順を以下に示します。

1. Twenty Fifteen の子テーマを作成

wp-content/themes 以下に twentyfifteen-child という名のディレクトリを作成
twentyfifteen-child 直下に style.css を作成
twentyfifteen-child 直下に functions.php を作成
twentyfifteen-child 直下に front-page.php を作成
twentyfifteen-child 直下に header-front-page.php を作成
twentyfifteen-child 直下に header-front-page.php を作成

2. 各ファイルに記述したソースコード

あくまでもサンプルですので、お好みにと環境に合わせ変えてみてください。

2-1 style.css

css
1/*
2Theme Name: Twenty Fifteen Child
3Theme URI: https://wordpress.org/themes/twentyfifteen/
4Author: KUCKLU
5Author URI: https://www.visualive.jp/
6Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
7Version: 1.0
8Template: twentyfifteen
9License: GNU General Public License v2 or later
10License URI: http://www.gnu.org/licenses/gpl-2.0.html
11Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
12Text Domain: twentyfifteen
13
14This theme, like WordPress, is licensed under the GPL.
15Use it to make something cool, have fun, and share what you've learned with others.
16*/
17
18body.home:before {
19    content: none;
20}
21
22#cycle-loader {
23    height: 32px;
24    left: 50%;
25    margin: -8px 0 0 -8px;
26    position: absolute;
27    top: 50%;
28    width: 32px;
29    z-index: 999;
30}
31
32#maximage {
33    display: none;
34    position: fixed !important;
35}

2-2 functions.php

php
1<?php
2function twentyfifteen_child_enqueue_styles() {
3    // Style of the Twenty Fifteen
4    wp_enqueue_style( 'twentyfifteen', get_template_directory_uri() . '/style.css' );
5    // Style of the Twenty Fifteen Child
6    wp_enqueue_style( 'twentyfifteen-child', get_stylesheet_directory_uri() . '/style.css', array( 'twentyfifteen' ) );
7    // Style of the MaxImage 2.0
8    wp_enqueue_style( 'jquery-maximage', get_stylesheet_directory_uri() . '/assets/css/jquery.maximage.min.css', array( 'twentyfifteen-child' ) );
9
10    // Script of the MaxImage 2.0
11    wp_enqueue_script( 'jquery-cycle-all', get_stylesheet_directory_uri() . '/assets/js/jquery.cycle.all.min.js', array( 'jquery' ), false, true );
12    wp_enqueue_script( 'jquery-maximage', get_stylesheet_directory_uri() . '/assets/js/jquery.maximage.min.js', array( 'jquery', 'jquery-cycle-all' ), false, true );
13    // Script of the Twenty Fifteen Child
14    wp_enqueue_script( 'twentyfifteen-child', get_stylesheet_directory_uri() . '/assets/js/apps.js', array( 'jquery', 'jquery-cycle-all', 'jquery-maximage' ), false, true );
15}
16add_action( 'wp_enqueue_scripts', 'twentyfifteen_child_enqueue_styles' );

2-3 apps.js

javascript
1jQuery(function ($) {
2    // Trigger maximage
3    $('#maximage').maximage({
4        onFirstImageLoaded: function(){
5            jQuery('#cycle-loader').hide();
6            jQuery('#maximage').fadeIn('fast');
7        }
8    });
9});

2-4 header-front-page.php

php
1<!DOCTYPE html>
2<html <?php language_attributes(); ?> class="no-js">
3<head>
4    <meta charset="<?php bloginfo( 'charset' ); ?>">
5    <meta name="viewport" content="width=device-width">
6    <link rel="profile" href="http://gmpg.org/xfn/11">
7    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
8    <!--[if lt IE 9]>
9    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
10    <![endif]-->
11    <?php wp_head(); ?>
12</head>
13
14<body <?php body_class(); ?>>

2-5 footer-front-page.php

php
1<?php wp_footer(); ?>
2
3</body>
4</html>

2-6 front-page.php

php
1<?php get_header( 'front-page' ); ?>
2
3<img id="cycle-loader" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/ajax-loader.gif" />
4<div id="maximage">
5    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/wall_portrait.jpg" alt="" width="1400" height="1050" />
6    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/coalesse.jpg" alt="Coalesse" width="1400" height="1050" />
7    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/laughing.jpg" alt="" width="1400" height="1050" />
8    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/roof_shooting.jpg" alt="" width="2048" height="1536" />
9    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/man.jpg" alt="" width="2048" height="1536" />
10    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/coffee_shop.jpg" alt="" width="2048" height="1536" />
11    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/gas_station.jpg" alt="" width="2048" height="1536" />
12</div>
13
14<?php get_footer( 'front-page' ); ?>

投稿2016/06/05 20:02

編集2016/06/07 13:26

退会済みユーザー

総合スコア0

makoto-n

2016/06/06 10:52

ありがとうございます。参考にしながら書いているのですが、fanctions.phpは記述した方がいいでしょうか？

makoto-n

2016/06/06 11:28

Parse error: syntax error, unexpected '[' in C:\Users\user-pc\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\twentyfifteen-child\functions.php on line 6 とは何でしょうか？ <?php function twentyfifteen_child_enqueue_styles() { // Style of the Twenty Fifteen wp_enqueue_style( 'twentyfifteen', get_template_directory_uri() . '/style.css' ); // Style of the Twenty Fifteen Child wp_enqueue_style( 'twentyfifteen-child', get_stylesheet_directory_uri() . '/style.css', [ 'twentyfifteen' ] ); // Style of the MaxImage 2.0 wp_enqueue_style( 'jquery-maximage', get_stylesheet_directory_uri() . '/assets/css/jquery.maximage.min.css', [ 'twentyfifteen-child' ] ); // Script of the MaxImage 2.0 wp_enqueue_script( 'jquery-cycle-all', get_stylesheet_directory_uri() . '/assets/js/jquery.cycle.all.min.js', [ 'jquery' ], false, true ); wp_enqueue_script( 'jquery-maximage', get_stylesheet_directory_uri() . '/assets/js/jquery.maximage.min.js', [ 'jquery', 'jquery-cycle-all' ], false, true ); // Script of the Twenty Fifteen Child wp_enqueue_script( 'twentyfifteen-child', get_stylesheet_directory_uri() . '/assets/js/apps.js', [ 'jquery', 'jquery-cycle-all', 'jquery-maximage' ], false, true ); } add_action( 'wp_enqueue_scripts', 'twentyfifteen_child_enqueue_styles' ); すみません、

退会済みユーザー

2016/06/07 13:26 編集

コピペしていただくのは良いのですが、そのソースコードをコピペすることで何が起きるのか、ソースコードの意味がどういう意味なのか、ある程度把握しておいた方がよいと思います。今後、何か問題が起きた時に、自己解決できないのは危ないと思います。あと、僕が悪い人で悪意のあるコードを仕込んでいたらどうします？（笑）問題の箇所は、PHP のバージョンが低いためのエラーです。PHP 5.3 以下を利用しているということですね。PHP 5.4 からは、`array( 'hoge', 'fuga' );` を `[ 'hoge', 'fuga' ];` という風に書けるようになりました。PHP 5.3 は、かなり前にサポートが切れていますので、そうそうに移行することをオススメします。 ※ コメントだとソースコードが読みにくいので、回答したソースコードを編集しました。

退会済みユーザー

2016/06/07 06:09

あ、回答へのコメントだと、マークダウン使えないんですね・・・。

makoto-n

2016/06/07 07:12

なるほど！ > 悪い人そうですねｗ以後気をつけます。 PHPはinstantWPを使用していますので本当によくわかっていません、、、。ありがとうございます。もうちょっと頑張ってみようと思います。

退会済みユーザー

2016/06/07 07:20 編集

> そうですねｗ > 以後気をつけます。 PHP からであれば、データベースへ簡単にアクセスできます。知らないでコピペして、顧客情報抜かれた！！なんていったら、目も当てられないですよね。そうならないためにも、提示されたソースコードがどういう動きをするのか、どういう意味なのか、分かっておいた方がいいと思います。（分からない場合は、コピペ前に PHP やWordPress のドキュメントをみて、関数が何をしているのか「ふーん」程度でも見ておくのがいいです。）頑張ってください！

makoto-n

2016/06/07 13:00

ありがとうございます。追記したのですが、これはどういう状況でしょうか？ maximageの使い方がよくわかりません。リファレンスによるとこのjQueryにはスライドショーの機能もあるみたいですが、それでもkuck1uさんは新たなjQueryを読み込んでいますよね、、。質問丸投げで申し訳ないのですが、御回答いただくとすごく助かります。

退会済みユーザー

2016/06/07 13:53 編集

まず、jQuery そのもには、スライドショーの機能という機能はないです。確かに、jQuery の機能を使えばスライドをさせることはできます。jQuery は、JavaScript を便利に簡単に使えるようにするためのライブラリです。なので、jQuery に依存しているライブラリを jQuery プラグインという言い方になります。MaxImage は jQuery プラグインなので、jQuery を MaxImage のスクリプトを読み込む前に読み込む必要があります。追記の内容ですが、cycle() という関数が存在しない為のエラーです。これは、MaxImage のドキュメントに書かれていますが、MaxImage は、jQuery と Cycle という 2 つのライブラリに依存しています。僕が回答に記した 2-2 functions.php をみていただくとわかりますが、jQuery と Cycle と MaxImage の 3 つのライブラリを読み込ませています。

makoto-n

2016/06/07 22:43

MaxImageプラグインそのものにスライドショーが付いていると思っていました。読解力の無さが目立ちます、、。

makoto-n

2016/06/08 11:56

追記させていただきました！

退会済みユーザー

2016/06/08 13:53 編集

まず、僕のコメントを読んでいただけてますか？ HTML だから動くとか関係ないです！ 2016/06/07 22:53 に僕がコメントを返していますが、読んでいただけてますか？ > 追記の内容ですが、cycle() という関数が存在しない為のエラーです。これは、MaxImage のドキュメントに書かれていますが、MaxImage は、jQuery と Cycle という 2 つのライブラリに依存しています。 > 僕が回答に記した 2-2 functions.php をみていただくとわかりますが、jQuery と Cycle と MaxImage の 3 つのライブラリを読み込ませています。

makoto-n

2016/06/08 14:16

はい、すみません。読んでいます。 Cycleに依存も一番上に書いてあります。 kuck1uさんが大変丁寧に教えてくださったソースも試しました。ですが動きませんでした。 MaxImageの存在を教えてくれたwebデザインレシピさんのソースを参照したところ、 Cycleの指定がなくても動くというのを確認しました。 jQueryにスライドショーがという言い方は不適切でした。 MaxImage2にスライドショーが埋め込まれているようです、と言いたかったです。ごめんなさい

退会済みユーザー

2016/06/08 23:03

> kuck1uさんが大変丁寧に教えてくださったソースも試しました。ということは、twentyfifteen-child という twentyfifteen の子テーマを作成して、私が回答したソースコードをそのまま記述して、twentyfifteen-child というテーマを動かしてみた！ということですか？ > Web デザインレシピさんのソースを参照したところ Web デザインレシピさんのサンプルでは MaxImage のバージョンが古いのではないでしょうか？いま、組み込みたいのは、MaxImage 2.0 ですよね？ Web デザインレシピさんのソースで動かしたいのであれば、 Web デザインレシピさんが読み込んでいる MaxImage をダウンロードして、自分の WordPress に組み込む必要があります。ライブラリは基本的に、ライブラリのバージョンが変われば、仕様も変わり、いままでのやり方で動かないということは当たり前です。仕様が変わっているのだから当然です。他のところで動いていて、同じようになってるのになんで動かないの？！と悩む前に、ご自身が利用しようとしているライブラリのバージョンがいくつで、現在の仕様はどのようになっているのかを、よく確認してみてください。それに、Web デザインレシピさんの記事は何年も前の記事ですよね。それだけ古い記事を参考にしても、最新バージョンの MaxImage は動かないと思いますよ。また、動くからといって、過去のバージョンを使用することはオススメしません。バージョンアップしているということは、バグの修正やセキュリティー上修正などが含まれている為です。

makoto-n

2016/06/09 13:00

うーん、試したは良いのですが、画像とかを設定する前にコンソールでエラーを発見しましたので、実際にwordpressのテーマとして動いている様を見たことないです。 webデザインレシピさんで紹介されているものにはそういった背景があるのですね。うまく理解せず失礼しました。はい、以降は最新バージョンを扱っていくことにします。ところで、cycle.jsのイベントハンドラ的なものは何でしょうか？私はfunctions.phpに記載する方法がいまいちわかっていないため、 header.phpやfooter.phpに記述したいのですが、イベントハンドラがわかりません。

makoto-n

2016/06/10 21:44

jquery-cycle-allみたいですね。ありがとうございました。

行動規範の内容に同意します