wordpress_jquery_archive_a_name_main

WordPressでオリジナルテーマを作っていると、サイドバーにカテゴリアーカイブリンクや月刊アーカイブリンクなどを「wp_list_categories」や「wp_get_archives」といった記述で出力すると思います。
まぁ普通にリンクを出力するだけなら問題ないですが、もしデザインの関係で、共通ヘッダーに高さがあってリンクへ飛んだが記事の先頭から表示させたくてアンカー名を付けてページ内リンクさせるとなったときに、テンプレートタグではリンクの末尾にアンカー名付けれないよね。
なぜなら、URLではなくliダグからカテゴリを拾ってきて生成されるから。

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

ありますよね?

あります

よね?

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

そこをjQueryで強引につけちゃいます。

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

 
HTML

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

 
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でプログラムを書いてあげるのがいいよね。

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