テーマ作成進捗 (2)

テーマが動かなかったら必須のテンプレート関数を確認する

管理バーがコンテンツに干渉しています
管理バーがコンテンツに干渉しています
Table of Contents も正しく動作していません
Table of Contents も正しく動作していません

この3日間地獄のような日々を送ってきました。

まず、全ては wp_head をいつかのタイミングで外してしまったことが原因なのですが、それに気づかず WordPressの管理メニューはコンテンツに被るし、プラグインは正常に動作しないなど、地獄を見ました。

そこで、原因調査のためにCSSを全部取っ払ったり、プロパティを一個ずつ消したりしてソースコードを精査しましたが、当然無駄に終わりました。

最終的には、新しい白紙のテンプレートを作って、中身を素っ裸にしたところ、ようやく問題点に気づいたんですよね。

完全にコードをまっさらにしてようやく自らの過ちに気づいたときの画像
完全にコードをまっさらにしてようやく自らの過ちに気づいたときの画像

wp_head(); が無いということに。

これに気づいたときは本当に宇宙猫になったし、人類を超越した気がした。

ま、まあCSSはきれいになったので別に良い…良いよね?(プロパティが素麵みたいになってて良くなかった)(素麵への多大なる風評被害)

<?php タグについて

このタグを ?> で閉じる際はファイルの末尾にそれが来ないかどうかを確認して置くのが良いみたいですね。?> の後に余分な改行が入るとコードが誤作動することがあるらしいです。

インラインで PHPコードを参照する場合は全く気にしなくてよかった懸念事項なのですが、むしろこういう場合は置くべきでないということに気付けて良かったです。

<section class="grid-33">
<?php get_template_part('/template-parts/content/content', 'widget_front'); ?>
<?php get_sidebar(); ?>
</section>
</div>
</main>
</div>

<?php get_footer(); [EOF] ← こんな感じに

CSSで3分割

今まで、私は width: 33.33%; を指定して3分割をしていたのですが、なんと width: calc(100% / 3);のように入力すれば自動で 1/3 の値を計算してくれるのでより正確な分割になります。分子について言えば、 100% = 1 なのでこのようにすればきっかり 1/3 になるわけですね。

2/3 のサイズにしたいときは、 width: calc(200% / 3); と指定すれば良いです。

カードレイアウト

表示ごとに配列が組まれているのがわかります
表示ごとに配列が組まれているのがわかります

あまり前のデザインが好きでなかったのでおしゃれにしました。このカードのためにわざわざショートコードまで作っていたのですが、この際、ボツになりました。

代わりに、配列を元に表示してくれるスクリプトを組んで優勝しました。

フッターをいじった

あのピンク色のヘッダーは正直自分でも不調和だな、と思っていたので、 purge されてウィジェットを置くエリアになりました。ヘッダーと同じ色になって落ち着きが増したと思います。

それに続いて伸びるCSSの行数は、すでにこの記事を執筆している時点で20,152桁 / 1,004行を超えました。助けて。

今後の目標

  • OS付属のフォントでどれだけきれいに日本語を表示できるか挑戦する。
  • バグってる表示を直す