【コピペで使える】WordPressのビジュアルエディターにデザインを適用する方法
ワードプレスのオリジナルテーマを作って運用をはじめてみたけど、ビジュアルエディターを開くと実際のサイトデザインが反映されず、ビジュアルエディターの意味がない・・・そんな風にお悩みの方はこちらをお試しください。
ワードプレスにはビジュアルエディター向けのCSSテンプレートのしくみがありますので、そちらのテンプレートに実際に使うCSSをコピペして適用すればOKです。
①ビジュアルエディター用のCSSファイルを設置
editor-style.cssというファイルを作って、そこに実際のサイトのCSSをコピペします。そして作成したeditor-style.cssを、テーマフォルダの下にアップロードしましょう。
②functions.phpにコードを追加
次にfunctions.phpの任意の場所に下記コードを貼り付けて保存しましょう。
add_editor_style( 'editor-style.css' );
これで完了です!全く同じではないかもしれませんが、ある程度ビジュアルが反映されていることが確認できるかと思います。
投稿者プロフィール
最新の投稿
コンテンツ2023.05.26なぜSCSSを使わないのか
コンテンツ2023.05.23【JQuery】appendで追加した要素でclickイベントが発火しないときの対処法
コンテンツ2023.05.19ホームページ制作会社に作業を依頼するときの注意点
Webサイト制作実績2023.05.16ウイングアーク1st株式会社様の情報メディア「データのじかん」のサイトリニューアルに協力させていただきました。