- このトピックには9件の返信、2人の参加者があり、最後に
により10年、 8ヶ月前に更新されました。
-
投稿
-
-
こんばんは。
まだまだ初心者ですが、いつもSimplicityを使わせていただいています。
サイトにjQuery のスライダー（slick.js）を導入する為、作業をしています。
（ブログではなく固定ページを用いてサイトを作成しています。）色々調べて読み込む際のコードの作成（wp_enqueue_script関数）までは行ったのですが、コードの記述箇所を functions.php に書き込むように多くの情報公開していただいてるサイトで指示されていますが、Simplicityでもfunctions.php でよいでしょうか？
その場合の記述箇所ですが、どのあたりに記述するのが適切でしょうか？
初歩的な質問でしたら申し訳ありません。
宜しくお願い致します。
-
こんにちは。
スライダーを、どういったページのどの部分にどのように導入するのかなどの詳しいことがわからないと、ちょっと何とも言えないです。
何か見本となるようなページなどありますでしょうか。参考にしたページなども。ただ、個別のカスタマイズについては、あまりにもややこしいものになると、サポート対象外のものにもあるように、サポート外となる可能性もありますので、ご了承ください。
-
わいひらさん、お返事有難うございます。
スライダーは、ヘッダー画像の下、h1記事の上、この間に入れる予定です。
ページはトップページのみで表示させる予定です。見本にさせてもらったのは、以下の記事です。
【wp_enqueue_script関数について】
ワードプレスには元々、jQueryのスクリプト？が入っているので、その元々入っているものと競合しないようにする為、この関数を使ったほうが良いというもの。１、Web Design Recipis さんの
http://webdesignrecipes.com/anythingslider-in-wordpress-with-jquery/#&panel1-1２、ColdSleep Works さんの
http://works.coldsleep.jp/blog/wp_enqueue_script/【実装ソースについて】
http://peacepopo.net/blog-entry-191.html
の、「サンプルソース sample2.html」を見本として、必要箇所を自分のコードに変えて作成しました。動きは、この「サンプルソース sample2.html」のすぐ下にある、シンプルな横方向のスライダーを予定しております。
【slick.js】
http://kenwheeler.github.io/slick/色々な方がこのプラグイン？を勧められていたので、導入を決めました。
また、サポート対象外の件、承知致しました。
自分があまり基本的な事を理解していないのかもしれず、お手数をおかけして申し訳ありません。
勿論、可能な範囲で構いませんのでどうぞ宜しくお願い致します。
-
その場所でしたら、特にコードの書き方にこだわりがない場合は、子テーマに
before-main.phpテンプレートを作って、直接書き込むので良いのではないかと思います。
ちょうど、以下のようなカスタマイズす。（以下のはスライダーではなく画像ですが）
Simplicityカスタマイズ。3行でトップページだけにメインビジュアルを表示させる | ズボラしき世界
スライダーにするとこんな感じになるようです。
http://zubora.main.jp/慣れないうちは、wp_enqueue_script関数を使わずとも、直接ヘッダーやフッターでlinkやscriptで呼び出すのでも、呼び出す順番さえ間違わなければ特に問題ないかと思います。
なお、ヘッダーで呼び出すものは、header-insert.phpで。
フッターで呼び出すものは、footer-insert.phpでに書くと良い構造にSimplicityはなっています。 -
ひとつだけ注意を書いておきます。
slick.jsは(おそらく)プロトタイプで書かれているのでjQueryとコンフリクトを起こさないように注意して下さい。
まぁプラグイン側ではきちんと対応しているかと思うんですけれども。特にCDNなどからjQueryを呼び出しているような場合などなど。もし仮に実装した後、Simplicity側に問題が出た場合は、親テーマのjavascript.jsをカプセル化して書き換える必要がもしかしたら、もしかしたらですけれども出てくるかも知れません。
まぁSimplicityの方は$を使わずjQueryで書いてあるので問題ないと思うんですけどね。カプセル化とは、即時関数を使いまして、
(function($){ //...ここに内容 })(jQuery);こういうやつです。$はjQueryでっせと書いとくやつです。
-
あ、けど(slickの)中身見たらjQueryですね(笑)
-
わいひらさん、Hidekichiさん、有難うございます！
before-main.phpにコードを貼り付けてみても思ったように動作しない状況です。
（画像（正確には広告バナー画像）が縦方向に表示されてしまっています。）もしかしたらですが、ダウンロードしたSlickのファイルをアップロードした場所が間違っているのかもしれないのですが、、（参考 http://singoro.net/note/jq-slick/）、Simplicityの場合フォルダは、wp-content/themes/の中ではなく別の場所にあるのでしょうか？
また、わいひらさんに教えていただいた、こちらの参考ページhttp://zubora.main.jp/wordpress/simplicity-header-customize/
の、子テーマの中のimagesフォルダ というのは、Simplicityの場合、場所はどこになりますでしょうか？
お手数をおかけして申し訳ありませんが、どうぞ宜しくお願い致します。
-
-
わいひらさん、承知致しました。
有難うございますm(_ _)m僕には少しまだハードルが高かったようで中々うまく作動しない為、カルーセルプラグインを
検討してみたいと思います。 -
プラグインが見つからない場合は、自分で作るという手もあります。
参考: Simplicityを少し改造してみた part14 関連記事のスライダー化 スワイプPC・Mobile兼用
うちの記事ですけど(笑)
サンプルでは1つだけのカルーセルですが、上手くやれば次のサンプルのようにもできます。
サンプル: スキンを作ろうと思って色々と試していたものの残骸 | codepenレスポンシブで縦2段にしたり通常は横向き2列にしてみたりと言う感じになってます。
slickは多機能なので、いやそんなに機能はいらんねんって感じの場合は自作しても良いのではと思います。ちなみに、wp_enqueue_scriptはWordpressの関数なので、wordpress内であればどこでも動きますが、必ず毎回動作するのはどこかと考えると、子テーマfunctions.phpが一番管理もしやすくていいんじゃないでしょうか。
別にheader.phpでも良いと思います。通常のjqueryで動作するスライダーなんかは、まずjqueryを読み込んだ後、プラグインを読み込ませます。次に、どの部分をスライダーにするかを指定したりオプションを指定したりすることになるかと思いますが、これが間違いなく動作するのは、ヘッダでjQueryを読み込んで、header-insert.phpあたりでスクリプトタグ内にオプション等を書くって感じでしょうか。
ヘッダは真っ先に読み込まれるので、その後のhtmlが作られる時に既に情報が得られているわけですから、該当するセレクタが出現した時にjQueryが動作するようになります。
フッタ付近でプラグイン本体を読み込むのもイケると思います。ただしオプションはヘッダに書いておくのが良かろうかと思います。jQueryのプラグインは、プラグイン本体にデフォルトの動作があって、オプションがあった場合に設定をマージします。オプションを設定するということは、本来そのオプションの動作が欲しいわけですから、そのオプションが読み込まれないとデフォルトの動作で発動してしまうことがあるかも知れません。
プラグインがどのように、あるいはどのタイミングで発火するかのタイミングにもよりけりなんですけれども、たいていはヘッダに(jQuery・本体・オプション)どちらも書いておけば問題ないと思います。
wp_enqueue_scriptでjQueryとの依存関係を作り、jQueryが読み込まれたらプラグインが動作するようにして、そのプラグインの動作オプションはヘッダに書いておくってのでイケるんじゃないでしょうか？ここで気になるのがいわゆるレンダリングブロック云々ですよね。これはscript_loader_tagを利用して、deferなりasyncをつければ良いと思います。
参考: Simplicityを少し改造してみた 番外編 part5 スクリプトのレンダリングブロックを解消する
まぁこれもうちの記事なんですけど(笑)今どきのことなのでasyncでも問題ない場合が多いですが、個人的にはdeferの方が安全かと思います。
-
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。