WordPressの勉強1/3 | WebとかIoTのブログ

ゴール設定

ゴール設定
1. スタティック（静的）なWebサイトを構築できる
  - HTMLの基本
  - ページ遷移方法
  - ホスティング方法
  - CSS
  - JavaScript
2. スタティックなサイトをWordPress化できる
  - 環境作成
    - wp-env
  - テーマ作成
    - 最小限のテーマ
      - index.php
      - style.css
    - テンプレート
      - 固定ページテンプレート
      - 投稿ページテンプレート
      - ：
3. ブロックエディタを利用して簡単にユーザが投稿を編集できるようにする
  - ユーザ向け
    - ダッシュボードからどうブロックエディタで編集するか
  - 開発者向け
    - ブロックエディタのテンプレート構築方法

スタティック（静的）なWebサイトを構築する方法

HTMLの作成

最もミニマムなHTMLのコードは次の通り

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Document</title>
</head>
<body>
  Test.  
</body>
</html>

↑のコードを動かすと次の通り

タグと要素

<body>タグ内に書いたものが画面に表示される
<div>は開始タグである
</div>を終了タグである
<div>Text</div>テキストを開始タグと終了タグで囲んだものをHTML要素という

ブロック要素とインライン要素

HTML要素にはブロック要素とインライン要素がある
<div><p><h1>はブロック要素である
<span><a>はインライン要素である
ブロック要素とインライン要素を並べて書くとレイアウトに次のような差が生じる

ページ遷移

このような2つのページがあるとする

index.html, index2.htmlにaタグを次のように用意すると、ページ遷移できる

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Document</title>
</head>
<body>
  <h1>Page1</h1>
  <div>block</div>
  <div>block3</div>
  <div>block4</div>
  <span>block5</span>
  <a href="index2.html">go to index2.html</a>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Document</title>
</head>
<body>
  <h1>Page2</h1>
  <div>block</div>
  <div>block3</div>
  <div>block4</div>
  <span>block5</span>
  <a href="index.html">go to index.html</a>
</body>
</html>

動作イメージは次の通り

ホスティング

<div><span><a>があれば、とりあえずサイト作れる
作ったサイトをインターネット上へ配置などしないと、アクセスできない
配置するには、サーバを借りるか、自分のマシンをインターネットに公開する必要になる
自分のマシンをインターネットに公開するのは危険なので、サーバを借りるのがよい
最も安価にサーバを借りるのであれば、レンタルサーバがオススメ
- 従量課金制と月額課金制のサービスがある
例：さくらのレンタルサーバ | 高速・安定WordPressなら！無料2週間お試し https://rs.sakura.ad.jp/

CSS

<style>タグを利用して表示スタイルを変更できる
スタイル変更のためには、何を、どうするという2つを指定する必要がある。
何を→セレクタ
どうする→プロパティ

<style>
  h1 {
    color: red;
  }
</style>

セレクタ

要素の指定方法
要素名で指定する場合：h1{}, div {}, span {}
要素のidで指定する場合：#title, #section1, #text1
要素のclassで指定する場合：.title, .section, .text
その他：div > div > .text

失敗例

styleを当てたいところ以外にも当たってしまう

成功例

div > div > .textにすることで当てたい部分だけstyleを当てる

プロパティ

いろいろある
MDNをみるといい
CSS リファレンス – CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/Reference

JavaScript

JavaScriptはブラウザ上で動作できるプログラミング言語
DOM操作によってWEBサイトの内容を動的に変更したり、クリックなどのイベントを発生させるのに使うことができる
<script>タグを利用してJavaScriptのコードを実行できる

例えばこんな感じ

実行すると、「div > div > .text’」のセレクタに対応する要素が’hoge’になる

サンプルコードは以下（動作は全部同じ）

<script>
  let val = 'hoge';
  alert(val);

  let elm = document.querySelector('div > div > .text');
  elm.innerHTML = val;
</script>

<script>  
function main() {
    let val = 'hoge';
    alert(val);

    let elm = document.querySelector('div > div > .text');
    elm.innerHTML = val;
  }
  main();
</script>

<script>
  const main = () => {
    let val = 'hoge';
    alert(val);

    let elm = document.querySelector('div > div > .text');
    elm.innerHTML = val;
  }
  main();
</script>

動作イメージは次の通り