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. ブラウザ環境チェックツール

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

【便利】CocoonのTIPSを書き込...
 
共有:
通知
すべてクリア

[クローズ] 【便利】CocoonのTIPSを書き込むトピック【効率化】

39投稿
10ユーザー
54Likes
9,585表示
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

マニュアルには載ってないかもしれないけど、ちょっとしたことでCocoonを便利に使うTIPSを書き込むトピックです。
Cocoonに限らず、WordPressに関するTIPSでもOK。


   
Ikumi reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

ちなみに、CocoonのTIPSではなくWordPressのものになるけど、僕が最近まで知らなかったのは、エディター上で使う以下のショートコード。

  • Shift+Ctrl+V:書式を外してプレーンテキストでエディターに貼り付ける

ウェブページの文章をコピーして、WordPressのエディターに貼り付けると、装飾ごと貼り付けられてしまうけど、このショートコードを利用するとプレーンなテキストで貼り付けられる。

こちらのトピックで実は最近知った ? ? 


   
fullnote
(@fullnote)
Trusted Member Registered
結合: 5年前
投稿: 61
fullnote - Twitter
 

Cocoonって機能豊富でプラグインほとんど不要ですよね。

 

問い合わせページ何も考えずにContact Form 7プラグイン使っていましたが、Googleフォームを使うと更にプラグイン減らせることに気づいたので思い切って切り替えてみました。

(まあ、問い合わせほぼ来ないんでどちらでもいいですが。。(;^ω^))

 

https://fullnoteblog.com/google-form-contact/


   
Ikumi, みょこ, たなかま and 1 people reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

Googleフォームって使ったことがなかったんですけど、ページ内に埋め込めるんですね ? 


わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

知っている人も多いと思うけど、一応。
「吹き出しブロックょ機能は、名前順で並び替えられるので、よく利用する吹き出しは、吹き出しの「タイトル」に以下のような連番を付けると優先的に上の方に表示される。

[001] よく使う吹き出し
[002] 次によく使う吹き出し


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 5年前
投稿: 595
たなかま - Twitter
 

Googleフォームよさそうですね。

 

僕もContact Form 7を使ってたのですが、全サイトMW WP Formに切り替えました。

Contact Form 7だと、reCAPTCHA v3を使わないといけなくなったので。

みんなContact Form 7を使ってるみたいですが、reCAPTCHAは使ってないんでしょうか。

 


   
みょこ
(@ukigumo413)
Trusted Member Registered
結合: 3年前
投稿: 50
みょこ - Twitterみょこ - Skype
 

reCAPTCHAを使うことでログイン画面のセキュリティが上がり、悪意のあるログイン施行がグッと減るので、個人的には「reCAPTCHAが必須だからContact Form 7で良い」という感じですね。

いつの間にか規約変わっていて、アドセンス貼ってると個人ブログでもAkismetが使えないので、ほかのセキュリティ対策するしかなくなりますしね…


   
Ikumi and たなかま reacted
たなかま
(@tanakama)
Prominent Member Registered
結合: 5年前
投稿: 595
たなかま - Twitter
 

なるほど。アドセンス詳しくないので、勉強になります。

個人的には「reCAPTCHAが必須だからContact Form 7で良い」という感じですね。

「Contact Form 7」+「reCAPTCHA」を使われているんですね。

 

僕の場合、Contact Form 7を使っていたのですが、reCAPTCHA v3のバージョンだと、全ページにreCAPTCHAのロゴが入ったり、scriptも入ったので「MW WP Form」というプラグインに乗り換えました。(たしかContact Form 7でも不要なscriptを除去する方法があったと思います)

今は「MW WP Form」+「reCAPTCHA v2」にしています。

お問い合わせフォームに「MW WP Form」を使ってる人が少ないので、ずっと気になってました。

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
かうたっく - Facebook
 

全ページにreCAPTCHAのロゴが入ったり、scriptも入ったので「MW WP Form」というプラグインに乗り換えました。(たしかContact Form 7でも不要なscriptを除去する方法があったと思います)

Contact Form 7では全ページにスクリプトが入って邪魔だったので、Contact Form 7のインテグレーションを使わずに問い合わせ固定ページIDだけphpで分岐してをしてscriptを読み込んだみたいです。

右下のreCAPTCHAマークが邪魔だったんで、右上にCSSで変更させました。

詳細な方法は忘れましたけど。

 

発見

https://wp-cocoon.com/community/bugs/contact-form-7%E3%81%AErecaptcha%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%9A%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E8%B5%B7%E3%81%8D%E3%82%8B/

投稿者:: @kautakku

 

前提:サイトガードで画像認証を行っているなど

https://gyazo.com/cf456f75ab87faf2b12b724068daf4f2

 

Step 1: Client side integration

短いほう(head内に入れるscript)をPHPで分岐してhead-insert.phpに入れる

<?php //
if ( is_page( 'ここは記事ID' ) ) { ?>
//ここにscript

<?php } ?>

h ttps://ドメイン/wp-admin/post.php?post=ここの数字がID&action=edit

長いほうのスクリプトは、記事内下部にある『カスタムJavaScript』に。

※Cocoonはscriptタグは入れなくても良い。とある

カスタムCSSに以下

.grecaptcha-badge {
	top: 0;
}

トップに戻るボタンとかぶるのでreCAPTCHAマークを上に。

これで固定ページのみ読み込むので、他のページにreCAPTCHAは反映されませんよ。

他に何か工程があったか、忘れましたが。

 

This post was modified 3年前 by かうたっく

   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
かうたっく - Facebook
 
投稿者:: @ukigumo413

 

いつの間にか規約変わっていて、アドセンス貼ってると個人ブログでもAkismetが使えないので、ほかのセキュリティ対策するしかなくなりますしね…

これ。どこに書いてるかと思って

  1. Akismetの利用規約を全部読む ? 
  2. 書いてないんで、ローカルでAkismetを再設定+翻訳してチェック

書いてた。

I don’t have ads on my site I don’t sell products/services on my site I don’t promote a business on my site

その後この文字列を検索したら2019年前半には変わってたっポイですね。

 

次シンプルで更新されているを代替プラグインでチェック

発見

https://wordpress.org/plugins/throws-spam-away/

これが良いかもしれない??

 

参考になりそうなサイトさんリンク

https://tabibitojin.com/blog-spam-comments-plugin/


   
ジャム君, たなかま, みょこ and 2 people reacted
みょこ
(@ukigumo413)
Trusted Member Registered
結合: 3年前
投稿: 50
みょこ - Twitterみょこ - Skype
 

@tanakama

reCAPTCHAの右下のバッヂは、設定画面で「インライン」にすればreCAPTCHAを使用しているフォーム下への表示に変わりますよ〜!

ただ、私は全ページにスクリプト入るというのが知りませんでした。

それだと他のものに変えたいと思うのは当然ですよね…


   
たなかま reacted
みょこ
(@ukigumo413)
Trusted Member Registered
結合: 3年前
投稿: 50
みょこ - Twitterみょこ - Skype
 

@kautakku

地味に毎年頼まれて何かしら1wordpressを新規に作ってまして、それで去年気がついたときには変わってたんですよね。

実際去年変わってたんですね!

ただJetpack入れたらakismet入れてなくてもなにかしらガードしてるっぽいんですよ。

代替プラグインなどもありがとうございます!

自前のサイトで試してみます!


   
Misumi
(@misumi)
Trusted Member Registered
結合: 3年前
投稿: 77
 

素人ですいません。Contact Form 7でこんな記事を見つけました。

 

https://yosiakatsuki.net/blog/remove-contact-form-7-jscss/


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 5年前
投稿: 595
たなかま - Twitter
 

@ukigumo413

@kautakku

ありがとうございます。参考になります。

やはり使いやすくて、Contact Form 7いいですね。

MW WP Formプラグインは、シークレットキー(サーバーサイドの認証)が入らないのと、やはりContact Form 7と比べると設定が難しいというのがありますね。

Googleフォームも良さそう・・・。勉強になりますね。

This post was modified 3年前 by たなかま

   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
かうたっく - Facebook
 
投稿者:: @ukigumo413

@kautakku

ただJetpack入れたらakismet入れてなくてもなにかしらガードしてるっぽいんですよ。

代替プラグインなどもありがとうございます!

自前のサイトで試してみます!

そうなんですか。

試した結果お待ちしてますね^^

 

ありがとうございます❦

 

 

投稿者:: @misumi

素人ですいません。Contact Form 7でこんな記事を見つけました。

 

https://yosiakatsuki.net/blog/remove-contact-form-7-jscss/

こっちはちょっと内容とは違うかも。

でも、ムダに読み込むものが減れば良い!!!って人に
助かる記事だと思います!

気になる人も多いかもしれないので^^

検索お疲れさまでした❦

 

 

たなかまさん

MW WP Formプラグインは、シークレットキー(サーバーサイドの認証)が入らないのと、やはりContact Form 7と比べると設定が難しいというのがありますね。

Googleフォームも良さそう・・・。

MW WP Formプラグイン、そうなんですね。

個人的になれたものを使う感じカモです。

実装するのが面倒とか、イロイロ腰が重い時がある。今そんな感じカモしれない・・・

 

どんだけ!だよ…ですが^^;

 

良いもの機能:最大限の魅力が伝わってから、時間を見て試してみたい。一目惚れ以外は、動かないタイプだと改めて分かった気がします ? ? ?

? ? ? 

This post was modified 3年前 2回 by かうたっく

   
kodaira
(@kodaira)
Eminent Member Registered
結合: 4年前
投稿: 29
kodaira - Twitter
 

ContactForm7から、NinjaFormに乗り換えました。GoogleFormも、単発的に使っています(集計の便利さはダントツ)。決め手は、デザインの好みで。ただ、reCAPTCHAが、3ではなく2なのが不満です。

 

 

 


   
fullnote reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

メールプラグインでもいろいろこだわりがあって面白いですね。
「ページキャッシュプラグイン」「セキュリティープラグイン」とかの雑談トピックがあっても面白いかもしれないですね。


   
fullnote
(@fullnote)
Trusted Member Registered
結合: 5年前
投稿: 61
fullnote - Twitter
 

mixhostで「Webサイトの最適化」という項目があったので試しに「すべて圧縮」を選択してみることにしました!(Cocoonの「サイト高速化」となんとなく似ているような気もしますが)

 

またPHP7.4がリリースされていたようなのでついでにこちらも変更しました。

PHP7.3だったのですごく改善されるわけではないみたいですがすこ~~しだけ良くなるかもです。

普段あまり気にしない人も多いと思ったのでシェアです。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

僕のmixhostのコントロールパネルを見てみたのですが、そういった項目はないようです。
PHPもまだ7.3までしかない…。
サーバ番号によっても違うんですかね。


   
fullnote
(@fullnote)
Trusted Member Registered
結合: 5年前
投稿: 61
fullnote - Twitter
 

なんと!

確かにjp16以前と以降で違うみたいですね。

https://help.mixhost.jp/hc/ja/articles/115003742152-PHP%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E5%A4%89%E6%9B%B4

私は「ソフトウェア>Select PHP Version」

ですが最近始めた人は「ソフトウェア>MultiPHP マネージャー」のほうが多そうですね。(;^ω^)

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

「ソフトウエア」項目にあるんですね。
スクリーンショットを見て、探してみたらありました ? 

けれどPHPのバージョン変更項目はそんな名前じゃないようです。
やっぱサーバーによって違う部分もあるんですね。
ちなみに僕のサイトは、30番台のサーバーです。


   
fullnote reacted
チャンビア?
(@changbeer)
Reputable Member Moderator
結合: 4年前
投稿: 252
チャンビア? - Twitter
 

全く脈絡もないのですが、

カラム+画像とボタンを使うと商品リンクっぽいものが作れますね。

Amazon、楽天、Yahoo以外でこの手の商品リンクっぽい表示をしたいことがあってHTMLやCSSで工夫していたのですが、標準機能で全然イケますね。

なんで今まで気づかなかった... Orz

という思いつきの投稿でした。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

この発想はなかった。これぞTIPS。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

僕も脈絡ないけど。
これまで何度か書いているけど、Cocoonのテンプレートのショートコードは、Evernoteなどにまとめておくと、一覧性が高いので探しやすく、どんな環境からでも3秒で使える。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

もちろんアフィリエイトのショートコードも。


   
チャンビア?
(@changbeer)
Reputable Member Moderator
結合: 4年前
投稿: 252
チャンビア? - Twitter
 

「スマホ・iPhoneでレンタルサーバー+ワードプレス+Cocoonを構築する方法!」

という記事の枠が空いてます。チャレンジャーいれば(苦笑

時代の変革を感じすぎて...もう...ショック...


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

iPhoneでそれを全部やっちゃう人っているんですかね笑
でも、もうそれくらいスマホで記事を書いている人も多いですよね。


   
fullnote
(@fullnote)
Trusted Member Registered
結合: 5年前
投稿: 61
fullnote - Twitter
 

@changbeer

え!?これまさに知りたかった情報かもです!単純に3カラムにして画像、ボタン(中?)、ボタン(中?)にしているってことですよね。枠はどうやっているんでしょうか?これは素晴らしいTIPS。。。


   
チャンビア?
(@changbeer)
Reputable Member Moderator
結合: 4年前
投稿: 252
チャンビア? - Twitter
 

しばらくパソコン使えないのでスマホで書きますね。

ブロックエディターで作っています。ビジュアルエディターだと多分結構大変。

枠は「白抜きボックス(確かそんな名前)」です。ボックス系はそのほかにもたくさんあるので好みのものを使えばよいかと。

ボックス内で3カラムを入れ込んで左端に画像を入れています。真ん中、右端にボタンを縦に2つずついれています。

Amazonリンクの画像ラージ表示もできるでしょうね。その場合は、枠の上部に画像を入れて、下部に必要なカラムとボタンを作る感じ。

1年のブロックエディターが活きてきました?


   
fullnote
(@fullnote)
Trusted Member Registered
結合: 5年前
投稿: 61
fullnote - Twitter
 

コメントありがとうございます。これ綺麗に表示させようとすると少しcssいじる必要ありそうですね。(꒪⌓꒪)

まずは枠線を細くするところから調べてみます。笑


   
fullnote
(@fullnote)
Trusted Member Registered
結合: 5年前
投稿: 61
fullnote - Twitter
 

商品リンクの話ついでに。

 

マニュアルには載っていませんが、btn1、btn2に加えてbtn3というボタンが存在します。

サウンドハウスが紫なので利用させてもらっています ? 

https://fullnoteblog.com/cocoon-soundhouse/

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

btn3は、結構利用している方がおられるようですね。
せっかくの良い機会なので正式にマニュアルに追加しておきました。
https://wp-cocoon.com/amazon-shortcode/
https://wp-cocoon.com/rakuten-link-shortcode/
やっぱ、ある機能は、正式に載せておかないとと思いました。


   
fullnote reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13792
わいひら - Facebookわいひら - Twitter
Topic starter  

今日ちょうどTIPSとなりそうなものをつぶやいたので転載。

間違って親テーマで「テーマ設定」をしてしまった場合に、子テーマに移行する方法です。

  1. 親テーマを有効化した状態で「テーマ設定」のバックアップを取る(バックアップ方法
  2. 子テーマを有効化して、親テーマの「テーマ設定」で復元(復元方法

https://twitter.com/MrYhira/status/1227112765396963328


   
チャンビア?
(@changbeer)
Reputable Member Moderator
結合: 4年前
投稿: 252
チャンビア? - Twitter
 

Gutenbergのショートコードで作成したばかりのブロックで「/(半角スラッシュ)」を打つと最近使ったブロックが表示されるのはご存知かと思います。

私、今更ながらスラッシュに続けてブロック名を入れると検索できることに気付きました...

 


   
ろこ
(@lococo)
Prominent Member Registered
結合: 4年前
投稿: 830
 

Gutenbergでブロックを検索する際にはブロック名だけでなく、各ブロックに設定されたキーワードも対象となります。

スラッシュ入力時は半角に変更することもあり、私の場合はキーワードを半角英で設定し、検索ワードを短縮しています。


   
ジャム君, Yamachan11, mirutana and 5 people reacted
チャンビア?
(@changbeer)
Reputable Member Moderator
結合: 4年前
投稿: 252
チャンビア? - Twitter
 

ロコさん、ありがとう。

なるほど、検索キーワードも決められるんですね。

これで使い勝手が大幅に上がります ? 

---

コメントをきっかけに見つけた記事がちょうどコクーンみたいなので貼り付けておきます。

https://technote.space/change-block-keywords


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 5年前
投稿: 595
たなかま - Twitter
 

【TIPS】印刷用CSS(@media print)の設定とデバッグ方法

 

デベロッパーツールで、印刷用のレンダリングにする方法が、web担当者フォーラムさんの記事にありました。

印刷用のCSSを制御したいときに、デベロッパーツールが使えます。

 

▼web担当者フォーラムさんの記事

https://webtan.impress.co.jp/e/2015/07/28/20508


   
Yamachan11
(@yamachan11)
Reputable Member Registered
結合: 3年前
投稿: 285
Yamachan11 - FacebookYamachan11 - Twitter
 
投稿者:: @changbeer

Gutenbergのショートコードで作成したばかりのブロックで「/(半角スラッシュ)」を打つと最近使ったブロックが表示されるのはご存知かと思います。

私、今更ながらスラッシュに続けてブロック名を入れると検索できることに気付きました...

 

 チャンビア? さん

いいですね、これ!

まるで、Windows10の追加機能の
PowerToys
PowerToysRun(Alt+Space)
アプリ管理者での実行(Ctrl+Shift+Enter)の様です。

 


チャンビア?
(@changbeer)
Reputable Member Moderator
結合: 4年前
投稿: 252
チャンビア? - Twitter