Celtis_sで子テーマ

  • このトピックには6件の返信、2人の参加者があり、最後にAnonymousにより6年、 7ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #5698
    Anonymous
    メンバー

    このたびサーバー移転を気にmobile表示も軽くするべく、テーマもCeltis_sへと変更することにしました。今まではceltispackだけ利用させて頂いていたのですが、これからはテーマに関してもお世話になろうと思います。

    そこで細部を少しいじろうと思い、子テーマを適用させて運用しようとしたのですがうまくいきません。

    function.phpとstyle.cssのみをよくある子テーマテンプレに従って作成すると全体的に白っぽいページになり、スタイルシートの一部だけが適用されたような感じになり、サイドバーが表示されません。

    しかし親テーマフォルダ内の、function.phpとstyle.css以外のファイルを、子テーマフォルダにコピーすると表示が止まってしまいます。

    Celtis_sは子テーマでの運用は考えないほうがいいでしょうか?

    #5702
    enomoto
    キーマスター

    Celtis_s テーマは、SASS(SCSS)でスタイルを定義しているので、これをベースに直接カスタマイズしていただいたほうが良いと思い子テーマを配布していません

    ただ、子テーマを使って運用できないというわけではありませんので、function.phpとstyle.css を使い子テーマでカスタマイズすることは出来ます

    但し、Celtis_s テーマはAMPにも対応していますので、AMP用に一工夫必要です

    子テーマの functions.php は下記のような内容がベースになります

    <?php
    //カスタムスタイル定義は子テーマの style.css ファイル内で指定する
    add_action( "wp_enqueue_scripts", "theme_enqueue_styles" );
    function theme_enqueue_styles() {
        wp_enqueue_style( "parent-style", get_template_directory_uri() . "/style.css" );
        wp_enqueue_style( "child-style",  get_stylesheet_directory_uri() . "/style.css", array("parent-style") );
    }
    
    //AMPページ用のカスタムスタイル定義は直接この関数内で指定する
    add_action( "amp_post_template_css", "childtheme_custom_amp_style" );
    function childtheme_custom_amp_style($amp_class){
    ?>
    body {
        background-color: ivory;
    }
    <?php      
    }
    

    子テーマの style.css は下記のような内容となります

    /*!
    Theme Name: Celtis_s Child Theme
    Theme URI: https://celtislab.net
    Description: 日本語版の見やすくてシンプルなレスポンシブテーマです。
    動作には WordPress 4.5 以上のバージョン、親テーマ Celtis_s が必要です
    
    Template: celtis_s
    Version: 1.0.0
    Author:
    Author URI:
    Tags:
    
    License: GNU General Public License v2.0
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */
    
    /* ここからCSSを記述します */
    body {
    background-color: ivory;
    }
    

    手元の環境で、上記内容で試したところ背景がアイボリーになったのは確認したので、こんな感じで行けるのではないかと思います (^^♪

     

    #5704
    Anonymous
    メンバー

    ありがとうございます!

    あ…今になってやっと気付いたのですが、テンプレ通りにやると、親テーマにSASSで記述してある部分を、子テーマにCSSで書いても上書きされないんですね^^;

    SASS(SCSS)でスタイルを定義しているので、これをベースに直接カスタマイズしていただいたほうが良いと思い

    納得です!

    すでに親テーマのスタイルシートをけっこうカスタマイズしたので、スタイルシートはこのまま親テーマのものを、function.phpだけ子テーマでカスタマイズ、という方法を取りたいと思います。

    子テーマの適用方法ありがとうございます。

    またおかげさまで、少しSASSの勉強になっています。追記する形でCSSで書き、順次SASSに書き換えていく方法でやっています。

    celtis_s、いいですね!

    #5705
    enomoto
    キーマスター

    ありがとうございます

    頑張って作ったテーマですが正直あまり使われていないので、いいという一言が大変励みになります

    私もCSSが苦手で、Celtis_s で初めて SASS を使ってみて、もうCSSへは戻りたくないと思っています

    はじめてのSASSなので、まだこなれていない部分もあるかと思いますが、ここはこうしたほうが良いよみたいなところがあればアドバイスしてください。大歓迎です

    かなりカスタマイズしているとのことなので、サイトを公開したら見てみたいです (^^)

     

    #5709
    Anonymous
    メンバー

    お世話になっておりますm(_ _)m

    そんなめちゃめちゃカスタマイズ!ってほどじゃないのでお恥ずかしいのですが…^^;

    https://karakuri.eishoudou.com/

    「素人にしては、もう一回やり直すとしたらものすごく労力がかかる」程度のいじり具合です。

    いろいろ触ってみて、要望とか謎の挙動?(こちらの環境の可能性も大)とか出てきたので、あとから見る人のためにそれぞれ該当トピックに書き込ませていただきますね。

    #5714
    enomoto
    キーマスター

    素敵なサイトになっていますね

    また、YASAKANI Cache も使用していただいているようで、こちらも使用感などをレビューして頂けると嬉しいです

    ただ、最近 https に変更されたのか、ページによっては自サイトが http のままのところがあり、CSS ファイル等が読み込めずにスタイルが崩れています

    自サイトの http -> https への置き換えにも YASAKANI Cache のユーティリティを使っていただいているのでしょうか?

    とりあえず、一度キャッシュをクリアすることをお勧めします

    #5720
    Anonymous
    メンバー

    ありがとうございます!

    enomotoさんに見せるには恥ずかしい程度のサイトですが、ほめていただいて嬉しいです^^

    お察しの通り、#5709の1時間前くらいにSSL化したばかりでした。

    レンタルサーバー会社が「Really Simple SSL」を推奨プラグインとして紹介していたので、このプラグインに全て任せてYASAKANI CacheではURL置換を設定していませんでしたが、どうやらピンバックなどはURLが置換されないようでした。

    ご指摘いただいてYASAKANI Cacheのユーティリティで置換設定、キャッシュクリアしました。

    ありがとうございました!

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。
go-to-top