プログラミング日記【10ヶ月目第2週】デイトラ40代アラフォー初心者

アフィリエイト広告を利用しています

2024/8/5(月)プログラミング日記

【Web制作コース 276日目】

作業:2時間

作業内容

  1. DAY 9 Tip11
  2. DAY 10 Tips3まで
P上級編を進めるだけ進める
DDAY9 Tip11【演習】サイドバーのファイル分割
 メンターにPHPコードの誤りないか質問
DAY 10 Tips3まで
プラグインの有効化
 表示中のテンプレートを確認できる『Show Current Template』
 記事複製用プラグイン『Yoast Duplicate Post』
CShow Current Template(プラグイン) はMAMPで有効化してたけど、WordPressごとに有効化必要だった
👉LOCALで作成することになったのでLOCALのWordPressにも有効化した
WordPressの記事の一覧を表示させる基本的な構文👉押さえておくこと!(はにわまんさん)👉スニペットに登録!
have_posts👉WordPress内に投稿が歩かないかを判別するもの
<?php while (have_posts()): ?>👉 記事があればループ化させる
公式リファレンスで get_sidebar() を確認しつつ
は sideber.php に記述不要なのか分からない
メンターに質問(この表の下に質問の詳細を載せています)
A
bakushin
bakushin

メンターへの質問の詳細です👇

  • ファイル分割してもサイドバーは読み込まれるが、コードミスはないのか不明
  • ファイル分割してもサイドバーは読み込まれている👉おそらくコードミスもなく正答だろう
  • でも、sideber.phpにも は記述しないと実はいけない。ということはないか確認したい
  • 後々に実は👇の記述がなくてエラーが起きることがないように確認しておきたい
<?php get_sidebar(); ?> 

Perplexityに質問したら、sidebar.php には記述不要と回答があった👉ハルシネーションということも考えてメンターへ質問
メンターの回答👉記述不要なので問題ないと確認

2024/8/6(火)プログラミング日記

【Web制作コース 276日目】

作業:2.5時間

作業内容

  1. 【上級編】DAY 10完了
P上級編を進めるだけ進める
DDAY 10 Tips4-5
スニペット登録
C今日の2Tipsだけで学んだWordPressタグだけでも10タグ弱
なかなかにボリュームすごい🤔
でも構造自体はとてもシンプル
画像で視覚化するとすごく数理的、論理的
構造がシンプルな分、コーディングもやりやすいのでは🤔
; と : の関係の糸口がなんとなく見えてきたような、、、
でも ; も : 一つでも書き間違えるだけでエラーはなかなかに気持ちに堪える
基本だろうから、やっていくうちにもわかっていくはず
DAY10完了!
ADAY11完了させる!
bakushin
bakushin

今日の2Tipsだけで学んだWordPressタグだけでもこれだけ👇

<?php the_title() ?>;
<?php the_excerpt(); ?>
<?php the_time('Y/n/j'); ?>
<?php the_time(‘c’); ?>
<?php
  $category = get_the_category();
  if($category[0]): ?>
   <div class="entry-item-tag"><?php echo $category[0]->cat_name; ?></div><!-- /entry-item-tag -->
  <?php endif; ?>

<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt="">
 <?php endif; ?>
 
<?php the_permalink(); ?>

<?php
echo paginate_links(
 array(
   'end size' => 1,
   'mid_size' => 1,
   'prev_next' => true,
   'prev_text' =>'<i class="fas fa-angle-left"></i>',
   'next_text' =>'<i class="fas fa-angle-right"></i>',
  )
 );
 ?>
</div><!-- /pagination -->
<?php endif; ?>
Screenshot
Screenshot

2024/8/7(水)プログラミング日記

【Web制作コース 277日目】

作業:3.5時間

作業内容

  1. DAY 11 Tips1-2
P上級編を進めるだけ進める
DDAY 11
 Tips1 メニューを有効にするための記述をfunctions.phpに追加
 Tips2 ロゴ / サブタイトルを動的に表示する
スニペット登録
C課題前の演習(ロゴ / サブタイトルを動的に表示する)をクリアできない😱
おそらくここまで学んできたことからすると、シンプルな設定のはず
動画講義を受けながらだとわかるけど、演習になるとムズい💦
中級編でもそうだったけどこういうところをクリアしていくたびにぐんとレベルアップしてるのがわかるから早く理解したい
とりあえず30分は調べたり考えたけど分からない、、確かショーヘーさんが15-30分、自分で調べてわからないならメンターに質問した方が良いとYouTubeで話されていたと思う👉Xのポストも探すとあった
今晩、見返してわからなければメンターに質問しよう🤔
今日も、動画講義までのコードはスニペット登録完了、けっこうこの登録、気持ち良い😊多分、先々の効率性が見えるから
DAY11🔥
ADAY11完了させる!
bakushin
bakushin

今日の2Tipsだけで学んだWordPressのテンプレートタグ👇

wp_nav_menu( )

register_nav_menus()

wp_nav_menu()

is_home( )

is_front_page( )

home_url( )

bloginfo( )

WordPressのメニューを管理画面から編集できるように設定する場合

  1. functions.php で register で登録
  2. 登録した内容をWordPress「外観-メニュー」でメニューを作成する
  3. wp_nav_menu で表示させる
Screenshot
Screenshot
bakushin
bakushin

メンターへの質問👇

bakushin
bakushin

メンターからの回答👇5分で解決しました😅

コードを所定に位置に設定すればよいだけでした、functions.phpに不要な再定義をしたのがエラーの原因だった、、、やっぱりコードを貼るだけだったのか😅

Screenshot

2024/8/8(木)プログラミング日記

【Web制作コース 278日目】

作業:3.5時間

作業内容

  1. 【上級編】DAY 11 完了
  2. 【上級編】DAY12 TIps3まで
P上級編を進めるだけ進める
DDAY11
Tips 2 ロゴ / サブタイトルを動的に表示する
Tips 3 演習課題:フッターに「フッターメニュー」を表示する
DAY12
Tips 1 アーカイブページ(archive.php)の役割をおさらい
Tips 2 投稿のカテゴリーを作る
Tips 3 index.phpと同じ手順でarchive.phpの記事一覧を作る
Cなぜか、カテゴリー名が表示されない🤔今晩再チェック!
👆
45分ほど再チェック👉正解コードと比較しコードに間違いなし、Perplexityにも確認
👇
なんと、、、ただ、URLの最後にスラッグ名を指定していなかっただけだった😅
時間、戻ってこーーーい😅
それでも、やっぱり間違っていなかった!時間をかけた毎日復習、アウトプットしていたことはちゃんと積み重ねっていると再確認
毎日、思うのはアウトプットはけっこう面白くてハマりそうになること
ハマりそうになって時間を必要以上に費やすことには要注意!
昨日のプチ演習を終えた後の演習課題は10分で完了!おさらいしたらすぐクリアできた、デイトラの設定やっぱすごい😳
明日はパンくずリスト!
ADAY12完了させる!
bakushin
bakushin

the_post_thumbnail 

👆(WordPressから記事のアイキャッチ画像を引っ張ってくる関数)🤔 _ でつながってるのはWordPressの関数なのか🤔

で、調べるとWordPressのfunctionって本当にいっぱいあるな〜

Functions | Developer.WordPress.org
Code Reference archive for WordPress functions.

DAY12 MEMO

archive.phpはどんな役割かというと

👉一覧ページを表示するための最もベースになるテンプレート(一覧系テンプレートの大元

Screenshot

2024/8/9(金)プログラミング日記

【Web制作コース 279日目】

作業:2.5時間

作業内容

  1. 【上級編】DAY12 TIps6まで
P上級編を進めるだけ進める
DDAY12
 Tips 3 index.phpと同じ手順でarchive.phpの記事一覧を作る
 Tips 4 パンくずリストを動的に表示する
 Tips 5 表示中の一覧ページ名・説明を動的に表示する + フックを使ってthe_archive_title( )をカスタムする
 Tips 6 演習課題:カテゴリー一覧・日付別一覧を作り、優先表示されてることを確認する
Cカテゴリー名が表示されない👉原因はURL最後にスラッグ名の指定してなし45分返して😂
Tips4と5に主に時間を集中した👉情報量が多い😂
けどめちゃめちゃわかりやすいので、要はどれだけ整理できたか
テンプレート階層で今やっているところはどこなのかきちんと教えていただ絵kるのもデイトラ細やか!
いつもながら画像で視覚的整理 & スニペット登録完了
プラグインが登場すると毎回思うのは「へ〜!」ってこと
デイトラに限らずプログラミング講座だからコードですべて攻めるんだろうなって先入観があるみたい
必要に応じてプラグイン使うところに「ナイス!」って思う
上級編楽しいな〜〜〜!WordPressだからだろうな!ブログしてきたから親和性強い😊
ADAY12完了させる!
bakushin
bakushin

WordPressのコアファイルやプラグインの機能に何か付け足したりしたい👉フックで、コアファイルを直に編集せずに機能をカスタマイズできる😊

WordPressが最も拡張性が高いCMS」と言われる理由👉アクションフック・フィルターフックの仕組みがあるから

【アクションフック】register_sidebarなど

Action Reference – Common APIs Handbook | Developer.WordPress.org
This is a (hopefully) comprehensive list of action hooks available in WordPress version 2.1 and above. For more informat...

【フィルターフック】get_the_archive_title など

Filter Reference – Common APIs Handbook | Developer.WordPress.org
This article contains an extensive (but not 100% comprehensive) list of the filter hooks available for use in plugin dev...
Screenshot
Screenshot
Screenshot
Screenshot

2024/8/10(土)プログラミング日記

【Web制作コース 280日目】

作業:6時間

作業内容

  1. 【上級編】DAY12 完了
  2. 【上級編】DAY13 Tips まで
P上級編を進めるだけ進める
DDAY12
Tips 6 演習課題:カテゴリー一覧・日付別一覧を作り、優先表示されてることを確認する
Tips 7 category.phpを作った途端に画面が真っ白になって困ったという方へ
DAY13-14
Tips 1 目標物の確認
Tips 2 共通パーツ部分を実装する
Tips 3 確認用のテスト投稿を作成
Tips 4 コンテンツ部分を実装する
Tips 5 目次テーブル表示用のプラグイン『Table of Contents Plus』を入れる
Tips 6 タグを一覧表示する
CDAY12👇
date.php の表示確認に1時間超かかった
デイトラの「Web制作コースによくある質問」で調査
CATEGORY、TAGと同じ archive.php のテンプレファイルでも date.php は表示方法が違う
date.php はURLの最後に抽出したい記事の年月日を入れ遷移すると、抽出結果がdate.phpとして表示された
DAY13-14👇
とにかく濃厚!😳
single.php(投稿ページ)に動的な設定をするときも archive.php、index.phpに一覧の設定をするときと似ている(押さえておく!)
archive.php、index.php から single.php(投稿ページ)へphpをコピペすることで対応できる
single.html 👉 single.php へコピー
single.phpの該当部分を各phpファイルからコピペ(静的 ➝ 動的へ変える)
 archive.php (パンくずリスト )
 index.php(get_header、get_footer、get_sidebar)
👆それぞれをsingle.php へコピペ
これで、single.php に付随するものだけ single.php に残る
プラグインも必要に応じて使うのはナイス!とにかく楽しい😊上級編🙌
『Table of Contents Plus』👉このプラグインにはお世話になっている、デイトラでもお世話になるとは!
基本設定もブログで設定している設定と同じ😊
ADAY13-14完了させる!
bakushin
bakushin

一般論『WordPressにプラグインを入れすぎるのは良くない』
👉確かに入れすぎは良くない

👉テーマに機能を持たせすぎるのも良くない

👉SEO設定や重要な装飾機能をテーマ依存にしてしまうと

👉テーマ変更でそれら全ての機能が失われてしまうので、保守性が低い

bakushin
bakushin

✅WordPressの基本設計に従うこと✅

保守性を優先する機能(テーマを変更した時に消えると困る機能)は、出来るだけプラグイン管理テーマ側ではカスタム用のCSSのみを用意

PHPのバージョンアップや機能に致命的な脆弱性が見つかった場合

👉ビジュアル(テーマ)・機能(プラグイン)に分けて管理

👉リスク分散できる

Screenshot
Screenshot
Screenshot
Screenshot

2024/8/11(日)プログラミング日記

【Web制作コース 281日目】

作業:4時間

作業内容

  1. 【上級編】DAY13 完了
P上級編を進めるだけ進める
DDAY13-14
Tips 7 シェアボタンエリアを表示する
Tips 8 演習課題: single.phpに関連記事を表示させる
CTips 7 シェアボタンエリアを表示する
footer.snsの動きを制御しているのはJavaScript
function.php でJavaScriptはまとめているので追記する
PHP始めてからファイル分割が標準になっているので錯覚してた
👉 JavaScript もPHPファイルに分割するなんて錯覚をもってたみたい😅
👉JavaScript と PHP は別の言語だ😅
footer_sns(Tips 7)は濃厚というよりは、これまでの上級編の整理ができれば理解できる内容だった
Tips 8 演習課題: single.phpに関連記事を表示させる
演習課題は関連画像を表示させること、条件👇
 表示中の投稿と同じカテゴリーに所属する投稿を
 表示中の投稿を除いて
 ランダムに
 サブクエリを使って
 8件表示
関連画像を表示させるのにWordPressの設定もかまうのかと最初は思った👉他のテーマでブログしてたときにかまった記憶があったから
でも、WordPressの外観など設定系を探したがどこにも関連画像の設定項目がないので意外だった
アイキャッチとかみたいにWordPressにもともと実装されてるけどOFFになってるからONに切り替えるようなものでもなさそう
となると、single.php に集中してコード追記するのが関連画像を表示させる方法か
デイトラコンテンツにある通り関連画像の情報はググると情報が多い
ADAY15完了させる!
bakushin
bakushin

WordPressで関連記事を表示させる方法は2つある👆そのどちらもこの記事は詳細に解説してくれてる

  • WP_Query
  • get_posts

この2つで関連画像を表示できる。

今回はWordPressに設定するのでテンプレートタグを使った WP_Query で実装できた

デイトラの解答例を見ると、 get_posts の方で書かれてた😂

とにかく秀逸な参考記事👇

【WordPress】プラグインなしで関連記事を実装する方法を解説
今回はプラグインなしで関連記事を実装する方法をご紹介します。 この記事は以下のようなお悩みを解決できます。 ・関連記事がどんな記事なのかよくわからない ・プラグインを使わないで関連記事を実装する方法を
Screenshot
Screenshot
Screenshot

コメント

タイトルとURLをコピーしました