wordpress_jquery_archive_a_name_main


WordPressでWebサイトやブログを構築する中で、HTMLやCSS、JavaScript、そしてWordPressの関数を利用してPHPスクリプトでオリジナルのテーマを作成する方もいるでしょう。
よくあるサイドバーにカテゴリアーカイブリンクや月刊アーカイブリンクを作成するときは、「wp_list_categories」や「wp_get_archives」といった関数を使って出力すると思います。

普通にリンクを出力するだけなら問題ないですが、もしデザインの関係で、共通ヘッダーに高さがあってリンクへ飛んだが記事の先頭から表示させたくてアンカー名を付けてページ内リンクさせるとなったときに、テンプレートタグではリンクの末尾にアンカー名を付けることができません。
なぜなら、URLではなくliダグからカテゴリを拾ってきて生成されるからです。

どうしても手が届かないところってありますよね？

WordPressの関数は便利ですが、さらにあんなことやこんなことしたいって時は自力でプログラム書くしかありません。

そこをjQueryを利用して、強引にリンクの末尾にアンカー名つけちゃいます。

例えば、
サイドバーにブログの月刊アーカイブのリンクを貼って#topの名前の付いたアンカーに飛ぶみたいにしてみましょうか。

まずは、HTMLから。

 HTML

<div id="sidebar">
  <?php wp_get_archives('type=monthly&post_type=post'); ?>
</div>



続いて、jQueryで生成してリンクの末尾にアンカー名をつけるプログラムです。

jQuery

$(function() {
  $('#sidebar li a').each(function() {
    var obj = $(this);
    var link = obj.attr("href");
    obj.attr("href",link+"#top")
  });
});



サイドバーのliのaにリンクが生成されるので、eachで要素1個ずつに対して順繰りに処理を行います。

はじめに変数objにセレクタのaタグを入れます。
次に変数linkにattrメソッドでURL取得して入れます。
最後はhref属性に#topというアンカー名をくっつけたURLとして、objのセレクタのURLを書き換える。

流れをざっくり言うと、
URLを取得してきてアンカー名を付けてあげて書き換えてあげる

といった感じ。

かゆいところに手が届かない時は、JavaScriptやjQueryまたはPHPでプログラムを書いてあげるのがいいよね。

うん、これでモテるはず。