【WordPress授業三日目】ウィジェット、カスタムメニュー、ユーザー、PHPの基礎知識・基本
ウィジェット
WordPressで主にサイドバーに表示されるサイト回遊性を高めるコンテンツ群のことをウィジェットと呼ぶ
ウィジェットの設定
左メニュー 「外観」 ＞ 「ウィジェット」
ウィジェットの追加
左側「利用できるウィジェット」から追加したいウィジェットをドラッグし、右側にドロップすることで追加できる
タイトルなども細かい設定も加えられる
カスタムHTMLは広告で使用したりする
ウィジェットの削除
ウィジェットパネルの「削除」をクリック
もしくはウィジェットを「配置できるエリア」にドロップすると消える
ウィジェットの使用停止
「使用停止中のウィジェット」にドロップすることで削除せずに、設定残したまま使用停止できる
●まとめ
管理画面からサイト内の別コンテンツへ誘導するためのパーツ群を操作できる機能
テーマ作成時にウィジェットエリアを決めてウィジェット群を配置することができる
・主な使いどころ
「ヘッダー」「フッター」「サイドバー」等
サイト共通で使用するパーツをウィジットで管理
例外）フロントページ（トップページ）用ウィジットを配置することもある
カスタムメニュー
WordPress内にあらゆるページの中から必要なページを選択してカスタムメニューを作成することが可能
グローバルメニュー、読んでほしい投稿を集めたメニューなど自由に作成できる
カスタムメニューの設定
左メニュー 「外観」 ＞ 「メニュー」
新規カスタムメニューの作成
「新しいメニューを作成しましょう」をクリック
その後、メニュー名を記入
カスタムメニュー項目の追加・編集
左側の「固定ページ」「投稿」「カスタムリンク」「カテゴリー」から追加ページ選択できる
追加ページ選択して、「メニューに追加」すると右側に追加されていく
ウィジェットでメニューを利用
左メニュー 「外観」 ＞ 「ウィジェット」
ナビゲーションメニューをメインサイドバーにドロップすることで、利用可能
●まとめ
メニュー項目を自由に作成できる機能
・作成できる項目
・固定ページ
・投稿
・カスタムリンク（外部ページへのリンク）
・カテゴリ
・主な使いどころ
「グローバルメニュー」「ウィジェット用のメニュー」
ユーザー
様々な権限を与えた複数ユーザーを作成してサイトを運営していくことができる
個人設定
・色変えを使うことでテスト環境と本番環境がわかりやすくなる
・ユーザー名とニックネームは変えたほうがセキュリティ対策になる
新規ユーザーを追加
左メニュー 「ユーザー」 ＞ 「新規作成」
権限グループ
管理者：サイト全体管理者
編集者：コンテンツ管理者（テーマ関連不可）
投稿者：自分の投稿のみ編集可能
寄稿者：ライター（公開権限なしの投稿者）
購読者：コメント投稿、閲覧のみ
●まとめ
権限によって使用できる機能を絞ることができる
ユーザ名はログイン時として使用するのでサイト内に表示する名前は別にすることがおすすめ
サイト内の表示名はニックネームを別に設定して使用
※こうすることでログイン名がばれるセキュリティリスクを減らせる
【WordPress授業二日目】操作方法
WordPressはバージョン代わり入力の仕方がかなり変わった。
Classic editor：古いverのサイト
Block editor：ver5からのサイト
■ブロックエディタの基本
「見出し」「段落」「リスト」ブロックを使用
Enterで新しいブロック作成
Shift + Enterで改行（br要素）を挿入
画像を段落にドラッグアンドドロップで画像挿入
■編集手順
1.下書き保存機能（画面右上）
■公開手順
1.プレビュー（ログインユーザのみ確認可能）
2.プレビュー確認OK
3.公開する
固定ページの属性
●親ページ
左の「文書」 ＞ 「ページ属性」
親ページ指定すると、階層構造を作ることができる
子ページは「ー」をつけて親ページの下に表示される
●順序
自動的にグローバルメニューに固定ページのタイトルが追加されます。
追加されたタイトルの表示順を変更する場合は「順序」を使用する。
左の「文書」 ＞ 「順序」
数値が大きくなるにつれて右に表示される。（初期値は0）
一覧のクイック編集からもページ属性や順序などいじれる
●一覧から一括編集
一括編集したい「固定ページ」の左チェックボックスにチェックを入れ、
左上のドロップダウンリストから「編集」を選択し「適用」ボタン押す。
そこから編集可能
ページ編集キャンセルしたいときは×押すと編集からはずれる
●一覧からごみ箱へ移動
ごみ箱に移動すると、ゴミ箱リンクが表示される
そこから復元可能（完全に削除することも可）
投稿
ブログや商品一覧、最新情報のように量産されるページ
投稿は「カテゴリー」や「タグ」でグループ化できる。
●カテゴリとタグの違い
◇説明
カテゴリー：ジャンルでグループ化
タグ：キーワードでグループ化
◇階層構造
カテゴリー：もてる
タグ：もてない
◇運用しやすい設定
カテゴリー：1投稿に1カテゴリーを設定
タグ：1投稿に3タグを上限に設定
◇例
カテゴリー：アウター、ニュース、コート
タグ：注目、セール
●デフォルトカテゴリー
設定 ＞ 投票設定 ＞投票用カテゴリーの初期設定
●カテゴリ作成時の注意
投稿の編集画面からも新規カテゴリーを追加できるが、スラッグが指定できない。
●タグ
カテゴリーは必ず1個必要。タグは0個でもOK。
こちらは検索にかけて事前に作ったタグを編集画面で選択する
※プラグインでカテゴリーと同じ感じでチェックボックス選択にできる
投稿一覧
●投稿一覧のページの表示・設定
設定 ＞ 表示設定
ここでホームページと投稿ページ選択する
●投稿を先頭に固定表示
投稿編集画面から「先頭に固定表示」
クイック編集でも設定可能
メディア
●画像サイズ、サムネサイズ
設定 ＞ メディア設定
■メディア：画像の管理
・サムネイル：主に一覧で使用する小さい画像
・サイズ
・トリミングするか？
・中サイズ：ページ内で使用する画像
・大サイズ：ページ内で使用する画像
・（フルサイズ）：ページ内で使用する画像
※画像本来の大きさ
運営中に「メディア設定」のサイズを変更しても変更前にアップロードした画像のサイズは変更されません。もし、運営途中でサイズ変更したい場合は
「Regenerate Thumdnails」プラグインを使用してアップロード済み画像のリサイズをする。
「....\xampp\htdocs\wordpress\wp-content」
この中はいじるフォルダ。これ以外はコアファイルなのでいじらない
「....\xampp\htdocs\wordpress\wp-content\uploads」
この中にアップロードした画像データ生成される
リビジョン
変更履歴を「リビジョン」として保存している。
編集画面でリビジョンできる。
コメント
コメント機能は各ページから、また一括でコメント許可しないようにできる
途中でコメント許可しないようにしても、以前までのコメントは残る。
【WordPress授業一日目】概要、インストール
WordPressとは
2003年にブログ作成するWebシステムとして公開される。
その後、バージョンアップし、企業サイトやニュースサイトなど多方面で利用されるCMS（コンテンツマネジメントシステム）として世界的なシェアを占める。
●CMS
Webサイトのコンテンツであるテキストや画像をシステムのルールで管理し、Webページとして表示させる仕組み。
●WordPressの特徴
・PHPとデータベースを使ってシステムを構築
・管理画面を使ってコンテンツの追加・編集・削除
・テーマを使ってデザイン変更
・プラグインを使って機能拡張
・オープンソースのため個人・商用利用問わず無料で使用可能
・シェアが高いため関連する書籍やネット情報が豊富
WordPressのインストール
WordPress用のデータベース領域作成
シェル（コマンドプロンプト）、phpMyadminどちらを使ってもOK。
今回は「wp1」という名前のDB領域を作成する。
1.rootで入る
mysql -u root -p
2.DB領域を作成
CREATE DATABASE wp1;
3.公式からWordPressをダウンロードして展開
4.XAMPPの公開フォルダ「htdocs」内にコピーして配置
データベース情報の設定
上のURLでアクセスし「さあ、始めましょう！」をクリック
●データベース情報を入力
データベース名：wp1
ユーザ名：root
PW：*****
データベースホスト名：localhost
上記の入力が終わったら送信して、「インストール実行」をクリック
サイト基本情報の設定
●サイトの基本情報を入力して「WodPressをインストール」をクリック
※後で変更可能（プリントの9P参考）
サイトのタイトル：練習サイト
ユーザー名：tera
パスワード：**********
メールアドレス：xxxx@xxx
検索エンジンでの表示：チェック
管理画面
http://localhost/wordpress/wp-login.php
上記から管理画面に「ユーザー名」と「パスワード」入れログインする
●公開サイト表示
管理画面左上サイト名にカーソルを乗せた時に表示される
「サイトを表示」をクリックで見れる
●パーマリンク設定
管理画面から新しいページを作成する際、どのようなURLを割り振るのか決めれる
初期設定用のプラグインを有効にする
WP Multibyte Patch：マルチバイト文字対応
・WordPress内で日本語を扱う際に起きる問題をプラグイン修正する
Show Current Template：使用テンプレート確認
・ページを表示する際にに使用したテンプレートファイルを確認する
・公開サイトの管理バーに「テンプレート」の項目が追加される
プラグインは自分で追加していく
おすすめプラグイン↓
https://www.colorfulbox.jp/media/wp-plugin/
テーマ
・左メニューの外観からテーマをインストール・有効化
・新規追加でテーマを追加できる
WordPressの構成
固定ページ、投稿、一覧
上の三つで構成される
・固定ページ：会社概要やアクセスマップのように1ページで完結するページ
・投稿：ブログや商品詳細ページのように同じデザインで量産されるページ
・一覧：最新の投稿や検索結果などの一覧を表示するページ
固定ページ
固定ページ ＞ 固定ページ一覧
編集するページをクリックして様々な情報を編集することができる
「+」のボタンや、「⚙」ボタンで操作
新規追加で固定ページ新規作成
■ブロックエディタの基本
「見出し」「段落」「リスト」ブロックを使用
Enterで新しいブロック作成
Shift + Enterで改行（br要素）を挿入
画像を段落
●公開パネル
・下書きから公開
最初は「下書き」で、何も変更せず「公開」ボタンをクリックすると即座に公開されます。
公開、非公開、パスワード保護 選択できる
※シークレットウインドウで開いてログインしていないブラウザで確認する。
・公開予約
未来の日時を指定すれば自動公開させることが可能
【DB授業十一日目】正規表現
正規表現関数
$str = '123-4567';
if (preg_match('/^[0-9]{3}-[0-9]{4}$/', $str)) {
echo '郵便番号です';
} else {
echo '郵便番号ではありません';
}
preg_match：パターンチェック関数
・第1引数：文字列でパターンを指定
'/^[0-9]{3}-[0-9]{4}$/'
・第2引数：確認文字列
&str
・戻り値：パターンとマッチした
$tel = '070-2999-4567';
if (preg_match('/^0(7|8|9)0-?[0-9]{4}-?[0-9]{4}$/', $tel)) {
echo '携帯番号です';
} else {
echo '携帯番号ではありません';
}
・(7|8|9)の「｜」はor
●基本構文
^：文字列の始まり
$：文字列の終わり
'/^こんにちは $/' 「こんにちは」のみ
'/こんにちは $/' 「ああああこんにちは」後方一致
'/^こんにちは /' 「こんにちはああああ」前方一致
※文字列の始まりと文字列の終わりは実はなくてもいい
【DB授業十日目】MariaDB+PHP(続き6)
作業手順おさらい
1.DB構築
・DB構築は必ずスクリプトファイルを作成・実行
2.システム専用ユーザの作成
・スクリプトファイルを作成・実行を推奨
・ユーザの作成はシステムユーザでは行われない
※システムユーザはユーザ作成権限なしの場合が多いので
3.システムユーザでテーブルの確認
SHOW TABLES; テーブルの確認
SELECT * FROM テーブル名; レコード確認
---------------------------------上記までDB作業--------------------------------------
4.functions.phpを作成
・よく使う自作関数を定義
・h関数：XSS対策「echo時に呼び出す」
function h($var)
{
if (is_array($var)) {
//配列で受け取った時の処理
return array_map('h', $var);
//array_map：配列内の各部屋に第1引数で指定した関数を実行する
//今回はh関数自身を読み込んでる
} else {
//配列じゃない時の処理
}
}
・v関数(関数名なんでもOK)：デバック用関数
function v($val)
{
echo '<pre>';
var_dump($val);
echo '</pre>';
}
・DB接続用関数：
function connectPractice()
{
mysqli_select_db($dbobj, 'practice');
mysqli_set_charset($dbobj, 'utf8');
return $dbobj;
//関数内と関数外は別世界(スコープが別)
//関数内で取得した「接続許可証(オブジェクト)」をreturnを使用して関数外に渡す
}
5.各ページの作成
・DBを操作する場合はSQL文
※まずはシェルでSQL文を実行して望んだ結果が得られることを確認してPHPに持っていく
・ユーザ入力値を使ってSQL文を作成する場合
1.値をとりあえず入れてシェルでSQL文実行確認
・sprintf関数：データ型の確認
・mysqli_real_escape_string：クォートのエスケープ
3.SQL文を確認するため出力して確認
※シェルで作成したSQL文「1」と「3」で出力してSQL文を比較して問題ないことを確認（DBのミスなのか？PHPのミスなのか？判断するため）
4.DBにSQL文を渡して処理を記述
mysqli_query関数：SQL文を実行
※もしSELECT文だったら情報を変数に代入
1.戻り値のテーブル情報を変数に代入
2.テーブル情報を連想配列に変換（mysql_fetch_assoc関数）
3.必要な個所で値を出力（h関数をかけて出力）
◆値の受け渡し
「入力画面」＞「確認画面」＞「実行画面」
◇ユーザ入力値の受け渡し
フォームを使ってPOSTでの受け渡し（たまにGET）
送信側：HTMLフォーム
受信側：PHPの$_POST（$_GET）を使用
◇DBで対象レコードを絞り込むid番号などの識別値
クエリ文字列でのGETでの受け渡し
送信側：リンクに「?値の名前=値&値の名前一覧」
受信側：$_GETを使用
◇確認画面からの実行画面に値を受け渡し
セッションを使って受け渡し
送信側：$_SESSION['部屋の名前'] ＝ 渡したい値
受信側：$変数 = $_SESSION[' 部屋の名前 ']
【DB授業九日目】MariaDB+PHP(続き5)
一日おさらい問題を解いていた。
【DB授業八日目】MariaDB+PHP(続き4)
編集したデータをデータベースに登録
change.php
●PHPの設定を表示させる
phpinfo();
●セッション変数を使えるようにする
session_start();
ユーザ識別用クッキーを発行するので出力処理より前で実行
なるべく上のほうに記述する
文字コードが「UTF8 with BOM」付きだとエラーになる可能性あり
文字コード「UTF8,UTF8N[テラパッドはN付きがなしって意味]」が安全
※「UTF8 with BOM」になっていたら「UTF8」にする
if (isset($_GET['id'])) {
$id = $_GET['id'];
$_SESSION['id'] = $id;
SELECT * FROM stationery WHERE id=1
修正する文房具フォームの初期値に使用する
ラジオボタン選択済みを選ぶため
$sql2 = sprintf( 虫食い部分を作る関数
第1引数：フォーマット対象文字列
'SELECT * FROM stationery WHERE id=%d',
第2引数：対象文字列の虫食い部分に追加する値
mysqli_real_escape_string($dbobj, $id)
);
mysql_query関数
編集対象文房具の情報をDBから取得
$stSet = mysqli_query($dbobj, $sql2) or die(mysqli_error($dbobj));
mysqli_affected_rows関数
今回は編集対象文房具の件数を取得
主キーを条件にしているので
変数blに代入される値は
$bl = mysqli_affected_rows($dbobj);
update.php
三項演算子で値が届いているか確認したうえで各変数に値を代入
・値が届いていたら「届いた値」を代入
・値が届いていなかったら「NULL」を代入
$id = isset($_SESSION['id']) ? $_SESSION['id'] : NULL;
$item = isset($_POST['item']) ? $_POST['item'] : NULL;
$price = isset($_POST['price']) ? $_POST['price'] : NULL;
$stock = isset($_POST['stock']) ? $_POST['stock'] : NULL;
$keyword = isset($_POST['keyword']) ? $_POST['keyword'] : NULL;
$maker = isset($_POST['maker']) ? $_POST['maker'] : NULL;
文字列の先頭・末尾にあるホワイトスペースを取り除く
ホワイトスペース：半角スペース、改行、タブ、NULL等
戻り値がstringなので値がすべて文字列になる
$id = trim($id);
$item = trim($item);
$price = trim($price);
$stock = trim($stock);
$keyword = trim($keyword);
$maker = trim($maker);
商品を修正する際のSQL文用
必須項目が入力・選択されていない場合はDB接続しないのでとりあえず空文字
HTML表示メーセージ用
状況によってメッセージが変わるのでとりあえず空文字
$message = '';
insert.phpの時は空文字だったが今回は値を代入
この後分岐が複数あるので一番可能性の高いものを初期値として代入
イレジュラーの場合のみ上書きすれば良い
if ($id == '') {
修正する商品IDが届かなかった場合の処理
$message = '不正な処理です';
} else {
修正する商品IDが届いている場合の処理
if ($item == '' or $maker == '') {
必須項目が入力・選択されていない場合の処理
$message = '必須項目を入力してください';
$btn = '<a href="change.php?id=' . h($id) . '" onclick="history.back(); return false;">フォームに戻る</a>';
リンクで戻る場合(href属性)
修正している商品のID番号をクエリ文字列で渡す
履歴で戻る場合(onclick属性)←今回はこちら優先
前回の状態が維持されて戻る
今のブラウザはonclickとhrefがあるとonclickのページ遷移が優先される
return false;あってもなくても挙動は変わらない
一応hrefを使わないことを明示している保険のようなもの
} else {
必須項目が入力されている場合の処理
mysqli_select_db($dbobj, 'practice');
mysqli_set_charset($dbobj, 'utf8');
DB接続処理
'UPDATE stationery SET
item="%s", price=%d, stock=%d, keyword="%s", maker=%d WHERE id=%d',
mysqli_real_escape_string($dbobj, $item),
mysqli_real_escape_string($dbobj, mb_convert_kana($price, 'n')),
mysqli_real_escape_string($dbobj, mb_convert_kana($stock, 'n')),
mysqli_real_escape_string($dbobj, $keyword),
mysqli_real_escape_string($dbobj, mb_convert_kana($maker, 'n')),
mysqli_real_escape_string($dbobj, $id)
);
ユーザ入力値を使ってSQL文を作成
1.mysqli_real_escape_string関数でDBで文字列開始・終了を意味する
クォート文字をエスケープ
2.sprintfを使ってデータ型を指定する
sprintf関数の虫食い部分
%s：文字列
%d：数値(10進数の整数)
DBにSQL文を渡して対象商品を修正
$message = 'ID' . h($id) . 'を修正しました。';
}
}
使い終わったセッションの部屋を削除
unset($_SESSION['id']);
・ユーザに入力してもらう値は「GET」
今回だと→商品名、価格、在庫など
・ユーザが入力しない値は「SESSION」
今回だと→ID
商品の削除
dekete.php
●１．文字列連結でSQL文作成
クエリ文字列id=の後に悪意ある値指定
1 or item='クレヨン'
受け取った値で作成されるSQL文
DELETE FROM stationery WHERE id=1 or item='クレヨン'
●２．文字列連結でSQL文作成
$id = mysqli_real_escape_string($dbobj, $id);
クォートをエスケープ
クエリ文字列id=の後に悪意ある値指定
1 or item='クレヨン'
DELETE FROM stationery WHERE id=1 or item=\'クレヨン\'
文字列を使った悪意ある値は防げるが、文字列を使わない悪意ある値は防げない
1 or id=5
DELETE FROM stationery WHERE id=1 or id=5
1 or 0=0
第2条件は常にtrueになる値なので全レコード対象の条件となる
UPDATEやDELETEが実行されると全件修正や全件削除になってしまう
●３．文字列連結を使わずにsprintfを使ってSQL文を構築【一番安全】
sprintfを使ってSQL文を構築
条件に%dの数値を使う
※%sだと意味がないので注意
もちろんクォートのエスケープもする
悪意ある値
1 or id=5
DELETE FROM stationery WHERE id=1
1 or 0=0
DELETE FROM stationery WHERE id=1
●SQL文でレコード削除実行
mysqli_affected_rows関数
直前のSQL文で影響を受けた件数を取得
affected(影響を受ける)
v(mysqli_affected_rows($dbobj));
if (mysqli_affected_rows($dbobj)) {
DELETE文による削除件数が
0以外の場合はtrueとして扱う
DELETE文による削除件数が
0の場合はfalseとして扱う
削除件数が0以外の時
$message = 'ID' . h($id) . 'を削除しました。';
} else {
削除件数が0の時
$message = 'ID' . h($id) . 'は存在しません。';
}
} else {
削除用ID番号が届いていない場合の処理
$message = '不正な処理です';
}
