web-dev-qa-db-ja.com

連絡先ページに外部CSSを追加する

私はWordPressの私の連絡フォームにカスタムCSSを追加しようとしています。これはmysite.com/contactでロードされるwpページです。私は既存のコードを編集したくない、私はこれを単純なプラグインを書いてやりたいのです。 （実際の主な目的は、この連絡先ページのGoogleマップコンポーネントを"display:none;"にするスタイルを追加して非表示にすることです）

私はこの目的のためにwp_enqueue_style()を使うことができることを知っていますが、どのアクションにフックするべきかわかりません。連絡フォームページがロードされるときに必要なときだけ、このcssをロードしたい（cssのためにこのcssを既存の連絡先に追加したい）。

どうすればこれを達成できますか？

どちらが正しいアクションですか？

そして、私が質問をより一般的なものにするとしたら、「ワードプレスページをロードしている間にカスタムcssをロードするためにどんなアクションをフックするべきですか？」

pagescsswp-enqueue-style
1
SoftwareTheory

私はあなたがここで物事を過度に複雑にしようとしていると感じます。達成したいことは child theme のほうが簡単でしょう。それはあなたが達成したいのは本当に簡単なことなので、私が検討することです。

あなたがする必要があるのは、連絡先フォームのテンプレートをあなたの子供のテーマにコピーし、そのテンプレートにカスタムcssを追加し、そしてあなたの子供のテーマのstyle.cssに応じてスタイルすることだけです。あなたの子供のテーマは親のテーマのテンプレートの代わりに常にこのテンプレートを使用します

編集1

さて、ここで少し誤解しているようです。

wp_enqueue_style() は、ワードプレスのページにスタイルシートを正しくエンキュー/追加するために使用されます。これらのスタイルシートはすべてのページで利用可能です。ただし、 条件付きタグ を使用してスタイルシートを条件付きでロードすることもできます。つまり、特定のページに対してのみスタイルシートをロードすることも、特定の条件が存在する場合にのみスタイルシートをロードすることもできます。

wp_enqueue_scripts は、フロントエンドでスクリプトとスタイルシートをエンキューするために使用する適切なフックです。

それで、あなたはあなたのスタイルシートを作成して例えばpluginstyle.cssと呼び、そこにあなたのカスタムスタイルを追加することができます。それでは、メインのプラグインファイルに、そのスタイルシートをエンキューする必要があります。まず、wp_enqueue_style()を追加する関数を作成します。次に、その関数をwp_enqueue_scriptsフックにフックします。 $srcは、親テーマ、子テーマ、およびプラグインとは異なることを忘れないでください。これが例です

function plugin_stylesheet() {
    wp_enqueue_style( 'plugin-styles', plugins_url( '/pluginstyle.css', __FILE__ ) );
}

add_action( 'wp_enqueue_scripts', 'plugin_stylesheet' );

これであなたの質問に答えられると思います。行ったばかりの関数やフックを調べてみるのは良い考えです。

編集2

あなたのコメントでなされたあなたの仮定は正しいです。最初の編集で述べたように、コンディショナルタグが必要になります。その編集のリンクを参照してください。

あなたの質問の目的のために、あなたは連絡先ページをターゲットにするためにis_page_template()条件タグを使う必要があるでしょう。ですから、これが機能するためには、あなたが特定のページにいるかどうかをチェックするifステートメントでwp_enqueue_style()をラップする必要があります。そうであれば、スタイルシートはロードされ、そうでなければスタイルシートはロードされません。

私が編集1で言及し忘れたことの1つだけですが、wp_enqueue_scriptsフックに関数を追加するときには優先順位も指定する必要があります。デフォルトでは、これは10になるので、あなたのスタイルがテーマのメインスタイルシートの後にロードされるようにするには、後でそれをロードする必要があるでしょう。 10以上のもの.

だから、すべての言ったと、あなたはあなたのプラグインで次を使用することができます。あなたが私達の連絡先ページに使用しているものにページテンプレートを変更するだけです。私は自分のコードをテストするためにテストページ（template page-test.php）を使いました。

function plugin_stylesheet() {
    if(is_page_template( 'page-test.php' )) {
         wp_enqueue_style( 'plugin-styles', plugins_url( '/pluginstyle.css', __FILE__ ) ); );
    }
}   

add_action( 'wp_enqueue_scripts', 'plugin_stylesheet', 999 );
0
Pieter Goosen