Cocoonでj-queryを使う

目次(クリックでジャンプ)

使い方

入手

jQuery本体を入手する

こちらから

設置/呼び出し

サイト全体で使う場合

cocoonの「テーマの編集」の「javaScript」に記述する。

導入

CocoonにjQueryが入っているので、特別な作業はいらない。

記述

javaScript」欄に<script></script>無しで記述する

記事ごとに使う場合

記事内の「カスタムjavaScript」の欄に記述する。

導入

2つの方法がある

一つは自前のjQueryを準備する方法。

自分がレンタルしているサーバーにjQueryをアップしておく。ここではサイトの最上位のフォルダ(「public_html」wp-なんちゃらがある)に「my-content」フォルダを作り、その中に入れた。

そして、カスタムjava-script」の最初に読み込みのコードを書く

もう一つはネットワーク上に公開されているもの(CDN)を使う方法で、jQuery,Google,Microsoftの3つのCDNがある。

jQueryのCDNを導入する例

記述

wp投稿画面の「表示オプション」で「カスタムjava-script」を表示させておき、j-queryのコードをそのまま(<script></script>も)貼り付ければ良い。

cocoon設定

の「その他」タブにjqueryのバージョン設定があり、古いバージョンが選択されているけど、いいのかな？

cocoonの独自仕様？

cocoonではbodyが閉じられる直前のfooterの中にjqueryを読み込む。

一方、headタグ内に読み込むテーマも多いらしく、

その違いでプラグインが動かないことがあるようだ。

参照

使用例

左クリックで画像を切り替える

こちらのサイトをコードを試したら実現できた。感謝感謝

こちらのサイトのコードではうまく行かず

右クリック禁止

こちらのサイトやこちらのサイトを参考に

うまく行った。

アコーディオン

今までさんざんCSSのみで作ってきて遂に満足のいくものができたものの、部品ごとにIDを振らねばならず管理が面倒なので諦めた

参考にしたサイトは、コチラやこちら、こちら、コチラなど感謝感謝！

その1(CSSで非表示にしておいて→開→閉→開→…)

最初のサイトのバージョン(メニューの中身の初期値がCSSでdisplay:none;になっていて、メニュータイトルクリックで状態がトグルされる)

メニュー: メニューの中身
メニュー: メニューの中身
メニュー: メニューの中身
メニュー: メニューの中身

で、こちらを参考に改造して、既存のボックスのタイトル(box-title)をクリックすると中身(html上はタイトルの兄弟要素になっている)が開閉するようにしてみる。

タイトルに追加クラス「acd」を付与する形で

確認テスト(タッチで解答表示)

7人から4人選んで丸テーブルに座らせる
→( 7P4÷4=7×6×5×44=7×6×5=210通り )確認テスト(タッチで

あ、惜しい。最初開いているから閉じるのは出来るか。

acd指定されたタイトルの兄弟要素(pとdiv)をCSSでdisplay:none;にしてみると…できた♪ぬるっとしてるのが気持ち悪いが…

トグルをfadeToggleからtoggleにするとシンプルで好みだ。

その2

こちらは開閉のアイコンが回転してわかりやすい版

その1に加えて、トグルするごとに対象に「.open」という重畳クラスが付与されて、CSS上でopenクラスの記号(45°回転させた空白のafter要素の二辺のボーダー)を回転させている

Accordion Title 1

コンテントの中身

改造版

確認テスト(タッチで解答表示)

7人から4人選んで丸テーブルに座らせる
→( 7P4÷4=7×6×5×44=7×6×5=210通り )確認テスト(タッチで

これで行けそうだ

その3

ここまでで仕組みは分かったので、クリック部分を下(フッター)にしたボックスを作ってみる。

jQueryの記述を「 $(this).next().toggle();」から「 $(this).prevAll().toggle();」にして、()内を「.title」を除いて指定すればよいんじゃないかと。

調べたら、多分「$(this).prevAll().not(‘.box-title’).toggle();」これでタイトルを除いた前にある兄弟要素全部をトグルできる。

タイトル

ボックスの中身

できた。タイトルとフッターどっちをクリックしても開閉できる。

フッターのデザインを考えないといけないが、動作はOK

スポイラー(プルダウン)

基本形

(本体子テーマとjava-script.jsに記述)

開閉ボックスではなく、いわゆる「スポイラー」

文書の一部分が閉じられていて、スイッチフッターを押すと開くもの

フッターのデザインは、自作スポイラー(splシリーズ)かT-out2の「引き下ろし」にする。

疑似要素でjQueryを使えないようなので、フッターを手動(またはAddQuick)で追加する。

文章の地の部分。文章の地の部分。文章の地の部分。

文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。

この部分を閉じる。この部分を閉じる。この部分を閉じる。

文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。

こんな感じか

発展形

取っ手(フッター)をクリックすると、親要素に「open」クラスを付与トグルする。
フッターはdivのみで、表示内容はbefore要素のcontentに記述して、open状態では変える

CSSで本体とハンドルの「open」重畳クラスの開いた状態でのデザインを書いておく。

文章の地の部分。文章の地の部分。文章の地の部分。

文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。

この部分を閉じる。この部分を閉じる。この部分を閉じる。

できたけれど、基本形に比べてクラスを変えたりする分？動作がもっさりしているので、slideToggleではなくtoggleに変えた