返信先: ダッシュボードの内容が表示されない

https://punimemo.com/

表示が戻りました！！！！！！！！！！！！！

返信先: ダッシュボードの内容が表示されない

ありがとうございます

現在こうなっています

返信先: ダッシュボードの内容が表示されない

 wp-config.php に追記したコードは、強制的にURLを上書きしているだけなので、それを削除するとエラーになるということは、データベース上のURLが正しく書き換わっていないということです。

もう一度 punimemo.com で有効化されているテーマ（多分SWELLだと思います）の functions.php の最初の <?php 行のすぐ後に以下の2行を追加して、ログイン (http://punimemo.com/wp-logon.php) または管理画面 (http://punimemo.com/wp-admin/) を何度か読み込み直してみてください。

update_option( 'siteurl', 'http://punimemo.com' );
update_option( 'home', 'http://punimemo.com' );

ロリポップの独自ドメイン設定のページで「公開（アップロード）フォルダ」が正しく設定されているかどうかの確認結果も教えてください。

返信先: ダッシュボードの内容が表示されない

phpMyAdminに入らなかったのでfunctions.phpの追加の方です

一点すみません、

define(‘WP_HOME’, ‘https://punimemo.com’);
define(‘WP_SITEURL’, ‘https://punimemo.com’);

↑これを消してしまうと途端に.comと、blogがごちゃ混ぜになってしまいます

返信先: ダッシュボードの内容が表示されない

https://punimemo.com の方がまだおかしいようですが、phpMyAdmin で修正する方法とテーマの functions.php に追記する方法のどちらで対応されましたか？

どのような作業をして .blog と .com を分離できたのか具体的に教えてください。

.com の方の下層ページは正しく表示されているように見えます。
https://punimemo.com/profile/

返信先: 管理画面が出ない、エラー表示となる

解決したのですね。よかったです😌

サーバーにバックアップがないか、ぜひお尋ねになってみてください。有償になってしまうかもしれませんが、バックアップデータの提供を受けられる場合があります。

また、今後はバックアップを取りながら進められることを強くおすすめいたします。バックアップさえあれば、今回のようなことが起こった場合も、バックアップを取得した時点の状態に巻き戻せます。

【参考】 https://www.vektor-inc.co.jp/post/updraftplus/

返信先: 管理画面が出ない、エラー表示となる

指示通りにやりましたらあっと言う間に解決しました。

初心者なりに悪戦苦闘していましたので、本当にありがたい事でした。

色々触ったので作りかけていたサイトが消えてしましました。管理画面が出たのでやる気が戻って行きました。

今後とも宜しくお願い致します。

返信先: 管理画面が出ない、エラー表示となる

早速のアドバイスありがとうございます。

これからやってみます。

返信先: 管理画面が出ない、エラー表示となる

まずは管理画面に入れるよう復旧に努めましょう。

エラーメッセージに stripe domain とありますので、Stripe 関連のプラグインが影響している可能性が高いです。

FTP またはサーバーのファイルマネージャから wp-content/plugins 内の Stripe 関連プラグインのフォルダ名を一時的に変更し、管理画面が表示されるかどうかをご確認ください。

返信先: ダッシュボードの内容が表示されない

相変わらず表示されているものはおかしいですが、

ダッシュボードからゴチャゴチャになって混線していた

https://pempempemco.blogと

https://punimemo.com

を完全に分離することはできたようです

ありがとうございます！

返信先: ハンバーガーボタンクリック後のブロック編集 twenry-four

解決されたようでよかったです。

具体的にどのように解決されたのかをぜひ情報を共有してください。
他のフォーラム参加者の参考になります。

返信先: ハンバーガーボタンクリック後のブロック編集 twenry-four

解決しました！フィルターフックとは、わかりやすい仕組みですね。

返信先: エディタのプレビュー要素の囲みにクラスを付与したい

追記、JSのコードについて

createHigherOrderComponent
既存のブロック編集コンポーネント（BlockEdit）を受け取り、新しいコンポーネントで包んで返す関数です。Reactの高階コンポーネント（HOC）パターンに基づいています。

props.name !== 'core/html'
ブロックの種類を判定しています。カスタムHTMLブロック（core/html）以外はラッパーを追加せず、そのまま返します。

wp.element.createElement
Reactの createElement に相当する関数です。<div class="abcde"> を作成し、その中に元のブロック編集コンポーネントを配置しています。

addFilter('editor.BlockEdit', ...)
ブロックエディタが各ブロックの編集画面を描画する際に呼ばれるフィルターです。ここにフックすることで、ブロックの描画をカスタマイズできます。

(function () {
  // wp.compose から高階コンポーネント作成関数を取得
  const { createHigherOrderComponent } = wp.compose;
  // wp.hooks からフィルター追加関数を取得
  const { addFilter } = wp.hooks;

  /**
   * ブロックの編集コンポーネントをラップする高階コンポーネント
   * 対象ブロックの外側に任意のラッパー要素を追加する
   */
  const withCustomWrapper = createHigherOrderComponent((BlockEdit) => {
    return (props) => {
      // カスタムHTMLブロック以外はそのまま返す
      if (props.name !== 'core/html') {
        return wp.element.createElement(BlockEdit, props);
      }

      // カスタムHTMLブロックを <div class="abcde"> で囲む
      return wp.element.createElement(
        'div',
        { className: 'abcde' },
        wp.element.createElement(BlockEdit, props)
      );
    };
  }, 'withCustomWrapper');

  // editor.BlockEdit フィルターに登録
  // 第2引数はフィルターの一意な名前空間
  addFilter(
    'editor.BlockEdit',
    'my-theme/custom-wrapper',
    withCustomWrapper
  );
})();

JS読み込み側の補足

既に enqueue_block_editor_assets で JS を読み込む仕組みを用意されていますが、依存関係に wp-compose と wp-hooks を追加してください。これがないと wp.compose や wp.hooks が未定義になりエラーになります。

function addBlockEditorStyle() {
    wp_enqueue_script(
        'theme-gutenberg-js',
        get_theme_file_uri( '/js/cs_edit.js' ),
        array( 'wp-blocks', 'wp-element', 'wp-edit-post', 'wp-components', 'wp-data', 'wp-compose', 'wp-hooks' ),
        false,
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'addBlockEditorStyle' );

返信先: エディタのプレビュー要素の囲みにクラスを付与したい

状況がよくわかりました。

テーマのテンプレートで the_content の外側にある .abcde を前提としたCSSがあり、エディタのプレビューではその祖先要素がないためスタイルが崩れる、ということですね。

この場合、iframe 内部を直接操作するのではなく、editor.BlockEdit フィルターを使ってエディタ側のDOMでブロックをラッパーで囲む方法が良さそうです。

cs_edit.js に以下のコードを追加してみてください。
エディタ上でカスタムHTMLブロックが <div class="abcde">...</div> で囲まれた状態になるので、既存のCSSがそのまま適用されるはずです。
カスタムHTMLブロックだけでなく他のブロックにも同じラッパーが必要な場合は、props.name !== 'core/html' の条件を外すか、対象ブロックを配列で管理するなど調整してみてください。

(function () {
const { createHigherOrderComponent } = wp.compose;
const { addFilter } = wp.hooks;

const withCustomWrapper = createHigherOrderComponent((BlockEdit) => {
return (props) => {
if (props.name !== 'core/html') {
return wp.element.createElement(BlockEdit, props);
}
return wp.element.createElement(
'div',
{ className: 'abcde' },
wp.element.createElement(BlockEdit, props)
);
};
}, 'withCustomWrapper');

addFilter(
'editor.BlockEdit',
'my-theme/custom-html-wrapper',
withCustomWrapper
);
})();

返信先: エディタのプレビュー要素の囲みにクラスを付与したい

ありがとうございました。

プレビューにCSSを当てたい、が主になります。テンプレートでthe_contentの外側に特定クラス（.abcde）があり、読み込み対象のｃｓｓに記述があるため、その部分が崩れます。ｃｓｓはそのまま修正せずに反映させたいためです。

返信先: エディタのプレビュー要素の囲みにクラスを付与したい

こんにちは。
いくつかアプローチが考えられますが、最適な方法は目的によって大きく変わります。

たとえば、「プレビューにCSSを当てたい」のか「構造的にラッパーが必要」なのかなど、何のためにプレビューの div にクラスを付与したり、ラッパーで囲みたいのか、具体的に実現したいことを記載いただけると、より最適な回答が付きやすくなると思います。

返信先: エディタのプレビュー要素の囲みにクラスを付与したい

補足ありがとうございます。
実際に表示するカスタムHTMLの中身ではなく、ブロックエディタのプレビューでの要素変更ですね。

この場合、管理画面（ブロックエディタ）での編集時のみにフックして対象の要素を操作する JavaScript が用意できれば実現自体は可能だと思いますが、標準の仕組みとしてその外側のラッパー要素へ直接フックできる明確な方法は、少なくとも私の理解では用意されていないように思います。

もし実現するのであれば、既存のカスタムHTMLブロックをそのまま利用するのではなく、独自のカスタムブロックを作成し、その中でカスタムHTMLを描画しつつ必要な JavaScript を実行させる、といった構成で対応する方法が考えられます。
ただし、この方法は実装やメンテナンスの負担が大きくなりやすいため、あまり積極的にはおすすめしにくいです。

私の知識の範囲では上記のような対応が思い浮かびますが、より良い方法や別のアプローチをご存じの方がいるかもしれませんので、他の方の意見も募ってみるとよいかもしれません。

返信先: エディタのプレビュー要素の囲みにクラスを付与したい

ご回答ありがとう御座います。
こちらはこちらとして参考にさせていただきますが、質問部分が違っておりましてすみません。

iframe.components-sandbox は、カスタムHTMLのプレビューを表示したときのプレビュー部分そのものの囲みです。

iframe.components-sandbox→html→body→div→カスタムHTMLの中身✴︎

✴︎この外側にあるdivを操作してクラスをつけたりしたい、という意味です(プレビューに大してだけ操作できればよい。

返信先: エディタのプレビュー要素の囲みにクラスを付与したい

ご質問の内容は、カスタムHTMLで iframe を表示し、その iframe 内の HTML 要素（今回の <div>）の構造やラッパー要素を変更したい、という意図と理解しました。

一般的には、JavaScript で iframe の読み込み完了後に iframe 内の DOM へアクセスし、要素を操作する形で実装を検証していくことになります。
iframe 内の要素へは contentWindow.document または contentDocument を通じてアクセスでき、読み込み完了の検知には load イベントを利用するのが基本です。

例えば以下のような形になります。（実際に動かしていないのでこれで動くかは不明です）

document.addEventListener('DOMContentLoaded', () => {
  const iframe = document.querySelector('iframe.components-sandbox');

  if (!iframe) return;

  iframe.addEventListener('load', () => {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    if (!iframeDoc) return;

    const targetDiv = iframeDoc.querySelector('div');
    if (!targetDiv) return;

    // 新しいラッパー要素を作成
    const section = iframeDoc.createElement('section');
    section.className = 'abcd';

    const inner = iframeDoc.createElement('div');
    inner.className = 'inner';

    // 既存の要素を包む
    targetDiv.parentNode.insertBefore(section, targetDiv);
    section.appendChild(inner);
    inner.appendChild(targetDiv);
  });
});

ただし、WordPress のブロックエディタ（Gutenberg）のカスタムHTMLプレビューは内部的な描画処理や読み込み順が独自になっているため、タイミング調整や対象要素の取得方法などで微調整が必要になる可能性があります。

エディタ側の更新や再描画の影響も受けるため、その点も考慮しながら検証されるとよいかと思います。

エディタのプレビュー要素の囲みにクラスを付与したい

・WP　ver6.9
・プラグイン導入なし、自力テーマ
・エディタ：グーテンベルグ

カスタムｈｔｍｌ使用時などのプレビューについての質問です。

<iframe class="components-sandbox"><html><body data-resizable-iframe-connected="" style="position: absolute; width: 100%;"><div>プレビューソース</div></html></iframe>

この状態となる<div>を<section class=”abcd”><div class=”inner”></div></section>
のようにしたいのですが、 根本的に可能なのでしょうか。以下でｊｓを読み込むまでは終わっています。

function addBlockEditorStyle(){
wp_enqueue_script('theme-gutenberg-js',get_theme_file_uri('/js/cs_edit.js'),['wp-blocks','wp-element','wp-edit-post','wp-components','wp-data'],false,true);
}
add_action('enqueue_block_editor_assets','addBlockEditorStyle');