カスタム投稿でゲーム公開ページを作る【WordPress】

wordpressのカスタム投稿という機能を使ってブログとは別の投稿ページを作成し、それでゲーム公開ページを作ります。

通常のブログ記事はsingle.phpというファイルが読み込まれて表示されるんですが、カスタム投稿ページはsingle-◯◯◯.phpというファイル名(◯◯◯は自分で決めれます)で読み込まれます。

なのでこのファイルをブログとは全く違うゲーム公開用のデザインに作ることができます。

カスタム投稿ページの作り方

とりあえず基本的なことはこちらの記事をご覧ください(^^;)

https://qiita.com/sola-msr/items/a715f02265acd4864b03

https://macoblog.com/add_custom_post_type/

wordpressにはfunctions.phpというファイルがあり各ページを読みこむときにこのファイルも読み込まれているようです。なのでこのファイルにPHPのプログラムを書いておくようです。

で、私の場合はこんな感じに作りました。

function create_post_type() {
    register_post_type( 'game', [
        'labels' => [
            'name'          => 'ゲーム', 
            'singular_name' => 'game', 
        ],
        'public'        => true,  
        'has_archive'   => true, 
        'menu_position' => 5,    
        'supports'      => array(
            'title',
            'editor',
            'excerpt',
            'thumbnail',
            'custom-fields',    
            'comments',
        ),
    ]);
}
add_action( 'init', 'create_post_type', 1 );//ここで実行してるよ

まず、Qiitaの例の「news」または「ニュース」になってる部分を「game」または「ゲーム」に変更します。こうするとsingle-game.phpがこのカスタム投稿で読み込まれるPHPファイルになります。

で、私バージョンで追加されているのが「supports」の部分。この部分は機能的な設定です。カスタム投稿では初期設定ではコメント機能が無いようなんですが「comments」と入れるとコメント機能が追加されます。

それと重要なのが「custom-fields」です。これは記事とは別に情報を加えることができる機能です。別の情報とはわかりやすく言うと日付や著者みたいな情報です。そういった情報を自由に設定して追加できる機能があります。

カスタムフィールドの説明はこちらの記事で確認してください(^^;)

https://ferret-plus.com/8047

埋め込み画面を作る

さてさて、カスタム投稿の設定ができたのでゲーム公開ページをカスタマイズしましょう。

まず、single.phpをコピーしてsingle-game.phpを作ります。で、ゲームを表示させる場所を作ります。私は記事の上に出るように作っています。記事内に入れるとデザインが自由にできないですし、毎回記事に張り付けるってなんかプログラマーらしくないですからね(^^;)

しかしそうするとiframeでゲームを埋め込むにはちょっといろいろ工夫が必要になります。

①まず、記事の上に出しているので記事内からは情報を取れない。どうやってゲームファイルを読み込むのか？

これは記事のスラッグ名をうまく利用します。記事のスラッグ名とゲームを入れているフォルダ名を同じにします。そしてこれを使って

<?php echo home_url(); ?>/games/<?php echo $post->post_name; ?>/index.html

という感じにurlを作ることができます(gamesは全部のゲームが入っているフォルダです)。

②画面のサイズを可変にしたい。

実は私の作ったゲームには２種類のサイズが存在しています(ちょっと高さが違うんですよ)。そして今後ひょっとするとまた違うサイズで作るかもしれない。人によっては縦長で作ったり横長で作ったりするかもしれないですよね。それをゲームによって自由に切り替えるようにするにはどうしたらいいのか？

それを解決してくれるのが上で出てきたカスタムフィールドです。私はカスタムフィールドでwidth、heightを作ってそこに画面サイズを入れています。そしてそれをiframeのwidth、heightに入れてます。

width="<?php echo post_custom('width'); ?>" height="<?php echo post_custom('height'); ?>

これでゲームごとに画面サイズが違ってもきちんと表示されます。

まとめて書くとこんな感じです。

<iframe id="iframe" name="ifr" src="<?php echo home_url(); ?>/games/<?php echo $post->post_name; ?>/game.html" width="<?php echo post_custom('width'); ?>" height="<?php echo post_custom('height'); ?>" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="border:none; background-color:black;" onload="this.contentWindow.focus();"></iframe>

あ、ゲームのurlもスラッグ名じゃなくてカスタムフィールドで良いかもね。好きな方を選んでくださいな(‘ω’)ノ

まとめ

かなりざっくりですがカスタム投稿でのゲーム公開ページの作り方でした。

カスタムフィールドを使うと記事本文とは分離した情報を扱えるのでとても便利です。アプリストアへのリンク表示/非表示もカスタムフィールドをフラグ代わりに使ってます。

あとはデザインですがそれは人それぞれだと思うので自分で好みに作ってください(^^;)