WordPressで未使用のCSSを削除する方法

WordPressで未使用のCSSを削除する方法

WordPressサイトで有料のWordPressテーマ、または公式のWordPressテーマリポジトリから人気のあるテーマを使用している場合は、さまざまなユースケース向けにテーマが開発されている可能性があります。また、テーマで使用可能なすべての機能のごく一部のみを使用している可能性があります。

その場合、サイトは、サイトのページのスタイル設定に必要のない未使用のCSSを大量に読み込んでいます。たとえば、使用しているWordPressテーマにもWooCommerceページのスタイルがある場合がありますが、WordPressサイトでブログのみを実行している場合は、サイトのWooCommerceページに含まれているCSSを使用していないため、未使用のサービスを提供します。ユーザーへのCSS。

Google Pagespeedツールでウェブサイトをテストしたことがある場合は、サイトに未使用のCSSの問題があることをすでにご存知でしょう。このガイドでは、最初に未使用のCSSを確認してから、無料のツールを使用して未使用のCSSをWordPressサイトから削除する方法を説明します。

未使用のCSSを確認する方法

Google Chrome DevTools(コンテキストメニューの[検査]オプションをクリックしたときに表示されるもの)には、[ソース]タブ内にカバレッジ機能があります。Coverageオプションを使用して、Webサイトがロードする未使用のCSSおよびJSを見つけることができます。

  1. デスクトップのChromeでウェブサイトを開きます。
  2. サイトの空白部分を右クリックし、コンテキストメニューから[検査]を選択します。
  3. [ソース]タブをクリックし、Ctrl + Shift + Pを押してコマンドウィンドウを開き、coverageと入力して、[ Start Instrumenting Coverage and Reload page from availablecommands ]を選択します。
  4. [カバレッジ]タブで、[ URLフィルター]フィールドをクリックし、ここにサイトのルートドメインを入力して、内部CSS / JSファイルのみを表示します。 └[未使用バイト]列をチェックして、テーマからCSS / JSファイルにロードされているデータの割合を確認します。
    WordPressで未使用のCSSを削除する方法
  5. CSSファイルをクリックして、サイトによってロードされた未使用のCSS(赤いバーでマークされている)を表示します。現在のページで使用されているCSSは、緑色のバーで表示されます。
    WordPressで未使用のCSSを削除する方法

Webサイトにロードされている未使用のCSSをすべて分析したら、それを削除します。Webページから未使用のCSSを削除するために利用できる無料のツールがいくつかあります。以下は、私が自分のプロジェクトでテストして使用した人気のあるツールの1つです。

PurifyCSSオンラインを使用して未使用のCSSを削除します

通常、WordPressのほとんどすべてのプラグインを見つけることができます。しかし、未使用のCSSを削除するために、残念ながら、利用できるプラグインは1つもありません。そのため、WordPressに固有ではない手動のツールを使用して、未使用のCSSをサイトから削除します。

PurifyCSSは、未使用のCSSを処理するために見つけることができる最もフレンドリーな非開発者ツールです。このツールには、ユーザーがWebサイトのURLまたはHTMLとCSSコードのいずれかを提供できるようにするシンプルなUIがあります。WordPressの場合、URLオプションを使用し、サイト上のすべての種類のページへのリンクを提供して、ツールがすべてからCSSを取得し、未使用のCSSを最適化できるようにします。

WordPressで未使用のCSSを削除する方法

ツールに配置する必要のあるページのクイックリストは次のとおりです。

  • ホームページのURL
  • サイトの各カテゴリからの複数の投稿ページの
    URL└これは、CSSがすべての投稿要素に含まれるようにするためです。
  • 連絡先、概要、プライバシー、およびサイトにある可能性のあるあらゆる種類のさまざまなページ。
  • アーカイブページ、検索ページ、著者ページ
  • カスタム投稿タイプページ

ヒント:テーブル、画像ギャラリー、コード、プレ、順序付きリスト、順序なしリスト、フォーム、タブ、アコーディオン、グーテンベルクブロックなど、使用する、または将来使用する可能性のあるすべてのテーマ要素を使用して、「機能」の投稿/ページを作成します。一般的に使用するなど

。PurifyCSSオンラインツールでこの「機能」投稿URLを使用して、一般的に使用される要素のCSSが含まれていることを確認します。

サイトから関連するすべてのURLタイプをPurifyCSSオンラインツールに追加したら、[ CSSクリーンアップ]ボタンを押します。

ツールによって生成された新しいCSSをコピーして、サイトで使用します。PurifyCSSによって生成された新しいCSSを置き換える前に、テーマ内の元のstyle.cssおよびその他のCSSファイルを必ずバックアップしてください。

ヒント:組み込みのWordPressテーマエディターを使用してテーマのCSSファイルを編集するか、FTP / SFTPプログラムを使用してサーバーに接続し、メモ帳エディターを使用してファイルを快適に編集することができます。

Tags: #css

ボックスモデルを使用してWebページのレイアウトを整理する方法

ボックスモデルを使用してWebページのレイアウトを整理する方法

CSSのmargin、border、およびpaddingプロパティは、特定のHTML要素で使用され、一意の効果を作成します。それらは連携して、Webページが整理されて見栄えがするようにします。

CSSfont-familyプロパティを使用してWebサイトのテキストを変更する方法

CSSfont-familyプロパティを使用してWebサイトのテキストを変更する方法

CSSを使用して、Webページでさまざまなスタイルを実現できます。テキストの色を変更したい場合は、そのためのCSSプロパティがあります。また、Webページ上のテキストの位置、またはサイトに表示されるテキストの種類を変更したい場合は、変更できます。

ウェブサイトの隠された英雄:DOMを理解する

ウェブサイトの隠された英雄:DOMを理解する

DOMは、フロントエンドWebの設計と開発でよく使用される用語です。これはDocumentObject Modelの略であり、Webサイトの基本的な部分です。

CSS疑似クラスと疑似要素の使用を開始する

CSS疑似クラスと疑似要素の使用を開始する

CSSセレクターを使用して、Webページ内の要素をターゲットにしてスタイルを設定できます。標準セレクターは、特定の段落または特定のレベルのすべての見出しをターゲットにする場合があります。疑似セレクターはさらに一歩進んで、ページの一部をよりニュアンスのあるターゲットにすることができます。

実用的な例でCSSの位置プロパティを理解する

実用的な例でCSSの位置プロパティを理解する

デザインスキルを向上させ、Webサイトのユーザーエクスペリエンスを向上させたいですか?要素を配置するためのさまざまなCSSメソッドを完全に理解すると、より簡単になります。あなたはウェブデザインの基本的な理解で素晴らしいウェブページを構築することができます。ただし、主な問題は、Webプロジェクトがより詳細志向になると、特にページ上の要素の複雑な配置が必要になる場合に発生します。

CSS Flexboxチュートリアル:基本

CSS Flexboxチュートリアル:基本

Flexboxは、CSSでページレイアウトを処理するための優れた方法です。アイテムの高さと幅を操作して、親コンテナー(flex-container)内のすべてのスペースを占有し、各子(flex-items)の垂直方向と水平方向のフローを制御できます。

CSSを使用してWebサイトのテキストの色を変更する方法

CSSを使用してWebサイトのテキストの色を変更する方法

あなたのウェブサイトを管理することはウェブデザインの重要な要素です。理想的な世界では、完成品に妥協することなく、サイトのデザインのあらゆる側面を変更できるはずです。

CSSを使用して印刷用のドキュメントをフォーマットする

CSSを使用して印刷用のドキュメントをフォーマットする

チケットの予約やホテルへの道順をウェブから印刷したことがあるなら、おそらくその結果にそれほど感銘を受けたことはないでしょう。したがって、カスケードスタイルシート(CSS)を使用して、印刷されたドキュメントを画面上とほぼ同じ方法でスタイル設定できることに気付かない場合があります。

HTMLとCSSを使用してレスポンシブナビゲーションバーを作成する方法

HTMLとCSSを使用してレスポンシブナビゲーションバーを作成する方法

レスポンシブナビゲーションバーを構築することは、ユーザーエクスペリエンスとWebデザインスキルを向上させるための重要な部分です。この記事では、HTMLとCSSのみを使用してレスポンシブナビゲーションバーを作成する方法を紹介します(JavaScriptの1行も使用しません!)。

6フロントエンドのセキュリティリスクとそれらを防ぐ方法

6フロントエンドのセキュリティリスクとそれらを防ぐ方法

サイバー犯罪者は最も弱いリンクを探して侵入するため、効果的なサイバーセキュリティを確保するには、ネットワークのすべての領域を保護する必要があります。

レスポンシブウェブデザインの原則

レスポンシブウェブデザインの原則

今日では、ブラウザやデバイスに応じてユーザーインターフェイスを調整するウェブサイトやアプリを作成するのが一般的です。この目標を達成するには、2つのアプローチがあります。1つ目は、デバイスごとに異なるバージョンのWebサイトまたはアプリを作成することです。しかし、それは非効率的であり、予測できないエラーにつながる可能性があります。

例で説明されたCSSボックスモデル

例で説明されたCSSボックスモデル

すばらしいWebページのレイアウトを作成する場合は、余白、境界線、パディング、およびコンテンツについて知っておく必要があります。画像であろうとテキストであろうと、Webデザインのすべての要素は、これらのプロパティを持つボックスを使用します。ボックスモデルをいじって、複雑なレイアウトを簡単に作成できます。この記事では、CSSボックスモデルを分析し、これらのプロパティの使用方法を実際の例とともに示します。

@ font-faceCSSを使用してWebサイトのフォントを変更する方法

@ font-faceCSSを使用してWebサイトのフォントを変更する方法

あなたのウェブサイトがあなたのブランドと家のスタイルと一致することを保証することは、彼ら自身のウェブサイトで働く誰にとっても非常に重要です。それにもかかわらず、ほとんどのDIY Webサイトビルダーやその他のWebサイトプラットフォームには限られたフォントオプションが付属しているため、夢見ていた一貫したブランドを実現することは困難です。

CSSで背景画像を設定する方法

CSSで背景画像を設定する方法

ウェブサイトを作成することはあなた自身を表現するための素晴らしい方法です。多くのウェブサイト構築ツールがありますが、それを自分で書くことは、ウェブサイトが舞台裏でどのように機能するかについてもっと学ぶための楽しい方法です。優れた初心者プロジェクトは、Webサイトを作成し、CSSを使用して背景画像を追加することです。このプロジェクトでは、HTMLとCSSの両方を使用して実行できます。

CSSの基礎:色の操作

CSSの基礎:色の操作

ウェブサイトをデザインする際に考慮すべき多くの要因があります。フォント、UXフロー、その他多数。非常に重要なデザイン要素の1つは色です。ブランドの色、境界線の色、背景色などの単純な決定でさえ、明確で顕著な影響をもたらします。

JavaScriptを使用して簡単な辞書アプリケーションを構築する方法を学ぶ

JavaScriptを使用して簡単な辞書アプリケーションを構築する方法を学ぶ

JavaScriptは、Web開発者の間で最も人気のあるプログラミング言語の1つです。JavaScriptを学びながら、誰もがDOM操作を使用して基本と簡単なアプリケーションを構築することから始めます。

カスケードスタイルシート(CSS)の概要

カスケードスタイルシート(CSS)の概要

頭字語CSSは、カスケードスタイルシートの略です。CSSは、すべてのデバイスで使用されるWebサイトとアプリケーションのスタイルを設定するために使用されます。スタイルシートは通常、HTMLやJavaScriptなどのフロントエンドプログラミング言語と一緒に使用されます。

HTMLとCSSを使用してFパターンとZパターンを構築する方法

HTMLとCSSを使用してFパターンとZパターンを構築する方法

コンテンツの過負荷の時代では、Webサイトを見やすくし、視覚的な階層を使用して訪問者を引き付けることに重点を置くのが賢明です。デザインでは、色、コントラスト、白の間隔、配置、およびページスキャンパターン(他の要因の中でも)を考慮する必要があります。FパターンとZパターンは最も人気があり、独自のアプリに簡単に実装できます。

CSSでドロップシャドウを作成する方法

CSSでドロップシャドウを作成する方法

デザインの傾向は毎年異なりますが、ボックスシャドウやドロップシャドウなどの主要なシャドウ効果を使用して、Webサイトの美学に積極的に貢献することができます。ドロップシャドウを使用すると、安っぽく外れることなく、快適で美しくレンダリングされた効果を作成できます。

グーテンベルクの代わりにWordPressのデフォルトエディタとしてクラシックエディタを設定する方法

グーテンベルクの代わりにWordPressのデフォルトエディタとしてクラシックエディタを設定する方法

グーテンベルクエディターはまもなくWordPressのデフォルトエディターになります。クラシックエディタを選択するオプションがあります

WordPressで未使用のCSSを削除する方法

WordPressで未使用のCSSを削除する方法

WordPressサイトで有料のWordPressテーマ、または公式のWordPressテーマリポジトリの人気のあるテーマを使用している場合は、

WordPressホームページで変更された日付で投稿を表示する方法

WordPressホームページで変更された日付で投稿を表示する方法

新しい情報で定期的に更新されるブログの特定の投稿を維持している場合は、投稿を並べ替えるのが最善です。

修正:Windows10アップデート後にタスクバーにバッテリーアイコンが表示されない

修正:Windows10アップデート後にタスクバーにバッテリーアイコンが表示されない

Windows 10ラップトップでバッテリーアイコンが突然なくなった?まあ、問題はいずれかで発生する可能性があります

WindowsおよびMac用のグーテンベルクキーボードショートカット

WindowsおよびMac用のグーテンベルクキーボードショートカット

ブロガー、コンテンツライター、マーケターのほとんどがGoogleドキュメントやMicrosoftWordでの執筆を好む理由を知っていますか

🔧修正:PHPインストールにWordPressに必要なMySQL拡張機能がないようです

🔧修正:PHPインストールにWordPressに必要なMySQL拡張機能がないようです

自己管理のWordPressサイトを運営したいですか?素晴らしい。あなたは無数のことを学ぶでしょう。設定の重要な部分の1つ

修正:更新後のWordPressで「エディターで予期しないエラーが発生しました」

修正:更新後のWordPressで「エディターで予期しないエラーが発生しました」

WordPressの新しいブロックエディターを使用して新しい投稿を書くことができませんか?「編集者」を取得している可能性があります

WordPress5.0でブロックエディターを無効にしてクラシックエディターをインストールする方法

WordPress5.0でブロックエディターを無効にしてクラシックエディターをインストールする方法

WordPress 5.0以降、WordPressのデフォルトのエディターは新しいブロックエディターです。新しいエディターは根本的に異なります

Windows11でフォルダアイテムを更新する方法

Windows11でフォルダアイテムを更新する方法

コンテキストメニューの[更新]オプションがない場合、Windows11のファイルエクスプローラーでアイテムを更新する方法は次のとおりです。

🔨修正:WordPressNginxサーバーのGutenbergで「更新に失敗しました」または「公開に失敗しました」エラー

🔨修正:WordPressNginxサーバーのGutenbergで「更新に失敗しました」または「公開に失敗しました」エラー

Nginxサーバーで実行されているWordPressサイトのGutenbergで「更新に失敗しました」または「公開に失敗しました」というエラーが発生しますか?私たち