4月29日：カウントアップ・サムライ教材WP

先生からのアドバイス。

エンジニアの仕事をしていこうと思えば読書が大切。

本の紹介：

CSS設計完全ガイド ~詳細解説+実践的モジュール集 

https://www.amazon.co.jp/CSS%E8%A8%AD%E8%A8%88%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89-%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC-%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E9%9B%86-%E5%8D%8A%E7%94%B0-%E6%83%87%E5%BF%97/dp/429711173X/ref=pd_bxgy_img_3/357-9906315-5425466?_encoding=UTF8&pd_rd_i=429711173X&pd_rd_r=87948ba8-7ede-4593-9713-c7e65a192ef6&pd_rd_w=pQJwv&pd_rd_wg=UQ340&pf_rd_p=105d6769-bacf-43d4-85ea-a25cec858a3c&pf_rd_r=WRA7QKHZMV43C6Y3832G&psc=1&refRID=WRA7QKHZMV43C6Y3832G

 

 

カウントアップ

サムライ教材WPを参考にしながら、カウントアップを記述。

<body>
<span class="counter">1,234,567</span>

<script>
jQuery(document).ready(function ($) {
$('.counter').counterUp({
delay: 10,
time: 1000
});
});
</script>
<script src="jquery.counterup.min.js"></script>
</body>
 
でも数字が動かず。何度参考ページと照合わせても違いがわからない。
ずっと考えていたが、時間が勿体無いので先生に質問。
先生からのアドバイス：文は上から読まれるもの
　　　　　　　　　　：ライブラリよりコードが先に読まれている。
 
WP大学サイト
テーマの作成。
・WPで作成するWebサイトでは、複数のページに共通する箇所はテンプレートファイルにまとめておいてそれを使い回すことが可。
 
テンプレート階層ではルーティングが決定される。
「このURLにアクセスされたときはこのファイルを表示してください」というルール。
https://your_domain/news/456というように、WordPress側で自動的にURLを決定。
表示の優先順位の決定。
 
index.phpからheader.php 、front.php、footer.phpにファイル分けて
<?php get_footer(); ?>
指定されているところに設定。他同様。
またstyle sheetには
<?php echo get_template_directory_uri() ?>
を記述してダッシュボードからサイト表示してみたら、全ての画像が反映せず？？？
何か違うことしたかな？教材文をよく見てみると、画像ファイルにも
<?php echo get_template_directory_uri() ?>
を相対パス前に記述しなければ。
これで教材通りできた。

f:id:hinairo:20210430000938p:plain

xdでcherimoのロゴ作成

f:id:hinairo:20210430012052p:plain

あとは文字のみ。