サポート » プラグイン » テーマ編集をした際の反映について

  • 解決済 yamadanoa

    (@yamadanoa)


    HTML/CSSは使える、ワードプレス初心者です。
    先日、操作の練習として、ワードプレスのテーマフォルダの中にあるCSSファイルを直接編集してみました。(文字色を変える等の単純なもの)
    しかし実際にHPを開いてみると全く反映されず、その日はあきらめてそのままにしました。

    数日後ワードプレスの編集画面から、
    固定ページ>ページ一覧>対象のページ>編集ボタンからブロックエディタの画面を開いてみると、その画面ではCSSファイルで編集した装飾が反映されていました。
    ブロックエディタにいつのタイミングで反映されたのかは正確にわからないのですが、ファイルを編集した場合は反映に時間がかかるものでしょうか?

    また、ホームページのプレビュー上では、装飾した要素自体が見えなくなってしまいました。
    これはどういった要因が考えられますでしょうか?

    ちなみに現在の環境は
    ワードプレスのバージョン:5.9
    使用中のテーマ:tweny tweny-two(特にこだわりはありません)
    Gutenbergのプラグインを有効化しています。LOCALというフリーソフトでローカル環境を作成し、いったんその中にサイトを置いている状態です。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • @yamadanoa さん

    こんにちは。

    Twenty Twenty Two のテーマフォルダの中にあるsytyle.cssを編集されたのだと思いますが、通常は更新が即時反映されます。

    また、フロントエンド・ブロックエディター双方で読み込まれるため、CSSの書き方にはコツが必要です。
    よろしければ、どのようなCSSを書かれた方を記載いただけないでしょうか。

    トピック投稿者 yamadanoa

    (@yamadanoa)

    @wildworks
    ご回答ありがとうございます。遅くなって申し訳ありません。
    当時の状況はご推察の通りです。
    文字色を変える練習をしてたサイトは、更新の加減か開けなくなってしまい、削除してしまいましたので、同じような試みをしていた別のサイトのCSSをご覧いただけますでしょうか。

    CSSの中身は以下のようになっています。

    /*
    Theme Name: twentytwentytwoChild
    Theme URI:  http://kagotsumablog.local
    Author:     kago.tuma
    Author URI: http://kagotsumablog.local
    Template:   twentytwentytwo
    Version:    1.0
    License:    GNU General Public License v2 or later
    */
    h1{
    	background-image: url("file:///C:/Users/user/Local%20Sites/kagotsumablog/app/public/wp-content/uploads/2022/01/K_PC_top_image.png")
    }

    *H1のサイトタイトルの背景に画像を設置しようとしていました。
    最近知ったのですが、イメージ画像のURLは、実際に画像ファイルが格納されているファイルのパスではなく、
    <?php echo get_template_directory_uri(); ?>/assets/・・・
    のように、PHPコードと一緒に書かなければならないようですね。今回うまくいかなかった原因はそれでしょうか?それにしても、ブロックエディターにはなぜ反映されていたのか不思議です。

    実は、こちらのサイトも変な操作をしてしまったのか開かなくなってしまい、対応を教えていただいても試すことはできなくなってしまいました。
    ただ、何かわかることがあるのでしたら、今後のために教えていただけると大変うれしいです。

    @yamadanoa さん

    こんにちは。

    最近知ったのですが、イメージ画像のURLは、実際に画像ファイルが格納されているファイルのパスではなく、
    <?php echo get_template_directory_uri(); ?>/assets/・・・
    のように、PHPコードと一緒に書かなければならないようですね。

    →CSSでURLパスを記述する基本となりますが、file:~から始まるURLはローカルパス(自分のパソコンを起点としたパス)になるので、通常使いません。
    またCSSファイルなので、PHPも書けません。

    さらに、wp-content/uploads/2022/01/K_PC_top_image.pngと記述されている所を見ると、メディア機能でアップロードした画像を指定したいのだと思いますが、メディアからアップロードした画像は削除出来てしまうので、そのパスが存在する事は担保されません。

    一般的には、テーマフォルダに画像アセットを同梱して、CSSファイルを起点とした相対パスで指定します。

    例えば、子テーマ直下のimagesフォルダの中にK_PC_top_image.pngを配置したのであれば、書き方は以下のようになると思います。

    h1{
    	background-image: url("./images/K_PC_top_image.png")
    }

    まずは、絶対パス・相対パスの考え方の基本を調べる事をお勧めします。

    トピック投稿者 yamadanoa

    (@yamadanoa)

    @wildworks

    >一般的には、テーマフォルダに画像アセットを同梱して、CSSファイルを起点とした相対パスで指定します。

    そういう方法をとるのですね。
    ファイルをどこに格納すべきなのかがよくわかっていなかったので、助かりました。
    今回はファイルが壊れてしまって試すことができませんが、また新しいHPで練習してみます。
    ありがとうございました。

    トピック投稿者 yamadanoa

    (@yamadanoa)

    ありがとうございました。解決しました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「テーマ編集をした際の反映について」には新たに返信することはできません。