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

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

テスト環境LocalのLiveLink...
 
共有:
通知
すべてクリア

テスト環境LocalのLiveLinkでスキン「メイド・イン・ヘブン」が反映されない

18 投稿
3 ユーザー
17 Reactions
493 表示
 moai
(@moai)
Active Member Registered
結合: 6か月前
投稿: 3
トピックスターター  

Localでスキン「メイド・イン・ヘブン」を使って作成中です。

Local上のWordPressで「メイド・イン・ヘブン」は問題なく反映できているのですが、
他者へ共有のためLocalのLiveLinkで見ると、なぜか反映されません。
他のテーマはLiveLinkでも反映されており、何が原因かわからず困っています。
ご確認をお願いいたします。

テスト環境ですが念のため環境情報を添付します。

----------------------------------------------
サイト名:test
サイトURL: https://test.local
ホームURL: https://test.local
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-made-in-heaven/style.css
WordPressバージョン:6.5.4
PHPバージョン:8.1.23
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
サーバーソフト:nginx/1.16.0
サーバープロトコル:HTTP/1.0
エンコーディング:gzip, deflate, br, zstd
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.4.3
カテゴリー数:30
タグ数:30
ユーザー数:7
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845 バイト
functions.phpサイズ:203 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:5
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
MetaSlider 3.90.0
Smash Balloon Instagram Feed 6.4.2
WordPress Importer 0.8.2
WP Multibyte Patch 2.9
----------------------------------------------


   
引用
トピックタグ
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

投稿者:: @moai

なぜか反映されません。

漠然と言われても伝わりません。

カスタマイザーで選択した見出しが反映されない?
設定した色が反映されない?
設定項目が期待通り表示されない?

何が反映されないのか、画面キャプチャなど、具体的な部位を示して頂きたく。


   
わいひら reacted
返信引用
 moai
(@moai)
Active Member Registered
結合: 6か月前
投稿: 3
トピックスターター  

@chu-ya 

LocalのLiveLinkで見た時だけ、「メイド・イン・ヘブン」が全体的に反映されていないようで、スキン「なし」の状態です。
例えば次の2点です
・トップページのタイトルとメニュー
 ※添付:上段がWordpressプレビューで見たものでメイド・イン・ヘブン反映
     下段がLiveLinkで見たもので、メイド・イン・ヘブンが反映されず、スキンなしのようです

・記事投稿の見出し
 設定した見出しデザイン(付箋、塗りつぶし)がテスト環境では表示されない(スキンなしの状態になっている)

最初にお伝えしているようにLocal上のWordpressでプレビューを見た時は「メイド・イン・ヘブン」スキンは反映できているのです。
それをLiveLinkで見ると、なぜかスキンが「なし」の状態になってしまいます。

上記の説明でいかがでしょうか…。

この投稿は6か月前ずつmoaiに変更されました

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

moaiさん

共有元(Localのインストールされている環境)では、問題は起きていないようです。
そして、共有先(LiveLinkを通して閲覧した側)では、正しい表示ではないのですよね。
  

上記のような場合、原因が何かは分かりませんが、LiveLink起因の可能性が、極めて高いと思います。

LiveLinkは、万能ではなく、公式サイトにも以下のように記載があります。

Troubleshooting Live Links

Live Links is broadly compatible with many themes, plugins, and custom code snippets. However, some images, front-end assets, or other HTML elements may be missing from your site when viewing it over Live Links. If you’re having issues you mightopen up the console of the pageand see what errors are present. Is it still showing errors related to mixed or insecure content? Or something else?

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

ライブリンクのトラブルシューティング

Live Links は、多くのテーマ、プラグイン、カスタム コード スニペットと幅広く互換性があります。ただし、Live Links でサイトを表示すると、一部の画像、フロントエンド アセット、またはその他の HTML 要素がサイトから欠落する場合があります。問題が発生している場合は、ページのコンソールを開いて、どのようなエラーが発生しているかを確認してください。まだ、混在コンテンツや安全でないコンテンツに関連するエラーが表示されていますか? それとも、他の何かですか?

「一部の画像、フロントエンド アセット、またはその他の HTML 要素がサイトから欠落する場合があります」とのこと。

共有先で、デベロッパーツールで確認しないと、原因は分からないと思います。
(共有元では、不具合は起きておらず、共有先(LiveLinkを通して閲覧した側)で問題がある状態ですので)

 

LiveLinkをご利用なのですから、共有していただくことはできるのではないでしょうか。

それを確認していただくのが、良いと私は思います。
(時間の調整など必要かもしれないですけれど)

LiveLinkを通さないと、不具合が発生しないのですよね。
そうであれば、それを確認しないと難しいと思うのですけれど。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

私の環境で試してみました。

 

【通常の表示】

 
【LiveLink経由の表示】
 
 
まだ、細かいことは確認していませんけれど。
今、ぱっと見で気づいた点ですが。
 
子テーマのスタイルシート等(青枠部分)に続く、
スキン特有のCSS(赤枠部分)が、LiveLink側は欠落しています。
(HTMLソースが違います、検索してもヒットしませんでした)
 
【通常の表示】
 
【LiveLink経由の表示】
 
 
ということで、私も寝ます。

   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

mk2さんの結果で気になる点があり。

スキン制御が効いていない。
→ヘッダーロゴ(センタースリム)となっていない。

赤い部分が出力されない。
→スキンのパスが正しく取得できておらず、関連する関数群が読めていない。
$pathの値は何なのか?

https://github.com/xserver-inc/cocoon/blob/28752b0c442ddb8681088ee3902a83a441b79801/skins/skin-made-in-heaven/functions.php#L27-L31

↓grayishは単にfunctions.phpにコード羅列しており、複雑な作りではなく。
同様にスキン制御が効いていないように思えます。(スキンのfunctions.php動作しているのかな?疑問)

てがきノートも同じなのでは?設定したフォントなどが反映されない?


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

念のため、他のスキンでも、確認しました。

「grayish」です。

 

【通常の表示】

 
【LiveLink経由の表示】
 
 
やはり、HTMLソースが違います。
(スキン独自のCSSがない)
 
【通常の表示】
 
【LiveLink経由の表示】

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

更に、「SILK」でも確認してみました。

一見同じように見えますが、サイドバーの「最近の投稿」のアイコンフォントが表示されていません。

【通常の表示】

 
【LiveLink経由の表示】
 
 
やはり、ソースが違います。
「cocoon-skin-style-inline-css」の内容が、大きく異なります。
 
【通常の表示】
 
【LiveLink経由の表示】
 
 
これまで。ぱっと見でわかる範囲でしか見ていませんが、そもそもソースが違うことが原因だと思います。
 
LiveLinkが影響しているのは、間違いないと思います。
(どういう仕組みなのか分かりませんけれど)

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

更に。

スキンなしの状態も確認しました。

一見同じかと思いましたが、カテゴリーウィジェットの表示順が違いました。
(何回かリロードしても変わらず・・・)

ソースをDiffして、違いがあったので気づきました。

【通常の表示】

 
【LiveLink経由の表示】
 
順番はプラグイン「Category Order and Taxonomy Terms Order」で並べ替えています。
ということは、LiveLink経由では、このプラグインの機能がきかない?
 
これまでのことを見ても、単純に、スキンやテーマだけの問題のようには思えないのですけれど。
LiveLinkがどういう仕組みなのか・・・。
 
ちなみに、LiveLink経由で閲覧したものも、デベロッパーツールで確認しましたが、特にエラーはなかったです。
(ソースが違いますけれど、他にも何か違うのかも?)
 
では、本当に寝ます。

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

chu-yaさんの返信に気づいてしまいました・・・。

投稿者:: @chu-ya

→スキンのパスが正しく取得できておらず、関連する関数群が読めていない。
$pathの値は何なのか?

 
【通常の表示】

 
【LiveLink経由の表示】
 
LiveLink経由の閲覧では、var_dumpを入れても、表示されないです。
 
 
 
投稿者:: @chu-ya

てがきノートも同じなのでは?設定したフォントなどが反映されない?

まさにその通りで、フォントが適用されていないところがあります。
(その他にも微妙な違いがあります)

 
LiveLink側は
  • 「cocoon-skin-keyframes-css」が読み込まれていない
  • 「cocoon-skin-keyframes-inline-css」がない
    (代わりに「cocoon-skin-style-inline-css」がある)
  • headタグ内に出るはずのstyleタグもない

 
添付赤枠部分が違います。

【通常の表示】

 
【LiveLink経由の表示】
 
 
今度こそ、寝ます。
(もう意識がほとんど・・・)

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

投稿者:: @mk2_mk2

LiveLink経由の閲覧では、var_dumpを入れても、表示されないです。

ちなみに、「echo」や「var_export」でもダメでした。

スキンの同じ場所に、上記のようなものではなく、「exit」を入れてみました。

【通常の表示】では、真っ白表示です。
(ソースにも何も出てきません)

でも、【LiveLink経由の表示】では、普通?のサイトが表示されます。
(少し崩れた表示ですけれど)

最初にスキン適用を確認した時の表示と、同じように見えます。
以下の返信の時と同じように見えます。
https://wp-cocoon.com/community/postid/79691/

そもそも、当該箇所まで来ていないようですね。

 

今度こそ、本当に寝ます。
(もう、まぶたが開かない・・・)


   
わいひら reacted
返信引用
 moai
(@moai)
Active Member Registered
結合: 6か月前
投稿: 3
トピックスターター  

mk2さん、chu-yaさん

遅くまで調べていただいてありがとうございます…!

そもそもLiveLinkの仕様で、LiveLinkでは完全なスキン適用ができなさそうですね。衝撃的でした。汗
皆さん、テスト環境Localの場合、どうやって第三者へ共有しているんでしょうか…。

無料のテスト環境なので多少の制限はあると思いますが、第三者へ共有できないのは困りまして。
Localで第三者へ共有が難しそうならばテスト環境を変えるべきか考え始めています。

団体のサイトで、レンタルサーバーも団体名で契約しているために、
できればテスト環境はレンタルサーバー以外の個人でできる方法だと助かりますが、
よいテスト環境の方法があればご教示いただけますでしょうか。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

ちょっと今日はこれ以降は、あまり時間が取れないと思いますので、分かっていることだけ。

スキンのfunctions.phpが読み込まれていないのだろうということで、確認しました。
(他に違いがあるのかもしれないのですが、そこまでは確認していないです)

以下に、var_dumpを、以下の順で入れました。

  • $php_file_path
  • get_skin_php_url()
  • get_skin_url()

https://github.com/xserver-inc/cocoon/blob/28752b0c442ddb8681088ee3902a83a441b79801/lib/skin.php#L14

結果は以下です。

【通常の表示】

 
【LiveLink経由の表示】
 
 
【LiveLink経由の表示】では、$php_file_pathが「false」になってしまっています。

 
続いて、以下の場所にも、順番にvar_dumpを入れました
  • $url
  • site_url()
  • strpos($url, site_url())

then、elseのどちらに入ったかも分かるように、echoを入れてあります

https://github.com/xserver-inc/cocoon/blob/28752b0c442ddb8681088ee3902a83a441b79801/lib/utils.php#L1045-L1055

結果は以下です。

【通常の表示】

 
【LiveLink経由の表示】
 
【LiveLink経由の表示】では、ここが「false」なんですよね・・・。
(なぜ?)
 
良く分からないので、その直下に以下を入れました。
var_dump(strpos('https://intuitive-mask.localsite.io/wp-content/themes/cocoon-master/skins/skin-made-in-heaven/functions.php', 'https://intuitive-mask.localsite.io'));

【通常の表示】

 
【LiveLink経由の表示】
 
ですよねぇ・・・。
 
PHP良く分からない・・・。

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

実際のファイルは、ローカルPCに存在しているので。
LiveLinkのURLでは、LiveLink側から参照できない感じなのかも?
(なぜ、false?それだけではない?)

投稿者:: @mk2_mk2

スキンのfunctions.phpが読み込まれていないのだろうということで、確認しました。
(他に違いがあるのかもしれないのですが、そこまでは確認していないです)

以下に、var_dumpを、以下の順で入れました。

  • $php_file_path
  • get_skin_php_url()
  • get_skin_url()

https://github.com/xserver-inc/cocoon/blob/28752b0c442ddb8681088ee3902a83a441b79801/lib/skin.php#L14

先程の上記の「$php_file_path」に、ローカルPCのスキンのfunctions.phpのフルパスを、直接代入してみました。

その結果は、以下です。

【通常の表示】

 
【LiveLink経由の表示】
 
 
ヘッダーだけですが、表示が改善した場所があります。
他にも、対処が必要みたいな感じですが・・・。

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

共有化については、私は良く分からないです。
(他の方をお待ちいただければと)

LiveLinkも、今回がほぼ初めて使ったような状態です。
(大昔フォーラム関連で使った時は、時間制限があったりで、使い物にならない状態でしたので、少し試して使わなくなりました)

サーバーにもテスト環境がありますし、個人で契約しているものですので、共有は何か特別なことをしなくても、やろうと思えばできますので。
(Localで動いたからと言って、サーバーで動くとは言えませんので、サーバーでもテストしています)

そろそろ、今日は時間です。
(これ以降は、あまり時間がとれないと思います)


   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

@mk2_mk2 さん

スキンのfunctions.phpでurl_to_localを使い、スキンのローカルパスを取得しており。(先述の箇所)
キャプチャを見ると、スキンの関数群が読めていません。
期待値と異なります。

多分、grayishは動作すると思います。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

chu-yaさん

投稿者:: @chu-ya

スキンのfunctions.phpでurl_to_localを使い、スキンのローカルパスを取得しており。(先述の箇所)
キャプチャを見ると、スキンの関数群が読めていません。
期待値と異なります。

多分、grayishは動作すると思います。

なるほどです。

「grayish」については、以下の部分を、ローカルPCのフルパス('c:\~\skins\~\functions.php')に変更しました

https://github.com/xserver-inc/cocoon/blob/28752b0c442ddb8681088ee3902a83a441b79801/lib/skin.php#L14

【通常の表示】

 
【LiveLink経由の表示】
 
ヘッダー背景画像も、URLが含まれていますので、上手くいっていないです。
ヘッダーというのか、グローバルナビの部分も。
あとは、エントリーカードの外枠の色も反映はされていません。
まだ、少しありますが、ほぼほぼ上手くいっているようには思います。
 

 
「メイド・イン・ヘブン」については、上記の対応に加えて、以下の部分もローカルPCのフルパスの代入に変更しました。
 
 
【通常の表示】
 
【LiveLink経由の表示】
 
URLを見ていただければ、違う環境であることがお分かりいただけると思います。
 
トップページは、一見すると同じように見えます。
 
こんな時間なもので、端折ってソースのdiff等は確認していないですし、トップページ以外も確認していないです。
(diffしても、URLは違いますので、結構確認が面倒・・・)
 
では、寝ます(もう限界・・・)

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

moaiさん

本件については、私が対応するのはここまでにしようと思います。
(chu-yaさん、ありがとうございました)

テーマ・スキンの不具合とは思えず、LiveLinkに起因するもののように思います。
(流石にそこまでは、サポート対象外かと思います。外部ツールに該当すると思います)

これまで、このトピックに書いてあるように、1つ1つ何か違うのか、その原因は何かを追っていけば、対処はできるかもしれないです。
(他にも対処が必要かどうかは、事象が発生してみないと分からないです)

URLというのか、ファイルのパスの部分が上手くいかない感じですね、ここまで見た感じでは。


   
わいひら reacted
返信引用
共有:

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

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

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

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

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

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

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

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