投稿画面でトップにバナーを設置しようとすると、コンテンツ幅に阻まれて全幅にできません。
トップバナーだけ全幅にして、本文は左右に余白を入れたい！となった際、初心者の私は、コンテンツ幅を全幅にしてバナーを設置し、そのほかの箇所は左右にmarginを入れるというかなり手間なことをやっていました。
しかし、あれ？このバナー箇所がコンテンツ幅を決める記述の前に置けば良いのでは？と思い、テンプレートをいじれないかと調べたところ、カスタムテンプレートの存在を知りました・・・🐢
今回は、ブログ記事や固定ページで使えるカスタムテンプレートをphpファイルで作成する方法をお伝えします。
全幅のトップバナーを設置するためのカスタムテンプレートの作り方
まず、使用しているテーマテンプレートのフォルダ内に、phpファイルを新設します。ファイルの選択肢にphpがなくても、.textを選んでコードを記載し、名前の変更で.phpに変えられます。
phpファイル名：任意のものでOKかつ、ファイル内に記載しているTemplate Nameと一致する必要もありません。
Template Name：任意のものでOKで、日本語でも問題ありません。投稿や固定ページの「テンプレート」の選択肢に表示される名称です。
以下が参考コードです。
今回は、投稿も固定ページにも使えるように、Template Post Typeをpost,pageとしているほか、SPとPCで別の画像や動画を設定できるようにしています。
カスタムフィールドで設定すると拾われる要素は以下です。
（ここでは同じデバイスでの動画と画像を同時に設定すると、動画が優先されるようになっています。）
| カスタムフィールド名 | 設定内容 |
| top_banner_image_pc | PC用画像 |
| top_banner_image_sp | SP用画像 |
| top_banner_video_pc | PC用動画 |
| top_banner_video_sp | SP用動画 |
| top_banner_text | テキスト |
見え方を整えるCSSの設定方法
カスタムhtml内に<style></style>で囲って書くか、カスタムCSS箇所に記載するだけ。
まとめ
コンテンツ領域はいじらず、トップバナーだけ全幅にするためには、カスタムフィールドで設置した画像や動画、テキストを反映させるカスタムテンプレートを使用するのが便利です。
カスタムテンプレートはphpファイルを新しく作成してテーマテンプレートの中に置くだけ。
wordpressコード編集に慣れていない方でも、掲載コードを参考に、コピーしたりお好きなようにいじったりして簡単に設定できます。
この記事を書いた人