footer_customに書いたstyle設定がAMP画面に反映されない

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも footer_customに書いたstyle設定がAMP画面に反映されない

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

      こんにちは。
      simplicity2.6.8.zip
      simplicity2-child20161002a.zip
      で利用させて頂いています。
      そんなに急ぎではありませんが、一つ質問があります。
      footer_customに
      <style>
      ・・・
      </style>
      でCSS設定を書いた場合、通常ページには反映されるのですが、AMPページには反映されないようでした。
      その対策として amp.css に直接書いたら解決したのですが、出来ればカスタムフィールドに書いた
      CSSを反映させる方法があれば教えて下さい。

    • #60084
      Akira
      ゲスト

      テンプレートを変更するしか方法はないと思います。

      ただ、<style>タグは、フッターではなく<head>内に通常は記述します。そのため、 footer_custom ではなく、 head_custom をお使いになった方がいい気がします。 AMP の場合には、<head>内にインラインで CSS を記述しないと AMP エラーになってしまいますし。

      head_custom をお使いになる場合は、親テーマより amp-header.php を子テーマにコピペをします。子テーマに設置した amp-header.php を開き、下記のコードを探します。( Simplicity 2.6.8 であれば 106 行目から 115 行目)

      ///////////////////////////////////////////
      //子テーマのスタイル
      ///////////////////////////////////////////
      if ( get_template_directory_uri() != get_stylesheet_directory_uri() ) {
        $css_file_child = get_stylesheet_directory().'/amp.css';
        if ( file_exists($css_file_child) ) {
          $css_child = $wp_filesystem->get_contents($css_file_child);//ファイルの読み込み
          $css_all .= $css_child;
        }
      }

      上記コードの下の行に、下記のコードを追加します。

      https://notepad.pw/share/th8o4l5k

      head_custom に <style></style>タグで CSS のみが書かれていることを想定しています。 javaScript がある場合には、この方法では AMP エラーが出ます。

    • #60085
      u
      ゲスト

      Akira様

      サンプルコードを作って頂きましてありがとうございました。

      ///////////////////////////////////////////
      //子テーマのスタイル
      ///////////////////////////////////////////
      if ( get_template_directory_uri() != get_stylesheet_directory_uri() ) {
        $css_file_child = get_stylesheet_directory().'/amp.css';
        if ( file_exists($css_file_child) ) {
          $css_child = $wp_filesystem->get_contents($css_file_child);//ファイルの読み込み
          $css_all .= $css_child;
        }
      }
      ここに追加しました

      追加する場所は上記の位置でよろしいでしょうか?
      試したところ期待通りにstyleが挿入出来ました。

    • #60094
      Akira
      ゲスト

      その場所で合っています。

      Amazonの画像がAMPだと300×300になるで根本的に解決されたようでよかったです。

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