WordPress カスタムCSSを追加:カスタマイズするvs。 チャイルドテーマ

WordPressでカスタムCSSを追加するにはさまざまな方法があります。 大幅にカスタマイズする 追加CSSに追加するか、チャイルドテーマ内のスタイルシートファイル(style.css)に追加する方法があります。 さらに、各テーマのテーマオプションで提供されるカスタムCSSセクションに追加したり、エレメントページビルダーの場合は、個々のセクションまたは個々の要素のカスタムCSSからカスタムCSSを追加することもできます。

WordPress カスタムCSSを追加:カスタマイズするvs。 チャイルドテーマ

WordPressでは、さまざまな方法でカスタムCSSを追加できるので、使い慣れた方法でCSSコードを追加することができます。

ただし、最近 WordPress テーマが更新されると、突然カスタマイズする際に追加のCSSに追加したコードがすべて消える現象を経験しました。 (そんな可能性はありませんが)私がCSSを修正する過程で、ちらつきがすべて選択して削除したのかはわかりませんが、突然カスタムCSSが消えるのは初めてだと少し戸惑いました。

カスタムCSS ルックス » カスタマイズ » 追加 CSSに追加する場合は、CSSコードをコピーして安全な場所に保管することをお勧めします。 たとえば、テキストファイルとしてPCの特定のフォルダに保存したり、電子メールで送信したりすると、今後問題が発生したときに簡単に回復できます。

また、テーマを変更してもカスタマイズに追加したコードが消える可能性があるため、あらかじめバックアップした後に進んでください。

エレメンプロを使用する場合は、個々のウィジェットやセクションなど 詳細 » Custom CSSにカスタムCSSを追加できます。

WordPress カスタムCSSを追加:カスタマイズするvs。 チャイルドテーマ

この方法では、ページを離れることなくカスタムCSSコードを追加できるという利点があります。 しかし、後でそのコードを変更したい場合は、どこにコードを追加したのかを見つけるのは難しいかもしれません。

チャイルドテーマ 内のスタイルシートファイル(style.cssの)にCSSコードを追加できます。 この方法でコードを追加する場合は、定期的にチャイルドテーマフォルダをPCやクラウドなどにバックアップすると良いと思います。

GeneratePress テーマの更新

このブログに適用された GeneratePress テーマ最近のアップデートでは、HTML構造がfloatsからより効率的なflexboxに変わりました。

WordPress GeneratePress テーマ構造の変更

新しくインストールした場合、デフォルトではflexbox構造が適用されているようです。 既存のユーザー 外観 » カスタマイズ » Generalに移動し、 Structureから構造 フレックスボックスに切り替えることができます。 このオプションを使用して切り替えると元に戻せません。Flexboxに変更したい場合は、バックアップを受け取った後に進んでください。

新しいナビゲーション検索モーダル機能を使用するには、構造をFlexboxに置き換えて Icon Type(アイコンタイプ)SVGに設定する必要があります。 Flexboxの基本概念については、Mozillaのドキュメントを参照してください。

構造をFlexboxに変更すると、既存に追加した一部のCSSスタイルが正しく機能しなくなる可能性があります。 たとえば、このブログのヘッダーに適用した色合いが消えて、次のようなコードを追加しました。

/* header */
#site-navigation {
    -moz-box-shadow: 0 4px 4px rgba(156,156,156,.4);
    -webkit-box-shadow: 0 4px 4px rgba(156,156,156,.4);
    box-shadow: 0 4px 4px rgba(156,156,156,.4);
}

また、 WordPressが更新されると、ブロックエディタの一部のブロックの構造が変わった可能性があります。 既存のブロックに適用したCSSが機能しない場合があります。 たとえば、このブログでは コード ブロックに追加した既存のコードの一部が機能しないため、コードを修正しました。

最後に、

カスタマイズの追加CSSセクションを使用すると、 FTPに接続する必要なし WordPress 通知パネルでカスタムCSSスタイルを追加できるという利点があります。 追加のCSSコードをコピーして別のファイルに保存すると、後でコードが消えるなどの問題が発生したときに簡単に復元できます。 また、チャイルドテーマのスタイルシートファイルにカスタムCSSを追加する場合でも、子テーマフォルダをコンピュータまたはクラウドにバックアップすることは安全です。

参照


コメントを残す

*メールアドレスは公開されません。