「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

Gutenberg標準のギャラリー(ス...
 
共有:
通知
すべてクリア

[解決済] Gutenberg標準のギャラリー(スライドショー)が使えない

15 投稿
3 ユーザー
11 Likes
4,586 表示
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
Topic starter  

こんにちは。

ブロックエディタで時折ギャラリーを使っているのですが、地味にスライドショー機能があることに気づきました。ということで使ってみたところ、ビジュアルエディター上では表示されるものの、実際の投稿画面では真っ白で表示されませんでした。手持ちのブログ2つで試して再現を確認しました。

使えるものであれば使いたいなぁ...と思いつつ確認をお願いできるでしょうか。

以下にテストページを作りました。

https://changbeer.site/2018/12/gallery-test/

-------------

----------------------------------------------
サイト名:バジェットな旅行記ロク
サイトURL: https://changbeer.site
ホームURL: https://changbeer.site
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-colors-blue/style.css
Wordpressバージョン:5.1.1
PHPバージョン:7.0.33
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36
サーバーソフト:LiteSpeed
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.7.6.2
カテゴリ数:22
タグ数:31
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
Gutenberg:1
AMP:0
PWA:1
ホームイメージ:/wp-content/uploads/2018/07/changbeer_site_header.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.1
All In One WP Security 4.3.8.3
Broken Link Checker 1.11.8
Category Order and Taxonomy Terms Order 1.5.5
EWWW Image Optimizer 4.7.3
Google XML Sitemaps 4.1.0
Jetpack by WordPress.com 7.2.1
Redirection 4.2.3
Search Regex 1.4.16
WP Multibyte Patch 2.8.2
----------------------------------------------


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16456
 

1度、Cocoon高速化設定にある「JavaScriptをフッターで読み込む」を無効にして動作確認してみていただいてよろしいでしょうか。

JavaScript(フッター):1

   
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
Topic starter  

確認ありがとうございます。

Cocoon高速化設定→「JavaScriptをフッターで読み込む」を一旦オフ

  →現象変わらず。

Cocoon高速化設定→「JavaScriptをフッターで読み込む」を一旦オン

  →現象変わらず。

手持ち二つのサイトで確認しました。

↓は「JavaScriptをフッターで読み込む」を一旦オン状態

https://changbeer.site/2018/12/gallery-test/

↓は「JavaScriptをフッターで読み込む」を一旦オフ状態です。こちらの方が設定がサラに近いです。

https://akmemo.info/%E3%82%AE%E3%83%A3%E3%83%A9%E3%83%AA%E3%83%BC%E3%83%86%E3%82%B9%E3%83%88/

よろしくお願いします。


   
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
Topic starter  

不用意にコピペしたので投稿が適切でありませんでした。修正します。

> ↓は「JavaScriptをフッターで読み込む」を現在はオン状態

https://changbeer.site/2018/12/gallery-test/

> ↓は「JavaScriptをフッターで読み込む」を現在はオフ状態です。こちらの方が設定がサラに近いです。

https://akmemo.info/%E3%82%AE%E3%83%A3%E3%83%A9%E3%83%AA%E3%83%BC%E3%83%86%E3%82%B9%E3%83%88/


   
わいひら reacted
(@masa929)
Eminent Member Registered
結合: 6年前
投稿: 21
 

横から失礼します。

僕も同じ症状になっていました。

僕の場合、cocoon設定高速化の『JavaScriptを縮小化する』をオフにしたら表示されるようになりました。

 

ただ、縮小化をオフにしたくなかったので、

/wp-includes/js/dist
/wp-content/plugins/jetpack/

だけ縮小を除いてオンにしています。

 

すでに実施済みならすみません。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16456
 

MASA929さん、一つ質問させてください。
今回のギャラリー(スライドショー)に「/wp-content/plugins/jetpack/」も関係しているのでしょうか。


   
(@masa929)
Eminent Member Registered
結合: 6年前
投稿: 21
 

JETPACKのところにSlideshowがあったので関係あると思って除外しました。

もしかしたら関係ないかもしれませんが…

 


   
わいひら reacted
(@masa929)
Eminent Member Registered
結合: 6年前
投稿: 21
 

表示されていないページを見ても

Jetpackの文字があるので多分関係あると思います。


   
わいひら reacted
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
Topic starter  

こんにちは。

MASA929さん、ありがとうございます。

確かに開発コンソールで見たらJetpack関連のネーミングでCSSが多く入っていますね... Gutenberg標準の機能ではなく、JetPackからの拡張なのか...

当ブログ(changbeer.site)以下の設定はオンの状態でした。(ここに設定項目があることに気づいてませんでしたが...)

JetPack -> 設定 -> 執筆 -> メディア -> 「画像を全画面のカルーセルギャラリーで表示する」

上記の設定と「(Cocoon高速化設定)JavaScriptをフッターで読み込む」のオン・オフをいくつか組み合わせて設定変更しましたが、当ブログでは表示されませんでした。

 


   
(@masa929)
Eminent Member Registered
結合: 6年前
投稿: 21
 

表示されませんでいたか…

参考になるかわかりませんが、現在表示されている僕のブログの環境を掲載しておきます。

 

----------------------------------------------
サイト名:
サイトURL:
ホームURL:
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-ganchan03/style.css
Wordpressバージョン:5.1.1
PHPバージョン:7.3.4
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.7.6.2
カテゴリ数:27
タグ数:249
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.3
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:1
JavaScript縮小化:1
/wp-includes/js/dist
/wp-content/plugins/jetpack/
は除外

Lazy Load:0
WEBフォントLazy Load:0
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Autoptimize 2.5.0
BackWPup 3.6.8
Check Copy Contents(CCC) 1.4.1
EWWW Image Optimizer 4.7.3
Google XML Sitemaps 4.1.0
Jetpack by WordPress.com 7.2.1
Media Library Assistant 2.79
SiteGuard WP Plugin 1.4.3
WP Fastest Cache 0.8.9.3
WP Multibyte Patch 2.8.2
----------------------------------------------


   
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
Topic starter  

JetPackを消したらスライドショーのブロックも使えなくなったのでJetPackからの拡張でしたね(サブブログで試しました)。Gutenberg標準と勘違い、失礼しました。

とりあえず表示するところまではできました。Cocoonの高速化設定を一つずつ試したところ、現在は「JavaScriptを縮小化する」のみチェックを外して動作している状況です。

プラグイン固有の機能ということでサポート対象外ということになりそうなので、使うかどうかはもう少し手元で試験してからにしようと思います(JS縮小化のチェックボックス外すとPageSpeed Insightsのスコアも悪くなったので...)。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16456
 

「Gutenberg標準のギャラリー」と書かれていたので、「ん?Jetpack?」と思ってしまいました。
確かにソースコードを見ると、Jetpack由来のものっぽいですね。

>チャンビアさん
MASA929さんが書かれているように、「JavaScript縮小化」の除外設定に以下のように入力するとどうでしょうか?

/wp-content/plugins/jetpack/

もし、Jetpackだけでダメなようなら、MASA929さんと同様に以下のように入力してみてください。

/wp-includes/js/dist
/wp-content/plugins/jetpack/

このようにしても、いずれにせよPageSpeed Insightsのスコアは悪くはなると思います。


   
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
Topic starter  

わいひらさん

ありがとうございます。

/wp-content/plugins/jetpack/

上記を試したところ、添付画像のようにギャラリー機能が動かず画像が縦に並ぶようになりました。

/wp-includes/js/dist

/wp-content/plugins/jetpack/

上記だとギャラリー表示も有効になりました。

>このようにしても、いずれにせよPageSpeed Insightsのスコアは悪くはなると思います。

ですよね... ^^;

旅行ブログなのでどうしても写真が多くなりがちになり、ギャラリーを使うと写真をグルーピングできるかな?って試したくなりました。本格利用はもう少し考えます。

MASA929さんもありがとうございました。


   
わいひら reacted
(@masa929)
Eminent Member Registered
結合: 6年前
投稿: 21
 

もしかしたら、スライドショーに関する部分だけをピンポイントで除外できれば、PageSpeed Insightsのスコアの低下を最小限にできるかもしれませんね。

僕はそのあたりがわからないので、広めに除外しています。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16456
 

Jetpackの機能っぽいけど/wp-includes/js/distも除外しないとダメなんですね。
出来れば、絞ればいいんですが、僕も/wp-includes/js/dist内のどれがギャラリーに使われているとかはわからないです。
結構ファイルがあって、調べる気になりませんよね^^;


   
共有:

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

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

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

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

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

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

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

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