WordPressの特定ページにCSSを読み込ませるphp
管理しているサイトのフォームの追加依頼があり作業をしていると、Wordpressの特定ページにCSSを読み込ませるプラグイン「CSS & JavaScript Toolbox」が動作していないことに気づいた。
現在のWordpressのバージョンに対応していなようであった。
そのためCSSが効いていないのでフォームのページのデザインが崩れていた
なおフォームページは2つある。
プラグインを減らすためphp方式を選択
代わりのプラグイン「Simple CSS」「Simple Custom CSS and JS」などの情報がネットに乗っていたがプラグインを減らしたいと思っていたのでheader.phpに書き込む方法を取ってみることにした。
元のメールフォームはこちらで無料配布されている物を使わせていただいている
「簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード」これで検索してもすぐ出ると思う
なるべく簡単なphpで行きたかったので全てのページに2種のCSSを読み込ませるphpを書き換えてheader.phpに書き込んでみた。
参考にしたサイトは控えなかったのでごめんなさい。
何も起こらない！ そこでフォームページのソースを表示して探るとphpは動いているが肝心のCSSファイルのパス違うのを発見
上記のレスポンシブ メールフォームのフォルダーは、作者の解説通りにWordpressのテーマフォルダに入れていたが、使ったphpは選択しているテーマ内のパスから読み込むようである
そのためおそるおそるFTPソフトを使いメールフォームのフォルダーをテーマフォルダー内に入れてみた。
更なる問題発生！
当然と言えば当然なのだが、このフォームプログラムにはreset.cssが入っており、全ページの表示が崩れてしまった
フォームページの表示だけまともになった
仕方ないので
このサイトで「WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法」を参考にphpを書き換えて設置
フォームページとその他のページをチエック、成功！
でもこれで終わりではなかったフォームページ内のHTMLのjsやphpのパスがズレているのを修正してなんとか完了
何度やってもフォームの設置は手間取る。phpも勉強すべきだが取り組み出来ない。
覚書としてphpを置いておく
<?php if ( is_page( array( 'contact', 'contact2' ) ) ): ?>
<!-- 固定ページ「01」と「02」に読み込むCSS -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mailform8/css/reset.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mailform8/css/mailform.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mailform8/css/jquery.datetimepicker.css">
<?php endif; ?>
