北岳より鳳凰三山を望む


Date/Time: 2014:09:15 08:27:02
Camera: PENTAX
Model: PENTAX K-5 II s
Exporsure Time: 1/1250
FNumber: 5.6
Aperture Value: 5.0
Focal Length: 21.0

Close

y2blog » WordPress カスタムギャラリーの参考コード

4

30

2008

WordPress カスタムギャラリーの参考コード

カスタムギャラリーの参考コード


前回紹介したWordPressのギャラリーのカスタマイズの内容では、Wordpress のプログラミングを行った事のない人には難解だったと思います.参考用としてシンプルバージョンのソースコードを載せておきます.簡単な日本語のコメントもいれておきましたので参考にして下さい.必要最小限のシンプルバージョンですので、後は自分で色々と機能を追加してみて下さい.このコードはセキュリティー面には殆ど配慮していないので十分注意して下さい.


WordPress 2.5 と 2.5.1 では、ギャラリー(ショートコード)廻りでかなりの修正が入っているようです.今回の参考コードは 最新版の 2.5.1 を雛形にしています.
尚、このコードでは、 display, gid という2つのオプションを追加してあります.


display を指定しないとWordpress標準の表示方式で画像を表示します. display=”lightbox” と指定すると Lightbox を用いて画像を表示します.他に Lightview や ThickBox などを加える場合は、それに合わせて表示部分を拡張して下さい.

gid はグループ指定のオプションです.(指定方法については、前の記事を参考にして下さい)

スタイルのオプションを追加するには


このソースコードを、もう少し手を加えるとギャラリーのサムネイル画像の表示方法を拡張できるようになります.
bgs=”margin: 10px auto; background-color: #000;” などのように追加のスタイルを指定すると、デフォルトのスタイルをオーバライドすることができます.


    extract( shortcode_atts( array(
        'orderby'    => 'menu_order ASC, ID ASC',
        'id'         => $post->ID,
        'itemtag'    => 'dl',
        'icontag'    => 'dt',
        'captiontag' => 'dd',
        'columns'    => 3,
        'size'       => 'thumbnail',
        'display'    => 'standard',      // 今回追加したオプション(画像表示の方法)
        'gid'        => '',              // 今回追加したオプション(グループ指定)
        'bgs'        => '',              // 今回追加したオプション(背景全体の追加スタイル)

    ), $attr ) );


途中省略


$bgs = tag_escape($bgs); $output = apply_filters('gallery_style', " <style type='text/css'> .$myClassString { margin: auto; $bgs ; <======= この位置に追加スタイルを入れる } .$myClassString-item { float: left; margin-top: 10px; text-align: center; width: {$itemwidth}%; } .$myClassString img { border: 2px solid #cfcfcf; } .$myClassString-caption { margin-left: 0; } </style> <!-- see mygallery_shortcode() in wp-includes/media.php --> <div class='$myClassString'>");


【 前回のソースコードから 余分な "." を取り除きました 5/3 2008 】


カスタムギャラリーの参考コード



このソースコードのURL : https://y2tech.net/samples/SampleFunctions.html