結構カンタン!WordPressでおみくじページの作り方 ・・・ オリジナルうらないサイトの第一歩!

この記事の所要時間: 331

今年の年賀状に「おみくじ」を付けてみました。

年賀状にQRコードを付けてスマートフォンで見るとおみくじが出来るっていうものです。

結構簡易的に作っちゃったんですが、なんとなく動くので「タネ明かし」を行うのと同時に「コピペで使える」をモットーに記事を書きました。

その元サイトはこちらです。
※株式会社ジーティーアイの年賀サイト

株式会社ジーティーアイ | おめでとう!

☆画像をご協力いただきましたトータルデザインプロデュース チアー様の年賀サイト

トータルデザインプロデュース チアー | おめでとう!

今回、制作にあたり画像をトータルデザインプロデュース チアー様にご提供いただきました。大変ありがとうございました。

実は、他社様にもご使用いただこうと準備していたのですが、間に合わず・・・結果うちとチアー様だけになってしまったという経緯があります。会員サイトの形式で年賀文面を入力していただいてQRコードを作って年賀状に貼れば即出来上がり・・・みたいな感じを想定していたのですが、無念!!!来年の年賀状に向けて今から・・・・と言いつつまた深みにハマるんだろうな。

準備

上記リンク先を見ていただいたらわかると思いますが、カンタンな画面です。
おみくじ・うらない・選んでクリック系ゲーム 全部同じですが、結果の種類だけ結果表示ブツを用意する必要があります。

素材としては下記のようなものがあります。
● テキスト
  「あたり!」とか「大吉!」とか 「はずれ!!」とか「凶!」とかまずはテキストで試すのがてっとり早いです。

● 画像
  上記のテキストを画像にしたものを用意すれば見栄えは良くなります。
  今回、弊社ではトータルデザインプロデュース チアー様よりご提供いただきました「アニメGIF」を使用しました。

● FLASHなどの動画
  ガッツリ動くものを作りたい場合はFLASHなどの動画だとサイコーです。
  その場合は「おみくじを引く」的な開始部分からFLASHにしたほうがいいですよね。
  スクラッチ削ったり・・・。カンタンな内容でもそれだけで臨場感溢れます!

では、その内容を次で・・・

プログラムが動作するテンプレートを作成

WordPressのテーマに下記のコードのテンプレートを作成します。
わかりやすいようにコメントをふんだんに入れておきます。
文字コードは「UTF-8」(BOMなし)で保存してください。
今回、結果の画像は wp-content/themes/(テーマ名)/nenga に格納したものとしてコード内に記述しています。
環境に応じて読み替えてください。
※phpタグが<?php ではなく < ?php になってしまっているのでコピペ後全置換してください。
[crayon]
< ?php /** * Template Name: 年賀ページ * テンプレート名を「年賀ページ」にします。 * 固定ページを作成し、テンプレートで「年賀ページ」を選択すればOKです! * Twenty_Fourteen を元に作成しています。 */ get_header(); ?>

< ?php /** --------------- ここから ------------- */ ?>
< ?php // クッキーに「nenga_fire」が無く、condというリクエストパラメータが来たら // 事前に用意していた「最高」の結果を表示します。 // これは1年の初めのおみくじを気持よく引いていただくための配慮です・・・。ネタバレスミマセン。 // "nenga_fire"はなんでもいいです。ただし、何回か出てくる文字列ですのですべて同じものに変更してください。 if ( !$_COOKIE['nenga_fire'] && $_GET['cond'] ) { setcookie('nenga_fire', "first_challenge_check"); // 最高の結果を表示する // ここで res7131.gif は 「超大吉」 でした。 ?>
結果は・・・

< ?php } else if ( $_COOKIE['nenga_fire'] && $_GET['cond'] ) { // クッキーに「nenga_fire」が入っている場合は2回め以降のおみくじと判定 // 2回め以降は普通に結果を出す・・・ ?>
結果は・・・
< ?php // 2回め以降は乱数を用意した結果の数で割り // あまりの数で結果を判定するようにしました。 // この他にもいろいろやり方があります。 // 文字を入力させて文字番号を取るなどすれば何度やってもブレない結果となります。 $random5 = mt_rand( 2147483647, 9999999999 ); $amari = $random5 % 3; // res1020.gif 小吉 // res2958.gif 大吉 // res7131.gif 超大吉 switch ( $amari ) { // 余りが1の場合は 小吉 case 1: ?>
/nenga/res2958.gif” />

< ?php break; // それ以外(0の場合)は 超大吉 default: ?>

< ?php } else { // 一番最初に表示される部分です。 // 初期画像と「今年の運勢を占ってみる!」のボタンを表示します。 ?>


< ?php } ?>

< ?php // 固定ページのコンテンツ表示 // 「新年のご挨拶」文章が入ります。 while ( have_posts() ) : the_post(); // content-page.php が存在する前提になっています。 get_template_part( 'content', 'page' ); // 存在しない場合は上記の代わりに the_content(); とだけ記述すればなんとかなるのであとは装飾して下さい。 // コメント欄を開いているかコメントがあればコメントテンプレート表示します。 if ( comments_open() || get_comments_number() ) { // ここもwidth:600px などとしていますが、適宜装飾してください。 ?>

< ?php comments_template(); ?>

< ?php } endwhile; // FacebookのLikeボタンの表示のためにURLを設定しています。 $site_url = "http://bliss.ful.jp/"; ?>