かなりハリボテですが、テーマを作成しました。HTML/CSSで基本構造を作り、あとはドットインストールで紹介されている手順に従って作成しただけのものです。

作成にあたって行き詰まった部分を書いていこうと思います。今となっては笑い話ですが、問題が起こるたび阿鼻叫喚でした。




問題1:buttonのデフォルトでついている青枠が消せない

いきなりwordpress関係ない部分なのですが、ここでちょっと詰まりました(笑)

ボタンのセレクタ:focus{outline: none;}

とすれば解決だったのですが、:focus を:active にしてたので消えていませんでした。




問題2:画面が真っ白!

index.htmlをheaderやfooterに切り出していく作業を終え、cssを読み込む設定をして、いったん表示を確認してみようかとサイトを開いてみると真っ白!

真っ白になる原因は様々なようですが、どれにも該当しないようだったので…仕方なくもう一度phpに変換するところからやり直してみると、問題なく表示されました。

ダメだった方のファイルと見比べてみると、phpを使ってcssを読み込む段階でミスが生じていたようです。

get_stylesheet_uri();とするところをget_stylesheet_url();としていました。ただのスペルミスにかなり時間を取られました…orz




問題3:突然現れたマージンが消せない

画面真っ白問題が解決したあと、次の問題はすぐに起こりました。

…ヘッダーの上に身に覚えのないマージンがついていました。

htmlタグに対してマージンがついているようなので、cssからhtmlのマージンを0にしてみるも変化なし。開発者ツールでよく見てみると、ご丁寧に !importantがつけてありました。

解決に導いてくれたサイトはこちら

どうやら、wp_headを設定した時についてくる設定のようです。

サイトにある通り、 functions.phpに以下のコードを追加して解決しました。

add_filter( ‘show_admin_bar’, ‘__return_false’ );


なんらかの目的で設定されたマージンではあるのでしょうが、思わぬ時間を取られてしまいました。




問題4:phpを使って画像を表示させようとしたらサイトの下半分が消えた

二つ目の記事やフッターが表示されていないことから、どこかでコードが読まれなくなっているのかな…とは思ったものの、何が間違っているのかは分からず呆然としていました。

デバッグモード(参考サイト)をtrueにして確認。気づきませんでしたが、どうやらサイドバーもバグっていたようです(笑)

このサイドバーのエラーについては、function.phpのregister_sidebarの中に

“id” => “sidebar-1”,

を追加することで消えました。

…画像が表示されない問題については、どうやらindex.phpの20行目に原因がある様子。

行数が見えなくなってしまっていますが、the_thumbnail(array(100,100))と書いてある部分が問題の行です。

ドットインストールのコードとよく見比べてみると、the_thumbnail(array(100,100))のコードに_post_が抜けていました。またスペルミスです…

the_post_thumbnail(array(100,100))と書き直したところ…

表示できました!




問題5(未解決):サムネイルのサイズを変更したい

カラムいっぱいに広がるサイズにしたかったので、

the_post_thumbnail(array(100,100))

the_post_thumbnail()

としてみたところ…

はみ出しました!

開発者ツールで見てみると、上のコードによりimg要素が生成され、それにheightとwidthがつけられているようです。

img要素ではなく、背景画像として設定できた方がサイズの調整がしやすいと考え、サムネイルに設定した画像を背景として表示する方法を探していました。

で、たどり着いたのがこのサイト。これとドットインストールの手順を参考に下の画像のように書いてみましたが、サムネイルに設定した画像は表示されませんでした。

今日はもう遅いので、この問題の解決はまた次の機会にやります…!

2019.3.31追記:アイキャッチ画像を設定してなかっただけでした笑