WordPressテーマを更新するときにカスタムCSSを保持する方法
公開: 2022-05-05テーマは、WordPressWebサイトのレイアウトと外観を決定します。 使用するテーマに関係なく、特定のニーズに合わせて少しカスタマイズする必要がある場合があります。
テーマをカスタマイズする1つの方法は、カスケードスタイルシート（CSS）を使用することです。 この人気のあるスタイルシート言語を使用すると、テーマのほぼすべての要素を変更できます。 カスタムCSSをテーマに追加して、背景色の指定、フォントサイズの変更、コンテンツ間の間隔の作成、メニューの再配置などを行うことができます。 ただし、カスタムCSSは、次にテーマを更新するときに削除される場合があります。
テーマの更新がカスタムCSSを壊す理由
すべてのテーマにはstyle.cssファイルがあります。 テーマフォルダで利用可能で、CSSが含まれています。 テーマを更新すると、既存のバージョンを置き換えるために、新しい異なるバージョンのテーマがダウンロードされます。
テーマを更新すると、既存のstyle.cssファイルが削除され、新しい新しいstyle.cssファイルに置き換えられます。 新しいstyle.cssファイルには、以前に追加した可能性のあるカスタムCSSは含まれません。 削除したカスタムCSSはいつでも追加できますが、テーマを更新するたびに追加するのは面倒です。
カスタマイザーに追加
テーマをカスタマイザーに追加することにより、テーマを更新するときにカスタムCSSを保持できます。 カスタマイザーは、WordPressダッシュボードのテーマカスタマイズツールです。 「追加のCSS」フィールドを備えています。 カスタムCSSをテーマのstyle.cssに直接追加するのではなく、このフィールドに追加できます。
「追加のCSS」フィールドは、テーマの更新中にカスタムCSSが削除されないようにするために、WordPressのバージョン4.7で導入されました。 style.cssファイルには影響せず、テーマフォルダー内の他のファイルにも影響しません。 このフィールドを使用してカスタムCSSをカスタマイザーに追加すると、Webサイトのデータベースに保存されます。 その後、カスタムCSSを維持しながらテーマを更新できます。
カスタマイザーにアクセスするには、WordPressダッシュボードの「外観」をクリックして「カスタマイズ」を選択します。 「追加のCSS」タブは下部にあります。 このタブをクリックすると、カスタムCSSを入力できるフィールドが表示されます。 テーマを更新すると、テーマフォルダー内のファイルのみが置き換えられます。 Webサイトのデータベースを置き換えたり、影響を与えたりすることはないため、カスタムCSSは保持されます。
カスタムCSSをカスタマイザーに追加すると、プレビューできます。 カスタマイザーには、すべての変更に対する組み込みのプレビュー機能があります。 新しいウィジェットを設定する場合でも、カスタムCSSを追加する場合でも、カスタマイザーはWebサイトがどのように表示されるかを明らかにします。 次に、[公開]をクリックしてカスタマイズを続行することを選択できます。 Webサイトが正しく表示されない場合は、公開する前にカスタマイズオプションを変更できます。 とにかく、カスタマイザーはカスタムCSSを使用してWebサイトのプレビューを表示します。
子テーマを作成する
別の解決策は、子テーマを作成することです。 子テーマは基本的に、変更を失うことを恐れずにカスタマイズできる他のテーマのコピーです。 それらは完全なコピーではありません。 むしろ、ほとんどの子テーマは、style.cssファイルやfunctions.phpファイルなどのいくつかの基本的なファイルで構成されています。
子テーマは、親テーマのプロパティを継承するように設計されています。 テーマを親テーマとして使用できます。 子テーマには独自のフォルダーがあり、そのフォルダーには独自のstyle.cssファイルとfunctions.phpファイルが含まれます。 ただし、子テーマには、index.phpファイル、page.phpファイル、single.phpファイル、またはその他の標準テーマファイルは含まれません。 これらのプロパティの親テーマを活用します。
子テーマには独自のstyle.cssファイルがあるため、カスタムCSSをサポートします。 さらに重要なことに、子テーマは、親テーマが更新されたときにすべてのカスタムCSSを保持します。 親テーマを更新しても、子テーマのstyle.cssファイルには影響しません。 子テーマを作成する方法については、developer.wordpress.org / themes / advanced-topics/child-themeにアクセスしてください。 または、一部のプレミアムテーマには子テーマが付属しています。
カスタムCSSのほんの数行については、カスタマイザーに追加することをお勧めします。 大量のカスタムCSSの場合、子テーマを作成することはおそらく努力する価値があります。 子テーマは、カスタマイズ可能な個別のstyle.cssファイルを提供します。
子テーマのstyle.cssファイルをオフラインで操作することもできます。これは別のファイルであるため、カスタムCSS用の十分なスペースがあります。 カスタムCSSをカスタマイザーに追加すると、オンラインでのみアクセスできる小さなフィールドに制限されます。 カスタマイザーにはプレビューモードの利点がありますが、子テーマには別のstyle.cssファイルの利点があります。
カスタムCSSプラグインを使用する
カスタムCSSプラグインを使用できます。 たとえば、Simple Custom CSSプラグインは、まさにそのように聞こえます。テーマにカスタムCSSを簡単に追加できます。 プラグインに追加されたカスタムCSSは、テーマ自体のCSSをオーバーライドします。
Simple Custom CSSプラグインをアクティブにすると、WordPressダッシュボードの[外観]の下に新しい[カスタムCSS]タブが表示されます。 ここでカスタムCSSを追加できます。 テーマを更新すると、カスタムCSSが保持されます。 テーマを更新すると、テーマのstyle.cssファイルが置き換えられますが、プラグインは新しいstyle.cssファイルをカスタムCSSでオーバーライドします。
カスタムCSSとカスタムJavaScriptの両方をサポートするSimpleCustomCSSおよびJSプラグインもあります。 これを使用して、テーマ自体のCSSをオーバーライドするカスタムCSSを作成できます。 子テーマの作成に煩わされたくない場合は、カスタムCSSプラグインを使用することをお勧めします。 カスタムCSSプラグインをダウンロードすることは、テーマの更新中にカスタムCSSを保持する簡単な方法です。
結論
テーマを更新した後にカスタムCSSを失うと、イライラします。 カスタムCSSをコンピューターにローカルに保存した場合でも、戻って追加する必要があります。 WordPressダッシュボードのカスタマイザーを使用するか、子テーマを作成するか、カスタムCSSプラグインを使用することで、テーマのカスタムCSSを保持できます。
