投稿一覧ページのデザイン変更について

0
いいねをした人: 居ません
  • このトピックには5件の返信、3人の参加者があり、最後に井上により3年、 5ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #60236
    井上
    閲覧者
    3

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】11.7.3
    【お使いのブラウザ】chrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    いつもお世話になっております、

    投稿一覧ページのデザインをCSS等で変更したいと考えております。

    プラグインのCPT UIでカスタム投稿タイプを作成したアーカイブページを編集しようと考えたのですが、

    作成した(と思っている)phpファイルが見つかりません。。。

    目的としましてはクラス名などを追加したいです。

    申し訳ありませんが、投稿一覧ページのデザインの編集方法をご教授いただければ幸いです。

    よろしくお願いします。

    0
    いいねをした人: 居ません
    #60254
    キタジマ タカシ
    参加者
    2247

    作成した(と思っている)phpファイルが見つかりません。。。

    CPT UI でカスタム投稿タイプを定義しても PHP ファイルは作成されなかったと思います。カスタム投稿タイプ用のテンプレートが存在しない場合、WordPress は archive.phpsingular.php を使います。

    Snow Monkey の場合も上記のようになりますが、ページの全体を書き換えたいのか、一部分だけを書き換えたいのかでベストな方法が変わってきます。一般的な WordPress のお作法では archive-{カスタム投稿タイプ名}.phpsingle-{カスタム投稿タイプ名}.php を作成しますが、普通のアーカイブページやシングルページとほぼほぼ同じだったとして、そのようなテンプレートをつくるとコードの重複が発生してメンテナンスコストがあがります(共通部分に修正があったときにどちらのテンプレートにも修正を反映しないといけないため)。なので Snow Monkey では一部分だけの修正の場合は一部分のテンプレートだけをカスタマイズする仕組みがあります。

    ということで、具体的にどこをどうしたいのかを書いていただけると、より良い提案ができると思いますので、詳しく教えていただくことはできますか?

    ※カスタム投稿タイプのカスタマイズの考え方としては下記のトピックが参考になります。

    0
    いいねをした人: 居ません
    #60293
    井上
    閲覧者
    3

    キタジマさま

    いつもありがとうございます。

    CPT UI でカスタム投稿タイプを定義しても PHP ファイルは作成されなかったと思います。

    てっきり自動で作られるのかと勘違いしておりました。。

     

    目的としましては、ある投稿一覧をピンタレストの様なグリッドデザインにしたく思っています。

    ほかの投稿一覧に反映はしたくなく、そのページのみ反映したいと思っており、class名などを付けたかったのです。。

     

    下記の様な感じです。

     

    ご教授いただけると嬉しいです。

    よろしくお願いします。

    0
    いいねをした人: 居ません
    #60300
    Olein_jp
    参加者
    545

    横から失礼します。

    CPT UIでカスタム投稿タイプを追加し、そのカスタム投稿タイプのアーカイブを表示した場合、<body>に記載されるクラス名にpost-type-archivepost-type-archive-{custom-post-type-slug-name}というCSSクラスが自動的に付与されますので、そちらからCSS指定することは可能かもしれません。

    また、
    >ある投稿一覧をピンタレストの様なグリッドデザインにしたく思っています。
    とのことですが、Snow Monkey側のスタイルをどれくらい利用するのか(or 全く利用しないのか)によって、対応方法は変わってくると思います。

    一覧に表示されている各投稿のマークアップ自体を独自のものにするのであれば、テンプレートファイルの書き換え(template-parts/archive/entry/**辺り?)が必要になるかもしれませんね。

    その場合、子テーマでアプローチするかMy Snow Monkey(プラグイン)でアプローチするかで、また方法も変わってくるかと思います。

    また、現状どのようなテンプレートファイルを読み込んでいるか簡単に確認するために Show Current Template というプラグインを利用されると良いかもしれません。実際、テンプレートの上書きなどをされた際にも正常に読み込まれているかどうかを確認することも容易になります。

    以上、ご参考になれば幸いです。

    2
    いいねをした人: 居ません
    #60407
    キタジマ タカシ
    参加者
    2247

    @井上さま
    あるカスタム投稿タイプのアーカイブページの .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 さんが書かれているようにテンプレートの置換や追加が必要になるかと思います。

    1
    いいねをした人: 居ません
    #60455
    井上
    閲覧者
    3

    @Olein_jpさま

    ご回答ありがとうございます!

    <body>に記載されるクラス名にpost-type-archiveやpost-type-archive-{custom-post-type-slug-name}というCSSクラスが自動的に付与されますので、そちらからCSS指定することは可能かもしれません。

    こちらに気づきませんでした。。。
    確認したところ付与されていましたので、今後確認していきたいと思います。

    現在子テーマでは作成していませんので、My Snow Monkeyのアプローチを探っていきたいと思います。

    プラグインも入れてみたいと思います。ありがとうございます!

    色々調べながら手探りで作っていますので、初歩的な質問ばかりするかもしれませんが、どうぞよろしくお願いします。

     

    @キタジマさま

    お返事ありがとうございます!

    functions.phpにいただいたコードを貼り付けたところ、実現できました!

    いつも本当にありがとうございます!

    1
    いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「投稿一覧ページのデザイン変更について」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。