長野県長野市・松本市ウェブ制作事業部 コンサルテイングFARM

WordPressのビジュアルエディタと実際の表示を合わせる

ATFコンサルティングFARM

ATFコンサルティングFARM

マーケティングがあなたのビジネスの目標達成を支援します。

HubSPot+ ATFC担当に相談する

WordPressのビジュアルエディタと実際の表示を合わせる

WordPressのビジュアルエディタは実際の表示をプレビューしながら投稿や固定ページを作成できるわけですが、スタイルシートも編集に反映されたらより便利です。
特にクライアントに納品するWordPressサイトであれば、使える機能かもしれませんね。
今日はその方法を紹介します。

functions.phpを編集

functions.phpに以下のコードを記述をします。(※<>は全角で書いています。実際は半角にします。)

<?php
add_editor_style(‘editor-style.css’);
?>

ビジュアルエディタ用のCSSの設置

上記コード内の「editor-style.css」がビジュアルエディタに適用させるスタイルシートです。
テーマディレクトリ直下に「editor-style.css」を作成するとビジュアルエディタに反映されるというわけです。

CSSを編集

作成した「editor-style.css」に、通常どおりスタイルを記述するとビジュアルエディタに反映されます。
ビジュアルエディタ用に独立したCSSなので好きに記述して構いませんが、実際の表示に合わせる目的であれば…

<?php
php the_content();
?>

…に適用させているスタイルに近い記述が必要になります。
是非お試しください。

SNS

Share on facebook
Share on twitter
Share on linkedin

Webの活用が上手な企業が勝ち組になる時代

Webサイトはマーケティングの最強ツールです! 購買プロセスに沿ってWebサイトを制作する必要があります。まず、①ユーザに自社を知ってもらう。もちろん「どんなベネフィットをどんな人へ」提供しているのかをターゲットユーザに

ブログを読む »
松本市ホームページ制作

「知らなければ損というよりも知ってれば得」最大限の成果が得られるウェブサイトの作り方。

成果が得られるウェブサイトの作り方 ビジネスに効果的なWebサイト、いわゆるホームページを作る時の比較的小規模の事業社から中規模の事業社まで対応できる最大限のWebからの効果の得るためのホームページの作り方を描いてみよう

ブログを読む »

HubSpotのすべて

ダウンロード