画像ファイルのパスの修正

cssと同じようにimgとbackgroundの箇所にphp文を追加で記述しリンク設定

＊スペルミス発生していたので注意（？の記述もれ）

f:id:hinairo:20210408070803p:plain

タイトルも修正

f:id:hinairo:20210408073344p:plain

テーマの作成についてアップロード方法まとめ

1.フォルダを作成　名前は[bistro calme]

2.前日にしたサンプルindex.htmlをindex.phpに変換、上記のようにリンク設定をする(＊ファイル名をbistroccalme.phpにしていたのでアップされなかった原因となったので注意)

3.style.cssにテーマの記述項目を記述。(＊記述もれ有り、注意)

4.index.phpとstyle.cssを作ったフォルダに入れる。

5.フォルダをwp-contentのthemesに入れる。

以上でダッシュボードのテーマを見ると反映されていた。

またうまく反映できず困っていたので、youtubeをみていると、上記4の後にフォルダを圧縮してダッシュボードのテーマで追加して手動でアップロードできる模様。

こんな簡単なことなのに手こずった。あースッキリした。しっかり理解することが大事。

f:id:hinairo:20210408181047p:plain

反映されたテーマを有効化してサイトを表示させようと思ったが結果背景真っ白。

なんじゃこら。。。

f:id:hinairo:20210408181713p:plain

cssの読み込み<link href="http://localhost:10013/wp-content/themes/bistro-calme/assets/css/styles.min.css" rel="stylesheet">

タイトル<title>BISTRO CALME </title>

は教材通りとなっている。

先生に質問してまた明日やろう！！

2021-04-08

4月7日 wordpress教材

wordpress教材

○1-2　設定

一般設定

・ダッシュボードの設定からサイトの基本設定タイトルとキャッチフレーズを設定

・メンバーシップにチェックを入れるとコミュニティを作ることができる

f:id:hinairo:20210407232433p:plain

メディア

・画像をアップロードした際に生成する画像サイズの上限設定。小・中・大と設定できるが、例えば中サイズの上限設定幅を600×高さ400にした場合で同じサイズの画像をアップロードした際にはそれ以上のサイズは生成できない。それ以下のサイズならば生成できる。

f:id:hinairo:20210407232442p:plain

パーマリンク設定

パーマリンクとは、ウェブサイトの各ページに対して個別に与えられているURLのことです。つまりURL自身のことになります。パーマネントリンク（Permanent Link）の略で、ページが増えても恒久的に変わることのないリンクであることから、固定リンクとも呼ばれます。

パーマリンクの意味と決め方を知ろう｜WordPressでの設定方法も解説｜アクセス解析ツール「AIアナリスト」ブログ

構造化されたURLを生成できる

f:id:hinairo:20210407232452p:plain

1-3

○記事の投稿

投稿のカテゴリーで追加する際、サイト上に表示される『名前』、その名前のURLに適した形式の名前の『スラッグ』の入力(英語とハイフンのみ)

最初は未分類の名前があるのでそれを変更し、名前はお知らせ、スラッグはnewsとした f:id:hinairo:20210407232545p:plain

投稿画面のツール設定で教材ではオプション設定できるみたいだが、オプションが出てこないのでスルー。

・記事の投稿

・記事のタイトルと本文と入力。

・カテゴリーを選択（お知らせにチェック）。

・下書き保存してパーマリンクのURLの設定をhello-wordpressと入力。

f:id:hinairo:20210407232249p:plain

・公開設定。ステータスと公開状態にて下書き状態で保存できたり、公開時間の予約設定できる。

f:id:hinairo:20210407232307p:plain

・公開するを選択してパーマリンクの確認。

f:id:hinairo:20210407232322p:plain

○ブロックエディターの使い方

上からタイトル・見出し・段落・段落・画像・段落のようにさまざまな機能を使って

本文の作成できる。

・画像ブロックの使い方

左上の＋を押して、ブロックのカテゴリーが出てくるので、画像を選択して教材の画像アップロード。

f:id:hinairo:20210407233907p:plain

アップロードして右の欄でサイズ・表示スタイルなどの設定を行える。

画像の下にカーソルを持ってきて＋を押すとブロックの追加ができる。

見出しを選択

f:id:hinairo:20210407234634p:plain

f:id:hinairo:20210407234638p:plain

画像の上に見出しを配置したり文字の大きさを変えたりできる。

1-4　新規ユーザーの登録とwordpressの権限

メンバーの権限グループの設定。

f:id:hinairo:20210407235153p:plain

メンバー登録後一覧で確認できる。 f:id:hinairo:20210407235732p:plain

2-1wordpressのテーマ

どのようにページを表示するかを決めるテンプレートファイルなどwebサイトを表示する為の必要なファイルがまとまってるもの。

有効かされているテーマに合わせてwebサイトを表示

f:id:hinairo:20210408000305p:plain

簡単なテーマの作成

教材サンプルhtml

f:id:hinairo:20210408000739p:plain

これをwordpressのテーマに変更

cssファイルもつくりテーマの詳細を記述

f:id:hinairo:20210408001834p:plain

教材htmlをコピーして新たなフォルダに貼り付けてテーマにはphpが必要なためファイル名の.htmlを.phpに変更

テーマファイルはwordpressのwp-content/theme/~に置かれることになるので、相対パスで記述された画像やCSSがリンク切になってしまうので、phpファイルを開いてheadタグ内にCSSリンク内にパス(get_template_directory_uriを追記。

f:id:hinairo:20210408002358p:plain

先生からのアドバイス

勉強方法について

https://www.miorin-cafe.com/benkyoho-matome/

本の有効活用のため利用方法を見直さないといけない。

2021-04-07

4月6日　wordpress

wordpress

教材の本にそってサイト構築の勉強をする為、新しくサイトを立ち上げた。

画面左下のaddsiteの＋を押してサイト名（smile）、ユーザー名、パスワードの入力を行った。他は何も設定変更せずに流れのままに入力した。

サイトが立ち上がって、ドメイン設定がどうなっているのかを確認しようと思い、wordpressのログイン（admin)をしてダッシュボードから設定を見てみたところ、新しいサイトのアドレスはlocal〜になっており設定しないといけないのかなと思い、一旦localアプリの画面に戻った。
そしてsamuraiの設定を確認しようと思った際にwarnningthis site is wordpress url settings do not match the host set in localが出ており、fixitのボタンがあったのでそれで治るのかなと押してみました。（ここでちゃんと確認して押すべきだったと思いますが、）その後warnningが消えたが、samuraiでログインして設定を確認したところアドレスが以前はhinairoで設定してあったがlocalhostに変わっていた。何がどうなったのかさっぱりわからず。

先生にアドバイスを頂いてlocalアプリだと何も設定する必要がない。またlocalhostについて全然理解できていなかったので先生にサイトを教えてもらいlocalhostとは自分のパソコンの環境内のネットワークのことということが理解できた。

https://wa3.i-3-i.info/word1102.html

次にサーバーの仕組みのサイトも教えてもらった。

eng-entrance.com

結果としてローカルホストとサーバーは全く別環境ということが理解できた。

仕切り直して新しくサイト（サイト名：smile）を追加してダッシュボードを開こうとしたところ502エラーが出た。

f:id:hinairo:20210406233312p:plain

一旦追加したサイトを削除して何か間違ってないのかを調べて、ググったサイト通りにサイト名、ユーザー、パスワードをもう一度サイトを追加してみたがやっぱり同じ表示。

tcd-theme.com

原因わからず。

そのあと同じようにしてwordpressというサイト名で追加してみたところダッシュボードを表示できた

f:id:hinairo:20210407004136p:plain

何が違うのかよくわからず。

また違うサイトdaaaを追加してみた（手順は同じ）すると404エラーが出てきた

f:id:hinairo:20210407005132p:plain

f:id:hinairo:20210407004708p:plain

もうひとつサイトpppを同じ手順で立ち上げてみた

f:id:hinairo:20210407004846p:plain

wordpressログイン画面が出てきた。

いくつか作ってエラーの有無の違いとしてはエラー表示になるのはいつもsitehostがlocalhost10003で表示されるものだがこれは関係があるのか。

2021-04-06

4月5日　html修正(カルーセル、フォーム欄)

html

カルーセル部分のアイコンをXDで作成して反映

f:id:hinairo:20210405195039p:plain

f:id:hinairo:20210405195052p:plain

フォーム入力欄

f:id:hinairo:20210330000825p:plain

人数欄のアイコン部分にbackground-colorとborderがあたっていたので、background-colorを＃fffにしてborderをnoneにしたらアイコン部分のbackgroundが少しフォーム欄から右にはみ出していたが、top と rightの位置を決め打ちしてなんとかうまくごまかせた。レスポンシブデザインにも対応できた。

f:id:hinairo:20210405200032p:plain

f:id:hinairo:20210405200037p:plain

やっと修正できた。だいぶ時間かかった。

2021-04-05

4月4日(授業日)　html修正（カルーセル・入力フォーム）＋AOS追加、XD

html

カルーセル部分修正

f:id:hinairo:20210401231342p:plain

上記のような1行で表示されていたから、カーソルとアイコンが被っていたりした為修正
まず、カルーセルをコピーして貼り付けていた箇所の上にcontainer 、row、colが抜けていたので記述。

次にアイコンと文章をcolで範囲分割した。アイコンの位置が悪かったのでcolにmtをつけたら綺麗に表示できた。

f:id:hinairo:20210405001553p:plain

あとはアイコンのおじいさんを金髪美女に変えるだけ。

フォーム入力部分

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

prepend・・・これでclassを作るとフォーム部分の前にアイコン付け足せる

append・・・これでclassを作るとフォーム部分の後ろにアイコン付け足せる

f:id:hinairo:20210405002428p:plain

　bootstrap用アイコン

https://useiconic.com/open#icons

AOSの追加

メニュー写真欄にAOSの動きの追加

headタグ部分に追加

<!-- aos -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

bodyタグ終わり前に2行追加

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init();</script>

これで用意完了。

次にどんな動きにしたいかを選んでdivタグ内に動きの指示追記

<div data-aos="flip-left" class="lunch">

動くようになった。

f:id:hinairo:20210405003512p:plain

これはクルっと動いている。

サイトでは一貫性を持たすために動きのあるものは同じ動きにするほうがいい。

XD練習追加

f:id:hinairo:20210405003359p:plain

2021-04-04

4月3日：スマイルhtml修正(navbar)、XDの続き

navbarに関して悩んだこと

navのメニュー類を右寄りに映したくてcollapeseの後にjustify-content-endを入力したが、ブラウザにアップしてみると右寄りにならず。

computedをみてみるとmargineが左右に当たっているのでmx-0を入力したが、左のmarginは無くなったが、右は無くならず。

原因は下のnavbarの　mr-autoでmarginが当たっていたのでこれを消すと右寄りになった

<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">

f:id:hinairo:20210403125420p:plain

toggleの色を変更

navを黒くしてるので幅を狭くした際にtoggleの色が黒になっている為、見えなくなるので色を変更。

.navbar-toggler{
border-color: #ffffff;
}
.navbar-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' 
stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' 
d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

これで枠線とtoggle自体の色を白に変更できたが、urlの意味がわからない。

f:id:hinairo:20210403122515p:plain

navbarドロップダウン機能

bootstrap公式サイトからコピぺ

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>