2679.3.1-金 20:32

スマホのギャラクシ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');
                }

 

プラグインをアップデートする度に編集しなおす必要がある。

 

 

 

 

次の記事

💬 コメント欄表示

カテゴリ別人気記事 GL

WordPress カテゴリ人気記事

カテゴリ別新着記事

WordPress カテゴリ最新記事

最近更新した記事

 

ランダムフォト

ランダムフォト