質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

4812閲覧

WordPressでjqueryプラグインVegas2を実装する方法

rokko-65

総合スコア8

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2018/03/21 11:03

前提・実現したいこと

WordPress 子テーマでカスタマイズをしています。(使用しているテーマはレスポンシブタイプのテーマです。)
フロントページに固定ページを作成して、画面いっぱいに写真を表示したいです。
それを実現するために、Vegas2というプラグインを実装するのがいいのでないかと考えました。

このプラグインを実装する具体的な方法(プロセス)がよく分かりません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

Vegas2のサイトから、「VEGAS 2.4.0」をダウンロードしました。
https://vegas.jaysalvat.com/

ダウンロードしてみたはいいけれど、これらのファイルをどのようにワードプレスに入れていけばいいのかが分かりません。
ftpソフトから、どこかのフォルダに入れるのでしょうか?

インターネット上の関連サイトを調べてみた情報:
(1)<script src="http://code.jquery.com/jquery.min.js"></script>
を読み込ませるとのことですが、どこにどのようにして読み込ませればよいかが不明。

<head></head>内に、とのことですが、それは、どこにあるのでしょうか?  phpファイルの中でしょうか?

(2)WordPressのjqueryは普通のjqueryと少し扱い方が違うので注意が必要とのこと。

(3)Vegas2のサイト情報:bodyに下記コードを記述する必要があるとのこと。これはどのファイルのどのあたりに追記すればいいのでしょうか?

$("#example, body").vegas({
slides: [
{ src: "/img/slide1.jpg" },
{ src: "/img/slide2.jpg" },
{ src: "/img/slide3.jpg" },
{ src: "/img/slide4.jpg" }
]
});

よろしくお願いいたします。

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ダウンロードしてみたはいいけれど、これらのファイルをどのようにワードプレスに入れていけばいいのかが分かりません。
ftpソフトから、どこかのフォルダに入れるのでしょうか?

FTPでテーマのディレクトリ内に置いてください。

(1)
参考
独自のCSSやJSを読み込む
http://kwski.net/wordpress/780/

(2)
$jQueryにしないとエラーになる場合がある。

(3)
多分header.phpの最下部が最も望ましいかと。

と、こんなとこでしょうか。

追記
テーマのfunctions.phpに追加してください。

function add_vegas_scripts() { wp_register_script( 'vegas', get_stylesheet_directory_uri(). '/vegas/vegas.min.js' ); wp_register_style( 'vegas', get_stylesheet_directory_uri() . '/vegas/vegas.min.css' ); wp_enqueue_script( 'vegas' ); wp_enqueue_style( 'vegas' ); } add_action( 'wp_print_scripts', 'add_vegas_scripts' );

動かない場合はソースを見て正しく読み込まれているか確認してください。

投稿2018/03/21 11:54

編集2018/03/24 02:10
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rokko-65

2018/03/24 01:03

ご回答、ありがとうございました。 いただいたアドバイスを参考に、下記のプロセスで試してみましたが、袋小路にはまったみたいにお手上げの状態になりました。 やってみたことを下記いたします。 (3)のコードに誤りがあるのは分かっているのですが、どうすればよいのか分かりません。 また、全体のプロセスの考え方自体に何かが欠落しているのか?それとも何かがダブっている(不要なものがある)のか?とも思われます。 追加でヒントがいただけるならば幸甚でございます。 <やってみたこと> (1) Vegasのサイトからダウンロードしたvegas2フォルダをフォルダごとftpからワードプレスのテーマフォルダ(子テーマ)にドラッグアンドドロップでまるごと入れる。 (2) 子テーマのheader.phpの<head></head>内に下記を追記する。 <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/vegas/vegas.min.js"></script> <link rel="stylesheet" href="js/vegas/vegas.min.css"> (3) 子テーマのfunctions.phpに下記を追記する。 <?php function my_styles() { wp_enqueue_style( 'vegas', get_bloginfo( ‘vegas') . '/vegas.min.css', array('jquery')); } add_action( 'wp_enqueue_style', 'my_styles'); function my_scripts() { wp_enqueue_script( 'vegas', get_bloginfo( ‘vegas’) . '/vegas.min.js', array('jquery') ); } add_action( 'wp_enqueue_scripts', 'my_scripts'); ?> (4) 子テーマのheader.phpの最下部に下記を追記する。 <script> jQuery(“homepage").vegas({ slides: [ { src: 'メディアファイルのjpgへの直リンク' } ] }); </script> (5) 固定ページ作成(パーマリンク: homepage に設定)
退会済みユーザー

退会済みユーザー

2018/03/24 02:08

(1)は階層さえ合ってれば問題無いと思います。 (2)不要です。その記述を全て削除した状態でもjquery.min.jsまたはjquery.jsが読み込まれているはずなのでソースを確認してください。jqueryを重複して読み込むとエラーになります。 (3)紹介したサイトの例が… 内容をきちんと見てませんでした。すみません。コードの例を回答に追記します。 (4) パスさえ正しければ問題無いと思います。 (5) この件とは特に関係無い?
rokko-65

2018/03/24 05:07

ありがとうございました。 実はまだ解決できません。 (1)子テーマフォルダの直下に入れました。 (2)について、不要。追記せず。 (3) 追記していただいたコードをfunctions.phpに追記。 (4) について、下記の部分 jQueryのあとの(' ')の中にまだ問題があると思われます。 ここに何を記述すべきなのか? vegas2のサイトに記載のマニュアルのように、#example, body でも、または body だけにしてみてもだめでした。 ちなみに、使用しているワードプレステーマのcssの中に、body の表記が存在しているのを確認しました。 <script> jQuery('この部分の記述に問題があると思われます。').vegas({ slides: [ { src: 'メディアファイルのjpgへの直リンク' } ] }); </script> どんな感じでしょうか? よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2018/03/24 05:16 編集

どんなテーマを使ってますか? あとエラーが無いかブラウザの開発者ツールで確認してみてください。
rokko-65

2018/03/24 11:25

何度もお手数おかけしてすみません。 今、原因が分かりました。 今まで試行錯誤してきたなかで、ワードプレスのプラグイン「WP Vegas」をインストールしておりました。 これが「有効」になっていたため、コンフリクト?が発生していたものと思われます。 「停止」にしたら、実装されました。念のため再度「有効」にしたら、元の状態に戻りました。 このプラグインを削除することにしました。 ふぅ、こんなことがあるんですね。。。 大変助かりました。ありがとうございました。 <まとめ> WordPressにjQueryプラグインVegas2を実装する方法(全ページの背景に1枚の画像を表示する場合): (1) Vegasのサイトからダウンロードしたvegas2フォルダをフォルダごとftpソフト経由でワードプレスのテーマフォルダ内(子テーマ)にドラッグアンドドロップでまるごと入れる。 (2) 子テーマのfunctions.phpに下記を追記する。 <?php function add_vegas_scripts() { wp_register_script( 'vegas', get_stylesheet_directory_uri(). '/vegas/vegas.min.js' ); wp_register_style( 'vegas', get_stylesheet_directory_uri() . '/vegas/vegas.min.css' ); wp_enqueue_script( 'vegas' ); wp_enqueue_style( 'vegas' ); } add_action( 'wp_print_scripts', 'add_vegas_scripts' ); ?> (3) 子テーマのheader.phpの最下部に下記を追記する。 <script> jQuery('body').vegas({ slides: [ { src: 'メディアライブラリ内に保存してある画像データへの直リンク' }, ] }); </script>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問