サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
08/04/2018 3:37 pm
連日の対応：修正などお疲れ様です。
AMP対応をして気になった所をご報告します。
- スライドイン設定時、AMPページの（メニューを含む）フッターが隠れる件。
footerのメニューが隠れた例：画像：amp-footer-menu
https://wp-cocoon.com/amp/?amp=1
- カエレバの画像（もしもアフィリエイト経由）の比率：縦長なものが正方形になりオカシイ件。と同様環境でカエレバ画像が小さい件。
※使いかたにもよると思いますが、HTMLに75pxで指定があり、カエレバリンク上にある画像が凄く小さくなります。
※カスタマイズには干渉してないようです。
AMPカスタマイズ前：後：通常ページの比較：画像：kaerebalink-image_amp-img
一応リンク先は以下です。
https://bibabosi-rizumu.com/saize-lunch/?amp=1
目次：『おまけのランチパスポート』にカエレバがあります。
あれば良いかなとして
- AMPで検索窓が表示されていない件。
検索窓は検索したらAMP対応できるみたいなページを見ただけで試してませんが、声かけさせていただきました。
3点。ちょっとだけ気になった所をご報告します。
08/04/2018 10:58 pm
カエレバの画像（もしもアフィリエイト経由）の比率：縦長なものが正方形になりオカシイ件。と同様環境でカエレバ画像が小さい件。
これは、外部サイトにある画像の縦横幅は取得できないからです（やろうと思えばできるけど、画像をすべて外部サーバーから取り寄せて計測するので速さを犠牲にするので実装していないと言った方が正しいです。相手サーバにも負荷をかけることになりますし）。
なので、外部サイト画像の場合で、width、height属性が取得できない場合は、300x300サイズになります（カエレバはそのサイズのものをCSSで縮小表示されていると思われる）。
例えば、カエレバで取得できるIMGタグはこれです。
<img src="https://images-fe.ssl-images-amazon.com/images/I/31-UZxlpDWL._SL160_.jpg" style="border: none;" />
これに対してwidth、height属性があれば、それを利用するのですが、無いのでどうしようもありません。対応策としては、自前で属性を入力するか、カエレバにwidth、height属性を入れるように対応してもらうしかないです。
09/04/2018 1:00 am
AMPで検索窓が表示されていない件。
検索フォーム自体は、すごく簡単に設置できます。ただ、テーマでの実装は難しいかもしれません。
というのも AMP に検索フォームを設置するには、 https が必須です。 http サイトでは AMP エラーが出るので、利用者を選ぶテーマになるかもしれません。あと、「エラーが出ます」との問い合わせが殺到するかも。
また、 lib/amp.php も変更しないといけません。
一応設置方法を簡単に書いておきます。
まず tmp/amp-header.php の＜head＞タグ内に、下記のコードを追加します。
https://cdn.ampproject.org/v0/amp-form-0.1.js
次に searchform.php を下記のように変更します。
<?php if( !is_amp() ): ?>
<form method="get" class="search-box" action="<?php echo home_url('/'); ?>">
<?php else: ?>
<form method="get" class="search-box" action="<?php echo home_url('/'); ?>" target="_top">
<?php endif; ?>
<input type="text" placeholder="<?php _e( 'ブログ内を検索', THEME_NAME ) ?>" name="s" class="search-edit">
<button type="submit" class="search-submit"></button>
</form>
あとは lib/amp.php の convert_content_for_amp を変更します。ただ、「 form タグを取り除く」と「 target 属性を取り除く」のコードを、検索フォームには適用しないように変更する必要があり面倒です。
わいひら reacted
Topic starter
09/04/2018 6:09 am
詳細で分かりやすい説明ありがとうございます。
外部サイト画像の場合で、width、height属性が取得できない場合は、300x300サイズになります（カエレバはそのサイズのものをCSSで縮小表示されていると思われる）。
通常そのようにしてくれてますけど、AMPではどこか（おそらく外部）のCSSが読み込まれてるような気がします。手元のamp.cssで以下を追記してもCocoonでは反映されないんです。
.kaerebalink-box .i-amphtml-layout-awaiting-size,
.kaerebalink-box .i-amphtml-layout-size-defined .i-amphtml-fill-content {
position: static;
}
.kaerebalink-box .i-amphtml-fill-content {
height: auto;
max-height: none;
min-height: 0;
min-width: 0;
width: 100%;
}
.kaerebalink-box i-amphtml-sizer {
display: none !important;
}
!importantがではなくこのCSS全てが出力されない感じが不思議で。そのCSSを検証画面で追記すれば、それなりに反映されます。
Amazon画像を指定したとき現れるCSS。画像指定場所：画像afi-img
検証画面上で追記した場合のみ反映される、どこか何かのCSS/css/amp.css*に追記した様子：画像css
自前で属性を入力するか、カエレバにwidth、height属性を入れるように対応
画像サイズを調べwidth・heightを入れるとAMP対応してない時と同じ表示になりました。
width・heightを検証画面上で追記：画像：width-height
該当ページ：管理画面上にある『AMP表示しない』をポチッと押すと手っ取り早いので、それで対応します。便利機能実装、ありがとうございます＾＾
Topic starter
09/04/2018 6:10 am
AMP に検索フォームを設置するには、 https が必須
Akiraさん。その他、実装方法を検証してくださって、ありがとうございます＾＾
<html>とheadタグの間に、アドセンスが自動的作成したscriptでしたらampのとき自動的に削除されたか何かでエラーは出ませんでした。それで最近、良かった。。と思った記憶があります。
良い内容だったのに、それぞれ項目を分けずにまとめてしまった・・・。せめてもと？ここでリンクを貼ってみました＞＜
Topic starter
09/04/2018 2:37 pm
カエレバ画像の件：以下の通りの対応策で解決しました。
対応策としては、自前で属性を入力するか、カエレバにwidth、height属性を入れるように対応してもらうしかないです。
該当ページ：管理画面上にある『AMP表示しない』をポチッと押すと手っ取り早いので、それで対応します。
『AMP謎？のCSS出力』はコレで忘れる事ができそうです。ありがとうございました！
わいひら reacted
12/04/2018 12:22 am
一応、https環境でAMPページに検索フォームを実装してみました。
https://github.com/yhira/cocoon/archive/master.zip
AMPバリデーターでもエラーが出ないので、これで多分大丈夫ではないかと思います。
※http環境だとAMPページに非表示になります。
Topic starter
12/04/2018 8:35 am
ダウンロードしたファイルですが出力されてないと言うか、ファイルの変更箇所が見当たりませんでした。
https://bibabosi-rizumu.com/xserver-ssh-teraterm/?amp=1
※『添付画像』はPC検証画面ですが、スマホビューも同様です。
footerにあるmenu・copyrightの外部amp.css変更による修正、ありがとうございました！
Topic starter
12/04/2018 8:33 pm
一応、https環境でAMPページに検索フォームを実装してみました。
今Cocoonページを確認したら、検索フォームを確認できました。
https://wp-cocoon.com/0-4-6/?amp=1
次のバージョンで対応されたようなので、のんびり待っておこうと思います！
ありがとうございました＾＾
Topic starter
12/04/2018 11:22 pm
---------------------------------------------- サイト名：ビバ★りずむ サイトURL： https://bibabosi-rizumu.com ホームURL： https://bibabosi-rizumu.com Wordpressバージョン：4.9.5 PHPバージョン：7.1.4 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：0.4.6 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン： 0.0.2 ---------------------------------------------- 利用中のプラグイン： ----------------------------------------------
プラグインなし状態で確認した画像は以下です。
---------------------------------------------- サイト名：びば★サーバー サイトURL： https://biba-server.xyz ホームURL： https://biba-server.xyz Wordpressバージョン：4.9.5 PHPバージョン：7.0.18 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：0.4.6 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：0.0.2 ---------------------------------------------- 利用中のプラグイン： ----------------------------------------------
試しに一時的にテストサイトをhttps化して公開してみたら、問題ありませんでした。
https://biba-server.xyz/hello-world/?amp=1
検索フォームはどちらも表示され、スライドインの検索をクリックするとポップアップが出てキチンと表示されます。
おそらく固有の問題っぽいので、ファイルは正常だとわかりました！お手数おかけしまいした。
Topic starter
13/04/2018 1:16 am
httpページでは表示されない仕様になっています。
httpページでは試してない状態です。
https://bibabosi-rizumu.com/xserver-ssh-teraterm/?amp=1
▲httpsサイトで表示されず、あきらめたサイト
▼https化と公開をし、初めてAMP対応したページ（初めて公開したページ）はキチンと表示されます。
https://biba-server.xyz/hello-world/?amp=1
結果。bibabosi-rizumu.com以外では問題ないと分かったので、bibabosi-rizumuサイト上であきらめました❦
通常は問題ないかと思われます！ご対応ありがとうございました＾＾
14/04/2018 12:26 am
どちらも表示されたんですね。
それならよかったです。
同じHTTPS環境なのに表示されるケースとされないケースがあって、気になっていました。
かうたっく reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。