【WordPress授業九日目】オリジナルテーマ
functions.phpを使ったカスタマイズ
027:編集画面カスタムカラー追加 | JOBTECH.JP
028:管理画面にID・スラッグを表示する | JOBTECH.JP
029:管理画面の項目を非表示にする | JOBTECH.JP
030:スラッグ名が日本語の時に自動で「投稿タイプ-投稿id」へ変更 | JOBTECH.JP
032:WordPressでSESSIONを使う | JOBTECH.JP
034:サイト内に検索フォームを設置 | JOBTECH.JP
025:JSファイルの読み込み
●script.js
画面全体がload(読み込み)された後に第2引数の無名関数を実行
第2引数の無名関数内の処理
範囲(スコープ)を絞って$でjquery関数を呼び出せるようにしている
027:編集画面カスタムカラー追加
・色設定を自分好みにカスタムできる
・編集途中でadd_theme_supportを削除すると編集内容が消える可能性があるので注意
031:著者ページを表示しない
これをURLに打ち込むと...
http://localhost/WordPressフォルダ/?author=1
↓ユーザー名ばれちゃう!!
http://localhost/wp00/author/ユーザ名/
●投稿者アーカイブ非表示リダイレクト
セキリティ対策---重要---
032:WordPressでSESSIONを使う
●セッションスタート
チェックする際の追加 例↓
front-page.php
single.php
■ フック
◇フィルターフック
文字列を加工する処理を追加できる場所
apply_filter関数
第1引数:フィルターフック名
第2引数:フックに渡す変数(加工に使用する値)
第3引数(任意):オプション
add_filter関数
第1引数:フィルターフック
第2引数:フックに渡す変数(加工に使用する値)
第3引数(任意):優先度 初期値:10
数値が小さいほど優先される
同じ数値の場合は登録順
第4引数(任意):引数の数
◇アクションフック
フック地点に処理を追加する
do_action関数
第1引数:アクションフック名
第2引数(任意):変数
add_action関数
第1引数:アクションフック名
第2引数:追加する関数
第3引数(任意):優先度 初期値:10
数値が小さいほど優先される
同じ数値の場合は登録順
第4引数(任意):引数の数
【WordPress授業八日目】オリジナルテーマ5
セキュリティ対策の4つの関数の判断
上から順に判断していく('ω')
- 出力内容がURLかパスか?
YES:esc_url関数 - 出力位置が属性部分か?
YES:esc_attr関数 - その他
esc_html関数 - 「3」の結果タグが画面表示された場合
wp_kses_post関数
昨日の内容
投稿詳細専用テンプレート追加
017:投稿詳細に前後記事リンクを表示 | JOBTECH.JP
今日からの内容
アーカイブ専用テンプレート追加
019:アーカイブ一覧表示用テンプレート追加 | JOBTECH.JP
固定ページ専用テンプレート追加
020:固定ページ表示用テンプレート追加 | JOBTECH.JP
021:固定ページ表示用カスタムテンプレート追加 | JOBTECH.JP
functions.phpを使ったカスタマイズ
022:テーマ内でよく使う関数を定義 | JOBTECH.JP
023:投稿概要文の文字数を変更・省略記号変更 | JOBTECH.JP
019:アーカイブ一覧表示用テンプレート追加
home.phpとレイアウトや構成は一緒なので、
home.phpコピーして「archive.php」を作成する
アーカイブタイトル表示関数
<?php the_archive_title(); ?>
※サブタイトルに、ついでに検索した件数表示
front-page.phpの「ブログ一覧 >」のリンクを正しくする
URLの書き方二種類(どちらでもいい)
020:固定ページ表示用テンプレート追加
テーマ内に専用テンプレートを追加
投稿詳細表示テンプレート(single.php)を複製し、
固定ページ表示用テンプレート「page.php」を追加します。
投稿詳細表示テンプレートから必要ないものを削除し、クラス名変更
クラス名「Single」を「Page」に変える
●page.phpのmain内(削除後)
021:固定ページ表示用カスタムテンプレート追加
テーマ内にカスタムテンプレートを追加
page.phpを複製して「custom-work01.php」追加
カスタムテンプレートは「固定ページ編集画面」でテンプレートを選択する時に使用する名称をコメントで記述
●custom-work01.phpの一番上
「custom-work01.php」は固定ページなので、投稿日や内容はそのまま打ち込んでいく
管理画面「固定ページ」>「固定ページ編集画面」
適当にタイトルと内容打ち込む
URLスラッグとテンプレート設定する
カスタムテンプレートを作成すると「ページ属性」パネルの「テンプレート」からカスタムテンプレートを選択できる
トップページ(front-page.php)の制作のリンク繋げる
024:CSSファイルの読み込み
wp_enqueue_style関数:
CSS読み込みタグをwp_head内で出力する関数
第1引数:名前(好きな名前でOK)
第2引数:読み込むCSSのパス
第3引数:事前に読み込むCSSの名前を配列指定
第4引数(省略可):バージョン番号
ファイル名の後につけるクエリ文字列
filemtime:ファイルの更新日時を取得(PHPの関数)
第1引数:対象ファイルパス
【WordPress授業七日目】オリジナルテーマ4
オリジナルテーマ作成
昨日の内容
条件分岐・各テンプレート別の対応
013:ページごとのタイトルタグを出力 | JOBTECH.JP
014:投稿詳細用テンプレート追加 | JOBTECH.JP
ページネーション
015:一覧表示テンプレートにページネーションを追加 | JOBTECH.JP
投稿詳細専用テンプレート追加
016:投稿詳細用テンプレート追加 | JOBTECH.JP
-----------------------------------昨日はここまで-------------------------------------------
今日からの内容
017:投稿詳細に前後記事リンクを表示 | JOBTECH.JP
アーカイブ専用テンプレート追加
019:アーカイブ一覧表示用テンプレート追加 | JOBTECH.JP
固定ページ専用テンプレート追加
020:固定ページ表示用テンプレート追加 | JOBTECH.JP
021:固定ページ表示用カスタムテンプレート追加 | JOBTECH.JP
●前後記事リンクを表示
デザインを考慮してブロックで囲んでいる
■ セキュリティ対策(XSS対策)
内容:HTMLタグを無効化して対応
echoしているところでは基本必ず使う
※問題発生時は外すことを検討
- esc_html関数
- esc_attr関数
内部でhtmlspecialchars関数を呼び出している
HTMLタグやクォートを実態参照に変換
1.HTMLタグ内での出力
2.HTML属性内での出力 - esc_url関数
URLに適切でない文字を除去
「&」「'」をエンコードする
3.リンクのhref属性内のURL出力
外部ファイル取得時のURL出力 - wp_kses_post関数
悪用される恐れのあるタグや属性のみ除去する
例)scriptタグ,onclick等のJS用属性
4.タグ込みの文字列を出力
「echo」があるときは無心にこの4つのどれかかける
【WordPress授業六日目】オリジナルテーマ3
オリジナルテーマ作成
表示用サブループ
008:表示用サブループ設置 | JOBTECH.JP
009:メニュー機能を使用可能にする | JOBTECH.JP
カスタムメニュー
010:共通するヘッダーとフッターをパーツ化して読み込む | JOBTECH.JP
共通パーツをモジュール化
011:投稿一覧表示用テンプレート追加 | JOBTECH.JP
投稿一覧専用テンプレート追加
012:トップページヘッダと配下ページでヘッダを分ける | JOBTECH.JP
-----------------------------------昨日はここまで-------------------------------------------
昨日の復習
◇オリジナル部品を作成するときは命名規則を決めておくとよい
・今回の命名規則
partsフォルダに入れる
部品の大枠にあるclass名で名前をつける
ファイル名の頭に「_」を入れる
今日からの内容
条件分岐・各テンプレート別の対応
013:ページごとのタイトルタグを出力 | JOBTECH.JP
014:投稿詳細用テンプレート追加 | JOBTECH.JP
ページネーション
015:一覧表示テンプレートにページネーションを追加 | JOBTECH.JP
投稿詳細専用テンプレート追加
016:投稿詳細用テンプレート追加 | JOBTECH.JP
017:投稿詳細に前後記事リンクを表示 | JOBTECH.JP
アーカイブ専用テンプレート追加
019:アーカイブ一覧表示用テンプレート追加 | JOBTECH.JP
固定ページ専用テンプレート追加
020:固定ページ表示用テンプレート追加 | JOBTECH.JP
021:固定ページ表示用カスタムテンプレート追加 | JOBTECH.JP
●初期
トップページ(ホームページ)
-固定ページ(ブログを想定)
-投稿一覧
●今回は下記にする
固定ページ(企業サイト想定)
-トップページ(ホームページ)
-投稿一覧(配下ページになる)
タイトルタグを自動で設定する
【WordPress授業五日目】オリジナルテーマ2、WP特有のルール3
簡単にできるテーマ:予算・工数 小
制作手順
- ひとまず作りたいサイトをコーディング
- その後、WordPressインストールして、WordPressの設定
※案件に合わせて設定はする(よく使う設定は記録しておくとよい)
01:XAMPPにWordPressをインストール | JOBTECH.JP
WordPressのおすすめ初期設定 | JOBTECH.JP
オリジナルテーマ作成
作成準備
001:オリジナルテーマの構成 | JOBTECH.JP
002:オリジナルテーマ情報を記述 | JOBTECH.JP
HTMLコーディング
003:外部ファイルのURLを関数で取得 | JOBTECH.JP
必須関数
004:WordPressテーマ必須関数 | JOBTECH.JP
表示用メインループ
アイキャッチ機能
006:アイキャッチ機能を使用可能にする | JOBTECH.JP
トップページを固定ページに変更
-----------------------------------昨日はここまで-------------------------------------------
表示用サブループ
008:表示用サブループ設置 | JOBTECH.JP
009:メニュー機能を使用可能にする | JOBTECH.JP
カスタムメニュー
010:共通するヘッダーとフッターをパーツ化して読み込む | JOBTECH.JP
共通パーツをモジュール化
011:投稿一覧表示用テンプレート追加 | JOBTECH.JP
投稿一覧専用テンプレート追加
012:トップページヘッダと配下ページでヘッダを分ける | JOBTECH.JP
条件分岐・各テンプレート別の対応
013:ページごとのタイトルタグを出力 | JOBTECH.JP
014:投稿詳細用テンプレート追加 | JOBTECH.JP
■表示サブループの仕組み
1.プログラマが用意した連想配列の条件にしたがってDBからページ情報を取得
2.取得したページ情報は自分で用意した変数に代入して利用
3.ループ開始と同時に「変数->have_posts()」で確認
自分で用意したページ情報オブジェクトを管理した変数のポインタ位置にページ情報があるか確認
※ポインタ移動はしない
4.ページ情報があったらループ内で処理をする
5.ループ内の最初で必ず「変数->the_post()」を呼ぶ
サブループ用インスタンスのポインタ位置のページ情報を
暗黙変数$postにオブジェクト形式で代入
※ポインタ位置を次に移動
6.ループ内でテンプレートタグを使って必要情報を出力
7.ループを繰り返す
8.ループ終了後にwp_reset_postdata関数を呼出す
暗黙変数$postに代入されたサブループのページ情報をリセットしてメインループで使用するデータに戻す
関数リファレンス/wp reset postdata - WordPress Codex 日本語版
WordPressで記事一覧取得時に使う条件 | JOBTECH.JP
「get_option( 'sticky_posts' )」で先頭に固定表示がチェックされている投稿IDを配列で取得します。
取得した配列を「'post__in'」の値に指定し、先頭に固定表示がチェックされた投稿IDのページデータのみ取得します。
●ナビゲーションに記述するコード(教科書P150)
テンプレートタグ/wp nav menu - WordPress Codex 日本語版
◇front-page.php
◇functions.php
■ 共有パーツを部品化する際のポイント
◇よく使う部品はファイル名が決まっている
・header.php
・footer.php
◇よく使う部品の読み込み関数名が決まっている
get_header();
get_footer();
get_sidebar();
◇部品読み込み関数の引数について
get_sidebar('content'); → sidebar-content.php
get_sidebar('sub'); → sidebar-sub.php
◇オリジナル部品を読み込む場合
・部品のファイル名は自由に決めて構わない
・読み込むときは「get_template_part('読み込むファイル名')」を呼出し
※読み込むファイル名の拡張子は省略可
例)
get_template_part('content'); → content.php
get_template_part('parts/content'); → parts/content.php
【WordPress授業四日目】オリジナルテーマ、WP特有のルール2
WordPress関数がVScodeで赤くされる時の解決方法
https://bonz-net.com/view-wordpress-functions-by-php-intelephense-793/
オリジナルテーマ作成
時間がかかるテーマ:予算・工数 大
- いろんな案件にマッチするテーマ
配布して利用してもらうテーマ - 案件が決まっていて全ページ管理画面から編集・追加・削除できる
※運用担当者に運用方法についてレクチャーが必要(重) - 案件が決まっていて管理画面から編集・追加・削除できるページが限られている
※運用担当者に運用方法についてレクチャーが必要(中) - 案件が決まっていて管理画面から投稿のみ編集・追加・削除できる
※運用担当者に運用方法についてレクチャーが必要(軽)
簡単にできるテーマ:予算・工数 小
制作手順
- ひとまず作りたいサイトをコーディング
- その後、WordPressインストールして、WordPressの設定
※案件に合わせて設定はする(よく使う設定は記録しておくとよい)
-
オリジナルテーマ作成
001:オリジナルテーマの構成 | JOBTECH.JP
002:オリジナルテーマ情報を記述 | JOBTECH.JP
003:外部ファイルのURLを関数で取得 | JOBTECH.JP
004:WordPressテーマ必須関数 | JOBTECH.JP
005:表示用メインループ設置 | JOBTECH.JP
006:アイキャッチ機能を使用可能にする | JOBTECH.JP
007:トップページの設定 | JOBTECH.JP
008:表示用サブループ設置 | JOBTECH.JP
009:メニュー機能を使用可能にする | JOBTECH.JP
010:共通するヘッダーとフッターをパーツ化して読み込む | JOBTECH.JP
011:投稿一覧表示用テンプレート追加 | JOBTECH.JP
012:トップページヘッダと配下ページでヘッダを分ける | JOBTECH.JP
013:ページごとのタイトルタグを出力 | JOBTECH.JP
014:投稿詳細用テンプレート追加 | JOBTECH.JP
メインループ処理
※「Archive__title」→「BEM」のクラス名をつけている
■ 表示ループの仕組み
- URLから判断して見えないところでDBからページ情報を取得している
- 取得したページ情報は暗黙変数$wp_queryに格納される
- ループ開始と同時に「have_posts()」で確認
暗黙変数$wp_queryのポインタ位置にページ情報があるか確認
※ポインタ移動はしない - ページ情報があったらループ内で処理をする
- ループ内の最初で必ず「the_post()」を呼ぶ
暗黙変数$postにポインタ位置のページ情報をオブジェクト形式で代入
※ポインタ位置を次に移動 - ループ内でテンプレートタブを使って必要情報を出力
アイキャッチ画像機能を使えるようにする
■アイキャッチ画像について
「設定」>「メディア」で生成する画像サイズを指定できる
◇注意!
画像サイズを変更する前にアップロードしたものは新しく指定したサイズの画像を生成してくれない
◇旧画像のリサイズはプラグインで対応
「Regenerate Thumbnails」
https://ja.wordpress.org/plugins/regenerate-thumbnails/
「ツール」>「Regenerate Thumbnails」
ボタンを押せば再生成してくれる
※画像数が多いと処理に時間がかかるので途中で画面を閉じたり、リロードしない
【WordPress授業三日目】PHPの基本,WP特有のルール
PHPの基本
サーバに入れたフォルダ「wp-content」以外はWardPress更新時に変更になる可能性があるので、基本いじっても更新されるので注意
WordPressでは連想配列をレコード取得の条件によく使う
部屋の名前が「条件名」
部屋の値が「条件に対する値」
'posts_per_page'は「何件分取得?」(データベースのLIMITと一緒)
'category_name'は「何カテゴリ?」
'orderby'は「並び替えどうする?」
●まとめ
変数argsには連想配列でレコード取得の条件を作成
get_postsはDBからページ情報を取得する関数
引数:連想配列で指定した条件
戻り値:DBから得たページ情報
●よく使うループ
WordPressの世界で「ループ」といった時は主にDBから取得したページ情報をページの数分繰返し処理することを言う
■ have_posts()
DBから取得したデータのポインタ位置にレコードがあるか真偽値を返す
戻り値:レコードがある「true」ない「false」
最後まで進んで「false」を返す際にポインタ位置を先頭に戻す
■ the_post()
ポインタ位置のレコード(ページ情報)をWordPressが用意している$postにセットする
ポインタ位置を次に移動
WordPress内で暗黙的に用意されている変数がいくつかあるので注意
例)$post等
■ オブジェクトとは
●1番目のコード
globalキーワード付きで変数名を指定するとその変数はグローバルスコープ(今回は関数外)にある変数を参照しにいくようになる
date関数:日付の書式を取得
Y:4桁年
m:2桁月
d:2桁日
2020年11月5日の場合は「'20201105'」
●2番目のコード
//プログラムの世界には値や処理をまとめて
//オブジェクトとして管理するという概念がある
//このオブジェクトをPHPで実装するときは「class」を利用する
//「class」キーワードを使ってクラスを作成
//クラス名は命名規則に則っていれば好きにつけてOK
//ただし暗黙ルールとしてクラス名は頭文字大文字
JSの場合
プロパティの参照
オブジェクト . プロパティ名
メソッドの呼び出し
オブジェクト . プロパティ名 ( )
PHPの場合
プロパティの参照
オブジェクト(クラス) -> プロパティ名
メソッドの呼び出し
オブジェクト(クラス) -> プロパティ名 ( )
■ PHPでオブジェクトを使用する方法
◇クラス(設計図)を作成
class クラス名(頭文字大文字) {
//スタティックプロパティ:アクセス修飾子 プロパティ名
public static $プロパティ名;
protected static $プロパティ名;
private static $プロパティ名;
//インスタンスプロパティ:アクセス修飾子 プロパティ名
public $プロパティ名;
protected $プロパティ名;
private $プロパティ名;
//スタティックメソッド:アクセス修飾子 メソッド定義
public static function メソッド名(引数) {
//メソッドの処理
return 戻り値;
}
//インスタンスメソッド:アクセス修飾子 メソッド定義
public function メソッド名(引数) {
//メソッドの処理
return 戻り値;
}
}
◇クラスを利用する場合はインスタンス化する
$変数 = new クラス名();
◇インスタンス内のプロパティ利用
(インスタンスプロパティ)
$変数(インスタンス)->プロパティ名;
◇インスタンス内のメソッド利用
(インスタンスメソッド)
$変数(インスタンス)->メソッド名(引数);
◇クラスのプロパティ
(スタティックプロパティ・静的プロパティ)を利用
クラス名::プロパティ名;
◇クラスのメソッド
(スタティックメソッド・静的メソッド)を利用
クラス名::メソッド名(引数);
オブジェクトからデータを取り出す
配列からデータを取り出す
型と変換
「(データ型)値」と記述することで明示的に型変換することができる
明示的変換を「キャスト」と呼ぶ
WordPress特有のルール
■ テンプレートタグとの違い
DBから必要な情報を取得して利用する
1.the_○○ ( )
・DBから値を取得して出力する
・
・echo不要
・サニタイズをして出力してくれている
2.get_the_○○ ( )
・DBから値を取得する
・生の値のみ取得
出力時はHTMLタグを自前で組む必要あり
ただしカスタマイズしやすい
・echoしないと出力されない
・出力時にサニタイズしなければいけない
●the_category()とget_the_category()の違い
the_category()の場合
↓この記述だけで下が出力される
get_the_category()の場合
↓この記述で出力される
array(1) {
[0]=>
object(WP_Term)#3804 (16) {
["term_id"]=>
int(1)
["name"]=>
string(9) "未分類"
////略
["cat_name"]=>
string(9) "未分類"
["category_nicename"]=>
string(13) "uncategorized"
["category_parent"]=>
int(0)
}
}