お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。) RSSフィード

てがろぐ - Fumy Otegaru Memo Logger -

2025年11月10日(月) 18:07:16〔3時間前〕 更新

■No.5498, No.5497, No.5496, No.5495, No.5494[5件] ( 5

■フリースペース: 編集

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン:標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキンてがろぐCGIの配布ページに戻る

■日付検索:

■全文検索:

or 管理画面へ

回答/返信 〔1816文字〕 編集

No.5498 by NO IMAGE にしし 〔3時間前〕

🍎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の文法的に正しくなくなりますから、予想しない問題がいろいろ起きそうです。
その状態では原因究明が困難になりますから、まず、この状態で合成するのはやめる必要があります。
何かに何かを合成するときの鉄則は、最小限から1ステップずつです。
いきなり、どっかーん!と全部を放り込めば、何がどこにどう影響しているのかが分からなくなりますので。

まず、wp-header.php を以下のように分割しましょう。
  1. HTMLのhead要素内に入れるべき内容(CSSやmeta要素など)
  2. 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要素で読み込むように書く方が、何かとメンテナンスしやすいと思います。

この莫大なソースを合成すると、どこの記述が何に影響しているのか?が分かりにくくなりますので、とにかくまず、『必要最小限のソースになるまで削って』から、それを合成してみて下さい。

……というわけで、いろいろ書きましたが、
それを全部ぶった切ることになりますけども、
たぶん、一番の近道は、以下のような手順で試してみることではないかな……と思います。
  1. まずは、合成するのではなく、『skin-cover.htmlに全部のHTMLソースを直接書く形』で、望みのページデザインを確実に作る。
  2. その上で、『WordPress側と共通する部分』は合成する方法が採用できないか検討する。

「PHPで生成された内容を合成する」というのは、そこそこ知識が必要なので、いきなりそこから始めるのはハードルが高すぎるのではないかと思います。

回答/返信 〔179文字〕 編集

No.5497 by Icon of misaki みさき 〔5時間前〕

Re:5496 返信ありがとうございます!
にしし様から教えていただいた方法で、今までうんともすんともしなかったヘッダーがなんとか表示されるようになりました!

ただ、新たな問題が出てきてしまいまして…。
WordpressのCSSが反映されなくなってしまったのと、今度はてがろぐの操作が効かなくなってしまいました。

該当のてがろぐのリンクはこちら です!

回答/返信 〔1637文字〕 編集

No.5496 by NO IMAGE にしし 〔6時間前〕

りんごを食べました。

🍎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要素を出力している場合など)では、
  1. 一旦サーバ側で wp-header.php を実行させた結果を temp-wp-header.htm 等のファイルに静的に出力する。
  2. その静的HTMLファイルを、てがろぐ側のスキンにINCLUDE記法で埋め込む。
という方法を使う必要があります。この場合、1を実行するための何らかのプログラムを用意する必要があり、それを定期的に実行する仕組み(cronなど)が要るかも知れません。

なお、https://(設置ドメイン等)/wp-header.php のようなURLで wp-header.php を単独で実行した場合に、望みのヘッダが出力されない場合は、PHP側の依存関係を見直す必要がありますので、単純な合成はできません。
その場合は、「JavaScriptで実際にWordPressが生成するページを読んで、そのHTML内からヘッダ部分だけを抜き出して、それを合成する」みたいな処理を書く必要があるでしょう。(JavaScriptによる動的合成では困る場合は、その処理をPHPでして、結果を静的なHTMLファイルに出力しておいて、それをてがろぐ側のスキンにINCLUDE記法で埋め込む方法が使えます。)
※その辺の方法をご案内するためには、実際にどんなソースが出力されているのかを知らないと無理なので、問題のページ(URL)を教えて頂く必要があります。

〔501文字〕 編集

No.5495 by Icon of misaki みさき 〔9時間前〕

初めまして。いつもてがろぐ有難く使わせて頂いております。

早速ですが、てがろぐのCGIの中にWordpressのヘッダーとフッターを表示させたいのですが、うまくいかず苦戦しております。

まずskin-cover.html内でphpの処理が効くかどうかを確認するためにechoを使用したのですが、書いた処理はコメントアウトされて無効化されてしまっていたため、skin-cover.html内へのphpの記載は難しいかなと感じています。

そこで、同ディレクトリ内にWordPressのヘッダを表示できるようにしたwp-header.html、wp-header.phpの二種類を用意しました。
しかし、そのファイルを <header>[[INCLUDE:wp-header.html(php)]]</header> のようにインクルードをさせても、どちらもphpによる処理がコメントアウトされていました。
skin-cover.html内のphp処理を反映させるのは、やはり厳しいでしょうか…?

最近PHPやCGI、JSの勉強を始めたばかりなので拙い文章で申し訳ないのですが、ご助言お願いします。

〔94文字〕 編集

No.5494 by Icon of admin あどみ 〔1日前〕

β版発行お疲れ様です!急に寒くなりましたので、どうぞにしし様もくれぐれもご自愛ください。
いいねツールのリリース、ずっと楽しみにしております&気長に待っております!
ご返信お気遣いなく!!

■日付一覧:

■カレンダー:

2025年11月
1
2345678
9101112131415
16171819202122
23242526272829
30

■最近の投稿:

■新着画像リスト:

全323個 (総容量 36.57MB)

■複合全文検索:

  • 投稿者名:
  • 投稿年月:
  • #タグ:
  • カテゴリ:
  • 出力順序:

ランダムに1件を見る / ギャラリーモードで表示 / 画像一覧モードで表示 / サイトマップモードで表示 / 時系列順で表示する

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「ジャーナル(日誌)スキン」です。他に、 標準スキン昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)付箋型スキンシンプル版スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンチャットタイプスキンがあります。
てがろぐCGIの配布・解説ページに戻る