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

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

新規登録して質問してみよう
ただいま回答率
85.48%
AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

2302閲覧

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

maztak

総合スコア61

AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2018/11/02 08:58

編集2018/11/02 09:19

前提・実現したいこと

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

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

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

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

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

該当のソースコード

php

1//商品テンプレートのショートコードを作成 2function echo_template() { 3 $img_url = get_field('temp_image'); 4 $img = '<img src="' . $img_url . '">'; 5 $name = get_field('name'); 6 $first_price = get_field('first_price'); 7 $normal_price = get_field('normal_price'); 8 $shipping_fee = get_field('shipping_fee'); 9 $subscription = get_field('subscription'); 10 $smell = get_field('smell'); 11 12 if ($smell) { 13 $smell_html = ' 14 <li> 15 <dl> 16 <dt>香り</dt> 17 <dd class="font18">'.$smell.'</dd> 18 </dl> 19 </li> 20 '; 21 } 22 23 $html = ' 24 <div class="frame_style03"> 25 <h3 class="entry-title">'.$name.'</h3> 26 27 <div class="frame_inner"> 28 <div class="product_info"> 29 <p class="thumb">'.$img.'</p> 30 <ul class="info"> 31 <li> 32 <dl> 33 <dt>初回価格</dt> 34 <dd>'.$first_price.'円(税抜)</dd> 35 </dl> 36 </li> 37 <li> 38 <dl> 39 <dt>通常価格</dt> 40 <dd>'.$normal_price.'円(税抜)</dd> 41 </dl> 42 </li> 43 <li> 44 <dl> 45 <dt>送料</dt> 46 <dd>'.$shipping_fee.'円(税抜)</dd> 47 </dl> 48 </li> 49 <li> 50 <dl> 51 <dt>定期購入の条件</dt> 52 <dd class="font18">'.$subscription.'</dd> 53 </dl> 54 </li> 55 '.$smell_html.' 56 </ul> 57 </div> 58 </div> 59 </div> 60'; 61return $html; 62} 63add_shortcode('template1', 'echo_template');

試したこと

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

php

1function echo_template2() { 2 echo "あmp"; 3} 4add_shortcode('template2', 'echo_template2');

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

PHP

1<?php 2 $name = get_field('name'); 3 $first_price = get_field('first_price'); 4?> 5 6<div class="frame_style03"> 7 <div class="frame_inner"> 8 <div class="product_info"> 9 <ul class="info"> 10 <li> 11 <dl> 12 <dt>初回価格</dt> 13 <dd><?php echo $first_price; ?>円(税抜)</dd> 14 </dl> 15 </li> 16 </ul> 17 </div> 18 </div> 19</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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

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

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

投稿2018/11/02 10:40

maztak

総合スコア61

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問