現在デフォルトスキンとして「Season (Autumn)」を適用中。

ヘッダーメニューに検索窓を追加したい | カスタマイズ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
ヘッダーメニューに検索窓を追加したい
 
Share:

[解決済] ヘッダーメニューに検索窓を追加したい  


tsumire
(@tsumire)
New Member
参加: 1年 前
投稿: 3
2018年10月28日 15:16  

はじめて投稿させていただきます。よろしくお願いします。
ヘッダーメニューに検索窓を追加したく、ネットを検索したところフィルターフックで実装するのが簡単そうでした。
実装はできましたが、Cocoon 設定の「変更をまとめて保存」ができなくなりました。
具体的には「変更をまとめて保存」ボタンを押した後に表示される
「設定は保存されました。」が表示されず、変更した設定も反映されない状態です。

以下に追加したコードをご連絡します。
▼/themes/cocoon-child-master/functions.php
https://notepad.pw/code/wtm1uisfx

他に良い方法がありましたら教えていただけますでしょうか。
お手数をおかけしますが、ご対応いただけると嬉しいです。

環境は次の通りです
----------------------------------------------
サイト名:えむ家のメモ帳
サイトURL: https://m-kenomemo.com/wp
ホームURL: https://m-kenomemo.com
コンテンツURL:/wp/wp-content
インクルードURL:/wp/wp-includes/
テンプレートURL:/wp/wp-content/themes/cocoon-master
スタイルシートURL:/wp/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.9.8
PHPバージョン:7.1.22
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
サーバーソフト:nginx/1.14.0
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.3.2.2
カテゴリ数:4
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.0.8
Compress JPEG & PNG images 3.0.1
Google XML Sitemaps 4.0.9
Jetpack by WordPress.com 6.6.1
SiteGuard WP Plugin 1.4.3
TinyMCE Advanced 4.8.0
WP Multibyte Patch 2.8.1
----------------------------------------------

 


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6384
わいひら - Facebookわいひら - Twitter
2018年10月28日 19:24  

僕の環境では、問題なく保存されるようです。
まず、その前にカスタマイズ下部分をfunctions.phpから削除して保存すると動作するのでしょうか?
それでも動作しない場合は、何か他に原因がある可能性があります。


tsumire
(@tsumire)
New Member
参加: 1年 前
投稿: 3
2018年10月29日 11:06  

こんにちは。早速返信いただきありがとうございます!
カスタマイズ部分をfunctions.phpから削除すると、通常通りCocoon 設定の「変更をまとめて保存」ができます。

プラグインすべての無効やCocoon設定のリセットを試しても改善しませんでした。

色々試したところ、カスタマイズしたコードの「get_search_form()」を削除すると「変更をまとめて保存」ができるようになりました。

今回、フィルターフックで検索窓を追加するのは諦め、
別の箇所で表示させた検索窓をjqueryで移動させることで実現したのでご報告します。

▼/themes/cocoon-child-master/functions.php
https://notepad.pw/52a7tej
→フィルターフックで検索窓の外枠となる要素を追加

▼/themes/cocoon-child-master/tmp-user/main-before.php
https://notepad.pw/wbet723
→メインコンテンツ前に検索窓を追加

▼/themes/cocoon-child-master/javascript.js
https://notepad.pw/1slzy5d1
→jQueryで先ほどフィルターフックで追加した要素に検索窓を移動

あまりスマートな方法ではないですが、実現はできたのでこれで運営しようと思います。他に良い方法がありましたらご連絡いただけると助かります。

よろしくお願いします。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6384
わいひら - Facebookわいひら - Twitter
2018年10月29日 20:12  

僕の環境では、動作しているので、もしかしたら何かしらプラグインと干渉してる可能性もあるのかもしれません(干渉しそうなプラグインは一覧にはなさそうだけど)。

get_template_part('searchform');

でもダメなようなら、ちょっと外部からは原因はわからないかもしれません。

jQueryで意図通り表示される場合は、それで問題ないと思います。
少なくとも、プラグインと干渉はしづらく、少なくとも「保存ができなくなる」といったPHP動作に影響が出ることはないので。


tsumire
(@tsumire)
New Member
参加: 1年 前
投稿: 3
2018年10月31日 06:24  

コメントありがとうございます。
ご指示いただいたタグを試しましたが、状況は変わりませんでした。
※検索窓は表示されましたが、Cocoon設定の保存ができない状態。

試しに、以下ファイルに「get_template_part('searchform');」を直接追加しましたが、
同じ状態になりました。

▼/themes/cocoon-child-master/tmp/navi.php
https://notepad.pw/1f8vdsty
→先頭にget_template_partを追加

状況的には、jQueryで実装できたので問題ないです。
丁寧なご対応ありがとうございます!

Cocoonは欲しかった機能がほぼ入っていて本当に使いやすいです。
プラグインをたくさん入れる必要がなくなったので、プラグインの管理も楽になりました。今回初ブログ挑戦ですが、Cocoonテーマで頑張りたいと思います。

こちらの件、具体的な原因がわかりましたら報告いたします。
本当にありがとうございました。

 


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3367
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年10月31日 07:15  

こんにちは。

もしかしたらウィジェットとCSSでいけそうにも思います。

スマホ・PC用に指定したテキストもしくはHTMLウィジェットを上のほうに設置。

場所的に問題あるなら、PHPファイルを作ってメニュー下にPC・モバイルを分岐して設置。

後はCSSでメニューの位置にスペースを作って、領域を移動するなど。

モバイルはスライドイン用のSearchFoam(確認してません)があれば、読み込むように考えてみるなどです。

実際見てみないと不明ですし、一見ややこしそうですが、やり終われば簡単かも知れません???

 


わいひら 件のいいね!
litoma
 litoma
(@litoma)
ゲスト
参加: 7か月 前
投稿: 11
2019年3月12日 18:46  

わいひら様
今更で恐縮ですが、私も同様の変更(ヘッダーに検索フォームを表示)をしたいと思い、tsumire様のコードを追加したところ、事象が再現しました。
参考になるか分かりませんが、切り分けのため色々試したことを記載します。

■事象詳細

tsumire様と同じです。ただ、付け加えることがあるとしたら、

  • 「変更をまとめて保存」クリック後、他のタブにいても必ず「全体」タブに戻ります。
  • ブラウザのタブ機能等で「Cocoon設定」と「テーマエディター」を同時に表示させた状態で、「テーマエディター」でコード追加した場合、「Cocoon設定」をリロード(更新)しなければ「変更をまとめて保存」可能です。ただし、一度でもリロードするとNGです。

■試したこと(以下、全部NG)

  • 「get_search_form();」を「get_template_part('searchform');」に変更
  • 「ob_start();」~「ob_end_clean();」までを削除し、「$items .= '<li>' . $searchform . '</li>';」を生成後のHTMLコードに置換(※置換後:「$items .= '<li><form class="search-box input-box" ~中略~ </form></li>';」)
  • 上記実施後、「<form></form>」以外のHTMLコードを削除

なお、何の切り分けにもならないかもですが、「$items .= '<form>';」(</form>タグ無し)ならOKでした。

以上、何かのお役に立てば幸いです。また、他に試行することや取得すべき情報等ありましたらご教示ください。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6384
わいひら - Facebookわいひら - Twitter
2019年3月12日 19:38  

なお、何の切り分けにもならないかもですが、「$items .= '<form>';」(</form>タグ無し)ならOKでした。

なるほど、Cocoon設定はformを利用しています。
なので、カスタマイズすることで「Cocoon設定のform」の中に「ヘッダープレビューで表示されるform」ができてしまうため、設定が保存できないのかもしれません。
そういう場合は、親テーマの/lib/_defins.phpの以下の部分を

define('DEBUG_ADMIN_DEMO_ENABLE', 1);

以下のようにすると良いかもしれません。

define('DEBUG_ADMIN_DEMO_ENABLE', 0);

ただしこのカスタマイズを行うと、Cocoon設定のプレビュー表示が表示されなくなります。


litoma
 litoma
(@litoma)
ゲスト
参加: 7か月 前
投稿: 11
2019年3月12日 21:52  

わいひら様
早速のご返信ありがとうございます。
私も同じくプレビュー機能を疑いました。ただ、教えていただいた変更を試みましたが、残念ながら事象は改善せずでした。

少し気になるのは、サイドバーにウィジェットで検索フォームを追加した際は問題なく動作するのです。
プレビューが原因なら、ヘッダーに追加した場合と同様の事象が起こっても良い気がするのですが…。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6384
わいひら - Facebookわいひら - Twitter
2019年3月13日 19:34  
define('DEBUG_ADMIN_DEMO_ENABLE', 0);

これ、実際の動作を見てみたら、ヘッダープレビューは非表示になっていませんでした。。

なので、以下の手順でヘッダープレビューを非表示できるようにします。

まず以下の最新版のCocoonでテーマはアップデートします。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
https://wp-cocoon.com/wp-content/uploads/2019/01/github-zip.png

次に、子テーマのfunctions.phpに以下のコードを貼り付ければヘッダープレビューを非表示にしてCocoon設定が保存できるようになるかと思います。

//ヘッダー
add_filter('cocoon_setting_preview_header', '__return_false');

わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6384
わいひら - Facebookわいひら - Twitter
2019年3月13日 19:35  

もし、上記コードでうまく動作しない場合は、以下のコードを子テーマのfunctions.phpに追記してみてください。

//////////////////////////////////////////////
//全てのCocoon設定プレビューを非表示にする(フォント以外)
//////////////////////////////////////////////
add_filter('cocoon_setting_all_previews', '__return_false');

こちらは、すべてのプレビューを非表示にできます(フォントプレビュー以外)。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6384
わいひら - Facebookわいひら - Twitter
2019年3月13日 19:37  

ついでなので、個別のプレビュー表示を制御出来るフックも追加しておきました。

//////////////////////////////////////////////
//個別のCocoon設定プレビュー非表示制御
//////////////////////////////////////////////
//全て
add_filter('cocoon_setting_preview_all', '__return_false');
//ヘッダー
add_filter('cocoon_setting_preview_header', '__return_false');
//スキン
add_filter('cocoon_setting_preview_skins', '__return_false');
//タイトル(フロントページ)
add_filter('cocoon_setting_preview_title_front', '__return_false');
//タイトル(投稿・固定ページ)
add_filter('cocoon_setting_preview_title_singular', '__return_false');
//タイトル(カテゴリーページ)
add_filter('cocoon_setting_preview_title_category', '__return_false');
//カラム
add_filter('cocoon_setting_preview_columns', '__return_false');
//インデックス
add_filter('cocoon_setting_preview_index', '__return_false');
//投稿(カテゴリー・タグ)
add_filter('cocoon_setting_preview_singular_categories_tags', '__return_false');
//投稿(関連記事)
add_filter('cocoon_setting_preview_singular_related_entries', '__return_false');
//投稿(ページ送りナビ)
add_filter('cocoon_setting_preview_singular_pager_post_navi', '__return_false');
//目次
add_filter('cocoon_setting_preview_toc', '__return_false');
//SNSシェア(トップ)
add_filter('cocoon_setting_preview_sns_share_top', '__return_false');
//SNSシェア(ボトム)
add_filter('cocoon_setting_preview_sns_share_bottom', '__return_false');
//SNSフォロー
add_filter('cocoon_setting_preview_sns_follow', '__return_false');
//画像
add_filter('cocoon_setting_preview_images', '__return_false');
//ブログカード(内部)
add_filter('cocoon_setting_preview_internal_blogcard', '__return_false');
//ブログカード(外部)
add_filter('cocoon_setting_preview_external_blogcard', '__return_false');
//コード
add_filter('cocoon_setting_preview_code', '__return_false');
//通知
add_filter('cocoon_setting_preview_notice', '__return_false');
//アピールエリア
add_filter('cocoon_setting_preview_appeal', '__return_false');
//カルーセル
add_filter('cocoon_setting_preview_carousel', '__return_false');
//フッター
add_filter('cocoon_setting_preview_footer', '__return_false');
//ボタン
add_filter('cocoon_setting_preview_buttons', '__return_false');
//モバイル
add_filter('cocoon_setting_preview_mobile', '__return_false');
//404ページ
add_filter('cocoon_setting_preview_404', '__return_false');

これで、フォントプレビュー以外は全ての個別プレビューを制御できます。


litoma
 litoma
(@litoma)
ゲスト
参加: 7か月 前
投稿: 11
2019年3月14日 22:10  

わいひら様
ご返信が遅くなり申し訳ありません。
また、プレビュー制御用のフィルターフックを実装いただきありがとうございます。
お陰様で、無事に設定を保存できるようになりました。
もともとのトピック主であるtsumire様に便乗した上、代替策で一度解決していたにも関わらず、
わざわざ機能改修までしていただき、感謝しかありません。
本当にありがとうございます。

今後とも、よろしくお願いいたします。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6384
わいひら - Facebookわいひら - Twitter
2019年3月15日 22:24  

やはり、ヘッダープレビューが原因だったんですね。
うまくいったようでよかったです 😊 
これも、以下の情報があったから思いつきました。

なお、何の切り分けにもならないかもですが、「$items .= '<form>';」(</form>タグ無し)ならOKでした。

こちらこそありがとうございます。


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました