WordPress テスト実装 〜heade-test.phpを表示〜

ヘッダー部分のphpをテストします。前提としては以下のようなところです。

  1. header.phpをコピーしてheader-test.phpを作成済み
  2. index.phpを以下のように修正
    get_header();get_header('test');

そしてheader-test.phpの一番下の部分を下のように修正
<div id="content" class="site-content">テストのように修正しました。
なので表示したヘッダー部分に「テスト」という文字が表示されるはずです。

なんとか表示されました。確認のためにget_headerの部分も元に戻しget_header()表示して見ます。

確認よし!

横スクロールメニュー実装


上のようなメニューを作成したいと思っています。
ここに、カテゴリのリストを表示するのが今回の目標です。

早速、BootStrapを使用するのでそれをstyle.cssにインポートします。

/*--- Add 2019-12-30 --*/
@charset 'utf-8';
@import url('https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js');

これをstyle.cssのはじめの部分(48行目)に追加しました。

フォントが少し小さくなりましたが、そんな影響しないであろうと思いそのままにしています。

さらに、横スクロールを追加して見たものの。。。
PC版での表示はよし!

スマホ版での表示はアウトー!

CSSを細々といじるのはよろしくないので、というか嫌いなので他の方法を考えます。

でわでわ。。。