2017年9月19日火曜日

カスタム投稿タイプ用のテンプレートを用意しCSSファイル指定の記述をしようとしたら

前回からの続き

インポートしたのでテンプレートを書き始める

Wordpressのカスタム投稿タイプへインポートしただけではどこにも記事へのリンクがない。のでこのままだと直接URLを打ち込むしか投稿を見る方法がない。
この段階ではまだカスタム投稿タイプへの投稿は非公開状態にしているのでまだリンクは用意しない。
Wordpressにログインしていれば
http://ドメイン名/{カスタム投稿タイプ名}
とURLを直接入力すればとりあえず見ることができるのでこれで調整を確認してから公開する。

カスタム投稿タイプの投稿一覧のテンプレートをつくる

まずは一覧表示のために archive-oldblog.php を作成する。
Wordpressは xxxx-{カスタム投稿タイプ名}.php
とすれば該当するカスタム投稿タイプの場合そちらを利用するという仕組みですからね。

これはすでに利用していた 一覧表示用のテンプレートをコピーしたあと修正した。一覧表示では各投稿タイトル・日時・抜粋を表示しているだけなので
ページタイトル表示を the_archive_title() に
抜粋表示を
get_template_part('content', 'excerpt');
↓
get_template_part('content', 'oldblogexcerpt');
のようにカスタム投稿タイプ用のテンプレートを呼び出すようにした程度。

カスタム投稿タイプの個別投稿ページのテンプレートをつくる

つづいて single.php をコピーして single-oldblog.php を作成し内容を修正する。
これも上記同様
get_template_part('content');
↓
get_template_part('content', 'oldblog');
のようにした。

カスタム投稿タイプ用のCSSファイルを用意する だけど…

カスタム投稿タイプであることを判定せずにすます方法を探す

これで最低限の 一覧表示→個別投稿 という流れができた。ここでCSSを追加しようとして考慮不足が発覚した。
通常のCSSファイルを読み込んだ後にカスタム投稿タイプ専用CSSファイルを読み込ませればいいとぼんやり思っていただけだった。

CSSファイルを読み込む記述は<head></head>の中なので header.php ファイル内のことになる。
ということはやっぱりすべての投稿でカスタム投稿タイプかどうか判定することになってしまう。いちいち判定を入れたくないからカスタム投稿タイプを使ったのでこれでは意味がない。

get_headerの呼び出し方で対応

少し考えて get_header() をカスタム投稿タイプ用のテンプレートでは get_header('oldblog') のようにすればいいことに気づいたけどそうすると header.php と header-oldblog.php の内容はほとんど同じでカスタム投稿タイプ用CSSファイル読み込みのための一行があるかないかだけになってしまう。

共通部分を別ファイルにして読み込むという形にするのもやたらファイルが増えてかっこわるい。
すべてをひとつのCSSファイルに入れてCSSのクラスを使って区別するというのがいちばん楽な気もするけどやっぱりCSSファイルは別にしたい。
どうしたものかしばらく考えたけどいい案が浮かばなかったのでCSSファイル読み込みのための一行を追加しただけの header-oldblog.php を用意することにした。
もっといい方法を思いつたら改良したい。

CSSファイル読み込みに関して検索したところ wp_enqueue_style() などを使うのが本来のWordpressの用法だという記事を見つけた。でも最初に勉強に使ったWordpressの本にそんなこと書いてなかったし、自分だけが使うブログなので今のところwp_enqueue_style()などは使わない。


CSSを編集しレイアウトは現ブログと同じにして背景色やタイトルの色などを旧ブログに似た感じにした。

これで完成だと思ったけど

というわけでちょっと惜しいところがあるけれどこれでよしとする。完成だ!と思ったけどよく見るといくつかおかしなところがある。

  • 個別投稿でカテゴリーとタグが表示されない。
  • サイドバーのカテゴリー一覧とタグ一覧が現ブログのものになってる。
  • サイドバーの月別アーカイブが現ブログのものになってる。
  • パンくずリストに抜けが発生している。
まあ当たり前といえば当たり前ですね。
ということでこれらを修正する必要がある。

というわけで次回に続く…


0 件のコメント:

コメントを投稿