【Sass授業二日目】Sass
Sass案件はCSSファイル直書きは厳禁
※Sassのファイル保存したタイミングで直書きしたコードは消される
sass_startup.code-workspace
上は記述するように書き出し
下は圧縮したファイルとして運用時用に書き出す
ような方法もできる
style.css.map
・mapファイルのおかげで、検証ツールの内容がうまく読み込める
※コードの行番号などが検証ツールで確認できる
tmp.css
・緊急用のCSS
※出先でコンパイルできない状態でコードいじるときはこちらに書き込む
index.scss
「page/index.scss」は名前の前に「_」をいれない
デザイン変えたいページなので、ほかに適用させないため
【Sass授業一日目】Sassの設定、SassとBEMの組み合わせ
SassをVSCodeで使用する方法
s001:SassをVSCodeで使用する方法 | JOBTECH.JP
SassではSCSS記法で記述した「Sassファイル」から「CSSファイル」を生成します。SassファイルからCSSファイルを生成することを「コンパイル」と呼びます。
Sass(SCSS)の基本記法
s002:Sass(SCSS)の基本記法 | JOBTECH.JP
「&」は親セレクタを意味する入れ子になっているが子孫セレクタにはならない
変数宣言可能
$変数名:値;
変数の色変えると色一気に変えられるので楽
文字列として変数を使用する場合は「#{変数名}」と記述します。
Sass(SCSS)でファイルを分割管理
s003:Sass(SCSS)でファイルを分割管理 | JOBTECH.JP
下みたいな省略も可
Sass(SCSS)でよく使う記述を部品化
s004:Sass(SCSS)でよく使う記述を部品化 | JOBTECH.JP
パーツより先に読み込む
「@include sp(pc)」で呼び出せば下みたいにコンパイルされる
↓
mixinの定義
@mixinの呼び出し
@include
呼び出された時に記述される内容
※@content部分に記述される内容
BEMのルールとカスタマイズ
CSSの命名規則BEMのルールとカスタマイズ | JOBTECH.JP
SassとBEMを使ったときの一般的なセレクタの書き方
■デメリット
セレクタ名で検索できない
変則的な書き方
■メリット
・セレクタを検索できる
■デメリット
Sassっぽくない
【WordPress授業十四日目】WordPressのバックアップして別PCに移動
WordPressのバックアップ
M01:WordPressサイトをバックアップ | JOBTECH.JP
...\xampp\htdocs\mdn01の中の
「wp-content」をコピーしてバックアップ
phpmyadminで「mdn01」のデータベースをエクスポート
※エクスポートの設定は何も変えない
WordPressの新規環境準備
M02:新しい環境の作成と移行準備 | JOBTECH.JP
ワードプレスを新規でインストールし、「lesson99」みたいな感じで一旦名前つけておき最終的に名前「mdn01」に変える
phpmyadminで新規作成で「lesson99」のデータベース作成
lesson99にログインできたら、念のためこのデータもバックアップとる
上でやった時と同様、「lesson99のwp-content」と「lesson99のデータベース」をバックアップ
バックアップできたら、「lesson99のwp-content」と「lesson99のデータベース」削除
WordPressサイトの移行
M03:データベースファイル内のサイトURL変更 | JOBTECH.JP
「mdn01_移行用.sql」をVScodeにいれてすべて置換する
例 )「http://localhost/mdn01」 → 「http://localhost/lesson99」
M04:WordPressサイトの移行 | JOBTECH.JP
「backup」フォルダ内の「mdn01のwp-content」をコピーし、
新しい環境の「lesson99」直下に配置
phpMyAdminにアクセスして移行前データベースファイル「mdn01_移行用.sql」をインポートする
【WordPress授業十三日目】コメント機能を追加
コメントモジュールテンプレート「comments.php」を読み込みます。
もし「comments.php」が存在しない時はWordPressがもっているコメントモジュールテンプレートを読み込みます。
ループ内でもループ外でも呼び出すことができます。
今回は「comments.php」を作らない
◆簡易版コメント機能実装
・簡単にコメント機能を実装できる
・ただしカスタマイズがほとんどできない
・「comments.php」というコメント専用テンプレートの読み込み
・自前で「comments.php」を作成していないとWordPressが元々もっているテンプレートが読み込まれる
・WordPressが元々もっているテンプレートにcomment_form関数やget_comments関数が記載されている
◆詳細版コメント機能実装
◆コメント内容の表示
◆コメント表示の流れ
サブループに似た流れ
1.条件指定してコメントを取得
2.コメントループを作成
3.コメントループ内で必要情報を表示
※コメント情報表示用テンプレートタグを使う
調査キーワード「WordPress コメント テンプレートタグ」
※テンプレートタグがない場合はオブジェクト内のプロパティを直接参照して出力
◆コメントパーツの作成方法
1.「comments.php」を作成
「comments_template()」を使用
※comments_template()がWordPressの初期「comments.php」を使用しなくなるので注意!
2. 好きなファイル名で作成
「get_template_part()」で読み込み
固定ページにコメント機能実装する場合は「コメント許可」する
◆コメント許可を取得して、分岐する
$post:ループで使用する
ページ情報の入った暗黙変数
comment_statusプロパティ
コメントの許可情報
・許可している:'open'
・許可していない:'closed'
【WordPress授業十二日目】投稿に新しいカテゴリーを作成
Custom Post Type UI
p06-1:投稿に新しいカテゴリーを作成「Custom Post Type UI」 | JOBTECH.JP
p06-2:カスタム投稿を作成「Custom Post Type UI」 | JOBTECH.JP
p06-3:カスタム投稿に新しいカテゴリーを作成「Custom Post Type UI」 | JOBTECH.JP
p06-4:カスタム投稿一覧表示専用テンプレート「Custom Post Type UI」 | JOBTECH.JP
p06-5:カスタム投稿詳細表示専用テンプレート「Custom Post Type UI」 | JOBTECH.JP
●p06-2の注意
↑検索から除外なので、「True:表示しない」
●「single-post_news.php」
・カスタムタクソノミーを表示したい場合は第2引数にカスタムタクソノミースラッグを指定
・WordPress標準タクソノミー名は
カテゴリー:'category'
タグ:'post_tag'
・今回はカスタムタクソノミー名の'cat_news'指定
■メインループとサブループの違い
◇メインループ
スラッグをもとにWPが勝手に取得したページデータ
を使ってループをまわす
※基本的にこちらを使う
◇サブループ
条件を指定して取得したページデータを使ってまわすループ
※メインループとは違うページデータを
使いたい場合にこちらを使う
■ホームページ:front-page.php
◇投稿一覧
メインループ:投稿一覧情報
・管理画面の本文を表示できない
・配下ページに投稿一覧を専用テンプレートで
用意できない
◇固定ページ
メインループ:固定ページ情報
・管理画面の本文を表示できる
・配下ページに投稿一覧を専用テンプレートで
用意できる
上記ゆえにホームページは固定ページ指定が多く
お知らせ抜粋などの投稿一覧は
サブループで表示させることが多い
■投稿一覧:home.php
◇メインループ
先頭固定表示を先頭に配置した投稿一覧情報
表示上限件数は「設定」>「表示設定」の件数
■投稿詳細:single.php
◇メインループ
URLのスラッグをもとにした1ページ分の投稿情報
■固定ページ詳細:page.php
◇メインループ
URLのスラッグをもとにした1ページ分の固定ページ情報
■条件付き投稿一覧:archive.php
◇メインループ
条件に合致した投稿一覧情報
表示上限件数は「設定」>「表示設定」の件数
■検索結果一覧:search.php
◇メインループ
検索キーワードに合致した投稿一覧情報
表示上限件数は「設定」>「表示設定」の件数
【WordPress授業十日目】ブロックエディタ、おすすめプラグイン
ブロックエディタ
WordPress:「テキスト」カテゴリブロック確認 | JOBTECH.JP
WordPress:「メディア」カテゴリブロック確認 | JOBTECH.JP
WordPress:「デザイン」カテゴリブロック確認 | JOBTECH.JP
おすすめプラグイン
カスタムフィールド作成
p05:カスタムフィールド作成「Advanced Custom Fields」 | JOBTECH.JP
●変数に代入してそれを入れていくやり方
●直接書いて、forでループさせるやり方
【WordPress授業十日目】オリジナルテーマ7
検索機能
034:サイト内に検索フォームを設置 | JOBTECH.JP
035:検索結果一覧表示テンプレートを追加 | JOBTECH.JP
034:サイト内に検索フォームを設置
「archive.php」を複製し、検索結果一覧表示用テンプレート「search.php」を追加します。
◆WordOress検索フォーム
fromタグ
・action属性:トップページURLを指定
home_url関数を使用
・method属性:get
inputタグ:検索キーワード入力用
1行テキストボックス
・name属性:s
inputタグ:submitボタン
ヘッダーに記述するコード(P136)
ワードプレスの自動でクラス名つけてくれる関数
自分で作ったクラス名は最初大文字にするなどして、区別化すると良い
音声読み上げしたほうがいい時記述
カスタムロゴ
・上の画像を管理画面で変更できるようになる
●HeaderPC
●functions.php