画像のタイトルを数字からキャプションに自動的に変更する方法

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

 

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

 

 

 

 

  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert Challenge failed for domain makotoiwasaki.com Challenge failed for domain www.makotoiwasaki.com Attempting to renew cert (makotoiwasaki.com) from /etc/letsencrypt/renewal/makotoiwasaki.com.conf produced an unexpected error: Some challenges hav...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語だが、この通り: ⏱️ Get Google To Index Your Website Instantly Using the Indexing API ⚡Take a look at how you can use Google's new indexing API & to get your website's pages and content crawled instantly instead of waiting for Google to...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alternative You Deserve - Rank Math SEO vs. Yoast SEORank Math SEO plugin for WordPress is hands down the best Yoast alternative WordPress plugin. And the best thing is, Rank Math is completely FREE!Rank Math
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動いていない。やっと成功した設定方法を記録しておく。wp-config.php に次の行を追加する。define('DISABLE_WP_CRON', true);/var/spool/cron  に、  httpd という名前のファイルを作成し、次の1行を追加する。 所有者を httpd.www など、httpd nginx サーバーの稼働ユーザー名と同じにする。nginx.conf に書いてある。root@s4:/v...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
  • HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエンコードされていて読めない。 そこで、デコードして表示させる。 ログのファイル名が ssl_access.log だとすると、tail -f ssl_access.log| perl -ne 'use URI::Escape; print uri_unescape($_);' tail -f access.log | php -R 'echo urldecode($argn)."\n";'で、日本語URlが読める状態で出力される。 Apacheのログをデコードする方法 - Life with ITプログラマ x ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。// 子テーマのstyle.cssを最後に読み込む add_acti...
  • 2679年8月25日

    頁カウンターの比較 WordPress

    WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Google Analytics Post Pageviews Pjaxblog の付属カウンター機能WP-PostViews は他のカウンターよりもカウントが多くなりがちなことに気づいた。一度のアクセスなのに2回カウントされることもあるようだ。ロボットクローラー Bots のリスト数も不十分に少ないような気がする。それで数が多くなりやすいのではないか。 それで Post Views Counter に乗り換えることにした。Post Views Cou...

WordPress カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴