jQuery Colorboxで表示されるタイトルを記事タイトルにする

本サイトはプロモーションが含まれている場合があります。

プラグインのカスタマイズ
colorboxで表示された例

写真をライトボックスで表示してくれるプラグインとして使っているのが「jQuery Colorbox」です。
元写真にリンクをした状態でクリックするとボワっと視覚的にもスタイリッシュなボックスで表示してくれます。
テーマもいくつかあってどれも素敵なんで使っています。

さて、このjQuery colorboxは通常、写真の下に入るテキストが“写真のタイトル”です。

colorboxで表示された例

でもって、この画像の設定での「タイトル」ってやつは画像の名前から自動で付けてくれます。
画像は半角英数の名前をつけるのが一般的なので、そのままにしてしまうと、jQueryColorboxでの表示のタイトルも半角英数になってしまいます。

画像を挿入する際の設置画面

画像の設定

個別記事なら投稿画面を「HTML」に切り替えて、画像ソースのtitle=“ここに表示させたいタイトル”として手動で変更できます。

ただ、トップページやカテゴリーページ等でサムネイルを使っていて、
それをライトボックスで表示させたい場合、jQuerycolorboxでは記事タイトルにしたい、ということもあります。

でもって、jQuerycolorbox自体をカスタマイズしてみようと思ったのですが、
自分で使い分けられた方がいいな、という結論に及びまして、
それならば、テンプレート自体の画像の読み込みでtitleを記事タイトルを入れるようにすればいいのではないか、と。

つまり、カテゴリテンプレートやインデックステンプレートで記事のサムネイルを表示させる際、

 

<?php if(has_post_thumbnail()): ?>
<a href="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" title="<?php the_title(); ?>"><?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?></a><?php else:?><img src="<?php bloginfo('template_url'); ?>/img/noimage.gif"><?php endif;?>

 

とすれば良いのです。
通常、サムネイルを呼びだすには、(アイキャッチが有効になっていることを前提として)

 

<?php the_post_thumbnail(); ?>

 

でいいわけですが、
上記の例ですと、
・画像のaltとtitleを記事タイトルに
・サムネイルの大きさを150×150の正方形型に
・サムネイルがあればサムネイルを、なければnoimege的な画像を挿入
という風にしています。

話を戻すと、サムネイルを入れるリンクして拡大表示させる際に

 

<a href="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" title="<?php the_title(); ?>">

 

とするわけです。
<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>は、サムネイルの元画像という意味。
title=”<?php the_title(); ?> で、リンクtitleを記事のタイトルにしているわけです。

コメント

タイトルとURLをコピーしました