こんにちわ、めぐさんです。毎日ブログを更新しています。
「あたらしい記事を書こう！」とやる気を出したはいいものの、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が繁栄されたことで世界が変わりました。
見やすいし、本当に記事をサクサク書けるようになったのです。
あなたもこれで今日からストレス軽減、執筆スピードもあがりますね。
