カスタム投稿タイプ一覧ページのカスタマイズ

昨夜ふっと記憶の表面に浮上したので、そのことを書こうと思います!
(日付が変ってしまったので、日付的には一昨日になります)

カスタム投稿タイプで作った「一筆」の一覧ページが思ったように表示できない
それをなんとかしようとした悪戦苦闘の10日間~・・・
の前半は、開け~ゴマ! に書きました。
で後半もすぐに書こうとして・・・直後に記憶の底に沈み………
昨夜思い出したので、覚えている限りのメモを残します。

前半のおさらい

固定ページで作った「一筆」一覧ページが
1週間以上かかって
実は使われていたのは最後の頼みの綱みたいなindex.phpだった
と気づき

それがわかって直接index.phpをいじったら
他のカテゴリー一覧ページまでまさかの豹変で大失敗。
そこで、一筆一覧専用index.phpを作るのではなく
ひとつのindex.phpで一括表示。
wordpressの特徴
1つのページをいくつかのphpで分割構築している
というのを利用して


呼び出すphpファイルを分岐させる!
記述部分は、前半の記事に書きました。

素人だしここまで理解するのに1週間以上かかったわけですw

で、list-news.phpはlist.phpをまんま複製してから
不要な部分を削除したり
カテゴリー一覧ではないのでページの説明文を付け足したりします。

それから~

CSSで好みの見た目に変える。

後半はここからw

CSSで見た目を変えるというのは 昔から
曜日によって変えたり~いろいろ挑戦してきましたけど
今回、一筆一覧ページだけ他と変えるというのは?

そもそもPHPがわからないというのが、この問題を余計難しくしている
というのは管理人自身もわかっています。

で、これもまた検索しまくりました。

検索って どういう語句を並べるか
なんて書いたらピッタリの記事にたどりつけるか
これ、むずかしいですよねー

検索しまくっていると 言葉を変えても
「いや、それはさっき見たし~」とか
「その意味じゃないんだよな~」とか
自分が知りたいことが書いてあるページを見つけることの難しさを痛感します。

数日かかってやっとたどり着いたのが
Knowledge Baseというサイトのこのページでした!
読んだときは なるほどぉーー!!! そぉーか!\(@^0^@)/
ってなりましたw

bodyタグのclassに着目

デベロッパーツール(クロームだとF12キー)でページを見ると

カスタム投稿タイプの一覧ページのbodyのclassは


post-type-archive-newsと書いてあります。

ちなみに カテゴリー(下の画像はキッチン)の一覧ページのbodyのclassだと
違うことが書いてあります。

素人目線の言い方をすると
各ページには独自の名前みたいなものがついていて
その名前で区別して体裁を変える!

つまり、この名前さえわかれば
どのページでも、指定してそのページだけ
いろいろ見た目を変えることができるということです。

みょーなたとえをしてみますw


これでわかりやすくなったら良いのですがw
文字がずらりと並んでて 左側(先頭)ほどざっくり分類
一番右側が そのページを指定する鍵ワード
あ、厨女と女No3はほぼ同じです。文字か数字(ID)の違い。
キッチンという親カテゴリーのIDが3
子カテゴリーは ご飯写真、調理と調味の2つに分かれていますが
IDは3ではありません。

CSSの書き方は

この場合は、記事タイトルの文字の指定をやっています。
わかりやすいところでは タイトル部分の背景色が
普通の一覧は黄色なのに 一筆一覧はピンクに変えていたり。
body.post-type-archive-news .post-meta {
margin:0;
padding:0;
border-style:hidden !important;
background: none;
}

この記述では、普通はある日付部分の赤い点線ラインを消しています。
他にも指定していますが まとめると
全体的に間隔をせばめて単純なリストのような見た目にしました。
前にも書きましたけど、こんだけ時間かけてるものの
カスタム投稿タイプで作った「一筆」ってぜんぜん重要じゃないんですよねーw

なんだろ・・・この性格。
どうでもいいことにどうしてそこまでこだわるの?
って・・・自分でも思うんですよね~

また、同じような理屈で
#body #post-1735 {
background-image: url("http://momoiro・・・・・・・.gif");
background-position: 50% 5% ;
background-repeat: repeat-y;
padding:20px;
margin:0;
}

これは、固定ページで作ったゲームのまとめ?ページの背景画像指定
#post-1735 idが1735のページのみ適用される指定です。
メニューバーにはないですがサイドバーから飛べるようにしてあるページで
プロフィールページなんかも背景画像を指定してあります。
まぁ特に重要ではないんですけど、、
昔からいろいろいじってきた名残りと言いますかw

ただこの場合は bodyではなく #body です。
<div id=”body”> 上記のCSS指定では、背景画像はこの <div>でくくられている範囲で縦方向に繰り返し貼り付けられるという指定 </div>
#はid .はclass これ鉄則ですねw

このやり方を使えば、プラグインなど使わずCSSで細かく見た目を指定することができますが
あれもこれもやると頭が混乱してくるし、一文字でも打ち間違うとまったく反映されないので
どうしても変えたい部分だけからはじめるほうがいい気がしました。

こういうCSSで見た目を変えるのは
FC2ブログやその前のロリポブログからやってたことですが
レンタルブログはHTMLとCSSだけで単純でした。
ところが wordpressは、phpだってこと、
そのphpファイルも部品扱いでパーツの寄せ集めになっているってことで
phpが判らない者には特にややこしい!w
一時期やってたMovable Typeも wordpressと同じCMSプラットフォームですけど
やっぱし管理人には難しかったですね!

以上
多少のHTMLが分かる程度の素人がカスタマイズするのは大変だったーって話でした