はじめに
Diviのビジュアルエディターが白画面になる・「接続が確立できませんでした」エラーが出る・保存後にデザインが元に戻る・フロントエンドでモジュールが正しく表示されないといった問題は、PHPメモリ不足・Diviのキャッシュ不整合・プラグイン競合が原因です。
症状・原因
- ビジュアルビルダーをクリックしても起動しない
- 「Divi Builderのロードに失敗しました」エラーが出る
- 保存は成功するが変更がフロントエンドに反映されない
- Diviのモジュールライブラリが表示されない
解決手順
ステップ1：Diviの状態を確認する
# Diviのバージョンとライセンスを確認
wp eval "
if (defined('ET_CORE_VERSION')) {
echo 'Divi version: ' . ET_CORE_VERSION . PHP_EOL;
}
// ライセンス状態を確認
\$et_options = get_option('et_automatic_updates_options');
echo 'License username: ' . (\$et_options['username'] ?? 'not set') . PHP_EOL;
"
# Diviの静的CSSが有効か確認
wp eval "
\$et_options = get_option('et_divi');
echo 'Static CSS: ' . (\$et_options['et_pb_static_css_file'] ?? 'not set') . PHP_EOL;
echo 'Performance mode: ' . (\$et_options['et_pb_performance_mode'] ?? 'not set') . PHP_EOL;
"
# PHPメモリを確認
wp eval "
echo 'Memory limit: ' . WP_MEMORY_LIMIT . PHP_EOL;
echo 'Actual limit: ' . ini_get('memory_limit') . PHP_EOL;
"ステップ2：Diviキャッシュを削除する
# Diviの静的CSSキャッシュを削除
wp eval "
// Divi静的CSSを再生成させる
et_core_clear_wp_cache();
// キャッシュオプションをリセット
\$et_options = get_option('et_divi');
if (isset(\$et_options['et_pb_static_css_file'])) {
unset(\$et_options['et_pb_static_css_file']);
update_option('et_divi', \$et_options);
}
// アップロードフォルダのDiviキャッシュを削除
\$cache_dir = get_template_directory() . '/css/';
if (is_dir(\$cache_dir)) {
foreach (glob(\$cache_dir . 'et-*.css') as \$file) {
unlink(\$file);
}
}
echo 'Divi cache cleared' . PHP_EOL;
"
# WordPressの全キャッシュをフラッシュ
wp cache flush
# パーマリンクを再生成
wp rewrite flush --hard// wp-config.php: Diviに必要な設定
define('WP_MEMORY_LIMIT', '256M');
define('WP_MAX_MEMORY_LIMIT', '512M');
// Diviのデバッグモード（問題調査時のみ）
// define('ET_DEBUG', true);ステップ3：Diviとプラグインの競合を解決する
// functions.php: DiviとWordPressの競合対策
// ① Divi編集画面でのスクリプト競合を防ぐ
add_action('wp_enqueue_scripts', function(): void {
// ビジュアルビルダー使用時のみ
if (function_exists('et_core_is_builder_plugin_active') && isset($_GET['et_fb'])) {
// 競合するプラグインのスクリプトを除外
wp_dequeue_script('conflicting-plugin-js');
wp_dequeue_style('conflicting-plugin-css');
}
}, 999);
// ② Diviのショートコードを正しく処理
add_filter('the_content', function(string $content): string {
// Diviショートコードの前後の自動pタグを削除
$content = preg_replace('/<p>\s*(\[et_pb)/s', '$1', $content);
$content = preg_replace('/(\[\/et_pb[^\]]*\])\s*<\/p>/s', '$1', $content);
return $content;
}, 9);
// ③ DiviポートフォリオのURLを修正
add_filter('et_portfolio_page_titles', function(bool $show): bool {
return true; // タイトルを常に表示
});ステップ4：Diviモジュールをカスタマイズする
// functions.php: Diviカスタムモジュールの追加
// ① カスタムCSSクラスをDiviモジュールに追加
add_filter('et_pb_custom_css_options', function(array $options, string $slug): array {
if ($slug === 'et_pb_text') {
$options['custom_font_size'] = [
'label' => 'カスタムフォントサイズ',
'type' => 'range',
'default' => '14px',
];
}
return $options;
}, 10, 2);
// ② Diviのローカルフォントを追加
add_filter('et_builder_google_fonts_cache', function(array $fonts): array {
$fonts['Noto Sans JP'] = [
'character_set' => 'japanese',
'styles' => '300,400,700',
];
return $fonts;
});
// ③ Divi保存後にキャッシュを自動クリア
add_action('et_pb_page_layout_saved', function(): void {
// WPスーパーキャッシュをクリア
if (function_exists('wp_cache_clear_cache')) {
wp_cache_clear_cache();
}
// W3 Total Cacheをクリア
if (function_exists('w3tc_flush_all')) {
w3tc_flush_all();
}
error_log('[Divi] Layout saved and cache cleared');
});ステップ5：Diviのパフォーマンス設定を最適化する
// functions.php: Diviパフォーマンス最適化
// ① 不要なDiviアセットを除外
add_filter('et_pb_enqueue_gallery_scripts', function(): bool {
// ギャラリーモジュールを使わない場合はスクリプトを除外
return has_shortcode(get_post_field('post_content', get_the_ID()), 'et_pb_gallery');
});
// ② Diviの静的CSS生成を制御
add_filter('et_pb_section_class', function(string $class, array $args): string {
// 特定セクションにカスタムクラスを追加
return $class;
}, 10, 2);# DiviのデータをJSON形式でエクスポート（バックアップ）
wp eval "
\$post_id = 123;
\$divi_data = get_post_meta(\$post_id, '_et_pb_use_builder', true);
echo 'Uses Divi: ' . (\$divi_data === 'on' ? 'YES' : 'NO') . PHP_EOL;
\$layout = get_post_meta(\$post_id, '_et_pb_old_content', true);
if (\$layout) {
echo 'Has backup content: YES (' . strlen(\$layout) . ' bytes)' . PHP_EOL;
}
"
# DiviのプリセットとグローバルカラーをWP-CLIで確認
wp option get et_pb_global_colors
wp option get et_global_presets注意事項
- Diviのビジュアルビルダーは最低256MBのPHPメモリが必要です。
WP_MEMORY_LIMITを設定しても実際のサーバー設定が上書きされる場合があります。php.iniや.htaccessでもmemory_limitを設定してください - DiviとElementorなど複数のページビルダーを同時に有効化すると深刻な競合が発生します。使用するビルダーは1つだけに絞ることを強くお勧めします
- Diviのライセンスキーはサブスクリプション型です。サブスクリプションが失効すると自動更新が止まりますが、既存の機能は引き続き利用できます。セキュリティアップデートのため定期的な更新を推奨します
まとめ
Divi Builderエラーの解決は①ET_CORE_VERSIONとライセンス状態を確認してメモリを256Mに設定、②et_core_clear_wp_cache()とet-*.cssファイル削除でDiviキャッシュを完全クリア、③wp_enqueue_scriptsの優先度999で競合スクリプトを除外、④et_pb_page_layout_savedフックでキャッシュプラグインと連携した自動クリアを実装、⑤_et_pb_use_builderメタでDivi使用状態を確認しグローバル設定をWP-CLIで診断する手順で解決します。