bxSliderをWordPressに導入してキャプションをページのタイトルにする

WS001018
このエントリーをはてなブックマークに追加
PR

このサイトの上部に導入しているbxsliderを
キャプションを有効にした時に、ページのタイトルを表示するようにする方法

http://bxslider.com/

 

bxSlider×WordPressでスライドのキャプションをアイキャッチが登録されているページのタイトルにしてさらに文字数を制限する

 

いきなりコードを書きます

<div class="bxslider">
<?php query_posts('showposts=12&orderby=desc');?>
<?php if(have_posts()):while(have_posts()):the_post();?>

<a href="<?php the_permalink() ?>">
<?php $title= mb_substr($post->post_title,0,25); the_post_thumbnail(('medium'),array( 'alt' =>$title, 'title' => $title."・・")); ?>
</a>

<?php endwhile;endif;?>
</div>

 

 

これは、実際に上にあるものと同じコードです

WS001017

 

bxSliderでは通常対象とするものをulとしてそこにクラスをつけることが多いのですが
キャプションの上もリンクにしたかったので、divに変えてul、liをなくしました

ul、liがある場合は <li><a><img></a><li>で実際には
<li><a><img></a></li><span>caption </span>×枚数という形になります

ul、liを無くすと <a><img><span>caption</span></a>×枚数となるので全体にリンクがかかります

 

そして imgのtitleをbxsliderは読み込んでキャプションとして表示しますので
imgのtitleを記事のtitleに差し替えればOK

ついでに、キャプションが画面を覆い尽くしてはアイキャッチの意味が無いので
文字数制限もつけました

post_title,0,25 というところの25が文字の上限です

the_post_thumbnail((‘medium’),array( ‘alt’ =>$title, ‘title’ => $title.”・・”));
サムネイルにtitleを追加して内容は $title.”・・” としてタイトルのあとに一応省略を付け足しました

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)