♠
Page No.1
この記事は公開または最後に更新されてから1795日が経過しています。情報が古くなっている可能性があるのでご注意下さい。
投稿でアップロードした全ての画像によるスライドショーのjavascript は、『スライドショー』 で作っています。jQuery で作り直したというだけのこと。＊2016/10/05に改めて見直して改善したのでこの記事も全て書き直しています。
画像の数が少なければあらかじめjavascript の中に設定しておけばなんてことはなく簡単なことなのではありますが、その数が３万枚、４万枚ともなって、しかも毎日のようにアップロードしているとなると、とてもそんなことはやっていられないのです。そこでなんとか考えた手段。アクションフック save_post にて、php で画像アップロードフォルダにある画像のリストをxml で作成しておいて、javascript（jQuery）でそのxml ファイルを読み込んで画像ファイルの情報を得ようという考えです。
画像ファイルのリストを作成するにあたり、アップロードしてある全ての画像の情報を取得する場合には、WordPress は介さずに、php によってアップロードディレクトリをスキャンする方法か、もしくはSQL にてデータベースに登録してあるデータを取得する方法を使用しています。本来はget_posts() で得る方法が正当なのでしょうが、この場合欲しい情報は画像ファイルのurl だけに限られているので、取得するデータをSQL にて限定した方が、画像の枚数が大量にあった場合、パフォーマンス、そして負荷の面でも有効的なのではと考えました。そして、アップロードディレクトリをスキャンする方法では、投稿にアップロードしていない、たとえばヘッダー用の画像などもリストに含まれるので、どちらを使用するかは何が必要かで選択することになります。
アクションフック save_post のパラメータで得られる$post から投稿の内容を取得して、get_children() を使用すれば、投稿に張り付けられたものもそうでないものも、その投稿にアップロードされたすべての画像の情報を取得することができるので、その方法を使用しています。get_children() に関しては、«get_children()で投稿にアップロードした画像を全て表示» にて書いています。
これとは別に他の手段として使っているのが、サイト読み込みのテンプレートの始めの部分で、SQL によってあらかじめデータベースから200ほどの画像のurl を読み出し、それをつなげて一つの文字列とし、html の隠し要素にその文字列を仕込んでおいてjavascript から読み出して使うということ。200の画像を全部表示したらそのページを再読み込みさせることで、また新しい画像群の情報を得て、続けて表示しつづけさせるという具合です。まぁ、それはおいといて・・・。
・・・
その画像のリストであるxml を作成するためのphp は前述の『スライドショー』 のページにあるのですが・・・。xml ファイルを見てみると、なんということか2.6MB にもなってしまっている。これはあまりにも大きくなりすぎてよろしくないということで、リストのダイエットをすることに。xml は以下のようになっているのですが。
当たり前であり変わる事の無い”./wp-content/uploads/20” と”.jpg” の文字列はいらないし、xml のタグもかなり無駄。別にファイルの形式をxml にこだわる必要もありません。改行も無くしそれぞれのファイル名は記号ひとつで分けておいて、javascript で使うときにはsplit で配列にすればよいと。始めからそうすればよかったのですがね・・・。
ということで、書き直した画像リスト作成のphp 。SQL によってデータベースにあるデータを取得する処理も含めています。これは画像のリストファイルを改めて作り直したいときなどのために、画像リストファイルが存在しない時に動くようにしています。”if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )” の条件式はcodex の『関数リファレンス/add meta box 』 のページの中にも記載されている自動保存ルーチンかどうかをチェックする方法。実際の動作の詳細を実験してみると、機能しているもののこちらの意図するところには完全ではなく、投稿のpost_status を使用する方法に変更しました。
尚、ファイル操作においては、WP_filesystem のcodex にあったまんまを使用しています。WP_filesystem に関してはこちら→«WordPress のFilesystemとかAjaxとか» を。
<?php
function imagefile_to_xml ( $ post_id , $ post , $ update ) {
$ ptype = $ post -> post_status ;
if ( 'publish' === $ ptype or 'future' === $ ptype ) {
$ nyear = date ( 'Y' ) ;
$ nmonth = date ( 'm' ) ;
$ numary = array (
'01' => 'A' ,
'02' => 'B' ,
'03' => 'C' ,
'04' => 'D' ,
'05' => 'E' ,
'06' => 'F' ,
'07' => 'G' ,
'08' => 'H' ,
'09' => 'I' ,
'10' => 'J' ,
'11' => 'K' ,
'12' => 'L' ,
'13' => 'M' ,
'14' => 'N' ,
'15' => 'O' ,
'16' => 'P' ,
'17' => 'Q' ,
'18' => 'R' ,
'19' => 'S' ,
'20' => 'T' ,
'21' => 'U' ,
'22' => 'V' ,
'23' => 'W' ,
'24' => 'X' ,
'25' => 'Y' ,
) ;
$ access_type = get_filesystem_method ( ) ;
if ( $ access_type === 'direct' ) {
$ creds = request_filesystem_credentials ( site_url ( ) . '/wp-admin/' , '' , false , false , array ( ) ) ;
if ( ! WP_Filesystem ( $ creds ) ) {
return false ;
}
global $ wp_filesystem ;
$ i = 0 ;
$ fcount = 0 ;
$ newary = array ( ) ;
$ tmpstr = array ( ) ;
$ xmlfile = get_template_directory ( ) . '/imgs.php' ;
$ upload_dir = wp_upload_dir ( ) ;
if ( $ wp_filesystem -> exists ( $ xmlfile ) ) {
$ attachments = get_children ( array ( 'post_type' => 'attachment' , 'post_mime_type' => 'image' , 'post_parent' => $ post -> ID , 'orderby' => 'menu_order' ) ) ;
if ( ! empty ( $ attachments ) ) {
foreach ( $ attachments as $ attachment ) {
$ image = wp_get_attachment_image_src ( $ attachment -> ID , 'full' ) ;
$ uploadurl = $ upload_dir [ 'baseurl' ] . '/20' ;
$ tmpurl = str_replace ( array ( $ uploadurl , '.jpg' ) , '' , $ image [ 0 ] ) ;
$ tmpurl = explode ( '/' , $ tmpurl ) ;
$ tmpstr [ ] = $ numary [ $ tmpurl [ 0 ] ] . $ numary [ $ tmpurl [ 1 ] ] . $ tmpurl [ 2 ] ;
}
$ orilist = $ wp_filesystem -> get_contents ( $ xmlfile ) ;
$ oriary = explode ( ',' , $ orilist ) ;
$ newary = array_merge ( $ oriary , $ tmpstr ) ;
$ newary = array_unique ( $ newary ) ;
}
} else {
global $ wpdb ;
$ sql = << < HERE
SELECT a. guid FROM $ wpdb -> posts a, $ wpdb -> posts p
WHERE a. post_parent = p. ID
AND a. post_mime_type LIKE 'image/%'
AND a. post_type = 'attachment'
ORDER BY a. ID
HERE ;
$ attachments = $ wpdb -> get_results ( $ sql ) ;
$ uploadurl = $ upload_dir [ 'baseurl' ] . '/20' ;
foreach ( $ attachments as $ val ) {
$ tmpurl = str_replace ( array ( $ uploadurl , '.jpg' ) , '' , $ val -> guid ) ;
$ tmpurl = explode ( '/' , $ tmpurl ) ;
$ newary [ ] = $ numary [ $ tmpurl [ 0 ] ] . $ numary [ $ tmpurl [ 1 ] ] . $ tmpurl [ 2 ] ;
}
}
if ( $ newary ) {
$ outary = '' ;
foreach ( $ newary as $ val ) {
if ( strlen ( $ val ) > 6 ) {
$ outary .= $ val . ',' ;
}
}
$ wp_filesystem -> put_contents ( $ xmlfile , $ outary , FS_CHMOD_FILE ) ;
}
}
}
}
add_action ( 'save_post_post' , 'imagefile_to_xml' , 10 , 3 ) ;
function on_future_publish_post ( $ post ) {
remove_action ( 'save_post_post' , 'imagefile_to_xml' ) ;
}
add_action ( 'future_to_publish' , 'on_future_publish_post' , 10 , 1 ) ;
add_action ( 'pending_to_future' , 'on_future_publish_post' , 10 , 1 ) ;
?> Copy Expand ‹ › ‹ › ‹ › ‹ › ‹ ›
functions.php に記述し、投稿が保存される時のフックで投稿タイプが” post ” の時だけ有効になる、post type 指定限定型のフック、save_post_{$post->post_type} を使用。save_post フックに関しては、«投稿の自動保存(Autosave)の判別について» にていろいろやっていますのでそちらをご覧ください。
改行も入っていないので見ずらいですが、これにてサイズは600KB まで減らすことができました。2.6MB あったので 1/4 以下になったということです。効果は歴然でスライドショーの起動が速くなったのを体感できました。jQuery で使用するアップロードディレクトリのurl を抜き出して使うという事をしています。jQuery のなかで、テーマとかアップロードのディレクトリを得る方法はいくつかありますが、とりあえずここから得ているということなので、これはこれでちょっと重要な部分なのです。
そしていよいよ本題のjQuery となります。xml ファイルを読み込んでスライドショーを始める部分。
jQuery ( function ( ) {
var stx_sldshw = { } ;
stx_sldshw. img01 = new Image ( ) ;
stx_sldshw. nextimg = new Image ( ) ;
stx_sldshw. backnextimg = new Image ( ) ;
stx_sldshw. imgsrc = '' ;
stx_sldshw. imagesary = [ ] ;
stx_sldshw. tarlist = [ ] ;
stx_sldshw. pastimg = [ ] ;
stx_sldshw. slideID = null ;
stx_sldshw. callID = null ;
stx_sldshw. ctdwID = null ;
stx_sldshw. callctdwID = null ;
stx_sldshw. sumnum = 0 ;
stx_sldshw. nonenum = 0 ;
stx_sldshw. nonestr = '' ;
stx_sldshw. timenum = 0 ;
stx_sldshw. tarnum = 0 ;
stx_sldshw. backnum = 1 ;
stx_sldshw. sldflg = 0 ;
stx_sldshw. hzm_rasio = 0.95 ;
stx_sldshw. wzm_rasio = 0.8 ;
stx_sldshw. is_file_comp = 0 ;
stx_sldshw. enloadflg = 0 ;
stx_sldshw. imagescount = 0 ;
stx_sldshw. intarvalnum = 0 ;
stx_sldshw. ctnum = 0 ;
stx_sldshw. uploaddir = './wp-content/uploads/20' ;
stx_sldshw. numary = {
'A' : '01/' ,
'B' : '02/' ,
'C' : '03/' ,
'D' : '04/' ,
'E' : '05/' ,
'F' : '06/' ,
'G' : '07/' ,
'H' : '08/' ,
'I' : '09/' ,
'J' : '10/' ,
'K' : '11/' ,
'L' : '12/' ,
'M' : '13/' ,
'N' : '14/' ,
'O' : '15/' ,
'P' : '16/' ,
'Q' : '17/' ,
'R' : '18/' ,
'S' : '19/' ,
'T' : '20/' ,
'U' : '21/' ,
'V' : '22/' ,
'W' : '23/' ,
'X' : '24/' ,
'Y' : '25/'
} ;
if ( jQuery ( '#upimage' ) . length ) {
stx_sldshw. uploaddir = jQuery ( '#upimage' ) . attr ( 'src' ) ;
stx_sldshw. uploaddir = stx_sldshw. uploaddir. substr ( 0 , stx_sldshw. uploaddir. indexOf ( 'theme' ) ) + 'uploads/20' ;
}
stx_sldshw. slidestart = function ( file ) {
jQuery ( '#slctdown' ) . text ( 'Now loading and setting!' ) ;
if ( - 1 !== file. indexOf ( 'imgs.php' ) ) {
stx_sldshw. is_file_comp = 1 ;
}
jQuery. get ( file, function ( data ) {
stx_sldshw. datatreat ( data ) ;
stx_sldshw. firstimage ( ) ;
} ) ;
}
stx_sldshw. slidestart_nofile = function ( file, tag ) {
jQuery ( '#slctdown' ) . text ( 'Now loading and setting!' ) ;
jQuery. post (
file,
{ 'action' : 'get_imgs_list' , 'tag' : tag} ,
function ( data, status ) {
stx_sldshw. datatreat ( data ) ;
stx_sldshw. firstimage ( ) ;
}
) ;
}
stx_sldshw. datatreat = function ( datastr ) {
var i = 0 ,
j = 0 ,
arrdata,
arrdataleng;
arrdata = datastr. split ( ',' ) ;
arrdataleng = arrdata. length ;
for ( i = 0 ; i < arrdataleng; i++ ) {
if ( arrdata[ i ] . length > 4 ) {
stx_sldshw. imagesary[ j ] = arrdata[ i ] ;
stx_sldshw. tarlist[ j ] = 1 ;
++ j;
}
}
stx_sldshw. imagescount = stx_sldshw. imagesary. length ;
}
stx_sldshw. firstimage = function ( ) {
var rand;
if ( ! jQuery ( '#subupimage' ) . length ) {
jQuery ( '#popup' ) . append ( '<img src="" id="subupimage" />' ) ;
jQuery ( '#subupimage' ) . css ( {
position: 'absolute' ,
top: '2px' ,
left: '50%' ,
zIndex: '1' ,
} ) ;
}
stx_sldshw. timenum = parseInt ( jQuery ( '#intnum' ) . val ( ) ) ;
if ( stx_sldshw. timenum < 4 || stx_sldshw. timenum > 50 ) {
stx_sldshw. timenum = 10 ;
}
stx_sldshw. intarvalnum = stx_sldshw. timenum * 1000 ;
rand = Math. floor ( Math. random ( ) * 100000000 ) ;
stx_sldshw. tarnum = rand % stx_sldshw. imagesary. length ;
stx_sldshw. tarlist. splice ( stx_sldshw. tarnum, 1 , - 1 ) ;
stx_sldshw. pastimg[ 0 ] = stx_sldshw. tarnum;
stx_sldshw. imgsrc = stx_sldshw. imagesary[ stx_sldshw. tarnum ] ;
if ( stx_sldshw. is_file_comp ) {
stx_sldshw. imgsrc = stx_sldshw. numary[ stx_sldshw. imgsrc. substr ( 0 , 1 ) ] + stx_sldshw. numary[ stx_sldshw. imgsrc. substr ( 1 , 1 ) ] + stx_sldshw. imgsrc. slice ( 2 ) ;
}
stx_sldshw. imgsrc = stx_sldshw. uploaddir + stx_sldshw. imgsrc + '.jpg' ;
stx_sldshw. nextimg. src = stx_sldshw. imgsrc;
jQuery ( '#imageframe' ) . css ( 'visibility' , 'visible' ) ;
jQuery ( '#explain' ) . css ( 'visibility' , 'hidden' ) ;
jQuery ( '#slidestop' ) . css ( 'visibility' , 'visible' ) ;
jQuery ( '#rightarrow' ) . css ( 'visibility' , 'hidden' ) ;
jQuery ( '#leftarrow' ) . css ( 'visibility' , 'hidden' ) ;
stx_sldshw. slideshow ( ) ;
}
} ) ;
Copy Expand ‹ › ‹ › ‹ › ‹ › ‹ ›
page : 1 > 2 ☆このページはコンテンツの量が多いので分割しています
Comments feed
Trackback URL : https://strix.main.jp/wp-trackback.php?p=59439