ワードプレス上に自作ゲームをアップする
公開：2020.05.10
更新：2020.05.11
こんばんは、今はシナモン、らいどらです。
兼ねてよりWEBゲームを作っているのですが、そこそこに出来てきたので、せっかくサーバーも借りてブログやってるんだし……と、ネット上に上げようという事になりました。
そのまま上げると、ヘッダーとかフッターが付随して、CSSやjsもうまくリンクされなかったので、かなり手こずったメモ。
補足として件のゲームはHTML,CSS,JSで作った完全フロントエンド？です。
ファイルさえアップできれば後は楽な感じですね。
目次
.htmlを上げる。
まず、HTMLファイルをあげました。CSS,JSは外部ファイル式なので、フレームだけですね。
固定ページに直に載せるとか、いろいろやりましたが結局うまくいかなかったので、固定ページを空（タイトル、本文ともに）で作って、リンクだけ生成されるようにしといて、後は固定ページテンプレートの「page.php」にif文で記載することにしました。
<?php if(!is_page('1752') ){ ?> //ページIDが1752でないなら
//ここに普通のpage.phpの処理
<?php }else{ ?>
//ここにゲームページのHTML（<!DOCTYPE html>から何まで全部コピー）
<?php } ?>こうしとけば、if文分岐でゲームページの時のみ、HTMLを変えることが出来ました。
固定ページの中とは違って全部書けるので、<head>の中の宣言とかも柔軟に変えられます。これで既存テーマのヘッダーやフッターもいなくなったので、一段落です。
CSS,JSリンク
第二部、外部ファイルへのリンクです。
同ディレクトリ下に入れて、名前も変えて、既存テーマの外部ファイルと被らないようにしているのに一向に読み込んでくれませんでした。
こちらは数多のサイトを見て、function.phpからカスタムテンプレートをいじったりとかで、かなり面倒なことになり心が折れかけましたが、結局はリンクミスだったようです。
いや、絶対パスだったのでリンクはあっているはずなのですが、どうもphp文でディレクトリの位置を取得しないとうまく動かないようです。
<link href="<?php bloginfo('template_directory')?>/css/game.css" rel="stylesheet">
<script src="<?php bloginfo('template_directory')?>/js/game.js"></script>それぞれ、page.phpとかがあるフォルダに一回フォルダを作り、その中にファイルを入れるようにしました。このことによる影響があるかはちょっと分からないです。
なにはともあれ、これでWEBゲームの外部ファイル化が成功したので、あまり容量を気にせずゲームが作れそうです。
良かった………。
おまけ
5/11：上の手法でようやくゲーム（ベータ版ですが）アップ出来たので、リンクを貼っておきます。うおおおおおおおおお（暴走）
