WordPress

@tsparticles/wordpress パッケージは、WordPress ブログやウェブサイトにパーティクル背景を追加する簡単な方法を提供します。このガイドでは、WordPress 管理者ダッシュボードから直接 tsParticles を設定する手順を説明します。

インストール

WordPress 管理パネルから tsParticles WordPress プラグインをインストールします:

WordPress ダッシュボードで プラグイン > 新規追加 に移動します
"tsParticles" を検索します
今すぐインストール をクリックします
インストール後、有効化 をクリックします

または、プラグインを WordPress.org プラグインディレクトリから直接ダウンロードするか、wp-content/plugins/ ディレクトリに手動でアップロードします。

設定

プラグインを有効化すると、WordPress 管理サイドバーに新しい tsParticles メニュー項目が表示されます。ここでパーティクル設定をカスタマイズできます。

基本的な設定

設定ページでは、以下のオプションを提供するフォームが表示されます:

有効/無効: サイト全体でパーティクルをオンまたはオフにします
背景色: パーティクルキャンバスの背景色
パーティクル色: パーティクルの色
パーティクル数: 表示するパーティクルの数
接続線を有効化: 近くのパーティクル間に線を描画します
接続線の色: 接続線の色
パーティクル速度: パーティクルの移動速度
インタラクション: ホバー/クリック時の動作（なし、吸着、反発）

カスタム JSON 設定

上級ユーザーは、カスタム JSON 設定を直接エディターフィールドに貼り付けることができます。これにより、tsParticles が提供するすべての設定オプションを完全に制御できます。

json

{
  "background": {
    "color": "#0d47a1"
  },
  "particles": {
    "number": {
      "value": 100
    },
    "color": {
      "value": "#ffffff"
    },
    "links": {
      "enable": true,
      "color": "#ffffff"
    },
    "move": {
      "enable": true,
      "speed": 2
    }
  }
}

ページ固有のコントロール

ショートコードを使用して、特定のページや投稿でパーティクルを制御することもできます:

[tsparticles]

パーティクルを特定の投稿やページに制限するには、次の構文を使用します:

[tsparticles id="my-particles" options='{"background":{"color":"#000"}}']

ショートコードパラメータ

パラメータ	タイプ	デフォルト	説明
`id`	`string`	`tsparticles`	キャンバス要素 ID
`class`	`string`	`""`	追加の CSS クラス
`style`	`string`	`""`	インラインスタイル
`options`	`string`	`""`	JSON 設定オブジェクト（引用符をエスケープ）

テーマの統合

プラグインは最新の WordPress テーマと互換性があります。FSE（フルサイト編集）テーマでは、テンプレートエディターからブロックを直接追加できます:

外観 > エディター に移動します
テンプレートを編集するか、新しいテンプレートを作成します
+ ボタンをクリックし、"tsParticles" ブロックを検索します
ブロックサイドバーから設定を調整します

Cache プラグインとの互換性

tsParticles WordPress プラグインは、W3 Total Cache、WP Super Cache、WP Rocket などの一般的なキャッシュプラグインと連携して動作するように設計されています。スクリプトはキューに適切に登録されるため、キャッシュ環境でも期待通りに読み込まれ、実行されます。

コンフリクトのトラブルシューティング

jQuery のコンフリクト: tsParticles は依存関係として jQuery を必要としません。他のスクリプトとの互換性の問題は、サイトのキャッシュをクリアすることで解決できます。
テーマのコンフリクト: 一部のテーマはパーティクルキャンバスの z-index と競合する場合があります。tsParticles 設定でカスタム z-index 値を指定するか、テーマの CSS を調整してください。
スクリプトの読み込み順序: プラグインが他の JavaScript の前に tsParticles を読み込むようにするには、「フッターにスクリプトを読み込む」設定を無効にします。

プラグインの削除

tsParticles プラグインをアンインストールするには:

WordPress ダッシュボードで プラグイン > インストール済みプラグイン に移動します
tsParticles を見つけて 無効化 をクリックします
無効化後、削除リンクをクリックします

プラグインを削除しても、サイトのフロントエンドに残ったパーティクルデータは残りません。

よくある質問

tsParticles はモバイルデバイスで動作しますか？

はい。パフォーマンスを重視したモバイル設定が自動的に適用されます。必要に応じて管理設定から微調整できます。

パーティクルが表示されません。何が問題ですか？

表示されているコンテンツの上にパーティクルキャンバスが正しく配置されていることを確認してください。キャンバスに高さが設定されていない場合、パーティクルは表示されません。CSS で min-height: 100vh を設定するか、テーマのコンテナスタイルを確認してください。

管理ページで tsParticles を使用できますか？

デフォルトでは、tsParticles は一般ユーザー向けのページでのみ有効です。管理画面での使用は、tsparticles_admin_enabled フィルターを使用して有効にできます。

WordPress ​

インストール ​

設定 ​

基本的な設定 ​

カスタム JSON 設定 ​

ページ固有のコントロール ​

ショートコードパラメータ ​

テーマの統合 ​

Cache プラグインとの互換性 ​

コンフリクトのトラブルシューティング ​

プラグインの削除 ​

よくある質問 ​