4. 4. 3 投稿作成(簡易版)(3)メディアを追加

 投稿作成の「メディアを追加」は多機能ですが、一般ユーザーにとって使いやすいものではありません。関数 wp_print_media_templates をもとに簡易版を作成して使用しています。
 削除した機能・コード
  ・画面左のメニュー(非表示)
  ・添付ファイルの詳細 画像を編集
  ・添付ファイルの詳細 完全に削除する
  ・添付ファイルの詳細 URL
  ・添付ファイルの詳細 キャプション
  ・添付ファイルの詳細 代替テキスト
  ・添付ファイルの詳細 説明
  ・添付ファイルの表示設定 リンク先
  ・その他使用しないコード

コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
// メディアを追加 (簡易版)
function hk_easy_post_enqueue_media() {
    if ( ! isset( $_REQUEST['hk_light_type'] ) )        return;
    remove_action( 'admin_footer', 'wp_print_media_templates' ); 
    add_action( 'admin_footer', 'hk_easy_post_print_media_templates' );
    return;
}
add_action( 'wp_enqueue_media', 'hk_easy_post_enqueue_media' );

// Prints the templates used in the media manager.
// ORIGINAL:wp-includes/media-template.php
//   function wp_print_media_templates()
function hk_easy_post_print_media_templates() {
?>
    <!--[if lte IE 8]>
    <style>
        .attachment:focus {
            outline: #1e8cbe solid;
        }
        .selected.attachment {
            outline: #1e8cbe solid;
        }
    </style>
    <![endif]-->

    <script type="text/html" id="tmpl-media-frame">
        <div style="display: none" class="media-frame-menu"></div>    <!-- 非表示 -->
        <div class="media-frame-title"></div>
        <div class="media-frame-router"></div>
        <div class="media-frame-content"></div>
        <div class="media-frame-toolbar"></div>
        <div class="media-frame-uploader"></div>
    </script>

    <script type="text/html" id="tmpl-media-modal">
        <div class="media-modal wp-core-ui">
            <button type="button" class="button-link media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">メディアパネルを閉じる</span></span></button>
            <div class="media-modal-content"></div>
        </div>
        <div class="media-modal-backdrop"></div>
    </script>

    <script type="text/html" id="tmpl-uploader-window"><div>tmpl-uploader-window</div></script>
    <script type="text/html" id="tmpl-uploader-editor"><div>tmpl-uploader-editor</div></script>

    <script type="text/html" id="tmpl-uploader-inline">
        <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
        <# if ( data.canClose ) { #>
        <button class="close dashicons dashicons-no"><span class="screen-reader-text">アップローダーを閉じる</span></button>
        <# } #>
        <div class="uploader-inline-content {{ messageClass }}">
        <# if ( data.message ) { #>
            <h3 class="upload-message">{{ data.message }}</h3>
        <# } #>
            <div class="upload-ui">
                <h3 class="upload-instructions drop-instructions">アップロードするファイルをドロップ</h3>
                <p class="upload-instructions drop-instructions">または</p>
                <button type="button" class="browser button button-hero">ファイルを選択</button>
            </div>
            <div class="upload-inline-status"></div>
            <div class="post-upload-ui">
                <?php
                $max_upload_size = wp_max_upload_size();
                if ( ! $max_upload_size )
                    $max_upload_size = 0;
                ?>
                <p class="max-upload-size"><?php
                    printf( '最大アップロードサイズ: %s', esc_html( size_format( $max_upload_size ) ) );
                ?></p>
                <# if ( data.suggestedWidth && data.suggestedHeight ) { #>
                    <p class="suggested-dimensions">
                        推奨画像サイズ: {{data.suggestedWidth}} &times; {{data.suggestedHeight}}
                    </p>
                <# } #>
            </div>
        </div>
    </script>

    <script type="text/html" id="tmpl-media-library-view-switcher"><div>tmpl-media-library-view-switcher</div></script>

    <script type="text/html" id="tmpl-uploader-status">
        <h3>アップロード中</h3>
        <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text">エラーを非表示にする</span></button>
        <div class="media-progress-bar"><div></div></div>
        <div class="upload-details">
            <span class="upload-count">
                <span class="upload-index"></span> / <span class="upload-total"></span>
            </span>
            <span class="upload-detail-separator">&ndash;</span>
            <span class="upload-filename"></span>
        </div>
        <div class="upload-errors"></div>
    </script>

    <script type="text/html" id="tmpl-uploader-status-error">
        <span class="upload-error-filename">{{{ data.filename }}}</span>
        <span class="upload-error-message">{{ data.message }}</span>
    </script>

    <script type="text/html" id="tmpl-edit-attachment-frame"><div>tmpl-edit-attachment-frame</div></script>
    <script type="text/html" id="tmpl-attachment-details-two-column"><div>tmpl-attachment-details-two-column</div></script>

    <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>
        </div>
    </script>

    <script type="text/html" id="tmpl-attachment-details">
        <h3>添付ファイルの詳細</h3>
        <div class="attachment-info">
            <div class="thumbnail thumbnail-{{ data.type }}">
                <# if ( data.uploading ) { #>
                    <div class="media-progress-bar"><div></div></div>
                <# } else if ( 'image' === data.type && data.sizes ) { #>
                    <img src="{{ data.size.url }}" draggable="false" />
                <# } else { #>
                    <img src="{{ data.icon }}" class="icon" draggable="false" />
                <# } #>
            </div>
            <div class="details">
                <div class="filename">{{ data.filename }}</div>
                <div class="uploaded">{{ data.dateFormatted }}</div>
                <div class="file-size">{{ data.filesizeHumanReadable }}</div>
                <# if ( 'image' === data.type && ! data.uploading ) { #>
                    <# if ( data.width && data.height ) { #>
                        <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
                    <# } #>
                <# } #>
                <# if ( data.fileLength ) { #>
                    <div class="file-length">長さ: {{ data.fileLength }}</div>
                <# } #>
                <div class="compat-meta">
                    <# if ( data.compat && data.compat.meta ) { #>
                        {{{ data.compat.meta }}}
                    <# } #>
                </div>
            </div>
        </div>

        <!-- url:非表示 -->
        <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
        <!-- タイトル -->
        <label class="setting" data-setting="title">
            <span class="name">タイトル</span>
            <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
        </label>
        <!-- caption:非表示 -->
        <!-- alt:非表示 -->
        <!-- description:非表示 -->
    </script>

    <script type="text/html" id="tmpl-media-selection">
        <div class="selection-info">
            <span class="count"></span>
            <# if ( data.clearable ) { #>
                <button type="button" class="button-link clear-selection">クリア</button>
            <# } #>
        </div>
        <div class="selection-view"></div>
    </script>

    <script type="text/html" id="tmpl-attachment-display-settings">
        <h3>添付ファイルの表示設定</h3>
        <# if ( 'image' === data.type ) { #>
            <label class="setting">
                <span>配置</span>
                <select class="alignment" data-setting="align">
                    <option value="left">左</option>
                    <option value="center">中央</option>
                    <option value="right">右</option>
                    <option value="none" selected>なし</option>
                </select>
            </label>
        <# } #>
        <!-- リンク先:非表示 -->
        <# if ( 'undefined' !== typeof data.sizes ) { #>
            <label class="setting">
                <span>サイズ</span>
                <select class="size" name="size" data-setting="size"
                    <# if ( data.userSettings ) { #>
                        data-user-setting="imgsize"
                    <# } #>>
                    <?php
                    $sizes = array(
                        'thumbnail' => 'サムネイル',
                        'medium'    => '中サイズ',
                        'large'     => '大サイズ',
                        'full'      => 'フルサイズ',
                    );
                    foreach ( $sizes as $value => $name ) : ?>
                        <#
                        var size = data.sizes['<?php echo esc_js( $value ); ?>'];
                        if ( size ) { #>
                            <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
                                <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
                            </option>
                        <# } #>
                    <?php endforeach; ?>
                </select>
            </label>
        <# } #>
    </script>

    <script type="text/html" id="tmpl-gallery-settings"><div>tmpl-gallery-settings</div></script>
    <script type="text/html" id="tmpl-playlist-settings"><div>tmpl-playlist-settings</div></script>
    <script type="text/html" id="tmpl-embed-link-settings"><div>tmpl-embed-link-settings</div></script>
    <script type="text/html" id="tmpl-embed-image-settings"><div>tmpl-embed-image-settings</div></script>
    <script type="text/html" id="tmpl-image-details"><div>tmpl-image-details</div></script>
    <script type="text/html" id="tmpl-image-editor"><div>tmpl-image-editor</div></script>
    <script type="text/html" id="tmpl-audio-details"><div>tmpl-audio-details</div></script>
    <script type="text/html" id="tmpl-video-details"><div>tmpl-video-details</div></script>
    <script type="text/html" id="tmpl-editor-gallery"><div>tmpl-editor-gallery</div></script>
    <script type="text/html" id="tmpl-crop-content"><div>tmpl-crop-content</div></script>
    <script type="text/html" id="tmpl-site-icon-preview"><div>tmpl-site-icon-preview</div></script>

    <?php
}

利用しているフック

wp-includes/media.php
function wp_enqueue_media( $args = array() ) {
    do_action( 'wp_enqueue_media' );
wp-admin/admin-footer.php
    do_action( 'admin_footer', '' );

説明

 4行目で関数 wp_print_media_templates を削除し、5行目で簡易版を追加しています。使用しないJavaScript用htmlは、不用意に削除するとJavaScriptが動作しなくなるので、“入れ物”は残しています。メディアとして、画像と一般文書を考慮しています。
 かなり強引なカスタマイズなので、この方法よりスタイルシートで不要な機能を非表示にした方が良いかもしれません。ただスタイルシートの場合、クラス名が細かく付けられていないため、非表示にしたくないものまで非表示になる場合があります。

 このプログラムをお使いになる場合は、お使いになる方の自己責任でお願いします。

更新日:2016/01/14
掲載日:2016/01/14