WordPressのテーマ更新でCSSが消えちゃうのを防ぐ方法

どうも、まちゃと申します。

 

ワードプレスはstyle.cssを編集している場合、子テーマを更新すると追加したカスタマイズCSSが消えちゃいますよね。

バックアップやメモしておかないととても困ります。

でも、そんな時はプラグインを使って外部に保存しておくと解決できます。

この記事では外部にCSSを保存できてテーマ更新の影響を受けないプラグインを紹介します。

 

 

シンプル管理の「Simple Custom CSS」

simple-custom-css

「Simple Custom CSS」はこのタイプのプラグインで一番有名かもしれません。解説しているブログなどもググるとたくさんヒットします。

有効インストール数は30万を超えていて、最終更新は2018年1月頃なのでサポートも問題なさそうです。

カスタムCSSをすべて一緒に追加するのでシンプルです。

個別に管理できないのでカスタムする内容が多いと管理が大変になりそうです。

 

WordPress.org公式サイトのプラグインページはこちらです。

Simple Custom CSS
WordPress サイトに、簡単にカスタム CSS を追加。

 

JSも対応する「Simple Custom CSS and JS」

custom-css-js

「Simple Custom CSS and JS」はCSSとJavaScriptを設定できるプラグインです。

カスタムCSS・JavaScriptを個別に管理できてインラインCSSとして記事に追加されます。

有効インストール数は10万を超えて今も更新されているのでサポートも問題なさそうです。

 

プラグインの紹介はこちらに詳しく解説されていてわかりやすかったです。

Simple Custom CSS and JS:子テーマなしでCSSとJavaScriptの追加ができるプラグイン
WordPressのテーマを自分のWebサイトに合うようにCSSの修正をしたり、JavaScriptを追加して機能を追加するときは子テーマを利用しましょう!とお伝えしてきました。しかし最初から子テーマでWebサイトを作っていない場合に途中か

 

WordPress.org公式サイトのプラグインページはこちらです。

Simple Custom CSS and JS
Easily add Custom CSS or JS to your website with an awesome editor.

 

style.cssを管理する「My Custom Style Css Manager」

「My Custom Style Css Manager」はカスタムCSSを個別に管理できるプラグインです。

style.cssに追加するタイプのプラグインなので他のプラグインやテーマの機能の最適化機能と共存できます。

カスタムCSS毎の追加する位置を調整可能なので競合する場合でも解決できるかもしれません。

style.cssへの編集をサポートする形式なのでブログのパフォーマンスには影響しないはずです。

 

プラグインの説明はこちらで紹介しています。

【WordPressプラグイン】style.cssを簡単管理「My Custom Style Css Manager」
どうも、まちゃです。 WordPressでは、きれいに見えるように拡張CSSを公開してくださる方がたくさんいらっしゃいます。 ついつい、つまみ食い的に拡張してstyle.cssに追加していくと、どのサイトから何の...

 

WordPress.org公式サイトのプラグインページはこちらです。

MyCustomStyleCssManager
テーマの編集画面でstyle.cssに手動で追記しているカスタムcssを管理できます。

 

記事毎に設定するプラグイン

「CSS Plu」

css-plus

他のプラグインと少し形式は変わって記事毎に個別にカスタムCSSを設定するプラグインもあります。

「CSS Plu」は記事毎にカスタムCSSを設定できるのでテーマを変更や更新しても消えちゃうことはありません。

 

WordPress.org公式サイトのプラグインページはこちらです。

CSS Plus
CSS Plus is a plugin that adds a css editor in all posts, pages and custom posts.

テーマの機能でサポート

記事毎にカスタムCSSを設定する場合はプラグイン以外にもテーマ側の機能で提供されている場合もあります。

Cocoonなどはそういった機能が標準で装備されていますので、記事毎のカスタマイズはプラグインは不要です。

 

プラグインを使わず追加CSSでカスタマイズする

WordPressの標準機能でもテーマの更新を受けずにカスタムCSSを反映する方法があります。

左側のメニューから「外観 > カスタマイズ」を選択します。

外観 > カスタマイズをクリックする

外観 > カスタマイズをクリックする

一番下の「追加 CSS」をクリックします。

追加CSSをクリックする

追加CSSをクリックする

入力エリアにCSSを入力して上にある「公開」ボタンを押すことで反映されます。

カスタムCSSを入力する

カスタムCSSを入力する

プラグインを使わないで済むので簡単ですがカスタマイズの量が増えると見にくくなってしまうのがデメリットです。

 

 

終わりに

CSSをカスタマイズする人は直接style.cssを編集するのではなくプラグインを使うと消える心配がなくて安心です。

カスタマイズをしてその効果を計測して元に戻すような使い方をしたい場合は個別に管理できるプラグインを使用すると便利です。

Rinker用カスタマイズCSS、SANGO用カスタマイズCSS、Cocoon用カスタマイズCSSなど個別に管理できるとカスタマイズが捗ると思います。

 

それでは、今回はこれまで。

ありがとうございました。

 

 

今回の記事で紹介したプラグイン

Simple Custom CSS
WordPress サイトに、簡単にカスタム CSS を追加。
Simple Custom CSS and JS
Easily add Custom CSS or JS to your website with an awesome editor.
MyCustomStyleCssManager
テーマの編集画面でstyle.cssに手動で追記しているカスタムcssを管理できます。
CSS Plus
CSS Plus is a plugin that adds a css editor in all posts, pages and custom posts.

 

コメント