2026年3月15日
.NET 10.0 SDK (v10.0.201) – Windows x64 をダウンロードしてProjectをWordPress カスタム HTML で埋め込みしてみた
WordPress カスタム HTML 埋め込み手順
2026年3月15日
概要
.NET 10.0 SDK で実行したプロジェクトをビルドし、その出力を WordPress のカスタム HTML ブロックに埋め込んで表示できるように準備します。
1. プロジェクトのビルドと発行 (Publish)
プロジェクトを Web で実行可能な状態にするため、発行コマンドを実行します。
dotnet publish -c Release -o ./publish\_output説明:
-c Release: リリース構成でビルドします。-o ./publish\_output: 発行されたファイルを指定したディレクトリ（ここではpublish\_output）に出力します。
2. サーバーへのファイル配置
発行されたコンテンツ（publish\_output ディレクトリ内のファイル）を、WordPress のサーバー環境にアップロードします。
配置例:
プロジェクトを特定のディレクトリに集約して配置します。
| 発行元ディレクトリ | サーバー上の配置先パス (例) |
|---|---|
./publish\_output/wwwroot/ 内の全ファイル |
/wp-content/uploads/dotnet-app/ |
補足: WordPress のテーマファイルやプラグインディレクトリ以外に配置することで、アップデートの影響を受けにくくなります。
3. WordPress 埋め込み用 HTML スニペットの作成
配置したファイルを参照するための HTML スニペットを作成します。このスニペットを WordPress のカスタム HTML ブロックに貼り付けます。
プロジェクト実行用 HTML (カスタム HTML ブロックに挿入するもの):
<!-- .NETアプリケーションのコンテナ要素 -->
<div id="app">
<p>アプリケーションを読み込み中...</p>
</div>
<!-- アプリケーションのスタイルシートとスクリプトへの参照 -->
<!-- パスはサーバーへの配置先に合わせて適宜変更してください -->
<link href="/wp-content/uploads/dotnet-app/app.css" rel="stylesheet" />
<script src="/wp-content/uploads/dotnet-app/\_framework/blazor.webassembly.js"></script>
<!-- 追加の初期化スクリプトなどが必要な場合はここに記述 -->
<script>
// 例: 特定の初期化処理
// Blazor アプリケーションの場合は通常 blazor.webassembly.js が自動的に起動します。
</script>4. WordPress での作業
- WordPress の編集画面を開きます。
- 「カスタム HTML」ブロックを追加します。
- 作成した HTML スニペットをブロック内に貼り付けます。
- ページを公開し、ブラウザでアプリケーションが正しく表示・実行されるか確認します。
承知いたしました。これまでに作成した安定版の表と、ドキュメント全体の要約を改めて提示します。
安定版の表 (ファイル配置例)
.NETアプリケーションの発行ファイルをWordPressサーバーに配置する際の例です。
| 発行元ディレクトリ | サーバー上の配置先パス (例) |
|---|---|
./publish\_output/wwwroot/ 内の全ファイル |
/wp-content/uploads/dotnet-app/ |
ドキュメント全体の内容の要約
このドキュメントは、「.NET 10.0 SDK で実行したプロジェクトをビルドし、その出力を WordPress のカスタム HTML ブロックに埋め込んで表示する手順」を解説しています。
主な手順:
- プロジェクトの発行 (Publish):
dotnet publish -c Release -o ./publish\_outputコマンドでWeb実行可能なファイルを生成します。 - サーバーへのファイル配置: 生成されたコンテンツ（
./publish\_output/wwwroot/内）を、WordPressのサーバー上の特定のパス（例:/wp-content/uploads/dotnet-app/）にアップロードします。 - HTMLスニペットの作成: 配置したファイル（
app.css,blazor.webassembly.jsなど）を参照するためのHTMLコードを作成します。 - WordPressでの作業: WordPressの「カスタム HTML」ブロックに作成したスニペットを貼り付け、ページを公開します。