レンタルサーバーの空き容量＋WordPressで音楽再生サイトを作る方法-PWCN -WordPressのカスタマイズ情報ほか-

公開日：2026(令和8)年1月5日／最終更新日： 2026(令和8)年1月26日

最近のレンタルサーバーのディスク容量はとても大きくて持て余していませんか？

何百ギガバイトもあっても到底使いきれませんよね？そこで考えたのが、音楽ファイルを再生するサイトを作ることです。要するに自家製Apple MusicのようなSpotifyのようなもので、ウェブサイトやブログ作りに使うWordPressで結構簡単に作れるんですね。

私はこのページの要領で実際に作って、CDを入れ替えなくてもいつでもBGMをかけられるようにしていて、とっても重宝していますので、同じように空き容量を利活用できないかと考えている方はチャレンジしてみては？

．．おっと、先ほどApple Musicのような、Spotifyのようなと書きましたが、誰でも見える（再生できる）ようにしたサイトは完全に著作権法違反となりますので、必ず以下のページを参考にプライベートサイトとして稼働させるようにしてくださいね。

プライベートサイト（非公開サイト）を作る方法

私が実際に運営しているのも完全なプライベートサイトで、こんなサイトができますよ！というのを紹介するのが難しいので、一応こんな感じですよというのを画像でつかんでいただけたら．．。

まずはトップページ（どんな曲があるのかというのは想像にお任せします．．）

レンタルサーバーの空き容量＋WordPressで音楽再生サイトを作る方法|Personal WP Customization Notes (PWCN)

先頭に最近追加したアルバムの一覧を表示させています。後述しますが、アルバム再生ページの公開日をアルバムのリリース日にするため、追加したアルバムが埋もれてしまうのを防ぐ目的があります。

あとは、アルバムのリリース日順にずらっとページ一覧が並ぶ構成です。

左上の「ホーム」をクリックするとトップページへ、「アーティスト」をマウスオーバーするとアーティストの一覧が表示され、クリックするとそのアーティストのアルバム一覧が表示されるようにメニューを設置しています。

続いて、アルバム再生ページの例。

通常の投稿の1つを1つのアルバムとして作成し、画像にない部分も含め、以下のような内容を入れています。

そのアルバムの全曲をランダム再生するためのプレーヤーコンテンツ（カスタムコード使用）
そのアルバムを曲順通りに再生するためのプレーヤーコンテンツ（プラグイン使用）
そのアーティストのすべての曲をランダムに再生するためのコンテンツ（カスタムコード使用）
アルバム名やアーティスト名、曲名などを入れると、該当するものが含まれた該当ページが絞り込まれる検索フォーム（プラグイン使用）
サイドバーへ最近追加したアルバムの一覧を表示（カスタムコード使用）

まあ、音楽再生させるだけなら、2のみ搭載すればいいのでしょうけど、BGMで流しっぱなしにするなら1と3が必要でしょ！どこからでもそのアーティストのアルバム一覧へ飛べると便利でしょ！最近追加したアルバムが分かると便利でしょ！最後にフリーワード検索できたら便利でしょ！と追加していきました。

ここまで読んでいいかも．．と思った方は、サブディレクトリやサブドメインに新規のWordPressを1つインストールして、これから紹介する手順に従って作ってみてくださいね（WordPressの新規インストール手順については本ページでは割愛します）。

前提条件

まずは作ってから不味いことが発生するといけないので以下の点を確認しておきましょう。

レンタルサーバーのスペース（空き容量）が十分にあること
サーバーの転送量に制限がないこと

1に関して、音楽ファイルは1曲で、圧縮加工したとしても巨大な画像1枚分位のメディア容量があります。少なくとも今後も使用しないと確信が持てる範囲で10ギガバイト程度の空き容量はあったほうがいいでしょう。

2に関して、今では制限を設けているところは少ないとは思いますが、ブラウザから音楽ファイルを都度転送して再生することになりますから、転送量に制限のあるレンタルサーバーではやめておいた方がいいと思います。

これら最低限の条件がクリアできるかをまずは確認ください。

大丈夫でしたら今あるサイトのサブディレクトリ（サブフォルダ）なり、サブドメインなりを作って、新規に全く別のWordPressをインストールしましょう。

サイトの初期設定と環境設定

サイトのプライベート化（必須）

WordPressのインストールが終わったら、以下のページを参考にプライベート化しておきます。

プライベートサイト（非公開サイト）を作る方法

上記のページを参考に設定する場合は、許可するIPアドレスを一旦別のものにして自身からアクセスできないようになるか（プライベート化の設定が確実にできているか）を必ず確認してください。うっかりミスであっても一般公開してしまうと著作権法違反に問われる可能性がありますのでご注意ください。

この段階で躓いた方（プライベート化できなかった方）は、この種のサイトを作ることはあきらめてください。

サイトの初期設定

WordPress本体で設定しておくべきこと

特にSEOに配慮する必要もありませんから、「設定」→「パーマリンク」を開いてパーマリンク設定を「投稿ID」のみにしておくといいでしょう。

「設定」→「表示設定」で、「検索エンジンでの表示」の「検索エンジンがサイトをインデックスしないようにする」を有効にします（プライベート化されていればアクセスされることはありませんが念のため）

テーマ

テーマは何でも構いません、ご自身で使いやすいものにしてください。

ちなみに私が作成したサイト（上図でご覧いただいたサイト）は、WordPressのデフォルトブロックテーマ、Twenty Twenty-Threeで作っています（個人的にはテンプレートが自由にカスタマイズできるブロックテーマの方がおすすめです．．）。

テーマによってトップページや投稿ページの構成はさまざまですので、本ページでは表示表現の部分については細かく解説しませんのでご自身で行ってください

プラグイン

通常の音楽ファイルの再生（プレイリストの表示と再生機能）は以下のプラグインを使用します。

AudioIgniter Music Player

このプラグインには特に設定画面がありませんので現段階ではインストールして有効化しておけばいいでしょう。

好みに応じて、私が制作して配布している、サイトにまつわるいろいろなこと（今回でいえばフリーワード検索など）ができる以下のプラグインの使用をおすすめします。

【Hima Art Utility】について

また、前述したように、そのアルバムの曲をランダム再生させたい、アーティストの全曲をランダム再生させたいということであれば、メディアにカテゴリー分けをする機能を追加する必要がありますので、以下のプラグインを準備しておきましょう。

Media Library Categories

アルバム（プレイリスト）内の曲をランダムに再生するという機能は先ほど紹介した「AudioIgniter Music Player 」プラグインの有料版を使えば解決しますが、結構お高いので今回はカスタムコードを使って同じ機能を別で実装しています。

ひとまずサイトに関して必要な設定やテーマ・プラグインは以上です。

音楽プレーヤーを設置したページを作成してみる

ここから先いろいろな機能を追加したものの、何かのトラブルでうまくいかなかった．．なんてことのないよう、ひとまず1つ音楽プレーヤーページを作ってみましょう。

音楽ファイルの準備

まずは音源となる音楽ファイルをパソコン上で作ります。音声形式は汎用に使えるmp3でもいいですし、より圧縮率の高いaac形式でも構いません（CDからリッピングしたままのwavファイルは巨大すぎるのでお勧めしません）

CDからのリッピングでおすすめなのが「fre:ac」というツール。このツールを使えば、CDからのリッピングと同時にaacやmp3形式への変換も一気にできるのでおすすめです。

「fre:ac」は日本語で使用できる無料のソフトで使いやすいですし、使い方についてはググれば丁寧に解説されているものが多数出てきますので、ここでは割愛します。

ただ1点、リッピングと同時にaac形式でファイルを保存したい場合には、以下の手順で設定が必要です。

「選択エンコーダー」に「FDK-AAC Converter..」を選択する
「選択エンコーダー」の右にある⚙マーク（設定）をクリックする
「形式」タブを開き、「ファイル形式」を「AAC」にする

音楽ファイルのアップロードとプレイリスト作成

カテゴリー設定とファイルのアップロード

音楽ファイルの作成が終わったら、カテゴリーの設定を行います。

これは通常のブログを作る場合と同じで「投稿」→「カテゴリー」もしくは「メディア」→「カテゴリー」で、例えば以下のようにアーティスト名のカテゴリーを親、アルバム名のカテゴリーを子として登録します。

アーティスト名
- アルバム名1
- アルバム名2

カテゴリー設定ができたら、メディアへ曲ファイルをアップロードします。

ファイルのアップロードが終わったら、メディア一覧を開きます。

Media Library Categoriesプラグインを有効化していると、メディアの一覧の「一括操作」をクリックした際に先ほど追加したアーティスト名、アルバム名の追加や削除のキーが表示されるようになりますから、対象となる曲ファイルをチェック後「追加：アーティスト名」、もう一度チェック後「追加：アルバム名」をして、アーティスト名・アルバム名の2つに属するようにします。

WordPressのデフォルトではアップロード時の一時カテゴリーとして「未分類」が設定されますが、これは削除してもそのまま残しておいても構いません

プレイリストの作成

管理画面のメニューにある「AudioIgniter」メニューを開き、「Add New Playlist」を選択します。

タイトルにアルバム名を設定します。

「Upload」ボタンを押して曲を選択します（曲の数だけ「Add Track」と「Upload」ボタンを押して曲の選択を繰り返します）

曲のダウンロードを可能にしたい場合には「Download URL」にも曲ファイルと同じURLを指定しておきます

すべての曲が追加できたら公開します。公開ボタンの下にあるショートコードをコピーして次へ進みます。

アルバムページを作る

投稿を新規作成します。

タイトルにアルバム名を入れ、本文に先ほど作成したプレイリストのショートコードを挿入します。

CDに書かれているリリース日を見るか、どこかで調べてリリース日を公開日に変更します。

アイキャッチ画像はどこかから拾ってきて設定します（プライベートサイトなので拾ってきた画像でも問題はないと思います）。

カテゴリーは「アーティスト名」のみに指定します。

投稿を公開したら、表示画面を開いてみてください。

冒頭で紹介したようなプレイリストと音楽再生画面が表示されているはずです。

以上が曲の作成からアルバムページ作成までの流れです。

きちんとページが表示され、音楽再生もうまくいったらひとまず完成？です。あとはアルバムをどんどん追加していくだけとなりますが、その前に次項をご覧になり、必要なものを追加していきましょう（後からやると大変になるので早めに仕様を固めることをおすすめします）。

なお、後述する検索機能を実装したい場合、本文内に文字として情報が記述されている必要がありますので、曲名リストその他検索に使えそうなネタを本文内におくようにします

音楽再生サイトに役立つコードいろいろ

ここでは、音楽再生サイトを作る際にあると便利な機能のカスタムコードをいくつか紹介します。

アルバムページの機能として役立つもの

ページ内のアルバムの曲をランダム再生する

前述したように、AudioIgniterの有料版を使用すれば、プラグインが生成する再生コンテンツ内でランダム再生ができますが、有料版はサブスクで年間に結構な費用がかかるので、カスタムコードで別コンテンツとして作成しては？というものです。

以下のコードを使用してショートコードを本文内へ入れることで、ランダム再生コンテンツを作ることができます。

なお、調べた限りでは、AudioIgniterのランダム再生は単一のプレイリストに対してランダム再生するものですが、本ショートコードでは複数のアルバム（カテゴリー）を処理できるので、例えば複数枚で構成されているベストアルバムなどでも全曲を対象としてランダム再生できるようにしています。

/*** アルバム内の曲をランダム再生 ***/
function pwcn_multi_category_player_shortcode($atts) {
	// slugパラメーターを受け取る
	$args = shortcode_atts(
		array(
			'slug' => ''
		),$atts);

	if (empty($args['slug'])) return 'カテゴリーのスラッグを（コンマ区切りで）指定してください。';

	// 1. スラッグを配列に変換（スペースなどの余計な空白を削除）
	$slugs = array_map('trim', explode(',', $args['slug']));

	// 2. 指定されたカテゴリーの情報を取得（表示用タイトルのため）
	$terms = get_terms(array(
		'taxonomy' => 'category',
		'slug'     => $slugs,
	));
    
	if (is_wp_error($terms) || empty($terms)) return '指定されたカテゴリーが見つかりませんでした。';

	$term_names = array();
	$term_ids = array();

	foreach ($terms as $term) {
		$term_names[] = wp_specialchars_decode($term->name, ENT_QUOTES);
		$term_ids[] = $term->term_id;
	}

	// 3. メディアライブラリから指定された全カテゴリーに属するファイルを取得
	$query_args = array(
		'post_type'      => 'attachment',
		'post_mime_type' => array('audio/aac', 'audio/x-aac', 'audio/mp4'),
		'post_status'    => 'inherit',
		'posts_per_page' => -1,
		'tax_query'      => array(
			array(
				'taxonomy' => 'category',
				'field'    => 'term_id',
				'terms'    => $term_ids,
				'operator' => 'IN',
			),
		),
	);

	$media_query = new WP_Query($query_args);
	$playlist = array();

	if ($media_query->have_posts()) {
		foreach ($media_query->posts as $post) {
			$url = wp_get_attachment_url($post->ID);

			if (preg_match('/\.aac$/i', $url)) {
                
				// アルバム名（カテゴリー名）の取得
				$categories = get_the_category($post->ID);
				$album_name = !empty($categories) ? $categories[0]->name : '';

				$playlist[] = array(
					'url'   => $url,
					'title' => wp_specialchars_decode($post->post_title, ENT_QUOTES),
					'album' => wp_specialchars_decode($album_name, ENT_QUOTES)
				);
			}
		}
	}

	if (empty($playlist)) return '条件に一致する音楽ファイルが見つかりませんでした。';

	$json_playlist = json_encode($playlist);
	$player_id = uniqid('multi_');
	$display_title = implode(' / ', $term_names); // 見出し用にカテゴリー名を結合

ob_start();
?>
<div class="artist-player" id="<?php echo $player_id; ?>" style="background: rgb(32, 32, 32); color: #eee; padding: 12px; text-align: center; max-width: 100%; margin: 20px auto;">
	<div class="display" style="margin-bottom: 8px;">
		<div id="track-title-<?php echo $player_id; ?>" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">---</div>
	</div>
        
	<audio id="audio-<?php echo $player_id; ?>" style="width: 100%;"></audio>
        
	<div class="controls" style="margin-top: 8px; display: flex; justify-content: space-around; align-items: center;">
		<button onclick="window.<?php echo $player_id; ?>.prev()" style="background: none; border: 1px solid #444; color: #fff; padding: 8px 15px; cursor: pointer; border-radius: 5px;">◀◀ 前へ</button>
		<button onclick="window.<?php echo $player_id; ?>.toggle()" id="play-btn-<?php echo $player_id; ?>" style="background: #fff; border: none; color: #000; padding: 4px 12px; cursor: pointer; border-radius: 4px; font-weight: bold;">アルバムの曲をランダムに再生</button>
		<button onclick="window.<?php echo $player_id; ?>.next()" style="background: none; border: 1px solid #444; color: #fff; padding: 8px 15px; cursor: pointer; border-radius: 5px;">次へ ▶▶</button>
	</div>
</div>

<script>
	(function() {
		const rawData = <?php echo $json_playlist; ?>;
		const audio = document.getElementById('audio-<?php echo $player_id; ?>');
		const titleEl = document.getElementById('track-title-<?php echo $player_id; ?>');
		//const albumEl = document.getElementById('album-name-<?php echo $player_id; ?>');
		const playBtn = document.getElementById('play-btn-<?php echo $player_id; ?>');

		function shuffle(array) {
			for (let i = array.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[array[i], array[j]] = [array[j], array[i]];
			}
			return array;
		}

		let playlist = shuffle([...rawData]);
		let currentIndex = 0;

		window.<?php echo $player_id; ?> = {
			load: function(idx) {
				if (idx < 0) idx = playlist.length - 1;
				if (idx >= playlist.length) {
					idx = 0;
					playlist = shuffle([...rawData]);
				}
				currentIndex = idx;
				const track = playlist[currentIndex];
				audio.src = track.url;
				titleEl.textContent = track.title;
				//albumEl.textContent = "Album: " + track.album;
			},
			next: function() { this.load(currentIndex + 1); audio.play(); },
			prev: function() { this.load(currentIndex - 1); audio.play(); },
			toggle: function() {
				if (audio.paused) audio.play();
				else audio.pause();
			}
		};

		audio.onplay = () => playBtn.textContent = '一時停止';
		audio.onpause = () => playBtn.textContent = 'アルバムの曲をランダムに再生';
		audio.onended = () => window.<?php echo $player_id; ?>.next();

		window.<?php echo $player_id; ?>.load(0);
	})();
</script>
<?php

	return ob_get_clean();
}
add_shortcode('multi_player', 'pwcn_multi_category_player_shortcode');

あとは以下のショートコードを本文へ追加し、「slug」パラメーターにアルバムに紐づけたカテゴリーのスラグを指定するだけです（複数のカテゴリーを指定するには「,」で区切ります）

[multi_player slug=""]

アーティストの曲すべてをランダム再生する

アルバムの曲のランダム再生用のコードを拡張して、アーティスト名カテゴリーに紐づく曲をランダム再生させるためのコードです。アルバムページの下部などに設置しておけば、そのアルバムのみでなく、そのアーティストの曲すべてを対象としてランダム再生できます。

/**** 特定アーティスト（カテゴリー）のファイルをランダム再生 ****/
function pwcn_artist_media_player_shortcode($atts) {
	$args = shortcode_atts(array('artist' => ''), $atts);

	if (empty($args['artist'])) return 'アーティストのスラッグを指定してください。';

	// 1. 親カテゴリー（アーティスト）の情報を取得
	$parent_term = get_term_by('slug', $args['artist'], 'category');
	if (!$parent_term) return '指定されたアーティストが見つかりません。';

	// 2. 子カテゴリー（アルバム）のIDをすべて取得して合算
	$child_categories = get_term_children($parent_term->term_id, 'category');
	$all_category_ids = array_merge(array($parent_term->term_id), $child_categories);

	// 3. メディアライブラリから直接取得するクエリ
	$query_args = array(
		'post_type'      => 'attachment',
		'post_mime_type' => array('audio/aac', 'audio/x-aac', 'audio/mp4'),
		'post_status'    => 'inherit',
		'posts_per_page' => -1,
		'tax_query'      => array(
			array(
				'taxonomy' => 'category',
				'field'    => 'term_id',
				'terms'    => $all_category_ids,
				'operator' => 'IN',
			),
		),
	);

	$media_query = new WP_Query($query_args);
	$playlist = array();

	if ($media_query->have_posts()) {
		foreach ($media_query->posts as $post) {
			$url = wp_get_attachment_url($post->ID);

			if (preg_match('/\.aac$/i', $url)) {
				$categories = get_the_category($post->ID);
				$album_name = '';

				foreach ($categories as $cat) {
					if ($cat->parent == $parent_term->term_id) {
						$album_name = $cat->name;
						break;
					}
				}

				if (empty($album_name)) {
					$album_name = !empty($categories) ? $categories[0]->name : 'Unknown Album';
				}

				// 文字参照をデコードする ---
				$decoded_title = wp_specialchars_decode($post->post_title, ENT_QUOTES);
				$decoded_album = wp_specialchars_decode($album_name, ENT_QUOTES);

				$playlist[] = array(
					'url'   => $url,
					'title' => $decoded_title,
					'album' => $decoded_album
				);
			}
		}
	}

	if (empty($playlist)) return '条件に一致する音楽ファイルが見つかりませんでした。';

	$json_playlist = json_encode($playlist);
	$player_id = uniqid('player_');
	// アーティスト名もデコードして表示
	$artist_name = wp_specialchars_decode($parent_term->name, ENT_QUOTES);

ob_start();
?>
<h2 class="player-title is-style-head-custom"><?php echo esc_html($artist_name); ?>のすべての曲をランダムに再生</h2>
<div class="artist-player" id="<?php echo $player_id; ?>" style="background: #111; color: #eee; padding: 25px; border-radius: 15px; text-align: center; max-width: 100%; margin: 20px auto;">
	<div class="display" style="margin-bottom: 20px;">
		<div id="track-title-<?php echo $player_id; ?>" style="font-weight: bold; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">---</div>
		<div id="album-name-<?php echo $player_id; ?>" style="font-size: 0.9rem; color: #fff; margin-top: 5px;">---</div>
	</div>

	<audio id="audio-<?php echo $player_id; ?>" style="width: 100%;"></audio>
	<div class="controls" style="margin-top: 20px; display: flex; justify-content: space-around; align-items: center;">
		<button onclick="window.<?php echo $player_id; ?>.prev()" style="background: none; border: 1px solid #444; color: #fff; padding: 8px 15px; cursor: pointer; border-radius: 5px;">◀◀ 前の曲へ</button>
		<button onclick="window.<?php echo $player_id; ?>.toggle()" id="play-btn-<?php echo $player_id; ?>" style="background: #fff; border: none; color: #000; padding: 10px 20px; cursor: pointer; border-radius: 8px; font-weight: bold;">再生</button>
		<button onclick="window.<?php echo $player_id; ?>.next()" style="background: none; border: 1px solid #444; color: #fff; padding: 8px 15px; cursor: pointer; border-radius: 5px;">次の曲へ ▶▶</button>
	</div>
</div>

<script>
(function() {
	const rawData = <?php echo $json_playlist; ?>;
	const audio = document.getElementById('audio-<?php echo $player_id; ?>');
	const titleEl = document.getElementById('track-title-<?php echo $player_id; ?>');
	const albumEl = document.getElementById('album-name-<?php echo $player_id; ?>');
	const playBtn = document.getElementById('play-btn-<?php echo $player_id; ?>');

	function shuffle(array) {
		for (let i = array.length - 1; i > 0; i--) {
			const j = Math.floor(Math.random() * (i + 1));
			[array[i], array[j]] = [array[j], array[i]];
		}
			return array;
	}

	let playlist = shuffle([...rawData]);
	let currentIndex = 0;

	window.<?php echo $player_id; ?> = {
		load: function(idx) {
			if (idx < 0) idx = playlist.length - 1;
				if (idx >= playlist.length) {
					idx = 0;
					playlist = shuffle([...rawData]);
				}

			currentIndex = idx;
			const track = playlist[currentIndex];
			audio.src = track.url;
			titleEl.textContent = track.title; // デコード済みなのでそのまま表示
			albumEl.textContent = "収録されているアルバム: " + track.album; // デコード済みなのでそのまま表示
		},
		next: function() { this.load(currentIndex + 1); audio.play(); },
		prev: function() { this.load(currentIndex - 1); audio.play(); },
		toggle: function() {
			if (audio.paused) audio.play();
			else audio.pause();
		}
	};

	audio.onplay = () => playBtn.textContent = '一時停止';
	audio.onpause = () => playBtn.textContent = '再生';
	audio.onended = () => window.<?php echo $player_id; ?>.next();

	window.<?php echo $player_id; ?>.load(0);
})();
</script>
<?php

	return ob_get_clean();
}
add_shortcode('artist_player', 'pwcn_artist_media_player_shortcode');

コードを追加したら以下のショートコードを挿入して「artist」パラメーターにアーティストのカテゴリースラグを入れれば動作します。

[artist_player artist=""]

AudioIgniterで作成したプレイリストの再生画面の表示内容を一括指定する

先ほどのプレイリスト作成の部分では端折りましたが、AudioIgniterプラグインの仕様では、個々のプレイリストの編集画面で個別にいろいろな設定を行えるようになっています。

サイトの中で表示するプレイリストの内容が同じ場合（大抵同じだと思いますが．．）、プレイリストを作る度に同じものを設定するのは面倒ですし、いくつかのプレイリストを作成した後で設定を調整し直すのも面倒ですので、以下のコードを追加して、AudioIgniterのプレイリスト作成画面の設定に関わらず同じ設定が適用されるようにするといいでしょう。

/*** audioigniterの表示形式を一括変更 ***/
function pwcn_custom_audioigniter_tracklist_height( $attrs, $post_id ) {

/*** プレーヤーと曲リスト ***/
	//プレーヤーの外観　デフォルト full (full or simple)
	//$attrs['data-player-type'] = 'full';

	//デフォルトで曲リストを表示する　デフォルト 1 (1:表示する or 0:表示しない)
	//$attrs['data-display-tracklist'] = 1;

	//曲リストの表示／非表示切り替えボタンを表示する　デフォルト 1 (1:表示する or null:表示しない)
	//$attrs['data-allow-tracklist-toggle'] = '';

	//曲の順序　デフォルト 0 (1:降順 or 0:昇順)
	//$attrs['data-reverse-track-order'] = 0;

	//再生音量　デフォルト 100
	//$attrs['data-volume'] = 100;

	//曲リストの高さ制限　デフォルト 1 (1:する or 0:しない)
	//$attrs['data-limit-tracklist-height'] = '1';

	//曲リストの高さ　デフォルト185
	$attrs['data-tracklist-height'] = 500;

	//プレーヤーの最大幅　デフォルト Null(空欄)＝auto  実数で単位を付けて指定（50% 200pxなど．．）
	$attrs['data-max-width'] = '';

/*** 曲 ***/
	//曲番号の表示／非表示　デフォルト 1 (1:表示 or 0:非表示)
	//$attrs['data-display-track-no'] = '1';

	//曲リストに曲のカバー画像を表示する　デフォルト 1 (1:表示 or  null:表示しない)
	//$attrs['data-display-tracklist-covers'] = '';

	//再生中の曲のカバー画像を表示　デフォルト 1 (1:表示 or  null:表示しない)
	//$attrs['data-display-active-cover'] = '';

	//アーティスト名を表示する　デフォルト 1 (1:表示 or  0:表示しない)
	//$attrs['data-display-artist-names'] = '1';

	//曲の追加ボタン（購入リンク、ダウンロードボタンなど）を表示する　デフォルト 1 (1:表示 or  null:表示しない)
	//$attrs['data-display-buy-buttons'] = '';

	//購入リンクを別ウインドウで開く　デフォルト 1 (1:開く or  0:開かない)
	//購入リンクにURLが入っている場合のみ作用する
	//$attrs['data-buy-buttons-target'] = '1';

	//曲リストの繰り返しをデフォルトで有効にする　デフォルト 1 (1:有効 or  0:無効)
	//$attrs['data-cycle-tracks'] = '0';

	//曲リストに繰り返し切り替えボタンを表示する　デフォルト 1 (1:表示する or  null:表示しない)
	//$attrs['data-allow-tracklist-loop'] = '';

	//「Powered by AudioIgniter」リンクを表示する　デフォルト 1 (1:表示する or  null:表示しない)
	//$attrs['data-display-credits'] = '';

	//トラックのURL?　デフォルト home_url( '/' )
	//$attrs['data-tracks-url'] = 'https://xxx.com';

	return $attrs;
}
add_filter( 'audioigniter_get_playlist_data_attributes_array', 'pwcn_custom_audioigniter_tracklist_height', 10, 2 );

コードを追加後、一括指定したい設定のコメントを外し、設定したい値へ変更することで適用されます

サイトの管理に役立つコード

誤った形式の音声ファイルをアップロードできないようにする

サイトの曲はaac形式に統一しているつもりでも、うっかり別の形式のファイルをアップロードして気づかないこともあるかも知れません。

以下のコードを追加することで、aac形式以外の音声ファイルをアップロードしても拒否されるようにでき、誤アップロードを防ぐことができます（ファイル形式のコメントの位置を変えれば別の形式での統一も可能）

/*** AAC形式でないファイルのアップロードを拒否する（誤アップロード対策） ***/
/* https://developer.wordpress.org/reference/hooks/mime_types/ */
/* 形式を許可する場合はコメントアウトする */
function pwcn_disable_audio_mime_type( $mimes ){
	unset($mimes['mp3']);
	//unset($mimes['aac']);
	unset($mimes['m4a']);
	unset($mimes['ogg']);
	unset($mimes['wav']);
	unset($mimes['flac']);
	unset($mimes['mid']);
	unset($mimes['midi']);
	unset($mimes['wma']);
	unset($mimes['wax']);
	unset($mimes['mka']);

	return $mimes;
}
add_filter('upload_mimes', 'pwcn_disable_audio_mime_type');

/* 管理ユーザー含めすべてのユーザーで制限する */
function pwcn_hard_block_audio_formats( $file ) {
	//エラーメッセージ
	$error_text = 'この形式のファイルはアップロードできません';
	
	//許可しないファイル拡張子を指定（許可する場合はコメントアウト）
	$forbidden_extensions = 
		array(
			'mp3',
			//'aac',
			'wav',
			'ogg',
			'flac',
			'm4a',
			'wma',
			'mid',
			'midi',
		);

	//アップロードされたファイルの拡張子を取得して小文字に変換
	$ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));

	//拡張子が配列の中に含まれているかチェック
	if ( in_array($ext, $forbidden_extensions) ) {
		$file['error'] = esc_html( $error_text );
	}

	return $file;
}
add_filter('wp_handle_upload_prefilter', 'pwcn_hard_block_audio_formats');

ダッシュボードにuploadsフォルダ内の総容量を表示する

WordPressにはサイトヘルスという機能があり、そこからメディアフォルダ（uploadsフォルダ）のサイズを知ることができるのですが、この表示にはキャッシュが効いていてリアルタイムには確認できません。

そこで以下のコードを追加することで、メディアフォルダの総容量をダッシュボードへリアルタイム表示させることができます。

/***** ダッシュボードにuploadsフォルダの容量を表示するウィジェットを追加 *****/
/*** ウィジェットを追加 ***/
function pwcn_add_uploads_size_dashboard_widget() {
	wp_add_dashboard_widget(
		'uploads_size_widget',         // ウィジェットID
		'メディア（uploads）の容量',    // ウィジェットのタイトル
		'pwcn_display_uploads_size_widget'  // 表示用関数名
	);
}
add_action('wp_dashboard_setup', 'pwcn_add_uploads_size_dashboard_widget');

/*** ウィジェットの内容 ***/
function pwcn_display_uploads_size_widget() {
	$upload_dir = wp_upload_dir();
	$path = $upload_dir['basedir'];

	// フォルダサイズを取得
	$total_size = 0;
	$files = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($path));

	foreach ($files as $file) {
		if ($file->isFile()) {
			$total_size += $file->getSize();
		}
	}

	// 読みやすい単位（MB/GB）に変換
	$formatted_size = size_format($total_size, 2);

	echo '<div style="padding: 10px 0;">';
	echo '<p style="font-size: 1.2em;">現在の使用量: <strong>' . esc_html($formatted_size) . '</strong></p>';
	echo '<p><a href="' . admin_url('upload.php') . '" class="button button-secondary">メディアライブラリを見る</a></p>';
	echo '</div>';
}

表示画面の利便性を向上させるためのコード

親カテゴリーのリストを表示する（サイドバーなどで表示するためのもの）

多くの音楽アルバムを保存する場合、「アーティスト名」という親カテゴリーの中に「アルバムタイトル」という子カテゴリーを作って管理するのが一番効率がいいと思いますが、WordPress標準のブロックには親タームだけを表示する機能がないので、以下のコードを追加してショートコードで表示させるようにするといいでしょう。

/***** 親カテゴリーのみ表示するショートコード *****/
function pwcn_list_parent_categories_shortcode() {
	$args = array(
		'parent'   => 0, // Only get top-level categories
		'echo'     => 0, // Return the list instead of printing it
		'exclude' => '1',
		'title_li' => '', // Remove the default "Categories" title
		'show_count' => '1',
		'order'               => 'ASC',
		'orderby'             => 'name',
	);

	return '<ul>' . wp_list_categories($args) . '</ul>';
}
add_shortcode('pwcn-parent_categories', 'pwcn_list_parent_categories_shortcode');

コードを追加したら、以下のショートコードを任意の場所へ追加することで一番親階層のカテゴリーが一覧表示され、その中にある子カテゴリーの個数も表示できます。

[pwcn-parent_categories]

親カテゴリーのリストを表示する（ナビゲーションメニューで表示するためのもの）

ナビゲーションブロック内にショートコードをそのまま入れても動作しないこと、サイドバー用のようにアルバム名まで表示させるとごちゃごちゃになるのでアーティスト名のみを表示させるという観点から、以下のコードを使用します。

functions.phpへ以下のコードを追加します。

/***** 親カテゴリーのみ表示するショートコード(メニュー用) *****/
/* 親カテゴリーリストをショートコードで出力 */
function pwcn_list_parent_categories_shortcode_on_child_menu() {
	$args = array(
		'parent'     => 0,           // 最上位のみ
		'echo'       => 0,           // 文字列として返す
		'exclude'    => '1',         // 「未分類」を除外する場合はIDを指定
		'title_li'   => '',          // タイトル（カテゴリー）を非表示
		'show_count' => 0,           // 投稿数を出す場合は1
		'hide_empty' => 1,           // 投稿がないカテゴリーは隠す
	);

	$categories = wp_list_categories($args);

	// カテゴリーが存在しない場合は空を返す
	if (empty($categories) || $categories == '<li class="pwcn-nav-cat-list" >カテゴリーなし</li>') {
		return '';
	}

	return $categories;
}
add_shortcode('pwcn-parent-categories-on-menu', 'pwcn_list_parent_categories_shortcode_on_child_menu');

/*** ナビゲーションブロック内にある文字列をショートコードの実行命令と置き換える ***/
/* ナビゲーションブロック内に固定ページリンクとして以下の文字列をタイトルとリンクに設定 */
/* [pwcn-parent-categories-on-menu] */
/* 見つかれば、以下の関数を使ってショートコードの実行命令と置き換える（再レンダリングして実行する） */
function pwcn_parent_categories_list_render_menu_block($block_content, $block){
	if (isset($block['blockName']) && 'core/navigation-link' === $block['blockName']) {
		if (strpos($block_content, '[pwcn-parent-categories-on-menu]') !== false) {
			// [pwcn-parent-categories-on-menu]という文字列があれば、↓のショートコードの実行と入れ替え
			$list = do_shortcode('[pwcn-parent-categories-on-menu]');
			return $list;
		}
	}

	return $block_content;
}
add_filter('render_block', 'pwcn_parent_categories_list_render_menu_block', 10, 2);

追加したメニューの追加CSSクラスに「jukebox-artist」を指定し、以下のコードをstyle.cssへ追加します。

/*** アーティストメニューの調整 ***/
/* 子アイテムの幅拡張と列数の変更 */
.wp-block-navigation__submenu-container.jukebox-artist.wp-block-navigation-submenu {
	align-items: normal;
	flex-direction: unset!important;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 1000px !important;
}

/* リスト項目全体をクリック可能にする */
/* 要素にposition relativeを指定 */
/* 4列表示させるために子要素の幅を24%に */
.jukebox-artist li.cat-item {
	position: relative;
	width:calc( 800px / 4 - 8px );
	padding:4px;
}

.cat-item a{
	padding-left: 2px;
}

/* 中のリンクアイテムを幅いっぱいに拡張 */
.jukebox-artist li.cat-item a {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	/*padding-left:12px;*/
}
/* ホーバー時に背景色と文字色を変化させる */
.jukebox-artist li.cat-item a:hover {
	background:#000;
	text-decoration:none;
	color:#fff;
}

.ha-next-prev-link-text{
	color:#fff;
	font-weight:700;
}

その他便利な機能（Hima Art Utilityプラグイン）使用

最後に、使用するプラグインの項で紹介したHima Art Utilityを使用すると便利になる機能をいくつか紹介しておきます。

フリーワード検索機能

入力窓に何かの文字を入力すると、サイト内すべての本文内を検索し、その場で候補となるページを一覧表示させる機能です。例えば曲名が分かっているけどどのアルバムに入っていたっけ？という時に簡単に見つけることができます（アルバムページ本文内に曲名など検索に引っかかるネタの準備が必要）。

フリーワード検索フォームショートコードの概要と使い方

最終更新日のコントロール

WordPressでは更新ボタンクリック時に自動で最終更新日をセットするようになっていて、一覧表示などでこの最終更新日順に並び替える機能を持つテーマなどがあり、せっかくCDのリリース日を公開日にしても並び替えがうまくいかないときがあります。この機能を使うことで、最終更新日を変更せず、常に公開日とイコールにすることができます。

最終更新日コントロール機能と応用

セキュリティアップ機能

今回はプライベートサイトなので、自身以外の誰も管理画面へのログインはしないはず．．ですが、ログインの記録を取ったりなど最低限のセキュリティは担保しておくといいでしょう。

【Hima Art Utility】の機能一覧（セキュリティ設定）