childでstyle.min.cssを使いたい

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも childでstyle.min.cssを使いたい

  • このトピックには3件の返信、1人の参加者があり、最後にHidekichiにより9年、 6ヶ月前に更新されました。
3件の返信スレッドを表示中
  • 投稿者
    投稿
    • #50133
      u
      ゲスト

      こんにちは。
      simplicity2.4.7.zip
      simplicity2-child20161002a.zip
      を利用させて頂いています。
      一つ質問なのですが、デフォルトでは
      simplicity2-childのフォルダの中の
      style.css
      が読み込まれますが、それを
      style.min.css
      が読み込まれるようにしたいのです。
      style.cssを読み込んでいる部分が見つかればそのファイル名にminを入れれば良いと思ったのですが、
      どこでstyle.cssが読み込まれているのか分かりませんでした。
      どのファイルを変更すれば良いのかお教え頂けますでしょうか?
      あるいはもっとスマートな別のやり方などありましたらお教えください。
      minにしたい理由は、変なコメントを沢山書いているので消したいのです。
      まあ、そんなのを見る人もいないとは思うのですが。

    • #50134
      Hidekichi
      ゲスト

      中身は何かしらで圧縮して、style.cssで保存したものをアップロードすれば大丈夫です。

      style.min.cssは.minとありますが、それは中身を圧縮した、つまりコメントや不要なスペースを取り除いたテキストファイルですから、ファイル名だけstyle.cssにするだけで使えます。

      ただし、先頭のファイルヘッダー(/*!theme name: simplicity … */等)は必須です。
      これまで取り除くと親・子テーマの関係性が不明になります。

      参考: うちのサイト

      デベロッパーツールで見てもらえればわかりますが、うちのサイトの親テーマのスタイルは全て行番号が13行目になっているかと思います。これは中身を圧縮してあるからです。
      chromeでデベロッパーツールを開き、Sourcesタブから左パネル、wp-content→themes→simplicity2→style.css

      これらを行う注意点として、行番号が同じになってしまうことで、どこに問題があるかがわかりにくくなります。セレクタは表示されるのでまるでわからなくなるということはありませんが、glupなどを用いてscss等でパーツごとに管理しないと探すのが大変かも知れません。

      style.min.cssでも読み込みはできるだろうと思います。その場合はファイルヘッダーを必ず残し、残りのcss部分を圧縮したもの(compressed)を利用してください。

      またwordpressのテーマcssは、親を子で上書きすることで子テーマのカスタマイズを有効にしています。
      試してないのでわかりませんが、親・子テーマのstyle.cssなり、style.min.cssはファイル名を統一しないと上書きできないかも知れません。

      これらを行う場合は、親テーマlibフォルダのscripts.phpをいじります。あるいはfunctions.phpで読み込み直します。大切なことなので再度書きますが、子テーマのstyle.cssにあるファイルヘッダーはテーマの親子関係を示しています。
      ここらをむやみにいじるよりは、中身だけ圧縮するほうが圧倒的に簡単だと理解してもらえるかと思います。

    • #50135
      u
      ゲスト

      Hidekichiさん
      詳しい説明ありがとうございました。

      >ただし、先頭のファイルヘッダー(/*!theme name: simplicity … */等)は必須です。
      >これまで取り除くと親・子テーマの関係性が不明になります。
      なるほど。

      >chromeでデベロッパーツールを開き、Sourcesタブから左パネル、wp-content→themes→simplicity2→style.css
      良い情報を教えて貰いました。今後役立ちそうです。

      >wordpressのテーマcssは、親を子で上書きすることで子テーマのカスタマイズを有効にしています。
      上書きはSimplicity2の機能ではないんですね。WordPressがやっているのですか。知らなかったです。

      >試してないのでわかりませんが、親・子テーマのstyle.cssなり、style.min.cssはファイル名を統一しないと上書きできないかも知れません。
      >これらを行う場合は、親テーマlibフォルダのscripts.phpをいじります。あるいはfunctions.phpで読み込み直します。
      ちょっとその辺りのファイルを見てみます。

      >ここらをむやみにいじるよりは、中身だけ圧縮するほうが圧倒的に簡単だと理解してもらえるかと思います。
      はい、その点は良く分かっているのですが、style.min.cssが生成されたあと、それをコピペしてstyle.cssを作るのが面倒なので、それならいっその事style.min.cssがそのまま使えないかなあと言う希望です。

      とにかく教えて貰った情報を元に少し調べてみます。
      ありがとうございました。

    • #50136
      Hidekichi
      ゲスト

      > 上書きはSimplicity2の機能ではないんですね。
      > WordPressがやっているのですか。知らなかったです。

      ここはちょっと語弊があったようです。

      親style.css
      子style.css

      と仮想style.css上に読み込むと理解してください。同じセレクタのプロパティがあった場合は、子のが後であるため、

      .test {
        font-size: 18px;
      }
      .test {
        font-size: 14px;
      }

      このように書いてあるのと同じことです。これは後の値が適用されます。何をどう読むこむかなどはSimplicityの設定ですが、それをどのようにhtmlに出力するかはその設定を元にwordpressがやってます。つまりheadタグ内で何のcssの後にstyle.cssを読み込むかと言うような感じです。

      > style.min.cssが生成されたあと、
      > それをコピペしてstyle.cssを作るのが面倒なので、
      > それならいっその事style.min.cssが
      > そのまま使えないかなあと言う希望です。

      ここらは自動化できます。gulpなどで検索してみてください。ただし内容的には上級向けでnode.jsを用意したりと僕のような物好きか仕事でちょっとでも楽をするためというような使い方をする人向けです。

      ちょっと書くと、例えば、

      xdomain ←うちのサーバーの名前のフォルダ
        _header.scss
        _navi.scss
        ...
        style.scss

      このような構成に元のスタイルをscss化して分割管理します。_で始まるファイルはstyle.scssでインポートされてひとまとめになります。

      これらをひとまとめにする際に、gulpというものでエラーチェック及び圧縮、出力をします。出力は別フォルダのcssというフォルダを指定しておけば、全てがひとまとめになりかつ圧縮されたstyle.cssができるという寸法です。

      xdomainフォルダの何かしらを変更・修正・追加したらgulpプラグインによりその変更を監視してあり、また新たに変更・出力されたstyle.cssがcssフォルダにできます。つまり、ftpでアップロードするのはこのcssフォルダのstyle.cssですから、自分でファイル名をリネームしたり圧縮したりする必要はありません。

      xdomainフォルダ内のstyle.scssの先頭にファイルヘッダーの情報を書いておけばそのまま出力されますし、scssの場合、//でのコメントは出力時省略されますから、何かしらのコメントは全て//で書いておき、/**/のコメントはどうしても残しておきたいもの、例えばファイルヘッダーや重要なコメントのみにすることができます。

      とまぁ面倒な部分は自動化できるということです。ただし設定はそこそこ難しいかと思いますが、サンプルを載せているようなサイトもあるかと思うので色々ググってください。

3件の返信スレッドを表示中
  • このトピックに返信するにはログインが必要です。
スポンサーリンク
アドセンス(大)
アドセンス(大)