00_WordPress開発までの道筋

導入サイトのリンク
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ではいらない
<meta name="description" content="" />
<meta name="author" content="" />


ブログ名
<php bloginfo('name'); ?>


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円

使用例
<?php $meta_values = get_post_meta($post_id, $key, $single); ?>
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/get_post_meta

カスタムフィールドのプライグイン
ACF
・入力を必須化
・数値入力の制限
etcができる。
テンプレートタグの追加
the_field('');
get_field('');



WordPress開発講座 #08：カスタム投稿（ポスト）タイプで投稿欄を増やそう

ワードプレスは管理画面の縦型メニューの選択枠 を増やすことができる。
・カスタムポストタイプ

<?php register_post_type( $post_type, $args ); ?>
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/register_post_type


WordPress開発講座 #09：カスタム投稿（ポスト）タイプのテンプレートファイルを作ろう

カスタム投稿タイプ専用のファイル作成
・サイト表示の自由度が高まる。



WordPress開発講座 #10：カスタム分類（タクソノミー）で、分類項目を追加しよう

タグとカテゴリの違い
・タグは並列の関係
・カテゴリは親子関係

<?php register_taxonomy( $taxonomy, $object_type, $args ); ?>
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/register_taxonomy


<?php $terms = get_terms( $taxonomies, $args ); ?>
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/get_terms

htmlspecialchars
https://www.webdesignleaves.com/pr/wp/wp_escape_functions.html


WordPress開発講座 #11：ヘッダー・フッターとページテンプレートについて

パーツに分ける
・ヘッダー、フッダー、サイドバー、なんでも　のパーツ化が可能
<?php get_header(); ?>
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/get_header

<?php get_footer(); ?>
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/get_footer

<?php get_sidebar(); ?>
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/get_sidebar


<?php get_template_part(); ?>
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/get_template_part


管理ツールバーをサイトの下に表示するプラグインの紹介

固定ページのファイルを作成

ページテンプレートファイルを用いた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