永遠少年症候群

永遠少年症候群

jQuery for wordpressメモ

【2013/7/31追記】現在はデザイン変更のためこの小説メニュー使ってません。

いじっていくなかでよくわかってなくて大変だったことのメモ。

前提:小説のメニューはサブループで各タームの記事を取得して並べているだけ。

やりたかったこと:パーマリンクを並べているだけのリストを開閉可能なツリービューリストに。

ツリービュー系のプラグインで理想に近いのがWP-dTreeだったが、ウィジェットだった上にタームのアーカイブは並べられなかった。

そこで、いろいろな方が公開している情報を参考にjQueryで対応することに。

手順を簡単に書くと、

  1. 必要なjsをダウンロード
  2. js中の「$」を「jquery」に書き換える←wordpressなら必須
  3. サーバーにアップする
  4. スクリプトを読み込ませる
  5. 必要なタグでツリーにしたいところを囲む

パーマリンクを並べているだけのリストの時はこんな感じ。

1.Treeviewで一式ダウンロードする。ついでにデモを見ておくといいかも。

2.必要なのはjquery.cookie.js、jquery.treeview.js、demo.jsの3つとcss、使う画像で、そのうちjquery.treeview.js、demo.jsの2つが「$」を「jquery」に書き換える必要有り。ついでにcssの新しいファイルをアップしたくないなら既存のcssに追記。
 参考:Shifftさんのwp_enqueue_scriptで外部のjQueryライブラリを使う

3.jsディレクトリとか、imagesディレクトリとか、適当な場所にアップする

4.内に書く方法とfunction.phpに書く方法があるらしいけど、好きな方でいいと思う。
私はfunction.php派なのでこうなる。

 参考:かちびと.netさんのWordPressのカテゴリーを開閉可能なツリー型にするWP-dTreeが上手く動かない時の代替法

5.必要な部分をタグで囲む。これも参考は前述したかちびと.netさん。jsダウンロードした時に見たデモで好きなのを選んで、それが必要な値をidとclassに入れる。
けっこうな種類あるから、デモページでF12とか押してulタグをコピペが一番無難です。

この手順を踏んでやっとこうなった。

ul、li、spanタグがそれぞれ増えてます。

タームの記事一覧を簡単に表示する方法がわかっていればこんな手間はいらなかったのかもしれない。
まだ初心者の今はこれでずらずら書くのが一番いいという個人的メモでした。