CSSとJSを組み合わせるためのWordPressプラグイン

次のコラム WordPress Tips では、CSS と JS を組み合わせた WordPress プラグインを紹介します。困っている友人の役に立てば幸いです。

通常、複数の CSS や JS を 1 つのファイルに結合して出力することを検討しますが、この問題を解決するために、これを WordPress に実装する WordPress プラグインを作成しました。 、 目的。

実装原則

私の以前の「PHP 結合圧縮 CSS 出力モジュール式 CSS の作成」を読んでいると、まず私のキャッシュ ファイルの処理方法のいくつかを理解できると思います。ファイルのマージとコードの圧縮に関するいくつかのアイデア。このプラグインの実装原理は上記の記事で紹介したものと基本的に同じです。

インストール

まず、プラグインをダウンロードします。私は GitHub でホストしています。このページからダウンロードできます。ダウンロード後、解凍し、解凍したフォルダー全体を WordPress Web サイトのプラグイン ディレクトリに直接アップロードします。次に、バックグラウンドに移動して有効にします。

を使用して背景に入ります。「設定」メニューの下にサブメニュー「縮小」があります。入力後、さまざまなオプションを設定できます。機能を理解するためのコメントです。

css と js の出力方法が異なるため、wp-minify を使用するにはテーマを変更する必要があります。テーマ内で元の CSS と JS 出力を削除し、次の方法で JS を出力します。

<?php wp_minfiy_js([&#39;/wp-content/themes/yourtheme/js/base.js&#39;,&#39;/wp-content/themes/yourtheme/js/module.js&#39;,&#39;/wp-content/themes/yourtheme/js/others.js&#39;]); ?>

CSS を出力する方法は同じですが、別の関数 wp_minify_css() を使用します。関数のパラメータは配列で、配列内の要素はスクリプトファイルへのパスで、WordPressのインストールディレクトリをルートディレクトリとした完全な相対パスで記述します。

WordPress のルート ディレクトリを基準にしてスクリプトを記述する必要があるのはなぜですか?現在のテーマ ディレクトリに相対するのではなく?実際、その理由は非常に単純で、参照する CSS や JS がテーマ ディレクトリにあるとは限らず、他のディレクトリにあるスタイルやスクリプトを参照する場合があるからです。もちろん、これは相対パスです。「/../test.js」のように、WordPress の上位ディレクトリにあるスクリプトを参照することもできますが、スクリプトの先頭は / で始まる必要があることに注意してください。相対パスエラーが発生する可能性があります。

もちろん、具体的な使用方法は原理を理解した上で簡単に変更したり使用したりできます。

その他の WordPress 技術記事については、

WordPress ウェブサイト構築チュートリアル

列をご覧ください。

以上がCSSとJSを組み合わせるためのWordPressプラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。