スキン m-tomato を作ってみました。

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも スキン m-tomato を作ってみました。

11件の返信スレッドを表示中
  • 投稿者
    投稿
    • #52775
      marine
      ゲスト

      simplicityを愛用させて頂いてます。
      作者様、素晴らしいテーマをご提供いただき、ありがとうございます。

      WordPressを本格的に使い始めて、テーマを作ろうと思ったのですが、自分の望む以上の機能が実現されていたので、テーマ作りはやめました。
      simplicity 素晴らしすぎます。

      ということで、見た目をカスタマイズすることとしまして、スキンを作成してみました。

      ご意見なといただけましたら幸いです。
      えーっと、WordPress初心者なので、お手柔らかに。。。

      https://web.no-koto.net/simplicity-skin-m-tomato/

    • #52784
      わいひらわいひら
      キーマスター

      Simplicityをご利用いただきありがとうございます。
      しかも、テーマまで作っていただいて嬉しいです。
      意見とのことなんですが、僕は他の方が作成されたデザインに意見を言えるほど、デザインに関する見識はないです;

      後で、時間がある時にSimplicityのスキンの方でも紹介させていただこうと思います。

    • #52789
      marine
      ゲスト

      わいひら さま

      早速のお返事、ありがとうございます。
      スキン機能、ホントに楽しいですね。

      子テーマがあるなら別にスキンなんて必要ないと、最初は思っていましたけど、functions.phpを共有出来たりするので、見た目の変更はスキンが良いなと思うようになりました。

      あとは、ページごとに違うスキンが適用出来ると面白そうだな〜とか思ってます。
      例えば、ある固定ページにあるスキンを適用できると、ひとつのサイトでスキンを適用した状態を紹介出来たりするので、良いんじゃないかな〜なんて。
      ちょっと構造を勉強させていただいて、自分で試してみたいですね。

    • #52796
      わいひらわいひら
      キーマスター

      functions.phpを共有出来たりするので、見た目の変更はスキンが良いなと思うようになりました。

      そうなんです。子テーマでスキンを作成すれば、1つの子テーマで何種類ものデザインを管理できるので、サイトごとに子テーマを何度も作る必要がなくなったりします。

      あとは、ページごとに違うスキンが適用出来ると面白そうだな?とか思ってます。
      例えば、ある固定ページにあるスキンを適用できると、ひとつのサイトでスキンを適用した状態を紹介出来たりするので、良いんじゃないかな?なんて。

      なるほど。
      カスタマイズ出来るように修正したバージョンをアップしておきました。
      https://wp-simplicity.com/wp-content/uploads/2017/05/simplicity2-2.zip (←間違ったファイルをアップしていたので#52815にて指摘いただいた後に修正)

      上記ファイルでSimplicity親テーマをアップデート後、子テーマのfunctions.phpに以下を貼り付けて、関数を編集すると思い通りのスキンを表示させることができるようになるかと思います。

      function get_skin_file(){
        $file_path = get_theme_mod( 'skin_file', null );
        if ( $file_path ) {
          $file_path = remove_protocol($file_path);
          //CSS縮小化プラグインのためにプロトコルをつけるように変更v2.2.1
          //プロトコルがついていないと縮小化できないプラグインもある
          if ( is_ssl() ) {
            $file_path = 'https:'.$file_path;
          } else {
            $file_path = 'http:'.$file_path;
          }
      
          return $file_path;
        }
      }

      例えば、投稿IDが2071の投稿だけスキンを適用するなら以下のようにURLを指定したりしてカスタマイズできます。

      function get_skin_file(){
        //特定の投稿でスキンを指定する(style.cssのURLを指定)
        if (is_single('2071')) {
          return 'http://127.0.0.1:4001/wordpress/wp-content/themes/simplicity2-child-css-icon/skins/m-tomato/style.css';
        } else {//それ以外はスキンを適用しない
          return ;
        }
      }

      指定したページ以外は、テーマカスタマイザーで設定されているスキンを表示する場合はこんな感じ。

      function get_skin_file(){
        $file_path = get_theme_mod( 'skin_file', null );
        if ( $file_path ) {
          $file_path = remove_protocol($file_path);
          //CSS縮小化プラグインのためにプロトコルをつけるように変更v2.2.1
          //プロトコルがついていないと縮小化できないプラグインもある
          if ( is_ssl() ) {
            $file_path = 'https:'.$file_path;
          } else {
            $file_path = 'http:'.$file_path;
          }
          //特定の投稿でスキンを指定する(style.cssのURLを指定)
          if (is_single('2071')) {
            return 'http://127.0.0.1:4001/wordpress/wp-content/themes/simplicity2-child-css-icon/skins/m-tomato/style.css';
          } else {//それ以外はテーマカスタマイザーのスキンで設定されている菌ファイルを表示
            return $file_path;
          }
        }
      }

      ※スキンのURLはそれぞれのサイトのアドレスにする必要があります。

    • #52811
      marine
      ゲスト

      わいひら さま

      わぁ、スゴイです。
      早速ご対応いただけたなんて感激です。

      今、出先なので、家に帰ったら試してみます。
      ありがとうございます。

    • #52815
      marine
      ゲスト

      わいひら さま

      家に帰って、ローカル環境で試してみました。
      まずは、新バージョンを上書きして確認してみましたところ・・・
      なぜか、cssが効いていないかのような表示になりました。

      バックアップしておいたもので、再度上書きすると元に戻りました。

      ダウンロードした新バージョンをみると、simplicityとなっており・・・
      私が利用しているのは simplicity2 ・・・

      もしかして、私がバージョンを伝えるのをミスしたのでしょうか?

    • #52817
      わいひらわいひら
      キーマスター

      申し訳ないです。完全に僕の手違いで間違ったフォルダを圧縮してアップしていました;
      正しくはこちらです。
      https://wp-simplicity.com/wp-content/uploads/2017/05/simplicity2-2.zip

    • #52824
      marine
      ゲスト

      早速ご対応いただき、ありがとうございます。
      また、今晩試してみたいと思います〜(*^^*)

    • #52827
      わいひらわいひら
      キーマスター

      #52817のファイルは、環境によってはエラーが出る可能性があるかもしれないので、こちらを利用してください。
      https://wp-simplicity.com/wp-content/uploads/2017/05/simplicity2-3.zip

    • #52837
      marine
      ゲスト

      わいひら さま

      修正していただいたファイルにて、先ほどローカル環境で試してみました。
      成功です。良いですね、コレ! 最高です。

      これで思ったとおりの運用が出来そうです。素晴らしいです。
      ありがとうございました。

    • #52841
      marine
      ゲスト

      わいひら さま

      このたびは、私の希望を叶えていただき、ありがとうございました。
      先ほど、実サイトにてカスタマイズを適用して、無事、成功致しました。

      現在、m-tomato の紹介ページだけにスキン「m-tomato」を適用する設定としております。
      https://web.no-koto.net/simplicity-skin-m-tomato/

      これで、スキンの紹介をするのが、より一層楽しくなりました。

    • #52855
      わいひらわいひら
      キーマスター

      うまくいったようでよかったです。
      ページも拝見しました。実際サイトを見てみて、なかなか面白い仕様になったと思います。いろいろな応用が利きそうですね。
      ナイスなアイディアをありがとうございます。

11件の返信スレッドを表示中
  • トピック「スキン m-tomato を作ってみました。」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)