【コピペで使える】WordPressのビジュアルエディターにデザインを適用する方法

ワードプレスのオリジナルテーマを作って運用をはじめてみたけど、ビジュアルエディターを開くと実際のサイトデザインが反映されず、ビジュアルエディターの意味がない・・・そんな風にお悩みの方はこちらをお試しください。

ワードプレスにはビジュアルエディター向けのCSSテンプレートのしくみがありますので、そちらのテンプレートに実際に使うCSSをコピペして適用すればOKです。
 

①ビジュアルエディター用のCSSファイルを設置

editor-style.cssというファイルを作って、そこに実際のサイトのCSSをコピペします。そして作成したeditor-style.cssを、テーマフォルダの下にアップロードしましょう。
 

②functions.phpにコードを追加

次にfunctions.phpの任意の場所に下記コードを貼り付けて保存しましょう。

add_editor_style( 'editor-style.css' );

これで完了です！全く同じではないかもしれませんが、ある程度ビジュアルが反映されていることが確認できるかと思います。

Follow me!

投稿者プロフィール

tasan

最新の投稿

• コンテンツ2023.05.26なぜSCSSを使わないのか
• コンテンツ2023.05.23【JQuery】appendで追加した要素でclickイベントが発火しないときの対処法
• コンテンツ2023.05.19ホームページ制作会社に作業を依頼するときの注意点
• Webサイト制作実績2023.05.16ウイングアーク１ｓｔ株式会社様の情報メディア「データのじかん」のサイトリニューアルに協力させていただきました。