【wordpress/cocoonカスタマイズ】Javascriptを触ろうとしたとき、さてどこを触ったらいいか

wordpress で javascriptCMS
Photo by Markus Spiske on Unsplash

Cocoonのカスタマイズを Sagasoon.

WordPressをご利用の皆さんにとってはかなり馴染みの深い Cocoon !

あれだけの機能を無料で提供してくれるんですから、そりゃもうね、すごいです。

今日はCocoonのjavascriptカスタマイズを1点だけご紹介。
jQueryで書いてたんだけど、$ is not defined. なんて怒られた! なんて方も必見です。

動きがほしい

WordPressなどでブログを書いていると、どうしても動きが欲しいことが多々あります。

ページのコンテンツしかり、トップのランディングページしかり。

何か動きを作りたいなーと。

自分でコードを入れたけど、jQueryで怒られたからやめてるんだよなー

という方、是非読んでいってください。対策あります。

Javascriptのサンプルなどがネットに出回っているのに、それが使えないというのも宝の持ち腐れですので、頑張っておきましょっ!

今日は、Javascriptを Cocoonで触る際のノウハウを紹介します。

Javascriptをどこにいれるか

たいてい、動きが欲しいと思うのは、ページや投稿ページ、はたまたトップページですかね。

私の場合は、ウィジェットに欲しいなーということもあります。

すべてで使う場合

例えば、全部のページで「動き」をつけたい場合、「外観」から「テーマエディター」を選択し、テーマファイルの「javascript.js」を広げて、ここに追加しましょう。
jQueryも使ってOKです。

注意したいポイントを1つ。
動きを沢山入れれば入れるほど、サイト自体、重くなります。注意しましょう。

どこかの固定ページで使う場合

「固定ページ」の記事へ行ってください。「カスタム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を使いたい場合の方法は、下記の記事を書きましたので、参考にしてみてください。

【wordpress/cocoon】jQueryの「$ is not defined」エラーを回避する方法
WordPressでCocoonを利用している場合、jQueryでエラーが起きたことありませんか?「$ is not defined」などのエラーが出て、ご自身のscriptや、巷のスクリプトが動かないなんてこと、経験ありませんか?今回は、その回避方法をご紹介いたします。

まとめ

いかがでしたでしょうか?
個別ページ、投稿別にjavascriptが触れるのがとても便利ですね。
次の記事では、少し高度なやり方も紹介する予定です。

ご参考になれば!

炭酸野郎

今日も何かを Sagasoonを運用してます。炭酸野郎です。
皆さんの「何か」が探せるべく、記事書いてます。
新卒で中堅SIerに就職→10年ちょいで退職→フリーランス→起業。副業としてのブログに目覚める(今ここ)。
時間作って、色々なことがやりたいお年頃です!

炭酸野郎をフォローする
CMS wordpress Cocoon IT
炭酸野郎をフォローする
SAGASOON

コメント

タイトルとURLをコピーしました