ブログ日記

STORK WordPress 投稿画面でCSS編集をエディターで見える化

WordPressテーマをSTORKに設定して投稿画面でCSSを編集してもエディターにCSSが反映されていなくてプレビューとエディターを切り替えて面倒ですよね。

何も設定していない状態からAddQuicktagでCSSを呼び出してもエディターにCSSが反映されているから直観的に記事を作成できませんよね。

デフォルトのWordPress設定

CSSを書いてもエディターではCSSが反映されていないせいか記事編集も視覚的に直観で作業できませんとね。

RYOHTA
RYOHTA
エディターでCSSを確認できる方法はないの?

WordPressをエディターで確認できる方法はあります。

やり方はWordPressに記述している追加CSSをメモ帳にコピー&ペーストして保存。

保存したファイルをサーバーにあるeditor-style.cssを置き換えるだけで

WordPressをちょっと手を加えれば

難しそうに思えるけどこの記事を見ながら操作すれば簡単にWordPressでCSSがビジュアル化できます。

この記事はWordPressテーマがSTORKを使用しています。
STORK以外のテーマでWordPressをビジュアル化したい方はご使用のテーマに置き換えて挑戦してみてください。

※データが壊れたり削除される可能性が必ずWordPressのバックアップを保存してください。

STORKについてはこちらから


WorPress エディターでCSSを見える化する準備

準備するソフト

・テキスト編集ツール(メモ帳・サクラエディター)
・FTPソフト(FFFTP・FileZilla Client)

いずれも無料ソフトなので窓の杜からダウンロードしてください。

FTP接続についてはこちらの記事を参考にしてください。

[blogcard url="https://come-on-star.com/wordpress_moving/"]

[blogcard url="https://come-on-star.com/ftp-noconect/"]

CSSファイルをWordPressエディターに読み込む設定

CSSファイルをWordPressに読み込む設定です。

意味が分からない人はとりあえず下記の手順で操作してみてください。

WordpPress[外観]→[テーマエディター]→[テーマのための関数]

※Stork以外のテーマを使用されている方は使用しているテーマの子テーマからテーマのための関数を指定してください。

テーマのための関数(function.php)CSSを読み込むプログラムを記述

以下のタグをコピーそのままコピーしてStork子テーマのfunction.phpに貼り付けてください。

/* ビジュアルエディタ用CSSの有効化*/
add_editor_style("editor-style.css");

※誤ってタグを書き換えてしまうと取り返しのつかない事になるのでバックアップを忘れずに!

CSSをメモ帳にコピー

テーマーエディター・追加CSSに記述しているCSSをコピーしてメモ帳アプリ(メモ帳/サクラエディタ)に貼り付け。

記事先頭に下記のコードを記述してください。

@import url( '../jstork/style.css' );
@import url( 'style.css' );

CSSを貼り付けたテキストのタイトルを「editor-style.css」で保存。

あとでFTPソフトでUPするときにわかりやすい場所に保存する事をオススメします。

保存したeditor-style.cssをFTPソフトでサーバーにUP

先程作成したeditor-style.cssをFTPソフトでサーバーにUPします。

editor-style.cssをUPする場所は子テーマファイル直下。

editor-style.css 配置例/public_html/wp-content/themes/jstork_custom
今回はFTPソフト「FileZilla Client」を使用して作成したeditor-style.cssをサーバーにUPします。

editor-style.cssをUPしたら確認

editor-style.cssを子テーマ直下にUPしたらWordPressの記事投稿を確認。

CSSがWordPress記事投稿画面に反映されました。

CSSがWordPress記事投稿画面に反映されない時の対応

CSSがWordPress投稿編集に反映されない原因はほとんどが3パターン

CSSがWordPress投稿画面に反映されない場合1.function.phpにCSSコードが正しく記述していない
2.CSSを記述したテキストタイトルの記入ミス
3.editor-style.cssのアップするフォルダが違う

function.phpにCSSコードが正しく記述していない

子テーマにあるfunction.phpに記述しているコードに誤りがあるとeditor-style.cssが読み込めません。

こちらのコードをコピーして子テーマにあるfunction.phpの末尾に追記してください。

/* ビジュアルエディタ用CSSの有効化*/
add_editor_style("editor-style.css");

CSSを記述したテキストタイトルの記入ミス

CSSを貼り付けたテキストファイルのタイトルにスペルミスがあるとCSSファイルを読み込む事ができません。

こちらのタイトルをコピーして作成したCSSファイル名に貼り付けてみてください。

editor-style.css

editor-style.cssのアップするフォルダが違う

editor-style.cssを子テーマ直下にアップロードしてもCSSが視覚的にWordPressエディターに反映されていない場合editor-style.cssが正しい子テーマ直下フォルダにアップロードされていない可能性があります。

サーバー内に複数のドメインが設定され各ドメインにSTORKをインストールしている場合子テーマが複数インストールされています。

分からない人は下記のアドレスを参考にeditor-style.cssをアップロードしてみてください。

/public_html/wp-content/themes/jstork_custom

STORKの申込はこちらから

まとめ

今回はSTORKを用いて解説しました。

STORK以外で試す場合はご自身で使用している子テーマに置き換えて操作を行ってみてくさい。

聞きなれない用語やなれない操作でCSSのビジュアル化のアップを躊躇してしまいがちですがWordPressエディターでCSSが視覚化できるだけで作業効率がグッと上がります。

操作前にバックアップを取っておけば最悪ブログは復元できるので時間をかけてでもWorPressのビジュアル化をオススメします。

この記事を読んでも分からない方はTwitter @tiger_jet_blogでDM頂ければ無料でサポートします。

STORKの申込はこちらから

sponsor link

-ブログ日記

© 2021 タイガージェットBlog Powered by AFFINGER5