クロピグログ

職業訓練で学んだことまとめ

【Sass授業二日目】Sass

Sass案件はCSSファイル直書きは厳禁

※Sassのファイル保存したタイミングで直書きしたコードは消される

 

sass_startup.code-workspace

// Sass用設定を追記
// Sassのコンパイルによる出力設定
"liveSassCompile.settings.formats": [
  {
    "format""expanded"// 「nested」「compact」「compressed」から選択
    "extensionName"".css"// 拡張子「.css」として出力
    "savePath"null // 別フォルダに出力する場合は文字列で指定
  },
  {
   "format""compressed"// 「nested」「compact」「compressed」から選択
   "extensionName"".min.css"// 拡張子「.css」として出力
   "savePath"null // 別フォルダに出力する場合は文字列で指定
  },
],

上は記述するように書き出し

下は圧縮したファイルとして運用時用に書き出す

ような方法もできる

 

 

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ファイルを生成することを「コンパイル」と呼びます。

f:id:chromiumpig:20201126103249p:plain

 

 

Sass(SCSS)の基本記法

s002:Sass(SCSS)の基本記法 | JOBTECH.JP

 

入れ子にすると子孫セレクタになる

ul{
  list-style: none;
  padding-left0;
  li{
    border-bottom: solid 1px;
  }
}

 

「&」は親セレクタを意味する入れ子になっているが子孫セレクタにはならない

a{
  colorred;
  &.-btn{
    bordersolid;
  }
  &:hover{
    text-decorationnone;
    coloraqua;
  }
}

 

変数宣言可能

$変数名:値;

変数の色変えると色一気に変えられるので楽

$color-main#f00;
$color-sub#0ff;
a{
  color$color-main;
}

 

文字列として変数を使用する場合は「#{変数名}」と記述します。

$pass'../img/';
.Hero{
  background-imageurl(#{$pass}hero.img);
 コンパイル結果 → background-image: url(../img/hero.img);
}

 

 

Sass(SCSS)でファイルを分割管理

s003:Sass(SCSS)でファイルを分割管理 | JOBTECH.JP

 

下みたいな省略も可

@import 'parts/_header.scss';
@import 'parts/_footer.scss';
@import 'parts/_test.scss';

 

@import 'parts/header';
@import 'parts/footer';
@import 'parts/test';

 

 

Sass(SCSS)でよく使う記述を部品化

s004:Sass(SCSS)でよく使う記述を部品化 | JOBTECH.JP

 

パーツより先に読み込む

// mixin
@import 'mixin/media';
// parts
@import 'parts/header';
@import 'parts/footer';
@import 'parts/test';

 

「@include sp(pc)」で呼び出せば下みたいにコンパイルされる

.header {
  //共通デザイン
  padding40px;
  //スマホデザイン
  @include sp{
    colorred;
  }
  //PCデザイン
  @include pc{
    colorblue;
  }
}

@charset "UTF-8";
.header {
  padding40px;
}
@media screen and (max-width479px) {
  .header {
    colorred;
  }
}
@media screen and (min-width480px) {
  .header {
    colorblue;
  }
}

 

mixinの定義

@mixinの呼び出し

@include

 

呼び出された時に記述される内容

※@content部分に記述される内容

 

 

 

BEMのルールとカスタマイズ

CSSの命名規則BEMのルールとカスタマイズ | JOBTECH.JP

 

SassとBEMを使ったときの一般的なセレクタの書き方

 

.HeaderPC{
  displayflex;
  justify-contentcenter;
  background-color$color-dark;
 
  &_link{
    color#fff;
  }
}

■デメリット

セレクタ名で検索できない

 

変則的な書き方

 

.HeaderPC{
  displayflex;
  justify-contentcenter;
  background-color$color-dark;
}

 
.HeaderPC_link{
  color#fff;
}

■メリット

普通のCSSと同じセレクタなので初心者が参加しやすい

セレクタを検索できる

■デメリット

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」を作らない

 

036:コメント機能を追加 | JOBTECH.JP

 

◆簡易版コメント機能実装

   <?php comments_template(); ?>

・簡単にコメント機能を実装できる

・ただしカスタマイズがほとんどできない

・「comments.php」というコメント専用テンプレートの読み込み

・自前で「comments.php」を作成していないとWordPressが元々もっているテンプレートが読み込まれる

WordPressが元々もっているテンプレートにcomment_form関数やget_comments関数が記載されている

 

 

◆詳細版コメント機能実装

$args = [
  'title_reply' => '口コミを書く'// タイトルの文字列を変更
  'cancel_reply_link' => '取り消す'// 返信を押下後の「コメントをキャンセル」の文字列変更
  'label_submit'  => '口コミ投稿する'// 送信ボタンの文字列を変更
  'comment_notes_before' => 'フォーム前の好きな文章',
  'comment_notes_after' => 'フォーム後の好きな文章',
];
comment_form($args);

 

 

◆コメント内容の表示

$args = [
  'status' => 'approve'//承認済み
  'order' => 'desc'//新しいコメント順
  'post_id' => $post->ID //この投稿詳細のコメント
];
$commentList = get_comments($args);
// get_comments関数:対象コメントを取得
// 引数で取得するコメントの条件指定
 
?>
<?php /***** コメントループ開始 *****/ ?>
<?php if ($commentList) : ?>
  <?php foreach ($commentList as $comment) : ?>
    <div class="Comment__item">
      <div class="Comment__author">
        <?php echo esc_html($comment->comment_author); //投稿者の名前
        ?>
      </div>
      <div class="Comment__date">
        <?php comment_date("Y/m/d"); //投稿日
        ?>
      </div>
      <div class="Comment__text">
        <?php comment_text($comment->comment_id); //コメントの本文
        ?>
      </div>
    </div>
  <?php endforeach?>
<?php endif?>
<?php /***** コメントループ終了 *****/ ?>

◆コメント表示の流れ

サブループに似た流れ

1.条件指定してコメントを取得

2.コメントループを作成

3.コメントループ内で必要情報を表示

 ※コメント情報表示用テンプレートタグを使う

 調査キーワード「WordPress コメント テンプレートタグ」

 ※テンプレートタグがない場合はオブジェクト内のプロパティを直接参照して出力

◆コメントパーツの作成方法

1.「comments.php」を作成

 「comments_template()」を使用

 ※comments_template()がWordPressの初期「comments.php」を使用しなくなるので注意!

2. 好きなファイル名で作成

 「get_template_part()」で読み込み

 

 

固定ページにコメント機能実装する場合は「コメント許可」する

f:id:chromiumpig:20201124122211p:plain

 

◆コメント許可を取得して、分岐する

<?php if ($post->comment_status == 'open') :
comments_template();
endif?>

$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の注意

f:id:chromiumpig:20201120111714p:plain

↑検索から除外なので、「True:表示しない」

 

●「single-post_news.php

set_query_var('taxonomySlug''cat_news');

・カスタムタクソノミーを表示したい場合は第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

 

●変数に代入してそれを入れていくやり方

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <?php
    // get_field関数
    // カスタムフィールドの値を取得できる
    // 第1引数:カスタムフィールドの名前
    // 戻り値:カスタムフィールドの種類で異なる
    $top_service1_img = get_field('top_service1_img');
    $top_service1_title = get_field('top_service1_title');
    $top_service1_text = get_field('top_service1_text');
    $top_service1_slug = get_field('top_service1_slug');
    $top_service1_url = get_permalink($top_service1_slug);
 
 
    $top_service2_img = get_field('top_service2_img');
    $top_service2_title = get_field('top_service2_title');
    $top_service2_text = get_field('top_service2_text');
    $top_service2_slug = get_field('top_service2_slug');
    $top_service2_url = get_permalink($top_service2_slug);

    $top_service3_img = get_field('top_service3_img');
    $top_service3_title = get_field('top_service3_title');
    $top_service3_text = get_field('top_service3_text');
    $top_service3_slug = get_field('top_service3_slug');
    $top_service3_url = get_permalink($top_service3_slug);
    ?>
  <?php endwhile?>
<?php endif?>
<?php /***** メインループ終了 *****/ ?>
 
---------------------
 body内(下をx3)

<li class="Archive__item">
  <a class="Archive__link" href="<?php echo esc_url($top_service2_url); ?>">
    <figure class="Archive__thumbnail">
      <img class="Archive__img" src="<?php echo esc_url($top_service2_img); ?>" alt="制作タイトル">
    </figure>
    <h2 class="Archive__title"><?php echo esc_html($top_service2_title); ?></h2>
    <div class="Archive__text"><?php echo esc_html($top_service2_text); ?></div>
  </a>
</li>

 

 

●直接書いて、forでループさせるやり方

<?php for ($i = 1$i <= 3$i++) : ?>
  <?php
  $nam_url = "top_service" . $i . "_slug";
  $nam_img = "top_service" . $i . "_img";
  $nam_title = "top_service" . $i . "_title";
  $nam_text = "top_service" . $i . "_text";
  ?>
  <li class="Archive__item">
    <a class="Archive__link" href="<?php echo esc_url(get_permalink(get_field($nam_url))); ?>">
      <figure class="Archive__thumbnail">
        <img class="Archive__img" src="<?php echo esc_url(get_field($nam_img)); ?>" alt="制作タイトル">
      </figure>
      <h2 class="Archive__title"><?php echo esc_html(get_field($nam_title)); ?></h2>
      <div class="Archive__text"><?php echo esc_html(get_field($nam_text)); ?></div>
    </a>
  </li>
<?php endfor?>

【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)

ワードプレスの自動でクラス名つけてくれる関数

<body <?php body_class(); ?>>

自分で作ったクラス名は最初大文字にするなどして、区別化すると良い

 

音声読み上げしたほうがいい時記述

  <?php
  wp_body_open();
  // バージョン5.2以降必須関数
  // バージョン5.1以前はエラーになるので注意
  ?>

 

 

カスタムロゴ

・上の画像を管理画面で変更できるようになる

●HeaderPC

          <div class="HeaderPC__logo">
            <?php if (has_custom_logo()) : ?>
              <?php
              the_custom_logo();
              // 管理画面「外観」 > 「カスタムロゴ」
              // サイト基本情報の一番下で選択したロゴ画像を表示
              ?>
            <?php else : ?>
              <a class="HeaderPC__link -logo" href="<?php echo esc_url(home_url()); ?>">
                <img class="HeaderPC__img" src="<?php echo esc_url(get_theme_file_uri('/img/logo.png')); ?>" alt="ロゴ">
              </a>
            <?php endif?>
          </div>

 

●functions.php

add_theme_support('custom-logo');