特典機能について

Gutenberg標準のギャラリー(スライドショー)が使えない | 不具合報告 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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

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


チャンビア🍺
(@changbeer)
メンバーサイト Moderator
結合: 3年前
投稿: 248
チャンビア🍺 - Twitter
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)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

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

JavaScript(フッター):1

チャンビア🍺 件のいいね!
チャンビア🍺
(@changbeer)
メンバーサイト Moderator
結合: 3年前
投稿: 248
チャンビア🍺 - Twitter
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)
メンバーサイト Moderator
結合: 3年前
投稿: 248
チャンビア🍺 - Twitter
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/


わいひら 件のいいね!
MASA929
(@masa929)
Eminent Member
結合: 3年前
投稿: 21
 

横から失礼します。

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

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

 

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

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

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

 

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

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


MASA929
(@masa929)
Eminent Member
結合: 3年前
投稿: 21
 

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

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

 


わいひら 件のいいね!
MASA929
(@masa929)
Eminent Member
結合: 3年前
投稿: 21
 

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

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


わいひら 件のいいね!
チャンビア🍺
(@changbeer)
メンバーサイト Moderator
結合: 3年前
投稿: 248
チャンビア🍺 - Twitter
Topic starter  

こんにちは。

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

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

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

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

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

 


MASA929
(@masa929)
Eminent Member
結合: 3年前
投稿: 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)
メンバーサイト Moderator
結合: 3年前
投稿: 248
チャンビア🍺 - Twitter
Topic starter  

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

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

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

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

/wp-content/plugins/jetpack/

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

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

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


チャンビア🍺
(@changbeer)
メンバーサイト Moderator
結合: 3年前
投稿: 248
チャンビア🍺 - Twitter
Topic starter  

わいひらさん

ありがとうございます。

/wp-content/plugins/jetpack/

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

/wp-includes/js/dist

/wp-content/plugins/jetpack/

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

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

ですよね... ^^;

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

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


わいひら 件のいいね!
MASA929
(@masa929)
Eminent Member
結合: 3年前
投稿: 21
 

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

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


わいひらチャンビア🍺 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

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


共有:
スポンサーリンク
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

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

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年9ヶ月

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

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

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

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

サービス運営期間:5年

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