Close

DAG kfz222

DIYとサバゲーの記録

HomeWeb作成メモWordpressメディアライブラ…

メディアライブラリ(グリッド表示)のカスタマイズ　wp-includes\media-templete.php のメモ

あじさわWordpressNo Comments 1163 views

概要

WordPressdeファイルをアップロードした際は元のファイル名が日本語の場合は実際のファイル名は英数にランダムに変換されて保存される。

そのため、メディアライブラリに並んだサムネイルに表示されうファイル名はランダムな英数文字がファイル名で表記されてしまう。

このため、暫くはアップロードするファイルはファイル名をいちいち英数字に変えてアップロードしてきた。

しかし、英数字では後から何のファイルだったかさっぱりイメージがつかめないのでやっぱり、日本語表記を使用して管理したいと思ってました。

添付ファイルのタイトルはデフォルトで元のファイルが反映されるようになっているので、グリッド表示でタイトルをデータから呼び出して表記すれば良いのでは？と考えた。

が、それを設定する箇所がどのファイルか分からず、半日悩んだ。それがこの記事のタイトル　wp-includes\media-templete.php　内に記述されていたという内容

やりたいこと

メディアの追加で、Chrome　の要素を検証を行い、表示された要素の項目を適当に変えてみる。

↓こういう風に表示したいと思い、やってみました。

とりあえず、URLにある　upload.php　から手探りで探した。

wp-includes\upload.php

この中の記述で、以下を見つけた。

if ( ‘grid’ === $mode ) {
wp_enqueue_media();
wp_enqueue_script( ‘media-grid’ );
wp_enqueue_script( ‘media’ );
wp_localize_script( ‘media-grid’, ‘_wpMediaGridSettings’, array(
‘adminUrl’ => parse_url( self_admin_url(), PHP_URL_PATH ),
) );

この　wp_enqueue_media();　をWordpressCodexで調べる。

wp_enqueue_media();でググルと英語で以下のサイトがヒットした。

https://wpseek.com/hook/wp_enqueue_media/

この中の記述で、

Defined at:　wp-includes/media.php

と書いてある。　つまりmedia.php 　内に何かヒントがありそう。

んで、wp-includes/media.php　内を「wp_enqueue_media」で探すと、、、

/**
* Enqueues all scripts, styles, settings, and templates necessary to use
* all media JS APIs.
*
* @since 3.5.0
*/

function wp_enqueue_media( $args = array() ) {

＊(省略)

＊

＊

最後のほうにこんな記述がある。

require_once ABSPATH . WPINC . ‘/media-template.php’;
add_action( ‘admin_footer’, ‘wp_print_media_templates’ );
add_action( ‘wp_footer’, ‘wp_print_media_templates’ );
add_action( ‘customize_controls_print_footer_scripts’, ‘wp_print_media_templates’ );

/**
* Fires at the conclusion of wp_enqueue_media().
*
* @since 3.5.0
*/
do_action( ‘wp_enqueue_media’ );

}

最後に　参照(require_once)で　media-template.php’;　を読み込んでいる。で、media-template.php　を調べると。

wp-includes\media-templete.php

以下のようにChromeで見たコードとそっくりな記述がみつかりました。

<script type=”text/html” id=”tmpl-attachment”>

<div class=”attachment-preview js–select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}”>
<div class=”thumbnail”>
<# if ( data.uploading ) { #>
<div class=”media-progress-bar”><div style=”width: {{ data.percent }}%”></div></div>
<# } else if ( ‘image’ === data.type && data.sizes ) { #>
<div class=”centered”>
<img src=”{{ data.size.url }}” draggable=”false” alt=”” />
</div>
<# } else { #>
<div class=”centered”>
<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
<img src=”{{ data.image.src }}” class=”thumbnail” draggable=”false” />
<# } else { #>
<img src=”{{ data.icon }}” class=”icon” draggable=”false” />
<# } #>
</div>
<div class=”filename”>
<div>{{ data.filename }}</div>
</div>
<# } #>
</div>
<# if ( data.buttons.close ) { #>
<a class=”close media-modal-icon” href=”#” title=”<?php esc_attr_e(‘Remove’); ?>”></a>
<# } #>
</div>
<# if ( data.buttons.check ) { #>
<a class=”check” href=”#” title=”<?php esc_attr_e(‘Deselect’); ?>” tabindex=”-1″><div class=”media-modal-icon”></div></a>
<# } #>
<#
var maybeReadOnly = data.can.save || data.allowLocalEdits ? ” : ‘readonly’;
if ( data.describe ) {
if ( ‘image’ === data.type ) { #>
<input type=”text” value=”{{ data.caption }}” class=”describe” data-setting=”caption”
placeholder=”<?php esc_attr_e(‘Caption this image&hellip;’); ?>” {{ maybeReadOnly }} />
<# } else { #>
<input type=”text” value=”{{ data.title }}” class=”describe” data-setting=”title”
<# if ( ‘video’ === data.type ) { #>
placeholder=”<?php esc_attr_e(‘Describe this video&hellip;’); ?>”
<# } else if ( ‘audio’ === data.type ) { #>
placeholder=”<?php esc_attr_e(‘Describe this audio file&hellip;’); ?>”
<# } else { #>
placeholder=”<?php esc_attr_e(‘Describe this media file&hellip;’); ?>”
<# } #> {{ maybeReadOnly }} />
<# }
} #>

</script>

この　{{ data.filename }}　のところにデータからファイルのタイトルを引っ張ってくれば、、、と思ったが、よく考えたら、タイトル自体はupload.phpでもどこかで読み込んでいるはずなので、、、

wp-includes\media-templete.php　を再度眺めていると、、、

上のほうにタイトル表記のテンプレートとおぼしき記述があった。

<div class=”settings”>
<label class=”setting” data-setting=”url”>
<span class=”name”><?php _e(‘URL’); ?></span>
<input type=”text” value=”{{ data.url }}” readonly />
</label>
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? ” : ‘readonly’; #>
<label class=”setting” data-setting=”title”>
<span class=”name”><?php _e(‘Title’); ?></span>
<input type=”text” value=”{{ data.title }}” {{ maybeReadOnly }} />

どうやってデータを取得しているかはさっぱり分からないが、{{ data.title }}　がタイトルであることには変わりない様子なので、(赤文字WP4.1.1で448行目)

<script type=”text/html” id=”tmpl-attachment”>

<div class=”attachment-preview js–select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}”>
<div class=”thumbnail”>
<# if ( data.uploading ) { #>
<div class=”media-progress-bar”><div style=”width: {{ data.percent }}%”></div></div>
<# } else if ( ‘image’ === data.type && data.sizes ) { #>
<div class=”centered”>
<img src=”{{ data.size.url }}” draggable=”false” alt=”” />
</div>
<# } else { #>
<div class=”centered”>
<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
<img src=”{{ data.image.src }}” class=”thumbnail” draggable=”false” />
<# } else { #>
<img src=”{{ data.icon }}” class=”icon” draggable=”false” />
<# } #>
</div>
<div class=”filename”>
<!–<div>{{ data.filename }}</div>–>
<div>{{ data.title }}</div>
</div>

<# } #>
</div>
<# if ( data.buttons.close ) { #>
<a class=”close media-modal-icon” href=”#” title=”<?php esc_attr_e(‘Remove’); ?>”></a>
<# } #>
</div>
<# if ( data.buttons.check ) { #>
<a class=”check” href=”#” title=”<?php esc_attr_e(‘Deselect’); ?>” tabindex=”-1″><div class=”media-modal-icon”></div></a>
<# } #>
<#
var maybeReadOnly = data.can.save || data.allowLocalEdits ? ” : ‘readonly’;
if ( data.describe ) {
if ( ‘image’ === data.type ) { #>
<input type=”text” value=”{{ data.caption }}” class=”describe” data-setting=”caption”
placeholder=”<?php esc_attr_e(‘Caption this image&hellip;’); ?>” {{ maybeReadOnly }} />
<# } else { #>
<input type=”text” value=”{{ data.title }}” class=”describe” data-setting=”title”
<# if ( ‘video’ === data.type ) { #>
placeholder=”<?php esc_attr_e(‘Describe this video&hellip;’); ?>”
<# } else if ( ‘audio’ === data.type ) { #>
placeholder=”<?php esc_attr_e(‘Describe this audio file&hellip;’); ?>”
<# } else { #>
placeholder=”<?php esc_attr_e(‘Describe this media file&hellip;’); ?>”
<# } #> {{ maybeReadOnly }} />
<# }
} #>

</script>

としてみると、、、

できた！

さらに以下の記述(ｗｐ4.1.1　wp-includes\media-templete.php　329行目)

<div class=”uploaded”><strong><?php _e( ‘Uploaded on:’ ); ?></strong> {{ data.dateFormatted }}</div>

この記述から　{{ data.dateFormatted }}　を拝借して、

<!–<div>{{ data.filename }}</div>–>
<div>{{ data.title }}<br>{{ data.dateFormatted }}</div>

にすると、、

メディアギャラリーのfilenameの変更更新日を入れてみる。

タイトル名にさらに更新日がはいった。

拡張子付のタイトルで保存するようにコードをいじる。

ここで、拡張子がほしくなってきた、アイコンで分かるとは思うが、、、アップロード時の自動でつくタイトル名は拡張子なしのファイル名です。

以前、ファイルをアップロードしたときにタイトルをファイルの拡張子付きのファイル名でアップロードするように設定したことがあり、それを思い出しながら探すと、、、

wp-admin\includes\media.php

内の記述　(WP4.1.1 　276行目あたり)

$name_parts = pathinfo($name);
$name = trim( substr( $name, 0, -(1 + strlen($name_parts[‘extension’])) ) );

赤文字のところが、拡張子を除くコードですので、これをコメントアウトします。

$name_parts = pathinfo($name);
//$name = trim( substr( $name, 0, -(1 + strlen($name_parts[‘extension’])) ) );

これで、自動で付くタイトルは拡張子付きになります。無論それ以前のファイルはそのままですけど、、

拡張子付きアップロード

で、これがここまでの完成版

メディアギャラリーのfilenameの変更(完成)

以上、心持ち、すっきりしました。

変更

画像にもタイトルを表示する。

画像に対しても、コード中 if文で条件分岐されているところに同じコードを追記すると表示されました。（WP4.1.1で439行目の下に以下を追加）

<# if ( data.uploading ) { #>
<div class=”media-progress-bar”><div style=”width: {{ data.percent }}%”></div></div>
<# } else if ( ‘image’ === data.type && data.sizes ) { #>
<div class=”centered”>
<img src=”{{ data.size.url }}” draggable=”false” alt=”” />
<div class=”filename”>
<div>{{ data.title }}</div>
</div>
</div>
<# } else { #>
<div class=”centered”>
<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
<img src=”{{ data.image.src }}” class=”thumbnail” draggable=”false” />
<# } else { #>
<img src=”{{ data.icon }}” class=”icon” draggable=”false” />
<# } #>
</div>
<div class=”filename”>
<!-<div>{{ data.filename }}</div>->
<div>{{ data.title }}</div>
</div>
<# } #>

画像にもタイトルを表示

いい感じだ、ここまでくると自分用フォトギャラリーのように愛着が沸いて来た、、、ここまでくるとタイトルも編集しようかなという気になってきて、昔の画像のタイトルを変更してみたりした。

タイトルが長いと表示しきれないので、年月日はとりあえず消した。

やっぱり拡張子を自動で表示したい。

アップロード時にタイトルへ拡張子が付くようにしたものの、タイトル編集時に拡張子があると編集時に邪魔くさいので、やっぱりタイトルには拡張子いらないな、と思いました。

wp-includes\media-templete.php　のコード中に

{{ data.subtype }}

これが、データの種類の様子なので
※拡張子ではなくデータタイプ　jpeg とかquicktime とか pdf とか表示してくれる。

が、ドキュメントファイルでは

xlsx ⇒ vnd.openxmlformats-officedocument.spreadsheetml.sheet

と表示されます。

これはDB内の「posts」 から「post_mime_type」というテーブルから読み込んでるもので、

「/」で区切られた2番目の項目を読んでるようです。下右図に長い名前があります。

DB-posts　DB-posts内の長い名前

これをどうしようかというと、アップロードされたものは直接DBをいじるしかないです。

ただ、ファイルアップロード時のMIMETYPE設定は

wp-includes\functions.php

内に記述があります。超コアファイルです。無鉄砲にいじります。

いじったのがこれ、2159行目からの記述で以下の場所

function wp_get_mime_types() {

省略

return apply_filters( ‘mime_types’, array(

  // Image formats.
‘jpg|jpeg|jpe’ => ‘image/jpeg’,
‘gif’ => ‘image/gif’,
‘png’ => ‘image/png’,
‘bmp’ => ‘image/bmp’,
‘tif|tiff’ => ‘image/tiff’,
‘ico’ => ‘image/ico/x-icon’,//20150305
// Video formats.
‘asf|asx’ => ‘video/asf/x-ms-asf’,//20150305
‘wmv’ => ‘video/wmv/x-ms-wmv’,//20150305
‘wmx’ => ‘video/x-ms-wmx’,
‘wm’ => ‘video/x-ms-wm’,
‘avi’ => ‘video/avi’,
‘divx’ => ‘video/divx’,
‘flv’ => ‘video/flv/x-flv’,//20150305
‘mov|qt’ => ‘video/quicktime’,
‘mpeg|mpg|mpe’ => ‘video/mpeg’,
‘mp4′ => ‘video/mp4′,//20150305
‘m4v’ => ‘video/m4v/mp4′,//20150305
‘ogv’ => ‘video/ogg’,
‘webm’ => ‘video/webm’,
‘mkv’ => ‘video/mkv/x-matroska’,’mp3|m4a|m4b’ => ‘audio/mpeg’,//20150305
‘3gp|3gpp’ => ‘video/3gpp’, // Can also be audio
‘3g2|3gp2′ => ‘video/3gpp2′, // Can also be audio
// Text formats.
‘txt|asc|c|cc|h|srt’ => ‘text/plain’,
‘csv’ => ‘text/csv’,
‘tsv’ => ‘text/tab-separated-values’,
‘ics’ => ‘text/calendar’,
‘rtx’ => ‘text/richtext’,
‘css’ => ‘text/css’,
‘htm|html’ => ‘text/html’,
‘vtt’ => ‘text/vtt’,
‘dfxp’ => ‘application/ttaf+xml’,
// Audio formats.
‘m4a’ => ‘audio/m4a/mpeg’,//20150305
‘mp3′ => ‘audio/mp3/mpeg’,//20150305
‘m4b’ => ‘audio/m4b/mpeg’,//20150305
‘ra|ram’ => ‘audio/x-realaudio’,
‘wav’ => ‘audio/wav’,
‘ogg|oga’ => ‘audio/ogg’,
‘mid|midi’ => ‘audio/midi’,
‘wma’ => ‘audio/wma/x-ms-wma’,//20150305
‘wax’ => ‘audio/wax/x-ms-wax’,//20150305
‘mka’ => ‘audio/x-matroska’,
// Misc application formats.
‘rtf’ => ‘application/rtf’,
‘js’ => ‘application/js/javascript’,//20150305
‘pdf’ => ‘application/pdf’,
‘swf’ => ‘application/swf/x-shockwave-flash’,//20150305
‘class’ => ‘application/java’,
‘tar’ => ‘application/tar/x-tar’,//20150305
‘zip’ => ‘application/zip’,
‘gz|gzip’ => ‘application/x-gzip’,
‘rar’ => ‘application/rar’,
‘7z’ => ‘application/7z/x-7z-compressed’,//20150305
‘exe’ => ‘application/exe/x-msdownload’,//20150305
‘psd’ => ‘application/psd/octet-stream’,//20150305
// MS Office formats.
‘doc’ => ‘application/doc/msword’,//20150305
‘pot’ => ‘application/pot/vnd.ms-powerpoint’,//20150305
‘pps’ => ‘application/pps/vnd.ms-powerpoint’,//20150305
‘ppt’ => ‘application/ppt/vnd.ms-powerpoint’,//20150305
‘wri’ => ‘application/wri/vnd.ms-write’,//20150305
‘xla’ => ‘application/xla/vnd.ms-excel’,//20150305
‘xls’ => ‘application/xls/vnd.ms-excel’,//20150305
‘xlt’ => ‘application/xlt/vnd.ms-excel’,//20150305
‘xlw’ => ‘application/xlw/vnd.ms-excel’,//20150305
‘mdb’ => ‘application/mdb/vnd.ms-access’,//20150305
‘mpp’ => ‘application/mpp/vnd.ms-project’,//20150305
‘docx’ => ‘application/docx/vnd.openxmlformats-officedocument.wordprocessingml.document’,//20150305
‘docm’ => ‘application/docm/vnd.ms-word.document.macroEnabled.12′,//20150305
‘dotx’ => ‘application/dotx/vnd.openxmlformats-officedocument.wordprocessingml.template’,//20150305
‘dotm’ => ‘application/dotm/vnd.ms-word.template.macroEnabled.12′,//20150305
‘xlsx’ => ‘application/xlsx/vnd.openxmlformats-officedocument.spreadsheetml.sheet’,//20150305
‘xlsm’ => ‘application/xlsm/vnd.ms-excel.sheet.macroEnabled.12′,//20150305
‘xlsb’ => ‘application/xlsb/vnd.ms-excel.sheet.binary.macroEnabled.12′,//20150305
‘xltx’ => ‘application/xltx/vnd.openxmlformats-officedocument.spreadsheetml.template’,//20150305
‘xltm’ => ‘application/xlym/vnd.ms-excel.template.macroEnabled.12′,//20150305
‘xlam’ => ‘application/xlam/vnd.ms-excel.addin.macroEnabled.12′,//20150305
‘pptx’ => ‘application/pptx/vnd.openxmlformats-officedocument.presentationml.presentation’,//20150305
‘pptm’ => ‘application/pptm/vnd.ms-powerpoint.presentation.macroEnabled.12′,//20150305
‘ppsx’ => ‘application/ppsx/vnd.openxmlformats-officedocument.presentationml.slideshow’,//20150305
‘ppsm’ => ‘application/ppsm/vnd.ms-powerpoint.slideshow.macroEnabled.12′,//20150305
‘potx’ => ‘application/potx/vnd.openxmlformats-officedocument.presentationml.template’,//20150305
‘potm’ => ‘application/potm/vnd.ms-powerpoint.template.macroEnabled.12′,//20150305
‘ppam’ => ‘application/ppam/vnd.ms-powerpoint.addin.macroEnabled.12′,//20150305
‘sldx’ => ‘application/sldx/vnd.openxmlformats-officedocument.presentationml.slide’,//20150305
‘sldm’ => ‘application/sldm/vnd.ms-powerpoint.slide.macroEnabled.12′,//20150305
‘onetoc|onetoc2|onetmp|onepkg’ => ‘application/onenote’,
‘oxps’ => ‘application/oxps’,
‘xps’ => ‘application/xps/vnd.ms-xpsdocument’,//20150305
// OpenOffice formats.
‘odt’ => ‘application/odt/vnd.oasis.opendocument.text’,//20150305
‘odp’ => ‘application/odp/vnd.oasis.opendocument.presentation’,//20150305
‘ods’ => ‘application/ods/vnd.oasis.opendocument.spreadsheet’,//20150305
‘odg’ => ‘application/odg/vnd.oasis.opendocument.graphics’,//20150305
‘odc’ => ‘application/odc/vnd.oasis.opendocument.chart’,//20150305
‘odb’ => ‘application/odb/vnd.oasis.opendocument.database’,//20150305
‘odf’ => ‘application/odf/vnd.oasis.opendocument.formula’,//20150305
// WordPerfect formats.
‘wp|wpd’ => ‘application/wordperfect’,
// iWork formats.
‘key’ => ‘application/key/vnd.apple.keynote’,//20150305
‘numbers’ => ‘application/numbers/vnd.apple.numbers’,//20150305
‘pages’ => ‘application/pages/vnd.apple.pages’,//20150305

 ) );

この作業、危険な気もするが、新規のMIMETYPEを追加しているわけではないし、説明文に追加するだけだからいいかな、、と。※ただ、行数を増やしているのが、、、ヤバイかもしれません。

拡張子付タイトルでのアップロードをしないように、元に戻す。

wp-admin\includes\media.php

内の記述　(WP4.1.1 　276行目あたり)

$name_parts = pathinfo($name);
//$name = trim( substr( $name, 0, -(1 + strlen($name_parts[‘extension’])) ) );

↓

$name_parts = pathinfo($name);
$name = trim( substr( $name, 0, -(1 + strlen($name_parts[‘extension’])) ) );

元にもどした。新規にアップロードしてみると、

ﾄﾞｷｭﾒﾝﾄﾌｧｲﾙ

うむ、だいぶイメージに近づいた。

 他の調整　<DIV claass=”filename”~>以下を整理

      <div class="thumbnail">
    <# if ( data.uploading ) { #>
     <div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
    <# } else if ( 'image' === data.type && data.sizes ) { #>
     <div class="centered">
      <img src="{{ data.size.url }}" draggable="false" alt="" />
     </div>
     </div><!--サムネイルにタイトルを表示20150305編集-->
     <div class="filename" style="font-size:11px;line-height:14px; padding:3px;">{{ data.title }}.{{data.subtype}}
     <!--<br><span style="font-size:9px; line-height:11px;">{{ data.dateFormatted }}<span>-->
     </div><!--年月日は表示しないがコードを残しておく20150305編集-->
    <# } else { #>
     <div class="centered">
      <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
       <img src="{{ data.image.src }}" class="thumbnail" draggable="false" />
      <# } else { #>
       <img src="{{ data.icon }}" class="icon" draggable="false" />
      <# } #>
     </div><!--サムネイルにタイトルを表示20150305編集-->
     <div class="filename" style="font-size:11px;line-height:14px; padding:3px;">{{ data.title }}.{{data.subtype}}<br>
     <!--<br><span style="font-size:9px; line-height:11px;">{{ data.dateFormatted }}<span>-->
     </div><!--年月日は表示しないがコードを残しておく20150305編集-->
    <# } #>
   </div>

以上

DIVのクラスが２つあったのを一つにまとめた。整理できるものが整理してみたが、、、

大丈夫かな？とりあえず要注意。

Leave a Reply

Your email address will not be published. Required fields are marked *

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

DAG kfz222