Sossyの助太刀ブログ 
今、ブログを始めようとしている方、
今なら、ConoHaサーバーの「WINGパックプラン」が最大55%OFF！
「1,452円/月」が「643 円/月」の「低コスト」で始められるチャンスとなっております！
お申し込みはこちらから！
ConoHa WINGは国内最速の高性能レンタルサーバーサービスで
初期費用無料、最低利用期間無しでご利用いただけます！
(この記事は2022年2月19日に投稿されました。)
WordPressでは初心者でも簡単に掲示板を作成することができます。
最近ではSNSが流行りになっていますが、実はSNSは掲示板と似ているところがあります。
それは、自分が入力した文字や写真をネットに公開するところです。
SNSでは自分の投稿を自分のアカウントにあげてアプリ上で公開されますが、掲示板はそれが文字になるだけです。
つまり、掲示板を作成することで、SNSなどはどのような仕組みでアプリ上に公開されているのかを理解することができます。
WordPressでサイトを運営している人でしたら誰でも作成することができますので、プログラミングの勉強として作成してみるのはいかがでしょうか？
今回はワードプレスで簡単な掲示板を作成してみましたので紹介していきます。
・自分のサイトに第三者がコメントできるようなページを作成してみたい人
ワードプレスで掲示板を作成する手順
ワードプレスで掲示板を作成する手順は下記のようになります。
掲示板を作成するには、入力された値を保存しなければならないため、データベースを作成する必要があります。
そのため、下記のようなイメージとなります。
⚫︎ データベースに格納された値を取り出して画面に表示する
フォームの送信ボタンをクリックすると、画面で入力された値が指定したデータベースに格納します。
そして、データベースに格納された値を取り出して指定した画面の要素に表示しています。
インスタグラムやTwitterだともっと複雑になりますが、基本はデータベースに格納して、格納したデータを取り出すという仕組みになっています。
掲示板の固定ページとPHPファイルを作成
まずは、掲示板の固定ページとPHPファイルを作成していきます。
掲示板の固定ページを作成
掲示板の固定ページを作成するにはまず、[固定ページ] → [新規追加]をクリックします。
すると、固定ページの編集画面が表示されますので、タイトルを入力して公開しましょう。
ここではタイトルを「掲示板」とし、パーマリンクを「kejiban」と設定します。
掲示板のPHPファイルを作成
続いては、掲示板のPHPファイルを作成していきます。
まずは、自分のデスクトップで「page-パーマリンク名.php」というPHPファイルを作成します。
今回は、掲示板のパーマリンク名が「kejiban」なのでファイル名は「page-kejiban.php」となります。
PHPファイルが作成できましたら、「FTP」を使用して自分のサーバーにPHPファイルを転送していきます。
もし、WordPressでPHPファイルを追加する方法について知りたい場合は下記の記事をご参考ください。
自分のテーマ内に追加したPHPファイルが存在していれば完了です。
phpMyAdminでデータベースを作成
固定ページとPHPファイルが作成できましたら、次はphpMyAdminでデータベースを作成していきます。
そもそもphpMyAdminとは、MySQLデータベースをWebブラウザ上で管理するためのツールであり、各データベースのテーブルなどの作成や確認をすることができます。
つまり、掲示板で入力した値を一度データベースに格納するためにphpMyAdminを使用していきます。
WP phpMyAdminをインストール
まずは、「WP phpMyAdmin」をインストールしていきます。
WP phpMyAdminとはワードプレスでphpMyAdminにアクセスして管理することができるプラグインとなります。
つまり、WP phpMyAdminをインストールしておくことで、データベースへのアクセスが楽になります。
WP phpMyAdminをインストールしましたら、[Enter phpMyAdmin]をクリックしてphpMyAdminにログインしましょう。
プラグインの画面で「WP phpmyAdmin」と検索すると表示されますのでインストールして有効化をしてください。
すると左側のメニューに表示されるようになります。
phpMyAdminで値を格納するためのテーブルを作成
phpMyAdminにログインできましたら、値を格納するためのテーブルを作成していきます。
ログインすると、左側に[New]というボタンがありますのでクリックします。
すると、テーブルを作成する画面が表示されるかと思いますので、格納する値の名前や型などを設定していきます。
今回は、掲示板ですので、「名前」と「コメント」を保存する必要があるため、下記の画像のように入力していきます。
入力が完了しましたら、[Save]をクリックすることで、データベースの作成が完了します。
すると、左側のテーブルリストに「kejiban」が追加されています。
PHPファイルにコードを追記
データベースの作成が完了しましたら、PHPファイルにコードを追記していきます。
掲示板のデザインを作成
まずは、掲示板のデザインを作成していきます。
完成イメージはの下記の画像のようになります。
すると、下記のようなコードになります。
⚫︎ page-kejiban.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <h2 class= "h2_text">掲示板</h2> <div class= "kejiban-area"> </div> <div class= "comment-area"> <form action="" method="post"> <div class= "form-center"> <p>名前</p> <div> <input type="text" name="nam" placeholder="名前を入力"> </div> </div> <div class= "form-parts"> <div class= "form-center"> <p>内容</p> <textarea id="story" name="contents" rows="50" cols="100" placeholder="内容を入力"></textarea> </div> <div class= "form-submit"> <input type="submit" value="送信"> </div> </div> </form> </div> <style> .h2_text { text-align: center; font-size: 40px; } .form-parts { position: relative; } .kejiban-area { width: 100%; height: 40vh; background-color: lightgray; border: 2px solid black; } .comment-area { border: 2px solid black; margin-top: 50px; padding: 20px; } .form-submit { position: absolute; top: 40px; left: 55vw; } .form-center { text-align: center; } </style> |
● 実行結果
デザインと同じように作成することができました。
しかし、フォームに入力して送信ボタンを押しても何も起きません。
phpMyAdminで格納した値を表示する
掲示板のデザインが完成しましたら、phpMyAdminで格納した値を表示していきます。
ここでは、テーブルへ格納するSQL文と格納した値を取りだすSQL文を追記していきます。
それぞれのSQL文は下記のようになります。
⚫︎ データベースへ格納するSQL文
1 | $res = $wpdb->insert('テーブル名', array('項目1' => $変数1, '項目2' => $変数2, ...), array('%s', '%s',...)); |
⚫︎ データベースに格納した値を取り出すSQL文
1 | $res = $wpdb->get_results("SELECT 項目 FROM テーブル名"); |
phpMyAdminで作成した、テーブルの名前
(今回だと、テーブル名はkejiban)
⚫︎ 項目:
作成したテーブル内のカラム名
(今回だと、カラム名はnamとcomment)
すると、下記のようなコードになります。
⚫︎ page-kejiban.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <h2 class= "h2_text">掲示板</h2> <?php $nam = $_POST["nam"]; $comment = $_POST["comment"]; $res = $wpdb->insert('kejiban', array('nam' => $nam, 'comment' => $comment), array('%s', '%s')); ?> <div class= "kejiban-area"> <?php $results = $wpdb->get_results("SELECT * FROM kejiban"); $no = 1; foreach ($results as $row) { echo '<div class= "comment-list">'; echo "<span>No.".$no."</span>"; echo "<p>名前".":".$row->nam."</p>"; echo "<p>内容".":".$row->comment."</p>"; echo "</div>"; $no = $no + 1; } ?> </div> <div class= "comment-area"> <form action="" method="post"> <div class= "form-center"> <p>名前</p> <div> <input type="text" name="nam" placeholder="名前を入力"> </div> </div> <div class= "form-parts"> <div class= "form-center"> <p>内容</p> <textarea id="comment" name="comment" rows="50" cols="100"></textarea> </div> <div class= "form-submit"> <input type="submit" value="送信" style="width: 100px;height: 60px;"> </div> </div> </form> </div> <style> .h2_text { text-align: center; font-size: 40px; } .form-parts { position: relative; } .kejiban-area { width: 100%; height: 70vh; background-color: lightgray; border: 2px solid black; overflow-y: scroll; } .comment-area { border: 2px solid black; margin-top: 50px; padding: 20px; } .form-submit { position: absolute; top: 60%; left: 85%; transform: translate(-50%, -50%); } .form-center { text-align: center; margin: 20px 0; } .comment-list { text-align: center; margin: 20px 0; } #comment { width: 50%; height: 150px; } </style> <?php header('Location: ./'); exit; ?> |
● 実行結果
⚫︎ kejibanのテーブル
フォームで入力された値が掲示板に表示されています。
また、phpMyAdminを見てみると、入力したデータが格納されています。
これで、簡易な掲示板の完成です。
まとめ
⚫︎ ワードプレスで掲示板を作成する手順は下記のようになります。
・掲示板の固定ページとPHPファイルを作成
・phpMyAdminで値を格納するためのテーブルを作成
・PHPファイルにコードを追記
⚫︎ 掲示板を作成するには、入力された値を保存しなければならないため、データベースを作成する必要がある
