スマホのギャラクシS8で写真を撮ると、ファイル名は撮影日時の数字の羅列になる。
そのファイル名を自分で変更することは全くしていない。
WordPressで画像をアップロードすると、自動的にファイル名が画像のtitle属性として登録される。
マウスポインターを画像の上に置くと、画像のタイトルがヒント表示されるが、数字の羅列だけだと面白くない。
記事に写真を挿入する時に、キャプションは記入することが多いが、ALT やTITLE 欄にはほとんど記入していなかった。
それで、ALTやTITLEが未入力の場合に、自動的にキャプションと同じになるようにしてみた。
キャプションが未設定の場合には、その記事のタイトルがALTとTITLEに挿入される。
functions.php に追記する内容：
//////////////////////////////////////////////////
//「代替えテキスト」に入力のある場合はその内容を、無い場合はaltタグとtitleタグにcaptionを挿入する
//////////////////////////////////////////////////
function auto_title_filter( $html, $id, $caption, $title, $align, $url, $size, $alt ){
if ( $alt !== '' ) {
return preg_replace('|alt="[^"]*"|U', '$1 alt="'.esc_attr($alt).'" title="'.esc_attr($alt).'" ', $html,1);
}
else {
return preg_replace('|alt="[^"]*"|U', '$1 alt="'.esc_attr($caption).'" title="'.esc_attr($caption).'"', $html,1);
}
}
add_filter( 'image_send_to_editor', 'auto_title_filter', 1, 8 );
//////////////////////////////////////////////////
//記事内の空alt、titleを自動で記事タイトルにする
//////////////////////////////////////////////////
function auto_alt_filter($html) {
global $post;
$post_title = get_the_title();
if ( $post_title !== '' ) {
$html = str_replace('alt=""', 'alt="'.esc_attr($post_title).'"', $html);
$html = str_replace('title=""', 'title="'.esc_attr($post_title).'"', $html);
$html = preg_replace('/title="201[0-9][0-9][0-9][0-9][0-9]_[0-9][0-9][0-9][0-9][0-9][0-9]-[0-9]*"/', 'title="'.esc_attr($post_title).'"', $html);
$html = preg_replace('/alt="201[0-9][0-9][0-9][0-9][0-9]_[0-9][0-9][0-9][0-9][0-9][0-9]-[0-9]*"/', 'alt="'.esc_attr($post_title).'"', $html);
$html = preg_replace('/title="DSC[0-9][0-9][0-9][0-9][0-9]"/', 'title="'.esc_attr($post_title).'"', $html);
$html = preg_replace('/alt="DSC[0-9][0-9][0-9][0-9][0-9]"/', 'alt="'.esc_attr($post_title).'"', $html);
$html = preg_replace('/title="P[0-9][0-9][0-9][0-9][0-9]*"/', 'title="'.esc_attr($post_title).'"', $html);
$html = preg_replace('/alt="P[0-9][0-9][0-9][0-9][0-9]*"/', 'alt="'.esc_attr($post_title).'"', $html);
$html = preg_replace('/title="(.*)" aria-describedby/', 'title="$1" alt="$1" alt="(.*)" aria-describedby/', 'title="$1" alt="$1" aria-describedby', $html);
$html = preg_replace('/alt="(.*)" \/><\/a>/', 'title="$1" alt="$1" /></a>', $html);
preg_replace('/alt="(.*)" \/><\/a>/', 'title="$1" alt="$1" /></a>', $input_lines);
}else{
$html = str_replace('alt=""', 'alt="説明画像です"', $html);
$html = str_replace('title=""', 'title="説明画像です"', $html);
}
return $html;
}
//wppサムネイル取得先変更 暦変更
function change_wpp_thumb( $content, $p ) {
$thumb_html = get_the_post_thumbnail( $p->id, 'wpp348x208' );
preg_match( '!src="([^"]+)"!', $thumb_html, $thumb );
if (has_post_thumbnail($p->id)){//投稿にサムネイルがある場合の処理
$new_content = preg_replace('!<img(.+?)? src="[^"]+"(.+?)>!', '<img$1 src="' . $thumb['1'] . '"$2 alt="' . esc_attr($p->title) . '" title="' . esc_attr($p->title) . '" >', $content );
} else {//サムネイルなしの場合の処理
$new_content = preg_replace('!<img(.+?)? src="[^"]+"(.+?)>!', '<img$1 src="https://makotoiwasaki.com/wp-content/themes/jstork_custom/no_thumb.jpg"$2 alt="' . esc_attr($p->title) . '" title="' . esc_attr($p->title) . '" >', $content );
}
$new_content=str_replace("2019.", "2679.", $new_content);
$new_content=str_replace("2018.", "2678.", $new_content);
$new_content=str_replace("2017.", "2677.", $new_content);
$new_content=str_replace("2016.", "2676.", $new_content);
$new_content=str_replace("2015.", "2675.", $new_content);
$new_content=str_replace("2014.", "2674.", $new_content);
return $new_content;
}
if ( !is_admin() ) add_filter( 'wpp_post', 'change_wpp_thumb', 10, 2 );//管理画面では除外
/DocumentRoot/wp-content/plugins/jetpack/modules/tiled-gallery/tiled-gallery/templates/partials/item.php
を次のように編集。
<?php
$add_link = 'none' !== $this->link;
global $post;
$post_title = get_the_title();
// We do this for accessibility. Titles without alt's break screen readers.
if ( empty( $item->image_alt ) && ! empty( $item->image_title ) ) {
$item->image_title = $item->image_alt;
}
?>
<div class="tiled-gallery-item<?php if ( isset( $item->size ) ) echo " tiled-gallery-item-$item->size"; ?>">
<?php if ( $add_link ): ?>
<a href="<?php echo $item->link; ?>" title="<?php echo esc_attr( $item->image_alt ); ?>" data-width="<?php echo esc_attr( $item->meta_width() ); ?>" data-height="<?php echo esc_attr( $item->meta_height() ); ?>">
<?php endif; ?>
<meta itemprop="width" content="<?php echo esc_attr( $item->image->width ); ?>">
<meta itemprop="height" content="<?php echo esc_attr( $item->image->height ); ?>">
<img
<?php $this->partial( 'carousel-image-args', array( 'item' => $item ) ); ?>
src="<?php echo esc_url( $item->img_src ); ?>"
width="<?php echo esc_attr( $item->image->width ); ?>"
height="<?php echo esc_attr( $item->image->height ); ?>"
data-original-width="<?php echo esc_attr( $item->image->width ); ?>"
data-original-height="<?php echo esc_attr( $item->image->height ); ?>"
title="<?php echo esc_attr( $item->image_alt ); ?>"
alt="<?php echo esc_attr( $item->image_alt ); ?>"
style="width: <?php echo esc_attr( $item->image->width ); ?>px; height: <?php echo esc_attr( $item->image->height ); ?>px;"
/>
<?php if ( $add_link ): ?>
</a>
<?php endif; ?>
<?php if ( $this->grayscale == true ): ?>
<?php if ( $add_link ): ?>
<a href="<?php echo $item->link; ?>" title="<?php echo esc_attr( $item->image_alt ); ?>" data-width="<?php echo esc_attr( $item->meta_width() ); ?>" data-height="<?php echo esc_attr( $item->meta_height() ); ?>">
<?php endif; ?>
<meta itemprop="width" content="<?php echo esc_attr( $item->image->width ); ?>">
<meta itemprop="height" content="<?php echo esc_attr( $item->image->height ); ?>">
<img
class="grayscale"
src="<?php echo esc_url( $item->img_src_grayscale ); ?>"
width="<?php echo esc_attr( $item->image->width ); ?>"
height="<?php echo esc_attr( $item->image->height ); ?>"
data-original-width="<?php echo esc_attr( $item->image->width ); ?>"
data-original-height="<?php echo esc_attr( $item->image->height ); ?>"
itemprop=""
title="<?php echo esc_attr( $item->image_alt ); ?>"
align="left"
alt="<?php echo esc_attr( $item->image_alt ); ?>"
style="width: <?php echo esc_attr( $item->image->width ); ?>px; height: <?php echo esc_attr( $item->image->height ); ?>px;"
/>
<?php if ( $add_link ): ?>
</a>
<?php endif; ?>
<?php endif; ?>
<?php if ( trim( $item->image->post_excerpt ) ): ?>
<div class="tiled-gallery-caption wp-caption-text" itemprop="caption description">
<?php echo wptexturize( $item->image->post_excerpt ); ?>
</div>
<?php endif; ?>
</div>
これで本文中の画像の殆どのタイトルが数字の羅列でなくなった。
タイルギャラリーのキャプションがピコピコ隠れるのを止める
タイルギャラリーの画像のキャプションがマウスの動きによって隠れたり、現れtたりするのがうざいので常時表示されているようにする。
/wp-content/plugins/jetpack/_inc/build/tiled-gallery/tiled-gallery/tiled-gallery.min.js
の
t.prototype.addCaptionEvents = function() {
this.gallery.find(".tiled-gallery-caption").hide(),
this.gallery.find(".tiled-gallery-item").hover(function() {
e(this).find(".tiled-gallery-caption").stop(!0, !0).slideDown("fast")
}, function() {
e(this).find(".tiled-gallery-caption").stop(!0, !0).slideUp("fast")
})
}の部分を消す。
t.prototype.addCaptionEvents = function() {
}そしてMinify する。
!function(e){function i(){this.galleries=[],this.findAndSetupNewGalleries()}function t(e){this.gallery=e,this.addCaptionEvents(),this.resize(),this.gallery.removeClass("tiled-gallery-unresized")}i.prototype.findAndSetupNewGalleries=function(){var i=this;e(".tiled-gallery.tiled-gallery-unresized").each(function(){i.galleries.push(new t(e(this)))})},i.prototype.resizeAll=function(){e.each(this.galleries,function(e,i){i.resize()})},t.prototype.resizeableElementsSelector=".gallery-row, .gallery-group, .tiled-gallery-item img",t.prototype.addCaptionEvents=function(){},t.prototype.getExtraDimension=function(e,i,t){if("horizontal"===t){var n="border"===i?"borderLeftWidth":i+"Left",r="border"===i?"borderRightWidth":i+"Right";return(parseInt(e.css(n),10)||0)+(parseInt(e.css(r),10)||0)}if("vertical"===t){var o="border"===i?"borderTopWidth":i+"Top",a="border"===i?"borderBottomWidth":i+"Bottom";return(parseInt(e.css(o),10)||0)+(parseInt(e.css(a),10)||0)}return 0},t.prototype.resize=function(){var i=this.gallery.data("original-width"),t=this.gallery.parent().width(),n=Math.min(1,t/i),r=this;this.gallery.find(this.resizeableElementsSelector).each(function(){var i=e(this),t=r.getExtraDimension(i,"margin","horizontal"),o=r.getExtraDimension(i,"margin","vertical"),a=r.getExtraDimension(i,"padding","horizontal"),l=r.getExtraDimension(i,"padding","vertical"),s=r.getExtraDimension(i,"border","horizontal"),d=r.getExtraDimension(i,"border","vertical"),c=i.data("original-width")+a+s+t,u=i.data("original-height")+l+d+o;i.width(Math.floor(n*c)-t).height(Math.floor(n*u)-o)})};var n=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;e(document).ready(function(){var t=new i;e("body").on("post-load",function(e,i){"string"==typeof i&&"resize"===i?t.resizeAll():t.findAndSetupNewGalleries()}),e(document).on("page-rendered.wpcom-newdash",function(){t.findAndSetupNewGalleries()}),window.chrome&&n?function(i){var t=!1,r=null;function o(){i.resizeAll(),t&&n(o)}e(window).resize(function(){clearTimeout(r),t||n(o),t=!0,r=setTimeout(function(){t=!1},15)})}(t):function(i){e(window).resize(function(){i.resizeAll()})}(t),"undefined"!=typeof wp&&wp.customize&&wp.customize.selectiveRefresh&&wp.customize.selectiveRefresh.bind("partial-content-rendered",function(e){wp.isJetpackWidgetPlaced(e,"gallery")&&t.findAndSetupNewGalleries()})})}(jQuery);
modules/tiled-gallery/tiled-gallery/tiled-gallery.js
にも同様の記述箇所があるが、ここを編集しても反映されない。
Photoswipe の拡大画像のキャプションに title が挿入されないようにする
画像のキャプションを付けていない時に、画像のtitleに記事のタイトルを挿入していると、記事のタイトルがキャプションとして表示されるのを停止すべし。
lightbox-photoswipe/js/frontend.min.js
を次のように編集する。
jQuery(function(t){var o=window.PhotoSwipe,e=window.PhotoSwipeUI_Default;t("body").on("click","a[data-width]:has(img)",function(t){o&&e&&(t.preventDefault(),n(!1,this,!1,!1))});var n=function(n,i,s,l){var r,a,p,c,h=t(".pswp").get(0);p=function(o){var e,n=t("body").find("a[data-width]:has(img)"),i=[];return n.each(function(n){var s=t(this);caption=s.attr("data-caption"),null==caption&&(describedby=s.children().first().attr("aria-describedby"),null!=describedby?(description=t("#"+describedby),null!=description&&(caption=description.text())):(describedby=s.children().first().attr("figcaption"),null!=describedby&&(caption=s.next().text()))),null==caption&&(s.next().is(".wp-caption-text")?caption=s.next().text():s.parent().next().is(".wp-caption-text")?caption=s.parent().next().text():s.parent().next().is(".gallery-caption")?caption=s.parent().next().text():s.next().is("figcaption")?caption=s.next().text():s.parent().parent().next().is("figcaption")?caption=s.parent().parent().next().text():caption=""),i.push({src:s.attr("href"),w:s.attr("data-width"),h:s.attr("data-height"),title:caption,getThumbBoundsFn:!1,showHideOpacity:!0,el:s}),o===s.get(0)&&(e=n)}),[i,parseInt(e,10)]}(i),c=0==n?p[1]:n,p=p[0],a={index:c,getThumbBoundsFn:!1,showHideOpacity:!0,loop:!0,tapToToggleControls:!0},"1"==lbwps_options.share_facebook||"1"==lbwps_options.share_twitter||"1"==lbwps_options.share_pinterest||"1"==lbwps_options.share_download?(a.shareEl=!0,a.shareButtons=[],"1"==lbwps_options.share_facebook&&("1"==lbwps_options.share_direct?url="https://www.facebook.com/sharer/sharer.php?u={{image_url}}":url="https://www.facebook.com/sharer/sharer.php?u={{url}}",a.shareButtons.push({id:"facebook",label:lbwps_options.label_facebook,url:url})),"1"==lbwps_options.share_twitter&&("1"==lbwps_options.share_direct?url="https://twitter.com/intent/tweet?text={{text}}&url={{image_url}}":url="https://twitter.com/intent/tweet?text={{text}}&url={{url}}",a.shareButtons.push({id:"twitter",label:lbwps_options.label_twitter,url:url})),"1"==lbwps_options.share_pinterest&&a.shareButtons.push({id:"pinterest",label:lbwps_options.label_pinterest,url:"http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}"}),"1"==lbwps_options.share_download&&a.shareButtons.push({id:"download",label:lbwps_options.label_download,url:"{{raw_image_url}}",download:!0})):a.shareEl=!1,"1"==lbwps_options.close_on_scroll&&(a.closeOnScroll=!1),"1"==lbwps_options.close_on_drag&&(a.closeOnVerticalDrag=!1),"1"==lbwps_options.history?a.history=!0:a.history=!1,"1"==lbwps_options.show_counter?a.counterEl=!0:a.counterEl=!1,"1"==lbwps_options.show_fullscreen?a.fullscreenEl=!0:a.fullscreenEl=!1,"1"==lbwps_options.show_zoom?a.zoomEl=!0:a.zoomEl=!1,"1"==lbwps_options.show_caption?a.captionEl=!0:a.captionEl=!1,"1"==lbwps_options.loop?a.loop=!0:a.loop=!1,"1"==lbwps_options.pinchtoclose?a.pinchToClose=!0:a.pinchToClose=!1,"1"==lbwps_options.taptotoggle?a.tapToToggleControls=!0:a.tapToToggleControls=!1,a.spacing=lbwps_options.spacing/100,1==s&&(a.index=parseInt(c,10)-1),(r=new o(h,e,p,a)).listen("gettingData",function(t,o){if(o.w<1||o.h<1){var e=new Image;e.onload=function(){o.w=this.width,o.h=this.height,r.updateSize(!0)},e.src=o.src}}),1==l&&r.listen("unbindEvents",function(){history.back()}),r.init()},i=function(){var t=window.location.hash.substring(1),o={};if(t.length<5)return o;for(var e=t.split("&"),n=0;n<e.length;n++)if(e[n]){var i=e[n].split("=");i.length<2||(o[i[0]]=i[1])}return o.gid&&(o.gid=parseInt(o.gid,10)),o}();i.pid&&i.gid&&(1==i.return?n(i.pid,null,!0,!0):n(i.pid,null,!0,!1))});lightbox-photoswipe/js/frontend.js
のこの部分を削除するだけ。そしてminify する。
else {
caption = element.attr('title');
}
プラグインをアップデートする度に編集しなおす必要がある。
