固定ページカスタマイズのベストプラクティス

0
いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全16件中)
  • 投稿者
    投稿
  • #63736
    アバター画像星乃 みなみ
    閲覧者
    36

    【お使いの 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フックで、呼び出せばよいでしょうか

    もっとよい方法があれば、ご教授いただきたく。よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #63738
    アクツ
    参加者
    167

    小山智久 さん こんにちは!

    質問が3つですね

    – bodyにページごとのclassをつけたい
    – CSSファイルの格納場所はどこがいいか
    – 外部化したCSSファイルの読み込み方

    1問1答のほうがわかりやすいので、2番目・3番目のほうは別にトピックを立てていただけたら良いかと思います。(1,2はわからないけど、3番目のことは答えられるぞ!という人から答えをいただきやすいですし ^^)

    (こちらのトピックではbodyにclassについてという前提で進めさせてください)

    bodyにclassを付ける方法はこちらのページが参考になりそうです

     

    上記のコードをMy Snow Monkeyプラグインに記述すると、ページごとのslugがbodyのclassに格納されるかと思います

    1
    いいねをした人: 居ません
    #63739
    Olein_jp
    参加者
    566

    追記:あくつさん書かれているので削除しときます。(トピック訳の兼ね合いで)

    2
    いいねをした人: 居ません
    #63750
    アバター画像星乃 みなみ
    閲覧者
    36

    アクツさん Olein_jpさん 早速コメントありがとうございます。
    スミマセン、たしかに質問が3つまとまってました。後ほどスレッド分けます。少々お待ち下さい。

    bodyに追加する記述、リンク先では、一般例として、functions.phpに記述するようになっていますが、
    Snow Monkey的なお作法としては、My Snow Monkeyプラグインに記述する形になるのですよね。

    パスについては、僕が考えた案だとバージョンアップ時に消えるようなので、新たな格納先を具体的考えて見て
    また提示したいと思います。これは新しいスレッドで行います。少々お待ち下さい。

    まずはご回答頂いた皆様にお礼まで、ありがとうございました!

    1
    いいねをした人: 居ません
    #63783
    アバター画像キタジマ タカシ
    参加者
    2421

    WordPress は詳細ページごとに body に個別のクラスがつくので、独自に追加するよりそれを使ったほうが良いと思います。

    0
    いいねをした人: 居ません
    #63801
    アクツ
    参加者
    167

    キタジマさん

    私もよくbody_classにpage-{slug名}を吐き出す処理をMy Snow Monkeyに追加するのですが、けっこう何かに影響する感じでしょうか(処理多くしてるのでだめだよね等)

    ID値のclassだと、そのページ作り直してしまったときなどに駄目になるので(ページ複製してページ作り変えてしまう的なこともあったりするので)、slugのほうがいいかなって安易に使ってたのですが、極力Snow Monkeyで出力してるpageid-{ID}とかのほうがいいのか、知りたいなと思って(^^:)

    (そして、小山智久さん、横入りで質問ですみません)

    0
    いいねをした人: 居ません
    #63808
    アバター画像キタジマ タカシ
    参加者
    2421

    アクツさん

    あ、単純に .page-id-12345 のようなクラスが出力されるのでそれを使えば良いのでは?と思っての書き込みでした。テストサイトと本番サイトで id が異なることが多いようであれば、独自にスラッグのクラス名を追加するほうが勝手は良いかもですね!

    2
    いいねをした人: 居ません
    #63814
    アクツ
    参加者
    167

    キタジマさん

    早速のご返答ありがとうございます!
    slug名だと思いっきり駄目そうな実装だったらやばい〜(大汗)と思ったので、回答いただけてとても助かりました!
    お手数おかけしました!

    0
    いいねをした人: 居ません
    #63842
    アバター画像星乃 みなみ
    閲覧者
    36

    ご返事遅れてすみません。季節柄なのでデートしてました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にクラスを複数セレクターで記述すれば実現できるので
    そこまで神経質にならなくとも対応可能なような気がしてます。

    以上です。認識違いがありましたら、ご指摘いただけると幸いです。

    0
    いいねをした人: 居ません
    #63906
    アバター画像キタジマ タカシ
    参加者
    2421

    このコードで問題ないと思いますが、$page->post_name だけだとデフォルトで書き出されるクラス名とぶつかる可能性もあると思うので、僕ならなにか prefix をつけるかなぁと思いました。

    1
    いいねをした人: 居ません
    #63937
    アバター画像星乃 みなみ
    閲覧者
    36

    僕ならなにか prefix をつけるかなぁと思いました。

    具体的にどんな感じになりますか。ボクコードが書けないで、prefixがなんなのかもわかっていません。
    接頭辞? よくCSSでセレクターを、ホーム用とか、サブコル用とかわかりやすくするためつける、二文字ぐらいやつでしょうか
    この場合、post_nameに接頭辞をつけたりするのでしょうか

    すみません。初歩的な質問ですが、ご指南下さい

    0
    いいねをした人: 居ません
    #64003
    アバター画像キタジマ タカシ
    参加者
    2421

    あ、そうです、接頭辞です。要は 'my-page-' . $page->post_name; のようにすれば WordPress が書き出すものとは被らないということですね。

    0
    いいねをした人: 居ません
    #64420
    アバター画像星乃 みなみ
    閲覧者
    36

    一応確認です

    
    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;
    }
    
    

    こういうことでよいでしょうか よければ閉じますね。

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

    こちらで意図されている形のCSSクラスが<body>タグに出力されていれば問題ないかと思いますー!

    0
    いいねをした人: 居ません
    #64463
    アバター画像キタジマ タカシ
    参加者
    2421

    僕も問題ないと思います。

    0
    いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全16件中)
  • トピック「固定ページカスタマイズのベストプラクティス」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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