menu

Web制作のTipsとかアレコレ。

[WordPress]抜粋部分のブロック全体をリンクにする

2014.02.28

WS00022

ちょくちょく使いそうなのでメモ代わりに。

上の画像にあるものを一つのブロックとして、記事一覧を表示してる時に、抜粋部分をクリックしたら投稿シングルページヘ飛ぶようにするだけ。ワードプレスの標準機能でなんか便利な関数やテンプレートタグがあるのかどうかは知りませんが(汗)、Aタグ使いたくないのと、調べるよりコード書いたほうが早いし自由だしということで。

まずは、このブロックの、「抜粋」表示部分を囲んであるdivにクラスをあてて、同時にdata属性でパーマリンクURLをぶち込んでやる。基本的にそれだけのことです。

<div class="entry-excerpt" data-href="<?php the_permalink();?>">
  <?php the_excerpt(); ?>
</div>

entry-exerptというクラスはモチロン各ブロック共通ですね。

で、あとはjQueryでサクッと。

<script>
(function($){
  $(function(){
    $('div.entry-excerpt').click(function(){
        window.location = $(this).data('href');
        return false;
    });
  });
})(jQuery);
</script>

っとこんな感じですね。

ワードプレスでjQueryを記述する場合は、通常より一手間掛けてやると幸せになるということで、

(function($){
  $(function(){
      // ここにコードを記述
  });
})(jQuery);

他にも記述のしかたは何通りかありますが、私は大体このパターン使ってます。

あと、CSSの方でマウスカーソルがポインターになるように、

.entry-excerpt {
  cursor: pointer;
}

これは忘れずに。

もちろん、ブロック全体をリンクにするなら、一番外側のdivなりsectionなりarticleなりに対して設定してやればOKです。

とりあえず、以上。

Comments

  1. jimon より:

    こちらのコードを使うことで記事ブロック全体をリンク化させることが出来ました。
    ありがとうございます。

    1点お聞きしたいのですが、僕のサイトでは記事ブロックの中に『カテゴリー』『タグ』へのリンクが複数含まれています。
    これらのリンクをクリックした際には記事本文ではなく『各カテゴリー』『各タグ』のページに移動するように設定したいのですが、どのようにコードを変更したらよいでしょうか。

  2. @human より:

    コメントありがとうございます^o^

    ご質問についてですが、このスクリプトを記述した結果、ブロック内のリンクどれをクリックしても同じところに飛んでしまうので、カテゴリやタグのリンクに対してはこのスクリプトで指定した飛び先を回避したいということでよろしいですか?
    それでしたら、ブログ記事内のscriptタグ内の「return false;」を削除してみてください。
    (return false;の記述によってaタグのリンク先を無視させているので、それを止めるわけです。したがって、他にもaタグが入っていると、それらも有効になりますのでご注意を。)

    ちなみに、本ブログでは<article>〜</article>が一つのブロックで、hover時にブロック全体にopacityをかけてあるので全体にリンクを設定してあるように見せてありますが、実際にここにあるスクリプトでリンクを設定しているのは<div class=”entry-summary”>の部分だけです。
    カテゴリやタグのブロック(class=”entry-footer”)はこのスクリプトの影響外になってるんです。

    うまく行かない場合はまたお知らせ下さいませ。

    • jimon より:

      返答ありがとうございます。
      お答え頂いた内容で目的の動作をさせることができました。

      今後ともよろしくおねがいします(^^)

  3. @human より:

    jimon様

    少しでもお役に立てたなら幸いです^o^

please leave your comment...

▲ Page Top