タグアーカイブ フェイスマッシュのような

著者:admin

フェイスマッシュのようなサイトをワードプレスで作ってみた。

画像はだれでもアップロードできるようにしました。

アップロードされたフォルダからランダムに画像を表示します。
どっちか好みの画像をクリックすると1加算されます。

個人別に比べるほどのスキルがなかったのでグループ対抗の勝負としてます。

クリックして加算させるのが一番大変でした。

こちらから試してみて下さい。
http://clttrust.com/?page_id=3270
画像をクリックするとポイントが加算されて写真が変更されます。
何でも画像をアップロードして下さい。

※作成の流れ

まずは画像をランダムに表示させる機能を実装
最初はjavascriptで組んでみたが、1枚づつリンクを貼らなければならず、ユーザー自らアップロードさせることが出来ないので却下。

次にPHPで試みる。
どうやらPHPではフォルダに保存された画像をランダムに表示できるみたい。
こちらの記事を参考にしました。

直接ワードプレス上に記載したかったのですが、うまくいかなかったのでiframeで埋め込む。
左側の表示と右側の表示の2つフォルダを作成してお互いのHTMLを埋め込んでます。

クリックすると埋め込んだ(子)の画像は更新できたのですが、それだと親のページが更新されないので逆側の画像が変更しない。

埋め込んだ子のページから親のページを更新するために、location.hrefをtop.location.hrefに変更。
(知りませんでした。調べるのに時間がかかった。)

画像をクリックするとカウントを加算するPHPを追加
こちらを参考にしました。

最後にアップロードの追加
こちらの記事を参考にしました。

アップロードするとページが変更してしまうのでfake-targetを埋め込んで回避。
こちらの記事を参考にしました。

こんな感じになりました。