質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.57%

WordPressでAMP対応のページで自作ショートコードが機能しない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,278

maztak

score 50

 前提・実現したいこと

WordPressで、投稿のカスタムフィールドに入力した値を元に(Advanced Custom Field使用)、その投稿本文にショートコードを記載する形で、テンプレート化したHTMLコードを出力させたい。

事情によりサイトURLはお伝えできないのですが、ご教授いただきたいです。AMPでない通常のページでは問題なく動作します。

 発生している問題・エラーメッセージ

Search&FilterProで生成されたショートコードはAMPページでも問題なく機能・表示される(CSSは別)のですが、自作したショートコードはAMPで表示すると、そのまま[shortcode1]のような形で表示されます。

ChromeのConsoleにはエラーはでていません。

 該当のソースコード

//商品テンプレートのショートコードを作成
function echo_template() {
  $img_url = get_field('temp_image');
  $img = '<img src="' . $img_url . '">';
  $name = get_field('name');
  $first_price = get_field('first_price');
  $normal_price = get_field('normal_price');
  $shipping_fee = get_field('shipping_fee');
  $subscription = get_field('subscription');
  $smell = get_field('smell');

  if ($smell) {
    $smell_html = '
    <li>
      <dl>
        <dt>香り</dt>
        <dd class="font18">'.$smell.'</dd>
      </dl>
    </li>
    ';
  }

  $html = '
  <div class="frame_style03">
      <h3 class="entry-title">'.$name.'</h3>

      <div class="frame_inner">
          <div class="product_info">
              <p class="thumb">'.$img.'</p>
              <ul class="info">
                  <li>
                      <dl>
                          <dt>初回価格</dt>
                          <dd>'.$first_price.'円(税抜)</dd>
                      </dl>
                  </li>
                  <li>
                      <dl>
                          <dt>通常価格</dt>
                          <dd>'.$normal_price.'円(税抜)</dd>
                      </dl>
                  </li>
                  <li>
                      <dl>
                          <dt>送料</dt>
                          <dd>'.$shipping_fee.'円(税抜)</dd>
                      </dl>
                  </li>
          <li>
            <dl>
              <dt>定期購入の条件</dt>
              <dd class="font18">'.$subscription.'</dd>
            </dl>
          </li>
                  '.$smell_html.'
              </ul>
          </div>
      </div>
  </div>
';
return $html;
}
add_shortcode('template1', 'echo_template');

 試したこと

・<img>タグを<amp-img src="" style="width: 100px; height: 100px;">に変更
・以下のサンプルショートコードを実行 -> 同じく[template2]と文字列が表示されるだけ

function echo_template2() {
  echo "あmp";
}
add_shortcode('template2', 'echo_template2');


・swallowのsigle.phpにてget_the_content()でなくthe_content()で出力していることを確認
・single-hoge.phpのページテンプレートを作成して、本文上部に固定で1項目だけ出力するようにしてもダメ

<?php
  $name = get_field('name');
  $first_price = get_field('first_price');
?>

<div class="frame_style03">
    <div class="frame_inner">
        <div class="product_info">
            <ul class="info">
                <li>
                    <dl>
                        <dt>初回価格</dt>
                        <dd><?php echo $first_price; ?>円(税抜)</dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
</div>

 補足情報(FW/ツールのバージョンなど)

・Wordpress4.9.8(最新)
・swallowバージョン: 1.0.9 -> 1.1.1に先ほどあげました
(気になったのは外観>テーマのページでは更新失敗したことです。
ダッシュボード>更新から実施すると、更新できました。)
・AMP for WordPress 0.7.2
https://github.com/automattic/amp-wp

KAGOYAサーバー
・Apache 2.4.33
・PHP 7.0.28

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

JetPackプラグインのモバイルページ表示機能とAMPプラグインが競合していたようでした。

single.phpのページテンプレートを作っても何も変化がないのは、ampの場合は(当たり前ですが,,,)amp専用のテンプレートが適用されるので、テーマ未対応でAMPプラグインでAMP化した場合、そのテンプレートファイルはAMPプラグインの中のsingle.phpとなります。

しかし、今回クラス名などが<div class="amp-wp-article-content">とはなっておらず、<div class="entry-content">となっており、テーマファイルは<section class="entry-content cf>"のマークアップしか見当たらなかったので「どのテンプレート(HTML)ファイルが適用されているんだ・・・」と途方にくれていました。

が、JetPackは多機能すぎて逆に不具合の温床という持論を思い出し、プラグイン停止してみるとショートコードも表示されました。いや、やっぱり不具合の時は当てずっぽうでなく、ちゃんと『可能な限り全てのプラグインを停止する』を徹底しなければなりませんね。

久々にこんな長時間ハマりました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.57%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る