ワードプレスのオリジナルテーマを作って運用をはじめてみたけど、ビジュアルエディターを開くと実際のサイトデザインが反映されず、ビジュアルエディターの意味がない・・・そんな風にお悩みの方はこちらをお試しください。
ワードプレスにはビジュアルエディター向けのCSSテンプレートのしくみがありますので、そちらのテンプレートに実際に使うCSSをコピペして適用すればOKです。
①ビジュアルエディター用のCSSファイルを設置
editor-style.cssというファイルを作って、そこに実際のサイトのCSSをコピペします。そして作成したeditor-style.cssを、テーマフォルダの下にアップロードしましょう。
②functions.phpにコードを追加
次にfunctions.phpの任意の場所に下記コードを貼り付けて保存しましょう。
add_editor_style( 'editor-style.css' );
これで完了です！全く同じではないかもしれませんが、ある程度ビジュアルが反映されていることが確認できるかと思います。