Cocoonのカスタマイズを Sagasoon.
WordPressをご利用の皆さんにとってはかなり馴染みの深い Cocoon !
あれだけの機能を無料で提供してくれるんですから、そりゃもうね、すごいです。
今日はCocoonのjavascriptカスタマイズを１点だけご紹介。
jQueryで書いてたんだけど、＄ is not defined. なんて怒られた！ なんて方も必見です。
動きがほしい
WordPressなどでブログを書いていると、どうしても動きが欲しいことが多々あります。
ページのコンテンツしかり、トップのランディングページしかり。
何か動きを作りたいなーと。
自分でコードを入れたけど、jQueryで怒られたからやめてるんだよなー
という方、是非読んでいってください。対策あります。
Javascriptのサンプルなどがネットに出回っているのに、それが使えないというのも宝の持ち腐れですので、頑張っておきましょっ！
今日は、Javascriptを Cocoonで触る際のノウハウを紹介します。
Javascriptをどこにいれるか
たいてい、動きが欲しいと思うのは、ページや投稿ページ、はたまたトップページですかね。
私の場合は、ウィジェットに欲しいなーということもあります。
すべてで使う場合
例えば、全部のページで「動き」をつけたい場合、「外観」から「テーマエディター」を選択し、テーマファイルの「javascript.js」を広げて、ここに追加しましょう。
jQueryも使ってOKです。
動きを沢山入れれば入れるほど、サイト自体、重くなります。注意しましょう。
どこかの固定ページで使う場合
「固定ページ」の記事へ行ってください。「カスタムJavaScript」という欄があります。ここにJavascriptを入れましょう。
jQueryも使ってOKです。
どこかの投稿ページで使う場合
固定ページと同じ扱いです。「投稿」の記事へ行ってください。「カスタムJavaScript」という欄があります。ここにJavascriptを入れましょう。
jQueryも使ってOKです。
ウィジェットに入れたいとき（お手軽版）
まず、ウィジェットに、カスタムHTMLを配置します。その中のベースとなるHTMLを書きましょう。
<div id="custom_panel"></div>
その後、「外観」から「テーマエディター」を選択し、テーマファイルの「javascript.js」を広げて、ここにjavascriptを記載します。
先ほど、custom_panel の id で作成したウィジェットに対して、何かアクションを起こす Javascript を記載する形です。
jQueryも使ってOKです。
外観にJavascriptを書かなくても ウィジェットに直接書いてもOKです。その場合、最初のうちはjQueryは使わないほうが良いです。
「$ is not defined」で怒られたなんて方も多いのではないでしょうか？
そんな方、jQueryを使いたい場合の方法は、下記の記事を書きましたので、参考にしてみてください。
まとめ
いかがでしたでしょうか？
個別ページ、投稿別にjavascriptが触れるのがとても便利ですね。
次の記事では、少し高度なやり方も紹介する予定です。
ご参考になれば！
コメント