うさぎのイラスト

ネットアンサー55備忘録

web技術を書いていきます

ギャラリー作成

-2015年06月30日-

表示したいサムネイルの大きさを決める、functions.phpに追記します。ここではsmall-thumbnailとして200px×200pxの大きさに設定しました。 150630_04 ダッシュボートの設定→メディアに進むと下記の画像の設定画面になります。『サムネイルのサイズ』を上で設定したサムネイルサイズよりも大きく設定してください。変更を保存をする。
『サムネイルのサイズ』はカスタムしたすべてのサムネイルサイズ共通でありますので注意しましょう。 150630_03 『ギャラリーを作成』から作成したい画像を取り込みます。
画像を取り込んだ時点でサムネイルサイズは決まってしまうみたいです、ですので、画像をとリこむ前に上の設定は必ず行ってください。 150630_01  右側にある『ギャラリーの設定』からギャラリーの表示の仕方を設定します。

リンク先:メディアファイル

カラム:適切な数字に

ランダム:ランダム表示

サイズ:一時的に「中」にする

150630_02 すると下記のようなコードが出来ます。
gallery link="file" size="medium" ids="582,579,578,577,576"
"medium"の部分を最初に設定したサムネイルサイズに書き換えよう、ここでは"small-thumbnail"となります。
更新して、表示してみよう。

ワードプレスのデフォルトのギャラリースタイル出力を停止する。

 add_filter( 'use_default_gallery_style', '__return_false' );
続いてスタイルcssを書き込む
.gallery {
    overflow: hidden;
}
.gallery-item {
    float: left;
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: 0;
}
.gallery-icon {
    text-align: center;
}
.gallery-caption {
    color: #21759B;
    font-size: 0.8em;
    margin: 0;
    text-align: center;
}
.gallery-columns-1 .gallery-item {
    width: 100%;
    margin-right: 0;
}
.gallery-columns-2 .gallery-item {
    width: 49%;
    margin-right: 1%;
}
.gallery-columns-3 .gallery-item {
    width: 32%;
    margin-right: 1%;
}
.gallery-columns-4 .gallery-item {
    width: 24%;
    margin-right: 1%;
}

http://test55.sakura.ne.jp/wp/wp-admin/plugins.php 作成したページがこちらです。
プラグインに『wp-jquery-lightbox』を使用しております。※インストールして有効化するだけでlightboxになります

参考サイト:wordpressのテーマの作り方