サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年4月8日 15:37
連日の対応：修正などお疲れ様です。
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点。ちょっとだけ気になった所をご報告します。
2018年4月8日 22:57
スライドイン設定時、AMPページの（メニューを含む）フッターが隠れる件。
これについては明日修正したいと思います。
2018年4月8日 22:58
カエレバの画像（もしもアフィリエイト経由）の比率：縦長なものが正方形になりオカシイ件。と同様環境でカエレバ画像が小さい件。
これは、外部サイトにある画像の縦横幅は取得できないからです（やろうと思えばできるけど、画像をすべて外部サーバーから取り寄せて計測するので速さを犠牲にするので実装していないと言った方が正しいです。相手サーバにも負荷をかけることになりますし）。
なので、外部サイト画像の場合で、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属性を入れるように対応してもらうしかないです。
2018年4月8日 23:02
AMPで検索窓が表示されていない件。
これは、AMPでは通常の入力フォームを利用できないからです。
最新のAMP技術を利用すれば、できるとは思います。ただ現時点で、そこまでは対応していないです。AMPページで検索窓がそこまで必要もないだろうということで、実装も今のところは考えていないです。
ただ、ちゃんと調べてみて実装が簡単そうならするかもしれません。
2018年4月9日 01:00
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
トピックスターター 2018年4月9日 06:09
詳細で分かりやすい説明ありがとうございます。
外部サイト画像の場合で、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表示しない』をポチッと押すと手っ取り早いので、それで対応します。便利機能実装、ありがとうございます＾＾
トピックスターター 2018年4月9日 06:10
AMP に検索フォームを設置するには、 https が必須
Akiraさん。その他、実装方法を検証してくださって、ありがとうございます＾＾
<html>とheadタグの間に、アドセンスが自動的作成したscriptでしたらampのとき自動的に削除されたか何かでエラーは出ませんでした。それで最近、良かった。。と思った記憶があります。
良い内容だったのに、それぞれ項目を分けずにまとめてしまった・・・。せめてもと？ここでリンクを貼ってみました＞＜
トピックスターター 2018年4月9日 14:37
カエレバ画像の件：以下の通りの対応策で解決しました。
対応策としては、自前で属性を入力するか、カエレバにwidth、height属性を入れるように対応してもらうしかないです。
該当ページ：管理画面上にある『AMP表示しない』をポチッと押すと手っ取り早いので、それで対応します。
『AMP謎？のCSS出力』はコレで忘れる事ができそうです。ありがとうございました！
わいひら reacted
2018年4月9日 21:57
検索フォーム自体は、すごく簡単に設置できます。
教えていただきありがとうございます。
思っていたより簡単そうです。httpは、is_ssl関数とかで判別して、httpページでは表示しないとかにすればいけそうです。
問題は以下がうまくいかどうかかもしれません。
「 form タグを取り除く」と「 target 属性を取り除く」のコードを、検索フォームには適用しないように変更する必要があり面倒です。
2018年4月9日 21:59
AMPで検索窓が表示されていない件。
これについては、手元のファイルを修正したので、次のバージョンで改善されるかと思います。
2018年4月9日 22:06
通常そのようにしてくれてますけど、AMPではどこか（おそらく外部）のCSSが読み込まれてるような気がします
ここら辺は僕も詳しく検証しないんですけど、.i-amphtmlとかがつくものは、AMP側が勝手に追加してしまうCSSだと思います。
ここら辺は、僕もよくわかっていません^^;
たまに勝手に追加されるCSSで、表示が崩れるので、それを修正するぐらいで。
今回、AMPページでフッターのクレジットが表示されなかったのも、AMPがbody要素にCSSを追加したのが原因でした。
トピックスターター 2018年4月9日 23:47
勝手に追加されるCSSで、表示が崩れるので、それを修正するぐらいで。
そうでしたか。。いつもありがとうございます。初AMP対応しましたけど、CSSの容量縛りもあるのでホントに製作者さん泣かせな部分でもありそう…です。
TOPページやpreの表示にstyleを付けない分子テーマで自由にスタイルを書けるようにしてくれたんだろなぁ＾＾ っと勝手に思ってます。
今回も対応していただきありがとうございました。AMP用の検索窓のCSSを追記して置こう！と思います。ありがとうございましたﾍﾟｺﾘ
2018年4月10日 20:33
そうなんです。
CocoonテーマのAMP機能作成で、一番きつかったのは容量縛りでした。50KBは少ない^^;
2018年4月11日 12:31
is_ssl 関数ってあるんですね。初めて知りました。正規表現で判別しないといけないのかなとか思ってました。
たぶん、AMP に検索フォームがある 無料の国産テーマはないはず。差別化になりますね。
2018年4月12日 00:22
一応、https環境でAMPページに検索フォームを実装してみました。
https://github.com/yhira/cocoon/archive/master.zip
AMPバリデーターでもエラーが出ないので、これで多分大丈夫ではないかと思います。
※http環境だとAMPページに非表示になります。
トピックスターター 2018年4月12日 08:35
ダウンロードしたファイルですが出力されてないと言うか、ファイルの変更箇所が見当たりませんでした。
https://bibabosi-rizumu.com/xserver-ssh-teraterm/?amp=1
※『添付画像』はPC検証画面ですが、スマホビューも同様です。
footerにあるmenu・copyrightの外部amp.css変更による修正、ありがとうございました！
トピックスターター 2018年4月12日 20:33
一応、https環境でAMPページに検索フォームを実装してみました。
今Cocoonページを確認したら、検索フォームを確認できました。
https://wp-cocoon.com/0-4-6/?amp=1
次のバージョンで対応されたようなので、のんびり待っておこうと思います！
ありがとうございました＾＾
2018年4月12日 21:52
動作しなかった環境というのは、どういったサーバーでしょうか。
よろしければ、Cocoon設定にあるテーマ環境情報を貼り付けてもらってよろしいでしょうか。
トピックスターター 2018年4月12日 23:22
---------------------------------------------- サイト名：ビバ★りずむ サイト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
検索フォームはどちらも表示され、スライドインの検索をクリックするとポップアップが出てキチンと表示されます。
おそらく固有の問題っぽいので、ファイルは正常だとわかりました！お手数おかけしまいした。
2018年4月13日 00:09
試しに一時的にテストサイトをhttps化して公開してみたら、問題ありませんでした。
httpページでは表示されない仕様になっています。
トピックスターター 2018年4月13日 01:16
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サイト上であきらめました❦
通常は問題ないかと思われます！ご対応ありがとうございました＾＾
トピックスターター 2018年4月13日 20:21
cocoon-master-0.4.7.1.zipをダウンロードして試したら、スライドイン・サイドバーとも検索窓が表示されました。
これでこのトピック全て解決です。ご対応ありがとうございました＾＾
2018年4月13日 22:10
cocoon-master-0.4.7.1.zipをダウンロードして試したら、スライドイン・サイドバーとも検索窓が表示されました。
どっちのサイトも表示されたのですか？
トピックスターター 2018年4月13日 22:46
そうですね。どちらも表示されました。
※テスト用は削除したので再構築：biba-server.xyz/hello-world/はアドレスが変わりましたが4.6のときから正常に表示されてました。※テスト環境は後程、削除します。
どちらもcocoon-master-0.4.7.1.zipで試したら正常に表示されてます。ありがとうございました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。