【WordPress】ワードプレスで簡単な掲示板を作成してみた！

最大52%OFF！

今、ブログを始めようとしている方、

今なら、ConoHaサーバーの「WINGパックプラン」が最大55%OFF！

「1,452円/月」が「643 円/月」の「低コスト」で始められるチャンスとなっております！

お申し込みはこちらから！

【国内最速No.1】高性能レンタルサーバーConoHa WING

ConoHa WINGは国内最速の高性能レンタルサーバーサービスで
初期費用無料、最低利用期間無しでご利用いただけます！

(この記事は2022年2月19日に投稿されました。)

WordPressでは初心者でも簡単に掲示板を作成することができます。

最近ではSNSが流行りになっていますが、実はSNSは掲示板と似ているところがあります。

それは、自分が入力した文字や写真をネットに公開するところです。

SNSでは自分の投稿を自分のアカウントにあげてアプリ上で公開されますが、掲示板はそれが文字になるだけです。

つまり、掲示板を作成することで、SNSなどはどのような仕組みでアプリ上に公開されているのかを理解することができます。

WordPressでサイトを運営している人でしたら誰でも作成することができますので、プログラミングの勉強として作成してみるのはいかがでしょうか？

今回はワードプレスで簡単な掲示板を作成してみましたので紹介していきます。

この記事はこんな方におすすめ

・PHPを使って何かものをつくってみたい人
・自分のサイトに第三者がコメントできるようなページを作成してみたい人

ワードプレスで掲示板を作成する手順

ワードプレスで掲示板を作成する手順は下記のようになります。

掲示板の固定ページとPHPファイルを作成

WordPressで掲示板の固定ページとFTPでPHPファイルを作成していきます。

phpMyAdminで値を格納するためのテーブルを作成

phpMyAdminで、値を格納するためのテーブルを追加します。

PHPファイルにコードを追記

追加したPHPファイルに掲示板を作成するコードを追記していきます。

掲示板を作成するには、入力された値を保存しなければならないため、データベースを作成する必要があります。

そのため、下記のようなイメージとなります。

掲示板の仕組みのイメージ

⚫︎ 画面で入力された値がデータベースに格納される
⚫︎ データベースに格納された値を取り出して画面に表示する

フォームの送信ボタンをクリックすると、画面で入力された値が指定したデータベースに格納します。

そして、データベースに格納された値を取り出して指定した画面の要素に表示しています。

インスタグラムやTwitterだともっと複雑になりますが、基本はデータベースに格納して、格納したデータを取り出すという仕組みになっています。

掲示板の固定ページとPHPファイルを作成

まずは、掲示板の固定ページとPHPファイルを作成していきます。

掲示板の固定ページを作成

掲示板の固定ページを作成するにはまず、[固定ページ] → [新規追加]をクリックします。

すると、固定ページの編集画面が表示されますので、タイトルを入力して公開しましょう。

ここではタイトルを「掲示板」とし、パーマリンクを「kejiban」と設定します。

掲示板のPHPファイルを作成

続いては、掲示板のPHPファイルを作成していきます。

まずは、自分のデスクトップで「page-パーマリンク名.php」というPHPファイルを作成します。

今回は、掲示板のパーマリンク名が「kejiban」なのでファイル名は「page-kejiban.php」となります。

PHPファイルが作成できましたら、「FTP」を使用して自分のサーバーにPHPファイルを転送していきます。

もし、WordPressでPHPファイルを追加する方法について知りたい場合は下記の記事をご参考ください。

Sossyの助太刀ブログ

12月 03, 2021

【WordPress】テーマにPHPファイルを追加する方法！

https://sossy-blog.com/wordpress/1058/

自分のテーマ内に追加した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

<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>

</div>

<div>

</div>

</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文

$res = $wpdb->insert('テーブル名', array('項目1' => $変数1, '項目2'  => $変数2, ...), array('%s', '%s',...));

1	$res = $wpdb->insert('テーブル名', array('項目1' => $変数1, '項目2' => $変数2, ...), array('%s', '%s',...));

⚫︎ データベースに格納した値を取り出すSQL文

$res = $wpdb->get_results("SELECT 項目 FROM テーブル名");

1	$res = $wpdb->get_results("SELECT 項目 FROM テーブル名");

⚫︎ テーブル名:
phpMyAdminで作成した、テーブルの名前
(今回だと、テーブル名はkejiban)
⚫︎ 項目:
作成したテーブル内のカラム名
(今回だと、カラム名はnamとcomment)

すると、下記のようなコードになります。

⚫︎ page-kejiban.php

<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;
?>

<?php

$nam = $_POST["nam"];

$comment = $_POST["comment"];

$res = $wpdb->insert('kejiban', array('nam' => $nam, 'comment' => $comment), array('%s', '%s'));

<?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>

</div>

</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ファイルにコードを追記

⚫︎ 掲示板を作成するには、入力された値を保存しなければならないため、データベースを作成する必要がある