Blog

HOME > Web > Wordpress > カスタム投稿 > 【WordPress】プラグインを使わずにLightbox（slimbox）で拡大

【WordPress】プラグインを使わずにLightbox（slimbox）で拡大

2015/07/13

カスタム投稿 Wordpress

WordPressのカスタム投稿画像を拡大するために苦労したので備忘録として残します。

色々と検索しましたが、
まず、出てきたのが、「Lightbox Plus ColorBox」。
早速、インストールをしてみましたが、コメント欄のメディア追加でアップした画像しか使えないため却下。

そこで、さらに検索をして参考サイトを見つけました。
参考サイト１
WordPressでアイキャッチ画像とColorboxを利用してギャラリーサイトを作る

しかし、これも意図したものと違うため、さらに検索しました。
参考サイト２
[wp] 投稿サムネイルに記事やフル画像へのリンクを張る

この２サイトを参考にして、さらに自分でjQuery（Slimbox)を追加してカスタムをしました。

まず、slimbox2をダウンロード後、
themes＞テーマ＞jsにslimboxディレクトリを作成し、
slimbox2.jsとCSSフォルダーをアップしました。

ヘッダーに

<script src="<?php echo get_template_directory_uri(); ?>/js/slimbox/slimbox2.js"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/slimbox/css/slimbox2.css">

を追加

上記参考サイト２の

function the_linked_post_thumbnail($size = 'medium', $linkto = 'image', $attr=NULL)
{
    if ( has_post_thumbnail() ){
        $id = get_post_thumbnail_id();
         
        if(isset($linkto)){
             
            if($linkto == 'image'){
                $url = '<a href="'.wp_get_attachment_url($id).'" rel="lightbox-mainimg"';←ここを変更
                 
            }else{
                $url = '<a href="'.get_permalink(get_the_id()).'"';
            }
         
            print $url.' class="linked_post_thumbnail">'.get_the_post_thumbnail(get_the_id(),$size,$attr).'</a>';
         
        }else{
            print the_post_thumbnail($size,$attr);
        }
         
    }
}

quickboxをlightbox-mainimgに変更して、fanction.phpに追加

画像を表示する箇所に

<?php the_linked_post_thumbnail(); ?>

を追加。

しかし、これだけだとメイン画像（アイキャッチ画像）だけしか拡大しません。

カスタム投稿でアップしたサブ画像も拡大したいので、
さらに参考サイト１から

<?php if (get_post_thumbnail_id()): ?>
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) ,'full'); ?><a rel="gallery" href="<?php echo $src[0]; ?>" >
<?php the_post_thumbnail();?>
</a><?php endif; ?>

を参考に下記タグに書き換えて

<div class="thumb">
<?php if(post_custom('custom_image1')): ?>
<?php $src = wp_get_attachment_image_src( post_custom( 'custom_image1' ), 'custom-large' ); ?>
<a rel="lightbox-mainimg" href="<?php echo $src[0]; ?>" >
<?php echo wp_get_attachment_image( post_custom( 'custom_image1' ), 'custom-small' ); ?>
</a><?php endif; ?>
</div>
<div class="thumb">
<?php if(post_custom('custom_image2')): ?>
<?php $src = wp_get_attachment_image_src( post_custom( 'custom_image2' ), 'custom-large' ); ?>
<a rel="lightbox-mainimg" href="<?php echo $src[0]; ?>" >
<?php echo wp_get_attachment_image( post_custom( 'custom_image2' ), 'custom-small' ); ?>
</a><?php endif; ?>
</div>

を表示箇所に追加したところ
カスタム投稿のアイキャッチ画像とサブ画像がLightboxで拡大できました。

rel=の箇所は、アイキャッチ画像と同様に「lightbox-mainimg」にしています。

アイキャッチ画像も含めて、「PREV」「NEXT」で画像の切り替えができます。

事例をお見せできれば、わかりやすいと思いますが、
仕事の都合上、出せませんのでご勘弁ください。

でも、上記のタグを参考にすれば、だれでも簡単に（プラグインを使わずに）Lightbox拡大を実装できます。



カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ