サポート » テーマ » スタイルシートを動的に作成したい

  • 解決済 meatonline

    (@meatonline)


    現在、オジリナルテーマを作成しています。
    Twenty Sixteenをベースにはしていますが、見た目や機能はほとんど違います。

    なるべくWordpressの標準的な機能を使い、
    デザインなどをカスタマイズできるように
    テーマカスタマイザーを使用して構築しております。

    その際に、テーマカスタマイザーからヘッダーのロゴの画像を
    アップロードさせる機能を搭載しました。

    アップロードした画像を<img>タグを使いページ内に表示することは出来たのですが、
    やりたいことは<img>タグではなくスタイルシートのbackground-imageとして表示したいです。(デザイン的な都合により)

    アップロードしなおたびにファイル名は変わってしまうので
    スタイルシートに予めファイル名を書くことは出来ず、
    WordPressの機能を使い、動的にスタイルシートを作る(追加する?)方法があるのか
    教えていただきたいです。
    代替方法などでも構いません。

    よろしくお願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • アップロードしなおたびにファイル名は変わってしまうので
    スタイルシートに予めファイル名を書くことは出来ず、

    この部分がよく理解できません、どのような作り方をしているか、教えてください。

    style.cssに

    background-image: url("アップロードされた画像へのパス")

    を書いているという理解で良いでしょうか?

    それであれば、wp_head()内からstyleタグでCSSを出力するという方法が良いかと思います。
    wp_add_inline_style 等で実現できるかと思います。

    Twenty Sixteenをベースにしているということでしたら、
    カスタムヘッダーのコールバック関数
    inc/customizer.php の twentysixteen_header_style()の中で、
    cssを動的に設定している箇所があるので、
    ここにstyleを追加すると手軽でしょう。

    トピック投稿者 meatonline

    (@meatonline)

    返信ありがとうございます。

    アップロードしなおすたびにファイル名が変わる件は
    カスタマイザーを使用してヘッダーのロゴなどをアップロードしなおしたりすると
    毎回ファイル名が変わるために事前にスタイルシートにURLを記載しておくことができません。
    そのため、スタイルシートのURL部分は動的に(現在アップロードされている最新のロゴ画像のURL)を呼び出すということがしたいのです。

    // =============================
        // グリッド1の画像
        // =============================
        $wp_customize->add_setting('grid_area_00_image', array(
            'default'           => 'grid_area_00_image.jpg',
            'capability'        => 'edit_theme_options',
            'type'           => 'option',
        ));
    
        $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'grid_area_00_image', array(
            'label'    => __('グリッド1の画像', 'themename'),
            'section'  => 'top_page',
            'settings' => 'grid_area_00_image',
            'description' => '画像をアップロードするとヘッダーにあるデフォルトのサイト名と入れ替わります。',
        )));

    のようにすると
    <?php echo get_option(‘grid_area_00_url’); ?>でロゴ画像のURLを呼び出すことができます。

    インラインのスタイルシートで実現する方法は
    Toro様とsysbird様の内容で実現することができました。

    質問内容に記載しておりませんでしたが、
    外部スタイルシートに同様のことが実現できるものなのでしょうか?

    出来ない事はありませんが、お勧めできるかというとケースバイケース

    http://www.tenman.info/wp3/manualraindrops/?s=template_redirect

    template_redirect というアクションフックと、独自クエリの設定によって、外部スタイルシートのように見せかける手法です

    https://github.com/tenman/raindrops/blob/master/functions.php#L8889-L8918

    テーマカスタマイザーで、外部ファイルとして動作させることは現在でもできます

    https://wordpress.org/themes/raindrops/

    トピック投稿者 meatonline

    (@meatonline)

    nobita様

    ありがとうございます。
    まさにこれが知りたかった情報です。
    URL先と同じようにページの可読性を上げたかったのが理由だったのですが、
    やはり外部スタイルシートを生成させてから読み込むというような手法は
    あまりおすすめできないのですね。
    ページスピード的にもGoogleがインラインをオススメしているようですし。

    一応外部スタイルシートとしてもできるということも
    ソースコードを拝見させていただき、理解できました。

    今のところインラインのスタイルシートで対応してみようとおもいます。
    ありがとうございました。

    トピック投稿者 meatonline

    (@meatonline)

    解決したので閉じさせていただきます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「スタイルシートを動的に作成したい」には新たに返信することはできません。