検索語「link要素 〔除外:3386〕」の検索結果[11件]
🍊Re:4962◆もしかして、ドメインの設定は以下のような構成になっているのでしょうか?
さくらサーバー/www/ ← hogehoge.sakura.ne.jp でアクセスできる
┣ wordpress ← www.example.com でアクセスできる
└ 任意のフォルダ名 ← hogehoge.example.com でアクセスできる
つまり、WordPressとてがろぐは別のサブドメインですか?
そもそも、てがろぐ自体は今どのような構造のURLで見えているのでしょう?
- 例1: www.example.com/tegalog/ なのか
- 例2: www.example.com/何らかのフォルダ/tegalog/ なのか
- 例3: sub.example.com/ なのか
もうちょっと、実際のサーバがどうなっているのかの情報を開示して頂く必要があります。隠されている情報を推測するにも限界がありますので。(一番良いのは、本当のURLを書いて下さることです。)
とりあえず、favicon.icoのURLにブラウザでアクセスしてみて下さい。それでfaviconの画像が見えるなら問題ありませんが、Not Foundになるなら「設置した位置がおかしい」か「URLがおかしい」かのどちらかです。
まず、そこ(=faviconを単独で見ることができるのかどうか)を確認する必要があります。
faviconでは分かりにくいようなら、sakura.jpg とか適当な画像を使って favicon.ico と同じ位置に置いてみて下さい。そして、その画像のURLにブラウザでアクセスして画像を表示させて下さい。そのURL末尾の sakura.jpg を favicon.ico に変えれば、それが「faviconのURL」になりますよね。そのURLをlink要素に書いていますか?
※「最も浅い位置」について補足ですが、てがろぐを設置しているドメインが hoge.example.com だとして、もしfaviconが https://hoge.example.com/favicon.ico の位置に見えるのであれば、HTML側には何も書かなくても認識されます。サーバ内のディレクトリ構造での「最も浅い位置」である必要はなくて、「ディレクトリを含まないURL」で見えることが条件ですから。
🍊Re:4965◆ありがとうございます! 今年もてがろぐをご愛用頂ければ幸いです!(╹◡╹)ノ
by nishishi. ⌚2025年1月23日(木) 21:30:11〔292日前〕 回答/返信 <1148文字> 編集
>>4959さん、>>4960さん、にししさん
ご回答ありがとうございます。
当初はlink要素を書かず、cgiと同じ階層にfavicon.icoをおいてみたのですが表示されず、その後skin-cover.htmlにlink要素を記載(do様で紹介されているコード+絶対パスで記載)したのですが、表示されず…という状況で、4959の質問をさせていただきました。
pngを用意していなかったので、4960さんのご回答を参考にpngの追加とlink〜の追記を行ってみたのですが、こちらも反映されずでした。
原因かどうかわからないのでお聞きしたいのですが、自サイトはwordpressをインストールしており、ディレクトリの構成が以下のようになっています。
さくらサーバー/www/
┣ wordpress
└ 任意のフォルダ名
└ tegalog
└ tegalog.cgi
└ favicon.ico
└ .png
にししさんのおっしゃる「もっとも浅い階層」というのに当てはまらない状態だと思うのですが、これが原因という可能性もありそうでしょうか。
by admin. ⌚2025年1月23日(木) 05:23:16〔292日前〕 <493文字> 編集
🍪Re:4958◆No.4959さんの通りなので私から補足することはあんまりないですが。faviconはブラウザ側の機能なので、てがろぐはもちろん、どんなツールを使っていても常に使えます。当サイトにもfaviconが適用されています。
お使いのドメインの最も浅い位置に favicon.ico のファイル名で置くなら、ブラウザが勝手に探してくれるのでHTML側には何も書かなくても認識されます。
例えば https://www.nishishi.org/favicon.ico の位置にfaviconがあれば、www.nishishi.orgドメインに存在するすべてのページでそのfaviconが表示されます。
今ご覧になっているページのソースを見ると分かりますが、ここで使っているスキンには、faviconの位置は書いていません。それでもブラウザのタブにはfaviconが見えているでしょう。それは、既定の位置に既定のファイル名で置いてあるため、ブラウザが勝手に見つけてくれているからです。
ドメインの最も浅い位置というのは、たとえば www.example.com なら https://www.example.com/favicon.ico でアクセスできる位置のことです。他のディレクトリに置くと(自動では)認識されません。(No.4959さんのように、faviconの位置をlink要素で明示するなら他の場所に置いても良いですが。link要素を書く場合、記述が間違っていたらいつまで経っても望みの表示にならない可能性がある点に注意して下さい。お勧めはHTML側には何も書かずに、ドメインの最も浅い位置に favicon.ico のファイル名で置くことです。)
※iPhoneやiPad向けにapple-touch-iconも置きたい場合は、No.4959さんご提示のように専用のlink要素を書く必要があります。
なお、faviconの存在は毎回確認されるわけではなく、一定期間はキャッシュされます(※『faviconがない』という状態も一定期間記憶されます)ので、反映されるまでに時間がかかることがあります。[Ctrl]+[F5]でスーパーリロードするか、またはブラウザのキャッシュを消せば、次にアクセスしたときに読みに行ってくれるとは思いますが。
🍪Re:4959◆サポートありがとうございます。(╹◡╹)ノ なお、リンクにせずにURLを書きたい場合(ソース内にURLが出てくる際など)は、自動でリンクにはならないURLを一時的に書きたい場合の書き方もあります。
by nishishi. ⌚2025年1月22日(水) 21:17:36〔293日前〕 回答/返信 <1207文字> 編集
➡ https://www.nishishi.com/cgi/tegalog/
バージョンアップするには、tegalog.cgi と fumycts.pl の2ファイルだけ(※)を上書きアップロードして下さい。
データファイルや設定ファイルは、すべてそのまま引き継げます。(Ver.3以下も含む過去のどのバージョンからでも)
※標準添付スキンをそのままお使いの場合は、それらも上書きアップロードすると良いです(必須ではありません)。
※てがろぐ設置ディレクトリに併せて置くと望ましい .htaccess ファイルも同梱しています。もし .htaccess ファイルを置いていない場合はご活用下さい。
🆕 Ver 4.1.0の更新点(概要):
《▼大きな機能追加》
●鍵付き投稿機能で個別鍵(個別のパスワード)も使えるようにする機能
●カスタム絵文字機能。
●手動入力された投稿日時も含めて、全投稿を投稿日時の新しい順に再ソートする機能。
●全投稿の投稿番号をNo.1から昇順に連番で振り直す機能。
《▼その他の機能追加》
●日付境界バーの出力状況を選択できる設定オプション。
●Apple Musicの配信音楽の埋め込み機能。
《▼細かな機能追加》
●YouTubeショート動画の埋め込みに対応。
●Instagramのリール動画の埋め込み機能。
●Spotifyアプリの新バージョンが出力するURLでの埋め込みに対応。
●色指定時の記法を拡張(透明度の指定など)
●画像ファイル名にハイフン記号が含まれていてもそのままアップロード可能に。
●「続きを読む」機能で隠されている文字数を表示できる専用記法の追加。
●全投稿を一括調整する機能を使用禁止に設定できる機能。
《▼仕様改善》
●カテゴリツリーを構成するli要素にも、カテゴリIDをベースにしたclass名を付加。
●既存画像の挿入記法で、多バイト文字が使われたファイル名も許容する設定を追加。
●本文中に含まれるコロン記号が数値文字参照「:」として出力される問題(仕様)を修正。
●ボタンを出力するinput要素を、CSSで装飾しやすいように別のspan要素で囲むよう改善。
●Spotifyの埋め込み領域を囲むspan要素のclass名を拡張。(Apple Musicと区別するため)
●制限サイズを超えている画像のファイルサイズを赤色で表示
《▼不具合修正》
❎適用スキンを維持するためのリンク自動調整仕様でlink要素に対して不要な調整を加えてしまう不具合を修正。
更新点について詳しい解説は、リリースノート(No.41)をご参照下さい。
宣伝Mastodon:Pawoo
宣伝ツイート:
(ツイート埋め込み処理中...)Twitterで見る
ご活用頂ければ幸いです!
by nishishi. ⌚2023年8月26日(土) 20:38:44〔2年以上前〕 アップデート✨ <1318文字> 編集
🆕 Ver 4.0.4βの更新点(概要):
《▼新機能》
●カスタム絵文字機能。
●日付境界バーの出力状況を選択できる設定オプション。
《▼仕様改善》
●既存画像の挿入記法で、多バイト文字が使われたファイル名も許容する設定を追加。
●カテゴリツリーを構成するli要素にも、カテゴリIDをベースにしたclass名を付加。
●本文中に含まれるコロン記号が数値文字参照「:」として出力される問題(仕様)を修正。
《▼不具合修正》
❎適用スキンを維持するためのリンク自動調整仕様でlink要素に対して不要な調整を加えてしまう不具合を修正。
詳しい使い方などは、上記の開発進捗状況報告ページの記事をご覧下さい。
(ツイート埋め込み処理中...)Twitterで見る
Mastodonでのアナウンス:Pawoo
by nishishi. ⌚2023年8月1日(火) 20:04:02〔2年以上前〕 アップデート✨ <423文字> 編集
🍵Re:3589◆開発放言も見て頂いてありがとうございます。その用途(=キャッシュをいい感じにクリアする用途)以外に使い道がない機能な気もしますけども、あれば便利そうだとは思うのですよね。^^; なんとなく作る方向で考えてはいます。ただ、「その用途以外に使い道がない」なら、もっと記法を簡単にして、例えば [[QFC]] (Query For CSS) とかにして問答無用でCSSファイルのタイムスタンプを使って ?dYYYYMMDDhhmmss のような文字列を出力するようにしてしまうとか、もしくはCSSを読み込むlink要素自体を [[LOADCSS:tegalog.css]] みたい書けるようにして、更新日時のクエリ文字列を自動で付加するようにしてもいいのかな……という気もしていて、ちょっと仕様に迷っています。
🍵Re:3589◆そうですね。確実にキャッシュをクリアさせられる点では良いですが、無駄な通信も発生しますしね。
🍵Re:3594◆はい。ルビもいけます。👍
🍵Re:3595◆ルビはHTMLのrt要素で出力されていますので、以下のようなJavaScript+HTMLを書くと、ルビのON/OFFボタンが作れますので、ぜひお試し下さい。(╹◡╹)ノ #🌱豆知識
<script>
function toggleRuby() {
var rtElms = document.getElementsByTagName("rt");
for (var i = 0; i < rtElms.length; i++) {
if (rtElms[i].style.display === "none") {
rtElms[i].style.display = "";
}
else {
rtElms[i].style.display = "none";
}
}
}
</script>
<button onclick="toggleRuby()">ルビの表示/非表示</button>
上記のソースでボタンを作ると、ボタンを押す度に「そのページ内に存在するすべてのルビ」の表示/非表示が切り替わります。
🍵Re:3596◆ご要望をありがとうございます。リスト記法については、複数のオプションを同時に指定できる仕様に拡張するようにします。次のバージョンで提供できるかどうかはちょっと今の段階では分かりませんが、そう遠くないうちに実装できると思います。◆掲示板でよくある「返信」機能ですね。複数人で使っている場合には、あると便利でしょうかね? 掲示板モードを作るという構想も(構想だけは)ありますので、その辺も合わせて考えてみます。気長にお待ち頂ければ幸いです。◆いいところの列挙もありがとうございます!
🍵Re:3597◆ありがとうございます。(^_^)
🍵Re:3598◆ご要望をありがとうございます。画像ファイルに半角ハイフン記号があると、てがろぐの古い仕様では別の解釈になってしまう問題があって、互換性のためにそのような仕様になっているのですが、たしかに画像にハイフン記号を使いたいケースは多々あるでしょうから、もうちょっとなんかうまい実装方法を考えてどうにかしたいとは思っています。^^; 気長にお待ち頂ければ幸いです。
by nishishi. ⌚2023年4月6日(木) 00:45:44〔2年以上前〕 回答/返信 <1482文字> 編集
➡ https://www.nishishi.com/cgi/tegalog/
アップデートするには、tegalog.cgi と fumycts.pl の2ファイルだけ(※)を上書きアップロードして下さい。
データファイルや設定ファイルは、すべてそのまま引き継げます。(Ver.2以下も含む過去のどのバージョンからでも)
※今回も標準添付スキンのソースを全体的に更新しています。標準添付スキンをそのままお使いの場合は、それらも上書きアップロードして下さい。
🆕 Ver 3.9.0の更新点(概要):
《▼新機能:画像投稿関連》
●新着画像リスト(最近UPされた画像の一覧)出力機能。
●UPされた画像1つ1つにキャプションやフラグ等を事前登録しておける画像インデックス機能。
●画像をキャプション付きで表示できる新記法を追加。
●画像のキャプションをその都度指定できる新記法を追加。
●その画像に対応したサムネイル画像が存在する場合には『ページ上の表示にはサムネイル画像を使い、Lightboxでのリンク先にはオリジナル画像を使う』ように表示できる機能を追加。
●投稿本文内に含まれる画像をすべて抽出して表示できる記法を追加。
《▼新機能:ページ上の表示関連》
●インスタグラムの埋め込み機能。
●投稿日付の表示に(n分前、n時間前、n日前……のような)経過時間を表示できる日付表記オプション。
●ページ番号の省略を始める総ページ数を自由に設定できる機能。
●ページ番号リンクの両端(先頭と末尾)に何ページずつ固定表示するかを変更できる機能。
●サイドコンテンツ各種でもギャラリーモードやサイトマップページを維持したリンクを出力できる新記法。
《▼新機能:表示を拡張する新記法》
●「続きを読む」ボタンのラベルをその都度指定できる新記法を追加。
●リストを表示するための専用記法。(箇条書きリストや番号付きリストが表示可能に)
●投稿本文の行数が得られる記法を追加。(内側スキンのみ)
●RSS Auto-Discoveryを挿入する記法を追加。(外側スキンのみ)
《▼新機能:スキンのカスタマイズ関連》
●上位ディレクトリや別階層に存在するスキンでもプレビューしたり簡易適用したりできる機能。
●投稿本文内の、任意の範囲をコメントアウトできる記法。
●各種ディレクトリのパス(PATH)を得られる新記法を追加。
●スキン内に記述されている link要素やform要素に対して、「現在のスキンでの表示を維持する」目的で自動挿入される各種記述をスキップできる記法を追加。
●[[INCLUDE:~]] 記法と [[PATH:~]] 記法を、内側スキンでも使用可能に。(従来は外側スキン専用でした)
●任意のファイルを挿入できる INCLUDE 記法の仕様拡充。
《▼新機能:設定項目》
●記述サンプルを自動入力するかどうかの設定項目と、文字色や背景色として自動入力するサンプル文字列の設定項目を追加。
●ログインフォームの下部に表示できるメッセージを設定画面で設定できる機能。
●ハッシュタグだとは認識されない「 # 」記号を簡単に表示させる方法として、「#」を入力できる項目をハッシュタグ簡単入力プルダウンメニューに追加できる機能を追加。
●投稿本文中にAmazonのURLが書かれたとき、自動で極力短く加工する機能を追加(標準ではOFF)。
《▼仕様改善》
●拡大画像をLightboxで表示できるテキストリンクを作る記法に、「画像リンクに独自のclass属性値を追加する」と同じclass属性値も追加されるよう仕様改善。
●全文検索の強調表示では、半角英字の大文字小文字が一致しなくても強調対象になるよう仕様改善。
●上位ディレクトリを参照するパスで画像が指定されたときに、ファイルが見つからなければ注釈を含むエラーを表示するよう仕様改善。
●デフォルトで読み込むjQueryやLightboxを最新版にバージョンアップ。
《▼スキン更新》
●標準添付の各スキンを更新
《▼不具合修正》
●「スラッシュで始まる絶対パス」で画像が指定されたとき、画像のURLが正しくなくなって画像が表示されない不具合を解消。
●「続きを読む」記法が使われている状態で、設定画面から「続きを読む」機能をOFFにすると、Internal Server Errorになる不具合を修正。
●「skin=」パラメータでスキンが指定されているとき、投稿本文内のハッシュタグをすべて抜き出す記法 [[COMMENT:TAGS]] が動作しない不具合を解消。
●ハッシュタグに半角アンダーバー「_」を使うと、既存ハッシュタグ簡単入力用プルダウンメニューでは角括弧付きでリストアップされる不具合を修正。
●内側スキンで [[CATEGORYLINKS:FULL]] と書いても、カテゴリページへのURLがフルパスでは出力されない不具合を解消。
●投稿単独ページのURLを挿入する [[PARMAURL]] キーワードのスペルを [[PERMAURL]] でも認識するよう改善。
●「Unrecognized escape \\v passed through at tegalog.cgi」というアラートがサーバのエラーログに記録される問題を解消。
●サーバのエラーログに「CGI::param called in list context」のようなアラートが出力されるのを防ぐよう改善。
●設定画面のHTMLにいくつか存在していた文法ミスを修正。
●リンクラベルの中に # での # 記号が入っていても正しくラベルとして使えるよう仕様を修正。
●「続きを読む」機能を入れ子にして使うと、ボタンラベルが正しく出力されないケースがある不具合を修正。
更新点について詳しい解説は、リリースノート(No.39)をご参照下さい。
宣伝ツイート:
(ツイート埋め込み処理中...)Twitterで見る
ご活用頂ければ幸いです!
by nishishi. ⌚2023年1月24日(火) 21:50:19〔2年以上前〕 アップデート✨ <2684文字> 編集
🆕 Ver 3.8.4βの更新点(概要):
《▼新機能・仕様改善》
●相対時間表示(n分前、n時間前、n日前……のような表示)ができる日付表記オプションを追加。
●ログイン画面下部に表示させるメッセージを独立ファイル loginmsg.html に書いておけるよう仕様改善。
●RSS Auto-Discoveryを挿入する記法 [[RSS:AUTODISCOVERY]] を追加。(外側スキンのみ)
●投稿本文の行数が得られる記法 [[TOTALLINES]] を追加。(内側スキンのみ)
●スキン内に記述されている link要素やform要素に対して、「現在のスキンでの表示を維持する」目的で自動挿入される各種記述をスキップできる記法 [[NO-LINKADJUSTMENT]] を追加。
●[[INCLUDE:~]] 記法と [[PATH:~]] 記法を、内側スキンでも使用可能に。(従来は外側スキン専用でした)
●任意のファイルを挿入できる INCLUDE 記法の仕様拡充。
- 今読んでいるスキンディレクトリに存在する特定のファイルを読み込む [[INCLUDE:FROM-THIS-SKIN-DIR:ファイル名]] 記法を追加。
- [[INCLUDE:~]] 記法の中で [[PATH:~]] 記法によるパス指定が可能に。
- [[INCLUDE:~]] 記法で合成されたファイルの中に書かれている [[INCLUDE:~]] 記法も解釈するよう仕様改善。(ただし3階層まで)
- [[INCLUDE:~]] 記法で合成されたファイルの中に [[CALENDAR]]、[[DATEBOX]]、[[LATESTLIST]] 等、一部の記述があるとき、それが正しく解釈されない可能性があった点を修正。
- [[INCLUDE:~]] 記法で埋め込むファイル名として「/」で始まる絶対パスが指定された場合は、DOCUMENT ROOTからのパスとして解釈するよう仕様改善。(従来は相対パスでの記述を求めていました)
《▼スキン更新》
●標準添付の各スキンを更新
- head要素にあるRSS Auto-Descovery部分を [[RSS:AUTODISCOVERY]] に更新。
- 内側スキンの [[PARMAURL]] を [[PERMAURL]] に修正。
- 投稿日時の相対時間表示を、付箋スキン、チャットスキン、サイトマップページスキンに追加。
《▼不具合修正》
●スキンを簡易適用中のとき、[[PATH:SKINDIR]] でそのスキンのディレクトリが得られなかった不具合を修正。
●[[PATH:~]] 記法を複数書いたとき、出力HTMLが崩れてしまう可能性がある不具合を修正。
●投稿単独ページのURLを挿入する [[PARMAURL]] のスペル修正版 [[PERMAURL]] を追加。(従来のスペルのままでも使用可能)
ファイルの読み書き時の安全処理をちょっと足したので、全体的に普段通りの動作ができるかどうか確認して頂ければ幸いです。
詳しい使い方などは、上記の開発進捗状況報告ページの記事をご覧下さい。今のところそこ以外に解説はありません。
by nishishi. ⌚2022年10月27日(木) 15:59:45〔3年以上前〕 アップデート✨ <1541文字> 編集
🌰Re:3055◆なるほど、[[ROOTPATH]]的な記法は便利そうですね。今のところその機能はありませんから、ToDoリストに加えておきます。ご要望をどうもありがとうございます。現時点で使えそうな解決策を2点ほど挙げておきます。
➊スキンに記述されているlink要素は、 <link ~ > のように小文字でと書くと別スキン適用時にhref属性値の先頭にディレクトリが補完されますが、<LINK ~ > のように大文字で書くと自動補完の対象になりません。なので、強制的に「CGIの位置」からの相対パスで書きたい場合には、要素名を大文字で書くと良いと思います。(XHTMLでない限りは)タグを大文字で書いても問題ありませんから。
➋また、JavaScriptを使ってlink要素を出力する手もある気がします。別スキン適用時にhref属性値を自動補完する処理は、スキンHTMLに直接link要素が(小文字で)書いてある場合(かつ、ご指摘の通りhref属性値にコロン記号がない場合)だけですので、document.createElement("link");等の記述で動的に生成されたlink要素は補完対象になりませんから。(ああ、ただfaviconとして使いたい場合、JavaScriptでlink要素を生成してもfaviconとして使ってくれるかどうかは分かりませんね……。使ってくれても、ブラウザに依りそうな。そうでもないのかな……?)
まあ、①の方法で問題ないなら①を使うのが楽には違いないですね。^^;
もし、属性値にどうしてもフルパスが必要だという何らかの事情がある場合には、今のところは②を使うしかないかな、という気がします。
いずれにせよ、[[ROOTPATH]]的な記法は便利そうなので将来的には追加したいと思います。
by nishishi. ⌚2022年9月11日(日) 11:24:46〔3年以上前〕 回答/返信 <798文字> 編集
使っていて、自分のオリジナルスキンを作成する際にあったらいいな、と思った機能があったので、もしよろしければご検討頂けると幸いです。
tegalog.cgiを設置しているディレクトリまでのパスを "[[ROOTPATH]]" のような記法で出力できるようになると嬉しいです。
(http://localhost/tegalog.cgi だったら http://localhost の結果が得られる)
faviconの設定を複数のスキンで使いまわしたい時のような、head内で共通して設定しておきたいlink要素を相対パスでskin-cover.htmlに記入すると、
スキンをサブディレクトリに置いてある場合、スキンディレクトリまでのパスが自動で補完されてしまうため、([[INCLUDE:path/hogehoge.html]]など外部に書いていても、補完されるようですので)
CGIを設置しているディレクトリのパスが出力できればいいなと思った次第です。
おそらく回避するには、初めからコロン(:)を含むように、設置URLを別ファイルに記入しておいてincludeした次に相対パスを書けばいいようなのですが……。
(もしくはFREESPACEの複数使い分けで出力させる等)
運用次第でどうにでもできるようなものではありますが、どうぞよろしくお願いいたします。
もし何らかの形で、パスを取得する記法などが既にありましたら、誠に申し訳ありません。ドキュメントを私が見落としてしまったためです。
by admin. ⌚2022年9月11日(日) 04:54:26〔3年以上前〕 <707文字> 編集






いろいろ問題がありますが、一気に解決する方法はないので、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 を以下のように分割しましょう。
- 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要素で読み込むように書く方が、何かとメンテナンスしやすいと思います。
この莫大なソースを合成すると、どこの記述が何に影響しているのか?が分かりにくくなりますので、とにかくまず、『必要最小限のソースになるまで削って』から、それを合成してみて下さい。
……というわけで、いろいろ書きましたが、
それを全部ぶった切ることになりますけども、
たぶん、一番の近道は、以下のような手順で試してみることではないかな……と思います。
「PHPで生成された内容を合成する」というのは、そこそこ知識が必要なので、いきなりそこから始めるのはハードルが高すぎるのではないかと思います。