てがろぐ
- Fumy Otegaru Memo Logger -
No.5500, No.5498, No.5497, No.5496, No.［4件］
返信ありがとうございます！
JSのコードのおかげでWordPressのヘッダーが表示されるところまで来ました！
後はWordPress内のCSSコードと競合したり、自作したハンバーガーメニューが表示されない不具合があるため、そこを地道に過去のコードから整理していこうかなと思います…スパゲッティコードすぎる…
おかげさまで表示の兆しが見えました、ありがとうございます！
JSのコードのおかげでWordPressのヘッダーが表示されるところまで来ました！
後はWordPress内のCSSコードと競合したり、自作したハンバーガーメニューが表示されない不具合があるため、そこを地道に過去のコードから整理していこうかなと思います…スパゲッティコードすぎる…
おかげさまで表示の兆しが見えました、ありがとうございます！
🍎Re:5496◆拝見しました。
いろいろ問題がありますが、一気に解決する方法はないので、1つずつ試してみて下さい。
まず、WordPress側のCSSが完全に適用されない理由は、てがろぐスキン側で読み込んでいる tegalog.css があるためです。
なので、とりあえず、てがろぐスキン(skin-cover.html)の中から<link type="text/css" rel="stylesheet" href="tegalog.css?1.2">の1行を丸ごと消してみて下さい。
それで、WordPress側の見栄えは現れるようになるはずです。（その代わり、てがろぐ生成部分の装飾はなくなりますが。）
その後、『本当に必要なCSSだけ』を add.css などに書いて、それを読み込むと良いと思います。
あと、そもそも合成したいヘッダのページ側にいくつか問題があります。
確かに、単独でアクセスするとヘッダ部分だけが存在するように見えるのですが、このHTMLソースを見ると、<!DOCTYPE html>から始まって、headもbodyも何もかもが存在するフル仕様のHTMLになっていますね。
これをこのまま「別HTMLのdiv要素の中」に丸々放り込んでしまうと、HTMLの文法的に正しくなくなりますから、予想しない問題がいろいろ起きそうです。
その状態では原因究明が困難になりますから、まず、この状態で合成するのはやめる必要があります。
まず、wp-header.php を以下のように分割しましょう。
※wp-header.phpは、他のページに合成するためだけに用意するデータなので、これが単独で「1つのHTMLとして成立する」必要はありません。なので、<!DOCTYPE html>から書き始めてはいけません。ここに書くのは、「div要素の中に挿入して大丈夫な必要最低限のソース」だけです。
ただ、おそらく、動的に変化するのは②だけですよね？
①は固定的な内容だと思いますので、合成はせずに、てがろぐスキン(skin-cover.html)内に直接コピーして書けば良いのではないかと思います。
ただ、それでも（①は）かなり膨大なソース量になっていますが、本当にこの莫大な行数が必要なのかどうかを確かめてみて下さい。
<link rel="preload" as="font"～だけで350行以上ありますが、これ、たぶん要らないですよね……？(^_^;)
あと、メインのCSSですが <style id='main_style-inline-css' type='text/css'>～</style>までの間に5千行近くありますよね!? このヘッダ部分の見栄えを作るためだけに、こんな莫大なCSSソースはたぶん要らないと思うんですよね……。^^;
いや、まあ、あっても良いんですが、それならそれで、これは1つの独立したCSSファイルに保存して、link要素で読み込むように書く方が、何かとメンテナンスしやすいと思います。
この莫大なソースを合成すると、どこの記述が何に影響しているのか？が分かりにくくなりますので、とにかくまず、『必要最小限のソースになるまで削って』から、それを合成してみて下さい。
……というわけで、いろいろ書きましたが、
それを全部ぶった切ることになりますけども、
たぶん、一番の近道は、以下のような手順で試してみることではないかな……と思います。
「PHPで生成された内容を合成する」というのは、そこそこ知識が必要なので、いきなりそこから始めるのはハードルが高すぎるのではないかと思います。
いろいろ問題がありますが、一気に解決する方法はないので、1つずつ試してみて下さい。
まず、WordPress側のCSSが完全に適用されない理由は、てがろぐスキン側で読み込んでいる tegalog.css があるためです。
なので、とりあえず、てがろぐスキン(skin-cover.html)の中から<link type="text/css" rel="stylesheet" href="tegalog.css?1.2">の1行を丸ごと消してみて下さい。
それで、WordPress側の見栄えは現れるようになるはずです。（その代わり、てがろぐ生成部分の装飾はなくなりますが。）
その後、『本当に必要なCSSだけ』を add.css などに書いて、それを読み込むと良いと思います。
あと、そもそも合成したいヘッダのページ側にいくつか問題があります。
確かに、単独でアクセスするとヘッダ部分だけが存在するように見えるのですが、このHTMLソースを見ると、<!DOCTYPE html>から始まって、headもbodyも何もかもが存在するフル仕様のHTMLになっていますね。
これをこのまま「別HTMLのdiv要素の中」に丸々放り込んでしまうと、HTMLの文法的に正しくなくなりますから、予想しない問題がいろいろ起きそうです。
その状態では原因究明が困難になりますから、まず、この状態で合成するのはやめる必要があります。
何かに何かを合成するときの鉄則は、最小限から1ステップずつです。
いきなり、どっかーん！と全部を放り込めば、何がどこにどう影響しているのかが分からなくなりますので。
まず、wp-header.php を以下のように分割しましょう。
- HTMLのhead要素内に入れるべき内容（CSSやmeta要素など）
- Webページのヘッダ部分になる内容（body要素の中身）
※wp-header.phpは、他のページに合成するためだけに用意するデータなので、これが単独で「1つのHTMLとして成立する」必要はありません。なので、<!DOCTYPE html>から書き始めてはいけません。ここに書くのは、「div要素の中に挿入して大丈夫な必要最低限のソース」だけです。
ただ、おそらく、動的に変化するのは②だけですよね？
①は固定的な内容だと思いますので、合成はせずに、てがろぐスキン(skin-cover.html)内に直接コピーして書けば良いのではないかと思います。
ただ、それでも（①は）かなり膨大なソース量になっていますが、本当にこの莫大な行数が必要なのかどうかを確かめてみて下さい。
<link rel="preload" as="font"～だけで350行以上ありますが、これ、たぶん要らないですよね……？(^_^;)
あと、メインのCSSですが <style id='main_style-inline-css' type='text/css'>～</style>までの間に5千行近くありますよね!? このヘッダ部分の見栄えを作るためだけに、こんな莫大なCSSソースはたぶん要らないと思うんですよね……。^^;
いや、まあ、あっても良いんですが、それならそれで、これは1つの独立したCSSファイルに保存して、link要素で読み込むように書く方が、何かとメンテナンスしやすいと思います。
この莫大なソースを合成すると、どこの記述が何に影響しているのか？が分かりにくくなりますので、とにかくまず、『必要最小限のソースになるまで削って』から、それを合成してみて下さい。
……というわけで、いろいろ書きましたが、
それを全部ぶった切ることになりますけども、
たぶん、一番の近道は、以下のような手順で試してみることではないかな……と思います。
- まずは、合成するのではなく、『skin-cover.htmlに全部のHTMLソースを直接書く形』で、望みのページデザインを確実に作る。
- その上で、『WordPress側と共通する部分』は合成する方法が採用できないか検討する。
「PHPで生成された内容を合成する」というのは、そこそこ知識が必要なので、いきなりそこから始めるのはハードルが高すぎるのではないかと思います。
Re:5496 返信ありがとうございます！
にしし様から教えていただいた方法で、今までうんともすんともしなかったヘッダーがなんとか表示されるようになりました！
ただ、新たな問題が出てきてしまいまして…。
WordpressのCSSが反映されなくなってしまったのと、今度はてがろぐの操作が効かなくなってしまいました。
該当のてがろぐのリンクはこちら です！
にしし様から教えていただいた方法で、今までうんともすんともしなかったヘッダーがなんとか表示されるようになりました！
ただ、新たな問題が出てきてしまいまして…。
WordpressのCSSが反映されなくなってしまったのと、今度はてがろぐの操作が効かなくなってしまいました。
該当のてがろぐのリンクはこちら です！
りんごを食べました。
🍎Re:5494◆ありがとうございます！
🍎Re:5495◆PHPはWebサーバに実行させないと処理されないので、てがろぐのスキン内にそのまま埋め込んでも元のPHPソースがそのまま埋め込まれるだけになります。
WordPressのヘッダ・フッタをてがろぐ側に合成したい場合、いくつかの方法があります。
https://（設置ドメイン等）/wp-header.php のようなURLで wp-header.php を単独で実行した場合に、望みのヘッダが出力されますか？ される場合は、以下の方法で合成できます。
ヘッダやフッタで何を出力しているのかに依ってどの方法を使うのが望ましいかは変わってきますが、シンプルなのはJavaScriptで合成する方法です。
まず、ヘッダを合成したい場所に（てがろぐスキン側に）<div id="wpHeader">(準備中)</div>などと書いて合成用空間を用意しておきます。
そして、スキンHTMLの末尾あたりに以下のJavaScriptを書きます。
<script>
fetch('https://（設置ドメイン等）/wp-header.php')
.then(response => {
if(!response.ok) {
throw new Error(`HTTPエラー: ${response.status}`);
}
return response.text();
})
.then(html => {
document.getElementById('wpHeader').innerHTML = html;
})
.catch(error => {
document.getElementById('wpHeader').innerHTML = `読み込めませんでした。エラー内容: ${error.message}`;
});
</script>
これで合成できるでしょう。上記のソースだと、エラーがある場合にはエラーメッセージがそのまま表示されますけども。その辺は、必要に応じてConsoleへの出力に留めるとか何かすると良いです。
なお、JavaScriptで合成するのでは意味がないケース（SEO関連のmeta要素を出力している場合など）では、
なお、https://（設置ドメイン等）/wp-header.php のようなURLで wp-header.php を単独で実行した場合に、望みのヘッダが出力されない場合は、PHP側の依存関係を見直す必要がありますので、単純な合成はできません。
その場合は、「JavaScriptで実際にWordPressが生成するページを読んで、そのHTML内からヘッダ部分だけを抜き出して、それを合成する」みたいな処理を書く必要があるでしょう。（JavaScriptによる動的合成では困る場合は、その処理をPHPでして、結果を静的なHTMLファイルに出力しておいて、それをてがろぐ側のスキンにINCLUDE記法で埋め込む方法が使えます。）
※その辺の方法をご案内するためには、実際にどんなソースが出力されているのかを知らないと無理なので、問題のページ（URL）を教えて頂く必要があります。
🍎Re:5494◆ありがとうございます！
🍎Re:5495◆PHPはWebサーバに実行させないと処理されないので、てがろぐのスキン内にそのまま埋め込んでも元のPHPソースがそのまま埋め込まれるだけになります。
WordPressのヘッダ・フッタをてがろぐ側に合成したい場合、いくつかの方法があります。
https://（設置ドメイン等）/wp-header.php のようなURLで wp-header.php を単独で実行した場合に、望みのヘッダが出力されますか？ される場合は、以下の方法で合成できます。
ヘッダやフッタで何を出力しているのかに依ってどの方法を使うのが望ましいかは変わってきますが、シンプルなのはJavaScriptで合成する方法です。
まず、ヘッダを合成したい場所に（てがろぐスキン側に）<div id="wpHeader">(準備中)</div>などと書いて合成用空間を用意しておきます。
そして、スキンHTMLの末尾あたりに以下のJavaScriptを書きます。
<script>
fetch('https://（設置ドメイン等）/wp-header.php')
.then(response => {
if(!response.ok) {
throw new Error(`HTTPエラー: ${response.status}`);
}
return response.text();
})
.then(html => {
document.getElementById('wpHeader').innerHTML = html;
})
.catch(error => {
document.getElementById('wpHeader').innerHTML = `読み込めませんでした。エラー内容: ${error.message}`;
});
</script>
これで合成できるでしょう。上記のソースだと、エラーがある場合にはエラーメッセージがそのまま表示されますけども。その辺は、必要に応じてConsoleへの出力に留めるとか何かすると良いです。
なお、JavaScriptで合成するのでは意味がないケース（SEO関連のmeta要素を出力している場合など）では、
- 一旦サーバ側で wp-header.php を実行させた結果を temp-wp-header.htm 等のファイルに静的に出力する。
- その静的HTMLファイルを、てがろぐ側のスキンにINCLUDE記法で埋め込む。
なお、https://（設置ドメイン等）/wp-header.php のようなURLで wp-header.php を単独で実行した場合に、望みのヘッダが出力されない場合は、PHP側の依存関係を見直す必要がありますので、単純な合成はできません。
その場合は、「JavaScriptで実際にWordPressが生成するページを読んで、そのHTML内からヘッダ部分だけを抜き出して、それを合成する」みたいな処理を書く必要があるでしょう。（JavaScriptによる動的合成では困る場合は、その処理をPHPでして、結果を静的なHTMLファイルに出力しておいて、それをてがろぐ側のスキンにINCLUDE記法で埋め込む方法が使えます。）
※その辺の方法をご案内するためには、実際にどんなソースが出力されているのかを知らないと無理なので、問題のページ（URL）を教えて頂く必要があります。
