サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年3月14日 22:14
いつもお世話になっております。
このように優れたテーマを無料で利用させていただいておいて申し訳ないのですが、カスタマイズについて少しお尋ねしたいことがありまして、書き込ませていただきました。もしお時間がありましたら、目を通していただけると幸いです。
URL： https://yuki-portal.com/moddatabase/cm3d2-com3d2/
上記HPのサイドバーにありますように、searchformを小テーマに入れ込んで、複合検索を実装したのですが、検索窓のデザインが崩れてしまいます。
とりあえず参考にしたHPのものをほぼそのままコピペして少しだけ改造したところ形にはなっているのですが、せっかくのデザインをできるだけ崩したくないと思いますので、お力添えをお願いできないでしょうか。
改造した後のsearchform内コードは以下のとおりです（参考にしたHP：１、２、３）
if (!is_amp() || !is_ssl()): ?>
<form class="search-box input-box" method="get" action="<?php echo home_url('/'); ?>">
<?php else: ?>
<form class="amp-form search-box" method="get" action="<?php echo home_url('/'); ?>" target="_top">
<?php endif ?>
<?php wp_dropdown_categories('show_option_none=カテゴリを選択&show_count=1&hierarchical=1'); ?>
<?php $tags = get_tags(); if ( $tags ) : ?>
<select name="tag">
<option value="" class="selected">タグを選択</option>
<?php foreach ( $tags as $tag ): ?>
<option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?>
<input name="s" id="s" type="text" placeholder="キーワードを入力">
<input id="submit" type="submit" value="検索">
</form>
私自身HTMLが少し分かる程度なレベルのため、正直PHPのコードを理解しできないまま記述しています。
初心者丸出しな質問になってしまっているのかもしれませんが、お時間がありましたらご返答をお願いいたします。
Topic starter
2019年3月14日 22:17
2019年3月15日 22:30
申し訳ないですが、サポート対象外のものにもあるように自前のカスタマイズに起因する不具合対応はサポートの対象外とさせていただいています。
ただ、アドバイスするにしても、「デザインが崩れた」だけではわかりかねます。僕は正解を知らないので。
出来れば正解のデザインの説明をした画像とか、似たようなデザインの検索フォームとかを提示していただかないと、ちょっと何ともいえないかもしれません。
※カスタマイズ対象があまりにも手間のかかるものだった場合は、案内にもあるようにサポート外となる可能性もあります。ご了承ください。
Topic starter
2019年3月15日 23:16
申しわけありません。
操作を誤って内容を編集してしまいました（画像が表示されていなかったので修正しようと編集ボタンを押して書き込んでしまいました…）。
でも内容は覚えているので、続けて返信を書きます。
わいひら
以前の不具合状態がこちら。
2019年3月16日 20:32
なるほど。
虫眼鏡ボタンを「サイト内検索」のほど良い位置に表示させたかったということで良いでしょうか。
それでしたらそこまで難しくはないので、サイト上で表示させておいていただいて、このトピックに報告いただければ、改善点を提示出来るかと思います。
そのテストページが公開ページであれば、テストページのURLでもいいです。
2019年3月16日 20:33
せっかく書き込んだ内容を誤って削除してしまって申しわけありません。。
公開ページに、同様の環境がありましたら、見せていただければ、改善策を書きます。
CSSの修正なので、そこまで難しいものでもないと思うので。
Topic starter
2019年3月17日 02:31
わいひらさん。お忙しい中対応していただいて、本当にありがとうございます。
テストサイトのURLがあればとのことですのでこちらに早速書き込ませていただきます。：リンク
画像がないだけでほぼ同じ環境ですので大丈夫かとは思いますが、万が一なにか不足な点などありましたらお教えください。
それではお時間のある時で構いませんので、よろしくお願いいたします。
2019年3月18日 01:05
子テーマのstyle.cssにこちらを貼り付けるだけでいけるかなと思います。
.search-submit {
top: auto;
}
2019年3月18日 07:54
つい見て装飾しまった…。
https://gyazo.com/a0c7a0c917ae61ee6e32e3605f78bc02
↑ビフォー ↓アフター
https://gyazo.com/4bf4accdff861e047843942c6b525242
.search-box #s {
position: relative;
}
.search-box #submit {
width:auto;
padding: 5px;
position:absolute;
bottom: 6px;
right: 5px;
}
完成形がわからないので、数値をイロイロ変更すればだれでも思った通りのスタイルになると思います
わいひら reacted
Topic starter
2019年3月18日 12:32
わいひらさん→
環境のせいなのかわからないのですが、実際に小テーマの方に記述してみると添付画像のように下にずれてしまいました。どうも中心点を基準に上から下にずれたように見えますが、もしかしたら私のサイト固有の問題なのかもしれません。
わいひらさんから頂いたアドバイスをもとにtop属性を調べてみて、とりあえずpx指定で応急処置をしてみると形だけは整いそうなのですが、それだと問題がでてしまうでしょうか？
もしちゃんとした解決手段がわかるようでしたら、お時間の空いているときにでもお教えいただける助かります。
かうたっくさん→
上に書いてあるコードは私が応急処置的に形を整えていたコードでして、現在わいひらさんに相談していたのはわいひらさんと直接やり取りをしていた、以下のコードになります。
<?php //検索フォーム
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
*/
if ( !defined( 'ABSPATH' ) ) exit;
if (!is_amp() || !is_ssl()): ?>
<form class="search-box input-box" method="get" action="<?php echo home_url('/'); ?>">
<?php else: ?>
<form class="amp-form search-box" method="get" action="<?php echo home_url('/'); ?>" target="_top">
<?php endif ?>
<?php wp_dropdown_categories('show_option_none=カテゴリを選択&show_count=1&hierarchical=1'); ?>
<?php $tags = get_tags(); if ( $tags ) : ?>
<select name="tag">
<option value="" class="selected">タグを選択</option>
<?php foreach ( $tags as $tag ): ?>
<option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option>
<?php endforeach; ?>
</select>
<?php endif ?>
<input type="text" placeholder="<?php _e( 'サイト内を検索', THEME_NAME ) ?>" name="s" class="search-edit" aria-label="input">
<button type="submit" class="search-submit" role="button" aria-label="button"></button>
ですのでアドバイスいただいた修飾部分をそのまま適用することはできませんが、テーマのデザイン調整などの参考にさせていただこうかと思います。
ご助言ありがとうございました。
Topic starter
2019年3月18日 14:01
akiraさん、ありがとうございます。
記入していただいたコードを書き込んでみたところ、位置が正常になりました。無理な修正もこれでしなくともよいので、大変助かりました。
わいひら reacted
2019年3月18日 14:44
なんで、実装してなかったんですね ? それは失礼しました＾＾；
そしてその朝の数分であった、私がやるべきことを子供にさせてしまった事。感謝と同時に謝ろうと思います。←大反省…?
Topic starter
2019年3月18日 15:48
私の技術力不足でお手を煩わせてしまったよう、申し訳ありません。
どうかお子様を優先してあげてください。それでは失礼いたしました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。