WordPressでテスト環境やGitがなく、直接WordPressでテストページを作成する必要があった。
【原因】
今回は固定ページの基盤を作っているpage.phpでmainのidに条件が合わなかったのでうまくいかなかった。テストページを作成したかったので、urlにtestと追記したら、ここのせいでpage.phpのmainのidの指定から弾かれて、CSSが効かなかった。
【やったこと】
コードをコピペしたらそのまま使えるのかと思っていたが、そうではなかった。
【必要なこと】
１、CSSが効かない部分を明確にするために、デベロッパーツールでどこのCSSがかかっていないのか確認
２、ソースを全てコピーしてdifffで比較するのもあり
３、今回は固定ページの基盤を作っているpage.phpでmainのidに条件が合わなかったのでうまくいかなかった。
４、page.phpにmain idにtestが確認された時の条件分岐を追記する必要があった。
以下のpage.phpの上部のidの判別の部分に追記することで反映されるようになった。
idにtestが入った場合、idからtestを削除してidに当てはめてCSSが表示させるように作成してくれた。
<?php if(strpos($url, "test") !== false || strpos($post->post_name, "test") !== false) : ?>
<div class="main" id="<?php echo trim($post->post_name, 'test'); ?>">
<?php else: ?>
<div class="main" id="<?php echo $post->post_name; ?>">
<?php endif; ?>
※idをcontenttestとしたときに、contenとしか表示されなかったので、testの代わりに-2を判別するようにしたらうまくいった。
【WordPressの本番サイトで直接テストページを作成する際の流れ】
①固定ページの大元はpage.phpだからそこでテストページを認証するように記述する
②固定ページをコピペしてテストページを作成し、修正に必要なコードを追記する。
③コードを追記してレイアウトが崩れていたらCSSで修正する
【WordpressのCSSは以下の場所】
外観 / テーマファイルエディター
今回はとても勉強になった。