ブログ

wordpressで投稿記事編集中のビジュアルに『editor-style.css』を適用させて、公開ページと同じ表示にする方法

こんにちわ、めぐさんです。毎日ブログを更新しています。

「あたらしい記事を書こう!」とやる気を出したはいいものの、Wordpressでの記事編集中は『ビジュアル』にCSSが適用されないので使いにくい。

実際に公開されるページはCSSによる装飾がついて見やすくなりますが、編集中の記事はCSSによる装飾がつかなくて見づらいですよね。

わたし自身ストレスだったし、改善方法を調べてもイマイチわかりづらい。

なのでCSSを記事編集中の『ビジュアル』に適用する方法を、初心者でも迷わないように簡単にご紹介します。

『FileZilla Client』とサーバーパスワードを準備する

この記事では『FileZilla Client』というFTPソフトを使います。

インストールから設定方法、使い方は下記を参考にしてください。

〈 参考URL:超初心者向け!FileZilla(ファイルジラ)の使い方

※『FileZilla Client』を使うにあたりサーバーパスワードが必要になりますので、覚えてない人は最初にサーバーから届いたメールを見てください。

PART1:『editor-style.css』を作り、サーバーにアップロードする

ここでは記事編集中に適用させたいCSSファイルを作成して、サーバーにアップロードするまでを解説します。

①『editor-style.css』を作成する

新規テキストファイルを作成して、今Wordpressで使用しているCSSをコピーします。

そのテキストファイルの拡張子を変えてCSSファイルに変更します。

『○○.txt』⇒『editor-style.css

これで『editor-style.css』が完成です。

②『editor-style.css』をサーバーにアップロードする

「ごちゃごちゃしてて、どこにアップロードしていいのか分からない・・・」

ここですよココ↓

[ サイト名/public_html/wp-content/themes/テーマ名 ]

デスクトップにある『editor-style.css』を上記の場所にドラッグ&ドロップします。

これでアップロードが完了しました。

PART2:functions.phpを編集する

ここではサーバーに保存されている『functions.php』をダウンロードして編集、アップロードするまでを解説します。

①『FileZilla Client』でサーバーにある『functions.php』をデスクトップにコピーする。

「『functions.php』の場所がわかんないんだけど・・・・・・・・・」

そんな人にアドバイス。

[ サイト名/public_html/wp-content/themes/テーマ名/functions.php ]

『FileZilla Client』で見たときに、わたしのサイトでは上記の位置に『functions.php』があります。

『functions.php』を見つけたら右クリックしてダウンロードしましょう。デスクトップに保存されます。

②ダウンロードした『functions.php』をバックアップする

これから大切なファイルの中身をいじるので、新規フォルダでも作って別の場所に保存しておきましょう。

③『functions.php』に追記する

「『functions.php』開けないんだけど………」

そうですそのとおり。phpファイルはこのままだと開けないので、txtに拡張子を変更します。

『functions.php』⇒『functions.txt

こうすると開けるようになります。

function add_editor_style_cb() {
add_editor_style();
}
add_action(‘admin_init’, ‘add_editor_style_cb’);

[ i.Design:WordPressのビジュアルエディタ表示を実際に公開されるページ表示に近づける方法 ]

デスクトップに保存されている『functions.txt』を開いて、一番下に上記のコードを追記します。

そしたら保存して、名前を『functions.txt』⇒『functions.php』に直しましょう。

これで『functions.php』が完成しました。

④『FileZilla Client』で『functions.php』をサーバーにアップロードする。

デスクトップにある『functions.php』を、『FileZilla Client』上の『functions.php』にドラッグ&ドロップするだけです。

こんなダイアログが開きますが [ 上書き ] だけにチェックがついていることを確認してOKボタンを押して下さい。

これで編集した『functions.php』をサーバーにアップロードすることができました。

まとめ:確認してみよう!

すでに投稿済みの記事や、新規投稿など、なんでもいいので記事編集画面を見てください。

WEBページ上の表示と同じような表示になっています。

わたしは正直、編集中の画面にCSSが繁栄されたことで世界が変わりました。

見やすいし、本当に記事をサクサク書けるようになったのです。

あなたもこれで今日からストレス軽減、執筆スピードもあがりますね。

ABOUT ME
megusan
デザイナーを夢見て上京するも、ブラック企業に就職 弁護士を雇ってブラック企業を辞めた後、会社に頼らない生き方を模索中の29歳フリーター ゲーム(主にフォートナイト)、アニメ、Amazonが好き 内容はハッピーエンドが大好物! 大勢の人に喜びを与えられるところに魅力を感じてブログを開設。 ゆっくりしていってくださいな

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です