alienHRNの訓練日記

IT業界初心者で勉強中。

20201109授業メモ

授業内容

 

授業内容

wordpressのオリジナルテーマ作成方法

あとでサイトをみてまとめておくこと。


《object-oriented》ソフトウエアの設計や開発において、データや処理対象そのものに
重点を置く考え方のこと。
プログラムの内部動作や操作手順の詳細を知ることなく利用できるという利点がある。

インスタンス化とは、オブジェクト指向のプログラミングにおいて、
インスタンス（クラスを基にした実際の値としてのデータ）を生成することである。
通常、インスタンスはクラスと対比して使用される。
例えば「名前、身長、体重」というクラスがあるとすれば、そのインスタンスは「佐藤、170、60」
という風にして作られる。



〇表示サブループの仕組み
1.プログラマが用意した連想配列の条件にしたがってDBからページ情報を取得する

2.取得したページ情報は自分で用意した$wp_queryに代入して利用

3.ループ開始と同時に「変数->have_posts()」で確認
自分で用意したページ情報のオブジェクトを管理した変数のポインタ位置にページ情報があるか確認

4.ページ情報があったらループ内で処理をする

5.ループ内の最初で必ず「変数->the_post()」を呼ぶサブループ用のインスタンスのポインタ位置
のページ情報を暗黙変数$postにオブジェクト形式で代入
※ポインタ位置を次に移動

6.ループ内でテンプレートタグを使って必要情報を出力

7.ループを繰り返す

8.wp_reset_postdata関数を呼び出す。
暗黙変数$postに代入されたサブループのページ情報をリセットしてメインループで使用するデータに戻す。


※部屋の中の値を指定して表示させる方法
echo $the_query　->　found_posts
部屋名->部屋内;

※phpでif文の組み方
<?php if (0 < count($stickyList)) : ?>
  |
  |
  |
<?php endif ?>


'post__in' => $stickyList,
→'post__in'は配列で表示するページIDを指定する
// 配列が空（部屋がない）時は条件が無視される
// 絞り込みがかからない
// つまり先頭に固定表示の投稿がないと全件表示になってしまう
// そのためget_option('sticky_posts')の配列を使ってif文で表示・非表示の
// 分岐を追加しなければならない


phpファイルにおけるコメントアウトの仕方
<?php /* ?>  <?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
parts/content.php

20201106授業メモ

授業内容

 

〇オリジナルテーマの作成
◇時間がかかるテーマ
1.いろんな案件にマッチするテーマ
配布を利用してもらうテーマ

2.案件が決まっていて前ページ管理画面から編集・追加・削除ができる
※運用担当者に運用方法について詳細なレクチャーが必要（重い）

3.案件が決まっていて管理画面から編集・追加・削除できるページに限られる
※運用担当者に運用方法について詳細なレクチャーが必要（中程度）

4.案件が決まっていて前ページ管理画面から投稿のみ編集・追加・削除できる
※運用担当者に運用方法について詳細なレクチャーが必要（軽い）


◇簡単にできるテーマ：予算・工数小


〇WordPress　おすすめ初期設定
jobtech.jpより講師用からWordPressおすすめ初期設定

jobtech.jpのWordPress講座2020の説明に沿って各フォルダの作成、設定をする。
※ファイル作成時、名前が厳密に決まっているので間違えないように注意

小技：ctr+h→検索・置換
検索したワードを置換に入力した文字に置き換えることができる。


〇表示ループの仕組み
1.URLから判断して見えないところでDBからページ情報を取得している

2.取得したページ情報は暗黙変数$wp_queryに格納される

3.ループ開始と同時に「have_posts()」で確認
暗黙変数$wp_queryのポインタ位置にページ情報があるか確認

4.ページ情報があったらループ内で処理をする

5.ループ内の最初で必ず「the_post()」を呼ぶ暗黙変数$postにポインタ位置のページ情報をオブジェクト形式で代入
※ポインタ位置を次に移動

6.テンプレートタグを使って必要情報を出力

7.ループを繰り返す


※画像をリサイズしてくれるプラグイン
Regenerate Thumbnails


〇アイキャッチ画像について
設定）「メディア」で生成する
画像サイズを指定できる

◇注意
画像サイズを変更する前にアップロードしたものは新しく指定したサイズの画像を生成してくれない

◇旧画像のリサイズはプラグインで対応
「Regenerate Thumbnails」
ボタンを押すだけでリサイズしてくれる。

※画像数が多いと処理に時間がかかるので途中で画面を閉じたり、リロードしたりしないこと。

20201105授業メモ

授業内容

 

授業メモ

wordpress snipet
→コードの予測変換機能
これは必須


〇PHPでオブジェクトを使用する方法
◇クラスを作成して利用
class クラス名（頭文字大文字）
　//スタティックプロパティ：アクセス修飾子 プロパティ名
public static プロパティ名
protected static プロパティ名
private static プロパティ名

//メソッド：アクセス修飾子 メソッド定義
public static function メソッド名（引数）{
//メソッド処理

return 戻り値;
}
}

◇クラスを利用する場合はインスタンス化する
$変数＝new クラス名（）;

◇インスタンス内のプロパティ利用
$変数（インスタンス）->プロパティ名;

◇インスタンス内のメソッド利用
$変数（インスタンス）->メソッド名（引数）;

◇クラスのプロパティを利用
$変数（インスタンス）：：プロパティ名;


〇テンプレートタグの違い
DBから必要なデータを取得して利用する

1.the_〇〇()
・DBから値を取得して出力する
・echo不要
・ものによってはHTMLタグ込みで出力してくれる
但しタグのカスタマイズがしづらい
・サニタイズをして出力してくれている

2.get_the_〇〇()
・DBから値を取得する
・echoしないと出力されない
・出力時にサニタイズしなければならない
※サニタイズ・・・XSS対策（h関数をかける）


----------------------以下--------------------------------------------------
C:\Users\ica\Desktop\xampp\htdocs\mdn01\wp-content\themes\codelearningtheme
のindex.php

<?php get_header();  //この命令についてはP.158をご覧ください。
?>


<?php
// ■オブジェクトとは
echo '<h1>最初のコード</h1>';
function return_price()
{
  global $date;
  // globalキーワード付きで変数名を指定するとその変数はグローバルスコープ（今回は関数外）
  // にある変数を参照しにいくようになる。

  if ($date >= 20191001) {
    $price = 1240;
  } else {
    $price = 1200;
  }

  return $price;
}

$date = date('Ymd');
// date関数：日付の書式を取得
// Y:4桁年
// m:2桁月
// d:2桁日
//2020年11月5日の場合は「'20201105'」
$price = return_price();
echo $price;

echo '<h1>2番目のコード</h1>';
// プログラムの世界には値や処理をまとめて
// オブジェクトとして管理するという概念がある
// このオブジェクトをPHPで実装するときは「class」を使用する。

// 「class」キーワードを使ってクラスを作成
// クラス名は命名規則に従っていれば好きにつけて良い
// 但し暗黙のルールとしてクラス名は頭文字大文字

class Price
{
  // クラス内の変数は「プロパティ」
  protected $price;
  public $date;
  // アクセス修飾子：参照できる範囲
  // public：どこからでも参照可能
  // protected：同一クラス内と継承クラスから参照可能
  // private：同一クラス内のみ

  // クラス内の処理は「メソッド」
  public function return_price()
  {
    if ($this->date >= 20191001) {
      // $this：自分自身（Priceインスタンス）
      $this->price = 1240;
    } else {
      $this->price = 1200;
    }
    return $this->price;
  }
}

$price = new Price;
// Priceクラスのインスタンス（クラスのコピー）を生成
// Price（）：コンストラクタの呼出し
// ※教科書は（）を省略→（）は必ず書いたほうが良い
// 出来上がったインスタンスを変数priceに代入



$price->date = date('Ymd');
// 左辺：$priceと紐づけられているインスタンス内のdateプロパティ
// 右辺：本日の日付文字列を取得
// まとめ：インスタンス内のdateプロパティに本日の日付文字列を代入

echo $price->return_price();
// インスタンス内のreturn_priceメソッドの呼出し
// 返り値の価格をechoで出力

// $price->price = 1000;
// protectedされた変数はクラス外から利用できない
// ※クラス外から

?>


<?php
// 定数の定義
// define('定数名', 値);
// define('NAME', 'サイトウ');
// echo NAME . '氏';
// 再代入はエラー

$img = wp_get_attachment_image_src(151);

// echo '<pre>';
// var_dump($img);
// echo '</pre>';

// WordPressでは連想配列をレコード取得の条件によく使う
// 部屋の名前が「条件名」
// 部屋の値が「条件に対する値」
// posts_per_pageは「何件分取得？」
// category_nameは「何カテゴリー？」
// orderbyは「並べ替えどうする？」

// まとめ
// 変数argsには連想配列でレコード取得の条件を作成

$args = [
  'posts_per_page' => 5,
  'category_name' => 'bookreview',
  'orderby' => 'date',
];

// get_postsはDBからページ情報を取得する関数
// 引数：連想配列で指定した条件
//



$posts_array = get_posts($args);

// echo '<pre>';
// var_dump($posts_array);
// echo '</pre>';

?>

<?php
// WordPressの世界で「ループ」といったときは主にDBから取得したページの情報を
// ページの数ぶん繰り返し処理することをいう

// ■have_posts()
// DBから取得したデータのポインタの位置にレコードがあるかを真偽値で示す。
// 戻り値：レコードがある「true」ない「false」
// 最後まで進んで「false」を返す際にポインタ位置を先頭に戻す。

// ■the_post()
// ポインタのレコード（ページ取得）をWordPressが用意している$postにセットするポインタ位置
を次に移動

// WordPress内で暗黙的に用意されている変数が幾つかあるので注意
// 例：$post等

while (have_posts()) : the_post();
  echo '<pre>';
  var_dump($posts);
  echo '</pre>';


?>

  <h1><?php the_title(); ?></h1>
  <p><?php the_date(); ?></p>
  <?php the_content(); ?>

<?php endwhile; ?>




<?php get_footer(); //この命令についてはP.169をご覧ください。
?>



------------------以下index.phpを削除して修正したもの-----------------------------

<?php get_header();  //この命令についてはP.158をご覧ください。
?>

<?php
$postdata = get_post(1);
// var_dump($postdata);
echo $postdata->post_title;
echo '<br>';
echo $postdata->post_date;
echo '<br>';
echo $postdata->post_name;
echo '<br>';
echo $postdata->comment_count;
echo '<br>';

echo '<h1>ここからカテゴリについて</h1>';
$cat = get_the_category(1);
// echo '<pre>';
// var_dump($cat);
// echo '</pre>';

echo $cat[0]->cat_name;

echo '<h1>ここから型変換について</h1>';
$val = 10;
var_dump($val);
var_dump*1 : the_post();
  echo '<pre>';
  var_dump($posts);
  echo '</pre>';
?>

  <h1><?php the_title(); ?></h1>
  <p><?php the_date(); ?></p>
  <?php the_content(); ?>

<?php endwhile; ?>




<?php get_footer(); //この命令についてはP.169をご覧ください。
?>

*1:string)$val);


// 「（データ型）値」と記述する事で明示的に型変換することができる
// 明示的型変換を「キャスト」と呼ぶ

echo '<h1>テンプレートタグ</h1>';
echo '<h2>the_〇〇</h2>';
the_category();

echo '<h2>get?_the_〇〇</h2>';
// $cat=get_the_

echo '<h1>ここからwhile文</h1>';
while (have_posts(

20201104授業メモ

授業内容

 

授業メモ

サイドバーに表示されるサイト回遊性を高めるコンテンツ群の
ことを言う。
管理画面からサイト内の別コンテンツへ
誘導するためのパーツ群を操作できる昨日

テーマ作成時にウィジットエリアを決めてウィジット群を配置
することができる。

・主な使いどころ
「ヘッダー」「フッター」「サイドバー」等
サイト共通で使用するパーツをウィジットで管理、配置する事
がある。

■カスタムメニュー
メニュー項目を自由に作成できる機能
※項目選択時は「すべてを表示」を選択してから！
・作成できる項目
　・投稿
　・固定ページ
　・カスタムリンク（外部ページへのリンク）
　・カテゴリ


・主な使いどころ
「グローバルメニュ」「ウィジェット用メニュー」

■ユーザ作成
様々な権限を与えたユーザを作成してWordPressサイトを運用
していくことができる

ニックネーム設定が必須の理由
→WordPressで表示される名として扱われる
ユーザ名はサイト内で表示させない名前に設定することが
セキュリティ上望ましい。
サイト内に表示する名前とは別にすることをおすすめする。


・管理者:サイト全体管理者
・編集者:コンテンツ管理者
・投稿者:自分の投稿のみ編集可能
・寄稿者:ライター（公開権限なしの投稿者）
・購読者:コメント・閲覧のみ


〇WordPressインストール手順
1.DB領域の作成

2.公開フォルダ内にWordPressのPHPファイルを配置

3.ブラウザでWordPressにアクセス
「wp-config.php」の有無を確認
「wp-config.php」がない場合はインストール画面
「wp-config.php」はDB接続情報が記述されている

4.DB情報を入力して「インストール実行」を押下
DB接続情報を記載した「wp-config.php」生成
※もしDB情報を間違えた場合は「wp-config.php」
を削除する事。
そして3.からやり直す。

5.サイト情報を入力して
「WordPressをインストール」を押下
DB領域内にWordPress用テーブルを作成

インポーターを用いて外部データを利用する
(ほかのブログから移行する際に使用する)

〇WordPressを構成するもの
◆投稿：量産するページ
管理画面「投稿」
　・アーカイブページ：投稿一覧
　・個別投稿ページ：投稿詳細
　・タクソノミー：カテゴリとタグをまとめて呼ぶ
　・カテゴリ：投稿グループ化
※投稿は必ず1つのカテゴリに属する
　・タグ：カテゴリ横断してグループ化

◆固定ページ：1ページで完結するページ

〇WordPressで使用するキーワード
　・スラッグ：URLに使用するキーワード
※全角文字は使用しない

　・パーマリンク：WordPress内で使用するページのURL
スラッグをもとにパーマリンクを生成する

管理画面「設定」＞「パーマリンク設定」
◆よく使う設定
「投稿名」：スラッグを使用してURLを生成
「カスタム構造」で「%post_id%」ｗｐ指定

20201029授業メモ

授業内容

 

授業メモ

■入力の仕方
まずは文字を打つ
次に段落作成等を決めるボタンを押す

Enterで新しいブロックの作成
Shift+Enterで改行（br要素）を挿入


■固定ページについて
1ページで完結するものを作成する際はこちらを使用する

■投稿について
複数ページにわたって作成するもの（例：商品詳細ページなど）はこちらを使用する


■投稿 カテゴリーとタグの違い
カテゴリー・・・ジャンルでグループ化、階層構造を持てる、1投稿に1カテゴリー

設定について
スラッグ-URLの形式に適したもの。英字やハイフン等が使われる。
クイック編集で編集する


タグ・・・キーワードでグループ化、階層構造を持てない、1投稿に3タグを上限に設定


■メディア・・・画像の管理
・サムネイル：主に一覧で使用する小さい画像
・サイズ
・トリミングするか

中サイズ：ページ内で使用する画像
大サイズ：ページ内で使用する画像
フルサイズ：ページ内で使用する画像
※本来の画像の大きさ

20201028授業メモ

〇 授業内容

 

授業メモ
ＷｏｒｄＰｒｅｓｓについて

インストール
①・MySQL Shellで記述
create database wp1;

もしくは
・phpMyadminをつかって作成
データベースを作成する


②インストールファイルを公式サイトからＤＬ
↓
展開
↓
htdocsに解凍したフォルダを設置

③ブラウザでlocalhost/wordpressに接続
「さあ、始めましょう」
↓
データベース名：wp1
ユーザ名：root
パスワード：admin
データベースホスト名：※ここはいじらない
↓
インストール実行


クエリ文字列の付与によりページがとぶ編集・作成ツール
クリック操作で一通りできてしまう

機能について調べること



※既存のwordpressの修正について
一度コードに目を通してから話をするべき
→他人が組んだコードの把握から。


WordPress公開手順
1、プレビュー（ログインユーザのみ確認可）
2、プレビュー確認おｋ
3、公開する

 

20201009 授業メモ

授業内容

 

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>正規表現１</title>
</head>

<body>
  <h1>正規表現１</h1>
  <p>
    <?php
    $str = '123abc4567';
    if (preg_match('/^[0-9]{3}(abc){0,2}[0-9]{4}$/', $str)) {
      // preg_match:パターンチェック関数
      // 第一引数：文字列パターンの指定
      // '/^[0-9]{3}-[0-9]{4}$/'

      // 第二引数：確認文字列
      // $str

      // 戻り値:マッチしたときは「1」、マッチしなかったときは「0」、
      // えらーになったときは「false」

      echo '郵便番号です';
    } else {
      echo '郵便番号ではありません';
    }



    echo '<br>';
    $tell = '080-0000-0000';
    if (preg_match('/^(070|080|090){1}-?[0-9]{4}-?[0-9]{4}$/', $tell)) {

      echo '携帯番号です';
    } else {
      echo '携帯番号ではありません';
    }


    echo '<br>';
    $japanese = '阿久津';
    if (preg_match('/^.{3}$/u', $japanese)) {
      // 1文字3バイト
      // .{3}は3バイトという表現
      // 末尾デリミタの後にuを入れてあげると日本語にも対応
      echo 'okです';
    } else {
      echo 'okではありません';
    }
    ?>
  </p>
</body>

</html>