- このトピックには15件の返信、4人の参加者があり、最後に
により3年、 10ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】 12.1.0
【お使いの Snow Monkey Blocks のバージョン】 10.0.0
【お使いの Snow Monkey Editor のバージョン】 これなんでしたっけ、新ツール？ 教えて下さい
【お使いのブラウザ】 Chrome
【当該サイトのURL】 https://www.kigoulab.co.jp/ ほか、これから新規制作するサイト### 実現したいこと
比較的デザインリッチなサイトを作るときのベストプラクティスを考えています。
固定ページ（投稿ページも）で、ページごとに異なるデザインをしたいと思います。まずはブロロックの組み合わせと、CSSによるカスタマイズだけで実現をめざし、個別テンプレートを子テーマに入れなければ実現出来ない場合は別ケースとして質問しますまずは、CSSをページごとに振り分けて継承させるために、たとえば、bodyタグにスラック名等を利用したクラスを挿入できないでしょうか
次ぎに、CSSや画像が、カスタマイザーで管理にすにはボリュームが大きいので、外部ファイルで管理したいと考えています。これらの理想的な格納場所、ファイル名はどうすればよいでしょうか。現在
/wp-content/themes/snow-monkey/assets/my/css/my.css (/my/img/hoge.png）
に格納して、オリジナルファイルと分離しようと思ってますが、いかがでしょう バージョンアップで上書きされないでしょうか
最後に、外部化したCSSファイルを呼び出すのは、以前教わったmy-snow-monkeyのwp_headフックで、呼び出せばよいでしょうか
もっとよい方法があれば、ご教授いただきたく。よろしくお願いいたします。
いいねをした人: 居ません小山智久 さん こんにちは！
質問が3つですね
– bodyにページごとのclassをつけたい
– CSSファイルの格納場所はどこがいいか
– 外部化したCSSファイルの読み込み方１問１答のほうがわかりやすいので、2番目・3番目のほうは別にトピックを立てていただけたら良いかと思います。（1,2はわからないけど、3番目のことは答えられるぞ！という人から答えをいただきやすいですし ＾＾）
（こちらのトピックではbodyにclassについてという前提で進めさせてください）
bodyにclassを付ける方法はこちらのページが参考になりそうです
上記のコードをMy Snow Monkeyプラグインに記述すると、ページごとのslugがbodyのclassに格納されるかと思います
いいねをした人: 居ませんアクツさん Olein_jpさん 早速コメントありがとうございます。
スミマセン、たしかに質問が3つまとまってました。後ほどスレッド分けます。少々お待ち下さい。bodyに追加する記述、リンク先では、一般例として、functions.phpに記述するようになっていますが、
Snow Monkey的なお作法としては、My Snow Monkeyプラグインに記述する形になるのですよね。パスについては、僕が考えた案だとバージョンアップ時に消えるようなので、新たな格納先を具体的考えて見て
また提示したいと思います。これは新しいスレッドで行います。少々お待ち下さい。まずはご回答頂いた皆様にお礼まで、ありがとうございました！
いいねをした人: 居ませんキタジマさん
私もよくbody_classにpage-{slug名}を吐き出す処理をMy Snow Monkeyに追加するのですが、けっこう何かに影響する感じでしょうか（処理多くしてるのでだめだよね等）
ID値のclassだと、そのページ作り直してしまったときなどに駄目になるので（ページ複製してページ作り変えてしまう的なこともあったりするので）、slugのほうがいいかなって安易に使ってたのですが、極力Snow Monkeyで出力してるpageid-{ID}とかのほうがいいのか、知りたいなと思って（＾＾：）
（そして、小山智久さん、横入りで質問ですみません）
いいねをした人: 居ませんアクツさん
あ、単純に
.page-id-12345のようなクラスが出力されるのでそれを使えば良いのでは？と思っての書き込みでした。テストサイトと本番サイトで id が異なることが多いようであれば、独自にスラッグのクラス名を追加するほうが勝手は良いかもですね！いいねをした人: 居ませんキタジマさん
早速のご返答ありがとうございます！
slug名だと思いっきり駄目そうな実装だったらやばい〜（大汗）と思ったので、回答いただけてとても助かりました！
お手数おかけしました！いいねをした人: 居ませんご返事遅れてすみません。季節柄なのでデートしてましたw
横入りで質問大歓迎です。思いのほか皆さん同じことを考えていたことがわかり、よかったです。
スレッドにわけるのは、この後行います。まずは、body classにスラッグを追加する件について整理します。ページごとに、異なるデザインを実現するために、
固定ページ等で、body classにスラッグを追加するのは、サーバーの移転を考慮すると、ありだとのこと。
サーバーの移転がないなら、デフォルトでつくclassを利用するのもあり。body classを付けるには、My Snow Monkeyに以下のコードを追加する。
add_filter( 'body_class', 'add_page_slug_class_name' ); function add_page_slug_class_name( $classes ) { if ( is_page() ) { $page = get_post( get_the_ID() ); $classes[] = $page->post_name; } return $classes; }これは、階層を考えない場合、階層を考える場合はスレッドにあるサイトを参考に
ただ、個人的には、子階層にも同じスタイルを与えたい場合はCSSにクラスを複数セレクターで記述すれば実現できるので
そこまで神経質にならなくとも対応可能なような気がしてます。以上です。認識違いがありましたら、ご指摘いただけると幸いです。
いいねをした人: 居ませんこのコードで問題ないと思いますが、
$page->post_nameだけだとデフォルトで書き出されるクラス名とぶつかる可能性もあると思うので、僕ならなにか prefix をつけるかなぁと思いました。いいねをした人: 居ません僕ならなにか prefix をつけるかなぁと思いました。
具体的にどんな感じになりますか。ボクコードが書けないで、prefixがなんなのかもわかっていません。
接頭辞？ よくCSSでセレクターを、ホーム用とか、サブコル用とかわかりやすくするためつける、二文字ぐらいやつでしょうか
この場合、post_nameに接頭辞をつけたりするのでしょうかすみません。初歩的な質問ですが、ご指南下さい
いいねをした人: 居ませんあ、そうです、接頭辞です。要は
'my-page-' . $page->post_name;のようにすれば WordPress が書き出すものとは被らないということですね。いいねをした人: 居ません一応確認です
add_filter( 'body_class', 'add_page_slug_class_name' ); function add_page_slug_class_name( $classes ) { if ( is_page() ) { $page = get_post( get_the_ID() ); $classes[] = 'my-page-' . $page->post_name; } return $classes; }こういうことでよいでしょうか よければ閉じますね。
いいねをした人: 居ません
- トピック「固定ページカスタマイズのベストプラクティス」には新しい返信をつけることはできません。