【デイトラ】上級-実践!サイト制作編 vol.1- 学習記録【DAY8~DAY15】

Web制作コース

まお(@mapipi39)です。

この記事ではデイトラWeb制作コースでの学習記録、感想やつまずいた点などをご紹介します。

参考になりましたら幸いです。

尚、今回のセクションは長いためvol.1〜4に分けてご紹介します。

前回の「PHPとSQLの基礎を学ぶ&開発環境編」はこちら。

DAY8【WordPressの基本概念を理解しよう!】

DAY8はWordPressがどんな仕組みで動いているかなどの基本概念について学びました。

今まで作ってきたサイトは静的サイトに分類されるのに対し、WordPressは動的サイトに分類され、表示されるまでの仕組みが少し異なります。

階層が難しそう

WordPressにはテンプレート階層というものがあり、ファイル名のルールなどが決まっています。

このような階層の概念が今までの学習では出てこなかったため、慣れるのに少し時間が必要そうだと感じました。

わからないことは引き続き調べながら解決するのみですね。

DAY9【WordPressテーマの初期設定+テンプレートファイルを作成する】

DAY9はテーマの初期設定〜テンプレートファイルの作成までを学びました。

また、デイトラでは触れないような内容まで体系的に学べるおすすめ書籍の紹介や、自作テーマ作成の流れの紹介もありました。

関数と仲良くしたい

PHPはSassと同じようにファイル分割ができるのは便利ですね〜

そしてWordPressでは関数がめちゃくちゃ出てくるそうで。

関数を完璧に覚える必要はなく、都度調べて使えたら良いとのこと。

ここでも「ググり力」が試されますね。

WordPressで使う関数たちは英語の意味で考えると大体そのまま役割を表しているので結構わかりやすいなっていうのが第一印象です。(get_header(); など)

DAY10【トップページに新着記事の一覧を表示する】

DAY10は新着記事一覧を表示させる方法と、記事数に合わせたページネーションを表示させる方法について学びました。

記事複製用プラグインが便利

記事複製用プラグイン『Yoast Duplicate Postというプラグインをインストールしておくと、記事一覧ページで記事にホバーすると「複製」ボタンが表示されるようになり簡単に記事を複製できます。

今まで使ったことがなかったのですが、当ブログでも活用することにしました。

ループによって記事出力させる

トップページでは新着記事を記事数分表示させるという処理を行いました。

ここからはキーワードが提示され、各自で調べるようにとのことでしたので調べながら進めていきました。

その中でも「メインクエリ」とはなんぞ??と思いcodex外でも調べました。

WordPressではURLによって、そのURLに対応する記事をデータベースから取得してます。このURLによって決定されるクエリのことを「メインクエリ」と呼びます。

WordPressループは、メインクエリで取得した記事の数だけ繰り返されます。

WorePressループによる記事出力(メインクエリとサブクエリ)

このようなワードについての詳しい説明はデイトラでは割愛されていますので、ワードプレスについて体系的に学べる書籍が一冊あると良いなと思いました(購入しました)。

都度関数を調べていく

前述の通り、詳しい説明は各自で調べることが前提で進みますので、キーワードは毎度関数リファレンステンプレートタグなどで調べながら進めました。

そのままコピペだけでは自分で使えませんし。

本当に様々な関数やタグが用意されていて便利な反面、使いこなせるまでは大変そうです。

DAY11【メニューを有効化して、リンクを動的に出力する】

DAY11はリンクを動的に出力する方法を学びました。

管理画面で設定できるようになる

HTMLでメニューを設定してしまうと管理画面からメニューを追加・編集ができなくなってしまいます。

動的に出力することで管理画面から「どのページをメニューに出力するか」を選べるようになるので、クライアントにとってWordPressは今後の運用がやりやすいのかなと感じました。

演習問題もクリア

解説ではヘッダーメニュー・ドロワーメニューの紹介のみでフッターは演習問題となっていました。

同じ要領で進めると問題なくフッターメニューを表示させることができました。

Mao
Mao

難なく表示されると嬉しいものです。

DAY12【フックを使ったカスタマイズを覚える+アーカイブページを作る】

DAY12はフックの使い方を学びました。

フックを使うと大元のファイルを変更せずにカスタマイズを行うことが可能です。

また、アーカイブページや各種一覧ページの作成も行いました。

一覧ページの呼び出しに苦戦

一覧ページの呼び出しには少々苦戦しました。

URLが間違っているのか、自分のファイル側が間違っているのかわからなかったので…

各種URLの呼び出し方がデイトラの「よくある質問」にあったので解決しました。

詰まったら階層をチェックする

真っ白な表示になってしまったら、今どのテンプレートが適用されているのかをまずチェックすると解決の糸口が見つかりそうですね。

テンプレートがそもそも間違っていれば正しく表示されることはないですし、テンプレートが合っていればファイルの中身の問題を疑うようにします。

DAY13,14【single.phpを編集して投稿ページを作る】

DAY13,14は投稿ページの作成を学びました。

アイキャッチ設定が表示されない

いきなり最初で詰まりました。

アイキャッチの設定項目が出てこないのです…

テーマ内でも有効になっているはずなのに…

Slackの質問で探していると、なんと必要なファイルを消してしまっていたことがわかりました。

テーマとして読み込ませるstyle.css(テーマフォルダ直下に作成)
サイトのスタイルを当てるstyle.css(cssフォルダ内)

style.cssは2つ必要だったのに、テーマとして読み込ませる方を削除してしまっていたのでした…

演習問題は少し苦戦

演習問題として「関連記事を条件付きで実装する」という課題がありました。

実際調べれば実装方法は載っているものの、自分で使いこなせるものは少なく…

実力不足な時あるあるな気がします。

WP_Queryを使用した方法、ファイルを分けて実装する方法が多かった感じがします。

デイトラの回答例のものが一番しっくりきたのですが、WP_Queryも使えた方が良いのだろうか…

DAY15【固定ページを作る+サイトの保守性を高める】

DAY15は固定ページの作成と、関数を使いまわして保守性を高める方法を学びました。

自作の関数に慣れてきた

各ページで使っている関数を使いまわせるよう、function.phpで自作の関数を定義しました。

最初はなんのこっちゃでしたが、ググって色んなコードを見ていくうちに何をしているコードなのか理解できるようになってきました。(笑)

デイトラの解答例で修正したのですが、カテゴリー一覧の取得でif文を使ってリンクあり/なしを分けて記述できるのは便利ですね。

これは自分で0から記述できるのだろうか…

いや、自分で頑張ります。

global $post は安全じゃない説

キーワードとして紹介されていた「global $post」ですが、調べていくと「変数であるが故に汚染(意図しない書き換えが)されやすい」と様々なサイトで言及されていました。

対処法としては「$wp_query -> get_queried_object() 」を使う方法が紹介されていました。

内部で$wp_queryを使いますが、関数化し値の取得のみ有効にすると確かに汚染されにくいかもしれません。

まとめ

いやあ、だいぶ頑張りました…

多分。

この8日分でWordPressでの自作関数まで進んだのですから。

進んでない〜って落ち込んだ時は、少し前を振り返ると意外と進んでいることを実感できて、ちょっとだけ前向きになれます。

まあ今は学習段階で、デイトラという素晴らしい教材の通りに進めているから道のりがわかりやすいんだと思いますが。

とはいえ「WordPressを自在に操れるようになりたい」という目標は変わりないので、引き続き頑張ります!

次回は「実践!サイト制作編 vol.2」をレポートします!

コメント

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