Cocoonフォーラム

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

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

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

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

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

ヘッダーメニューに検索窓を追加したい
 
共有:
通知
すべてクリア

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

14 投稿
4 ユーザー
4 Reactions
14 K 表示
(@tsumire)
New Member Registered
結合: 6年前
投稿: 3
Topic starter  

はじめて投稿させていただきます。よろしくお願いします。
ヘッダーメニューに検索窓を追加したく、ネットを検索したところフィルターフックで実装するのが簡単そうでした。
実装はできましたが、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)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17133
 

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


   
(@tsumire)
New Member Registered
結合: 6年前
投稿: 3
Topic starter  

こんにちは。早速返信いただきありがとうございます!
カスタマイズ部分を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で先ほどフィルターフックで追加した要素に検索窓を移動

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

よろしくお願いします。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17133
 

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

get_template_part('searchform');

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

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


   
(@tsumire)
New Member Registered
結合: 6年前
投稿: 3
Topic starter  

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

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

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

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

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

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

 


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

こんにちは。

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

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

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

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

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

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

 


   
わいひら reacted
(@litoma)
Active Member
結合: 6年前
投稿: 11
 

わいひら様
今更で恐縮ですが、私も同様の変更(ヘッダーに検索フォームを表示)をしたいと思い、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)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17133
 

なお、何の切り分けにもならないかもですが、「$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)
Active Member
結合: 6年前
投稿: 11
 

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

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


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17133
 
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)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17133
 

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

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

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


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17133
 

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

//////////////////////////////////////////////
//個別の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)
Active Member
結合: 6年前
投稿: 11
 

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

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


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17133
 

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

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

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


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

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

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

最近の書き込みはこちら。

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

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