永遠少年症候群

MENU

about

サイトは趣味の創作サイトです。著作権は特に明記のない限り放棄していません。
リンクはご自由にどうぞ。
画像リンクの際はこちらのバナー又はロゴをご利用ください。

かいてるひと

ぶくま

Search

novel

ファンタジー、恋愛要素、ハッピーエンド多め。
たまに暴力やグロテスクな表現があります。
小説一覧

Series

他の形式で読む

ブクログのパブー……電子書籍形式。詩の投稿はこちらのみ。
小説家になろう……ガラケー、スマホ対応。pdf形式の縦書き対応。

jQuery for wordpressメモ
web関係 メモ ,

【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タグがそれぞれ増えてます。

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