アクセス数: | 今日: | 昨日:   記事数:996

HOMESITE MAPBOOKMARKTAG CLOUD

Tag:ループ

拾いもの画像右サイドバーとコンテンツ内にある『拾いもの画像』。
今まではちまちま手作業で追加・更新してたんですが、そろそろ面倒になってきたんでPHPで自動で表示させるようにしました。

そんな自動ループ表示方法は以下から。

表示する画像とサムネだけは自分で用意します。
『img』フォルダに全て入れる。
表示画像: 1.jpg、2.jpg、3.gif、4.png、5.jpg・・・と連番にする。
サムネイル画像: 1_s.jpg、2_s.jpg、3_s.jpg、4_s.jpg、5_s.jpgと、元の画像と同じ番号にして『_s』を付ける。

まずはサイドバーの表示コードから。

sidebar.php

<?php
  include( "style.php" );
  $handle = opendir( "img/" );

  while ( $fl = readdir($handle) ) {
    if ( $fl == "." || $fl == ".." || !preg_match("/(.)(jpg|jpeg|gif|png)/i", $fl) ) continue;
    $fileAry[] = $fl;
  }

  closedir( $handle );
  $cnt = count($fileAry) / 2;

  for ( $i = $cnt; $i > $cnt-10; $i-- ) {
    $file_name = $i;
    $code = "pic_".$i;
    $alt = $ary[$code];

    echo '<a href="http://kome-suki.net/img/'.$file_name.'" rel="lytebox[side_vacation]" title="'.$alt.'"><img src="http://kome-suki.net/img/'.$file_name.'_s" alt="'.$alt.'"></a>';
  }
?>
まずはincludeで『style.php』を読み込む。
(このファイルについては後で記述してます。)

countで『/ 2』(÷2)にしてるのは、同じフォルダ内にファイルを全て入れているから。

新しい画像順に10個だけ表示させたかったので、『for ( $i = $cnt; $i > $cnt-10; $i– ) {』にしていますが、全ての画像を表示させたい場合は『for ( $i = $cnt; $i > 0; $i– ) {』でいけます。
逆に古い順(番号の若い順)にしたい場合は、『for ( $i = 0; $i < $cnt; $i++ ) {』です。

$codeで番号の頭に『pic_』をつけています。
画像にtitleとaltを付けたかったので、別ファイルにて入力しています。
後はechoで出力して終わり。

画像ファイル形式はjpgだったりgifだったりpngだったりするので、拡張子は付けていません。
付けなくても表示されるんですね。
なもんで、これでOKにしました。

『rel="lytebox[side_vacation]"』はLightbox表示させる為のコードです。
必要なければ削除してください。

以下は先に書いていた『style.php』。
ファイルはテーマ内のsidebar.phpと同じ階層に置いています。

style.php (ファイル名は任意)
<?php
  $ary = array(
    "pic_1" => "あいうえお",
    "pic_2" => "かきくけこ",
    "pic_3" => "さしすせそ"
  );
?>

これで1.jpgのtitle、altに『あいうえお』、2.jpgに『かきくけこ』、3.jpgに『さしすせそ』が表示されます。

後はimgフォルダ内にポンポン画像を入れてUPしていくだけで、新しい画像を勝手に表示してくれます。

要は何がしたかったかと言うと・・・、
(1) 画像をUPするだけで、自動で新しい画像を表示して欲しかった。
(2) title、altを別ファイルで管理(入力)したかった。
  ⇒ sidebar.phpは触りたくなかった。

次に、ページ内のコード。
基本的には変わりありませんが、サイドバーと違ってincludeで読み込む時の記述、全ての画像を表示させると、ちょっと違います。
sidebar.phpと違う箇所は赤字で表記しています。

ページ内
<?php
  include( "wp-content/themes/default/style.php" );
  $handle = opendir( "img/" );

  while ( $fl = readdir($handle) ) {
    if ( $fl == "." || $fl == ".." || !preg_match("/(\.)(jpg|jpeg|gif|png)/i", $fl) ) continue;
    $fileAry[] = $fl;
  }

  closedir( $handle );
  $cnt = count($fileAry) / 2;

  for ( $i = $cnt; $i > 0; $i-- ) {
    $file_name = $i;
    $code = "pic_".$i;
    $alt = $ary[$code];

    echo '<a href="http://kome-suki.net/img/'.$file_name.'" rel="lytebox[picture_vacation]" title="'.$alt.'"><img src="http://kome-suki.net/img/'.$file_name.'_s'.$fl.'" alt="'.$alt.'"></a>';
  }
?>

使わない場合は良いけど、Lightboxのrelをサイドバーと別コードにしなければいけない点。
同じだとページ内+サイド部の画像数になってしまいます。

私のやりたい事は出来ました。
これで忌まわしい(?)手作業から開放されます。(´ω`)

最後に、PHP全く分からない私にコードを教えてくれた兄に感謝。
※私が考えたコードじゃないんですねー。www

Tag : , ,