-
投稿者投稿
-
2020年11月3日 4:57 PM #60236
トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。
【お使いの Snow Monkey のバージョン】11.7.3
【お使いのブラウザ】chrome
【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)===
いつもお世話になっております、
投稿一覧ページのデザインをCSS等で変更したいと考えております。
プラグインのCPT UIでカスタム投稿タイプを作成したアーカイブページを編集しようと考えたのですが、
作成した(と思っている)phpファイルが見つかりません。。。
目的としましてはクラス名などを追加したいです。
申し訳ありませんが、投稿一覧ページのデザインの編集方法をご教授いただければ幸いです。
よろしくお願いします。
♥ 0Who liked: No user2020年11月4日 9:55 AM #60254作成した(と思っている)phpファイルが見つかりません。。。
CPT UI でカスタム投稿タイプを定義しても PHP ファイルは作成されなかったと思います。カスタム投稿タイプ用のテンプレートが存在しない場合、WordPress は
archive.php
やsingular.php
を使います。Snow Monkey の場合も上記のようになりますが、ページの全体を書き換えたいのか、一部分だけを書き換えたいのかでベストな方法が変わってきます。一般的な WordPress のお作法では
archive-{カスタム投稿タイプ名}.php
やsingle-{カスタム投稿タイプ名}.php
を作成しますが、普通のアーカイブページやシングルページとほぼほぼ同じだったとして、そのようなテンプレートをつくるとコードの重複が発生してメンテナンスコストがあがります(共通部分に修正があったときにどちらのテンプレートにも修正を反映しないといけないため)。なので Snow Monkey では一部分だけの修正の場合は一部分のテンプレートだけをカスタマイズする仕組みがあります。ということで、具体的にどこをどうしたいのかを書いていただけると、より良い提案ができると思いますので、詳しく教えていただくことはできますか?
※カスタム投稿タイプのカスタマイズの考え方としては下記のトピックが参考になります。
♥ 0Who liked: No user2020年11月4日 6:48 PM #60293キタジマさま
いつもありがとうございます。
CPT UI でカスタム投稿タイプを定義しても PHP ファイルは作成されなかったと思います。
てっきり自動で作られるのかと勘違いしておりました。。
目的としましては、ある投稿一覧をピンタレストの様なグリッドデザインにしたく思っています。
ほかの投稿一覧に反映はしたくなく、そのページのみ反映したいと思っており、class名などを付けたかったのです。。
下記の様な感じです。
ご教授いただけると嬉しいです。
よろしくお願いします。
♥ 0Who liked: No user2020年11月4日 8:46 PM #60300横から失礼します。
CPT UIでカスタム投稿タイプを追加し、そのカスタム投稿タイプのアーカイブを表示した場合、
<body>
に記載されるクラス名にpost-type-archive
やpost-type-archive-{custom-post-type-slug-name}
というCSSクラスが自動的に付与されますので、そちらからCSS指定することは可能かもしれません。また、
>ある投稿一覧をピンタレストの様なグリッドデザインにしたく思っています。
とのことですが、Snow Monkey側のスタイルをどれくらい利用するのか(or 全く利用しないのか)によって、対応方法は変わってくると思います。一覧に表示されている各投稿のマークアップ自体を独自のものにするのであれば、テンプレートファイルの書き換え(
template-parts/archive/entry/**
辺り?)が必要になるかもしれませんね。その場合、子テーマでアプローチするかMy Snow Monkey(プラグイン)でアプローチするかで、また方法も変わってくるかと思います。
また、現状どのようなテンプレートファイルを読み込んでいるか簡単に確認するために Show Current Template というプラグインを利用されると良いかもしれません。実際、テンプレートの上書きなどをされた際にも正常に読み込まれているかどうかを確認することも容易になります。
以上、ご参考になれば幸いです。
♥ 2Who liked: No user2020年11月5日 1:44 PM #60407@井上さま
あるカスタム投稿タイプのアーカイブページの.p-archive > .c-entries
の部分に任意のクラスを追加したいということであっていますか?であれば、下記のコードの追加で実現できます。My Snow Monkey プラグインか子テーマのfunctions.php
に貼り付けてみてください。add_filter( 'snow_monkey_template_part_render_template-parts/archive/entry/content/content', function( $html, $name ) { // カスタム投稿タイプ news のカスタム投稿アーカイブのとき if ( 'news' === $name ) { // my-class というクラスを追加 return str_replace( 'c-entries ', 'c-entreis my-class ', $html ); } return $html; }, 10, 2 );
もしクラスの追加程度ではなくて、一覧部分の HTML をまるっと別物にしたいという場合は、Olein さんが書かれているようにテンプレートの置換や追加が必要になるかと思います。
♥ 1Who liked: No user2020年11月5日 11:43 PM #60455@Olein_jpさま
ご回答ありがとうございます!
<body>に記載されるクラス名にpost-type-archiveやpost-type-archive-{custom-post-type-slug-name}というCSSクラスが自動的に付与されますので、そちらからCSS指定することは可能かもしれません。
こちらに気づきませんでした。。。
確認したところ付与されていましたので、今後確認していきたいと思います。現在子テーマでは作成していませんので、My Snow Monkeyのアプローチを探っていきたいと思います。
プラグインも入れてみたいと思います。ありがとうございます!
色々調べながら手探りで作っていますので、初歩的な質問ばかりするかもしれませんが、どうぞよろしくお願いします。
@キタジマさま
お返事ありがとうございます!
functions.phpにいただいたコードを貼り付けたところ、実現できました!
いつも本当にありがとうございます!
♥ 1Who liked: No user -
投稿者投稿
- トピック「投稿一覧ページのデザイン変更について」には新しい返信をつけることはできません。