導入サイトのリンク
https://bazubu.com/xampp-wordpress-23795.html
目標サイト
https://code-step.com/demo/html/portfolio1/
開発環境
https://jsbin.com/?html,output
全体の流れ
https://www.youtube.com/watch?v=WAI1EFKew58
アクセスリンク
http://localhost/wordpress/
管理画面へのアクセスリンク
http://localhost/wordpress/wp-admin/
開発環境の構築
https://daeuwordpress.com/visualstudiocode/#i
WordPressのバージョンver5.93
開発補助知識テーマ作成入門
https://wpmake.jp/contents/theme/theme_create/
開発学習動画
https://www.youtube.com/watch?v=mbWg8PYHbTI
WordPress開発講座 #04：ループを使って一覧をつくろう
ここからスタート
index.php style.css
テーマディレクトリに作らないとテーマとして認識されない。
stlye.css
先頭行にコメントを記載することで開発者名やテーマ名、バージョン名を説明分などを設定できる。
全体
\xampp\htdocs\wordpress\wp-content\themes
ルートディレクトリの位置
wordpressが親ルート
この二つのタグはワードプレスで設定できるからindex.phpではいらない
ブログ名
get_○○
は値をとってくるだけなので echoで表示させる必要がある。
WordPress開発講座 #04：ループを使って一覧をつくろう
内容
・投稿の新規追加時のphpタグ
hava_post()
条件分岐タグ
表示すべき投稿、記事があるかないか
・テストデータのインポート
・記事の抜粋尾表示
・ページネーションについて
番号付きのページネーション
次へとか戻るとかのページネーション
WordPress開発講座 #05：テンプレート階層で、投稿ページと固定ページを作ろう
・リンク先のwordpress化
・テンプレート階層
https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/
左のファイルの方が優先度が高い
詳しくは他の動画で解説があるらしい
・single.phpを作成
index.phpの作成手順が2、3分で一気に流れる。
WordPress開発講座 #06：functions.phpでサムネイル画像を表示しよう
・wordpress流タイトル設定
wordpressはタイトルを自動的に最適化してくれる機能がある
function.php
add_theme_suport ワードプレスのテーマにワードプレスの機能を追加してください
関数リファレンス参照
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9
ワードプレスの管理画面でのページ編集の項目にアイキャッチ画像を追加する。
・サムネイル画像をとってくる方法
・サムネイル画像のURLをとってくる方法
画像の取得
wordpress管理画面のメディアから画像をとってくる方法
img[0]でパス img[1]img[2]サイズ？とかなんとか
WordPress開発講座 #07：本文に入力欄を追加できるカスタムフィールドを使おう
カスタムフィールド
・名前と値のセットを作成できる。
例 名前：価格 値：1500円
使用例
カスタムフィールドのプライグイン
ACF
・入力を必須化
・数値入力の制限
etcができる。
テンプレートタグの追加
the_field('');
get_field('');
WordPress開発講座 #08：カスタム投稿（ポスト）タイプで投稿欄を増やそう
ワードプレスは管理画面の縦型メニューの選択枠 を増やすことができる。
・カスタムポストタイプ
WordPress開発講座 #09：カスタム投稿（ポスト）タイプのテンプレートファイルを作ろう
カスタム投稿タイプ専用のファイル作成
・サイト表示の自由度が高まる。
WordPress開発講座 #10：カスタム分類（タクソノミー）で、分類項目を追加しよう
タグとカテゴリの違い
・タグは並列の関係
・カテゴリは親子関係
htmlspecialchars
https://www.webdesignleaves.com/pr/wp/wp_escape_functions.html
WordPress開発講座 #11：ヘッダー・フッターとページテンプレートについて
パーツに分ける
・ヘッダー、フッダー、サイドバー、なんでも のパーツ化が可能
管理ツールバーをサイトの下に表示するプラグインの紹介
固定ページのファイルを作成
ページテンプレートファイルを用いたLP作成
スラッグ
#tailwind知識
【Tailwind CSS #3】4つのインストール方法の紹介。オススメはPostCSSのプラグインとして使う方法。
https://www.youtube.com/watch?v=mzRxqknA9Jg
ビルド実行階層
cd .\wordpress\wp-content\themes\deep-design\
dist.cssファイルの生成コマンド
npm run build.css
tailwind.config.jsファイルの中身
module.exports = {
content: [
'index.php',
],
theme: {
extend: {},
},
plugins: [],
}
#CSS学習
#テイルウィンドチュートリアルサイト
https://reffect.co.jp/html/tailwindcss-for-beginners#Tailwind_CSS-3
#remの解説サイト
https://www.pc-koubou.jp/magazine/23912
WordPressテンプレートタグ
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0