本記事では前回に引き続き初週の課題制作の学習を記録しています。
RaiseTechのWordPress副業コースが気になっている方やプログラミングスクールってどんな感じなのか気になっている方は是非参考にしてもらえると嬉しいです。
[PR] 筆者が受講しているスクールはこちら
RaiseTechはAWS・Java・副業・デザインに特化し現場レベルの学習ができるエンジニアリングスクールです。カリキュラムはもちろんあらゆるサポートが充実していることも特徴の1つです。
前回までの進捗状況
・テーマ有効化したもののフロントスタイルがお手本と異なりすべてリセット
・VS Codeの「PHP実行可能ファイルが…」のファイルを指定
・VS Code更新エラーを再インストールで解決
ということで今回はLocal環境構築からリスタートしどんどん進めていきます！
RaiseTech課題制作
WordPressにテーマを反映
このシリーズを読んでいただいている方にとっては再放送かな？と思う描写が冒頭続きますがご容赦ください…
まずはLocal by Flywheelダウンロード
▼
左下「＋」からサイトを作成
▼
ADMINボタンから管理画面へ入ります。
ここから前回5時間かかったテーマを外観 > テーマに反映し有効化する作業へ取り掛かります。
拡張子htmlファイルをphpにリネーム…
style.cssを作成、コメント入力…と。
管理画面 > 外観 > テーマ へ移動すると、
ありましたね。反映はできたようです。
問題はお手本通りのスタイルになっているかですね…
できてます！
良かったんですけど逆に前回は何が足りなかったのかなと少しモヤモヤが残ります(笑)
ま、ひとまず基盤はできました。
ここから中身をいじっていきましょう！
WordPressテンプレート化
テーマを作るうえでは必須の作業になります。
テンプレート化を行えばどのページに飛んでも表示させたいパーツを数行で表示させられますし変更も元を変えるだけで反映できるので管理も簡単になります。
難しい作業にも見えましたが実際コピペ＆コピペでできてしまったんですね。
書かれている手順通りに行っているので詳しい中身の部分は理解していなかったのは秘密ですが…
特にエラーが出ることもなくテンプレート化はクリアです。
header.phpとindex.php編集
この部分は「書き換えてくださいねー」「消してくださいねー」という感じでコードは提供してもらえたのでコピペで乗り切りました。
コードはとても複雑で何を意味しているんだか当時は全然わかりませんでした(笑)
コードの意味を理解して実装できるようにするには実際に自分でテーマを開発するしかないのかなと思います。
読む→コード修正→読む→コード修正…
の末に出来上がったのが
それっぽくなってきましたね！
お手本とも同じだったのでばっちりです。
sidebar.phpとfooter.php編集
この2つに関しては分からない表現や言葉もすぐに解決できたのでいつも通りのコピペでクリアしました。
素人の私の大まかな理解的にはindex.phpやそこから切り取った先のファイルに機能を増やしたり読み込むコードを書こう！という作業ですね。
これまでにはついていなかった機能をコードを書いてつけていくんですがコンピュータってすごいなと終始感心していました。
PHPを理解しきれていないので実装するのは今はできないのですがいずれ何も見ないで書けるようになりたいですね…
ここまででindex.php周りの編集は一旦終わりです。
サイトはこんな感じです。画像を入れると一気におしゃれになりますね。
single.php編集
上の項目まででindex.php周りの作業がひと段落しsingle.phpの方の作業へと移ります。
まずはindex.phpでも行ったテンプレート化ですね。
手順は同じですがコピペではなく該当部分をファイル読み込みに書き換えるだけでＯＫ！
ここまでは復習を兼ねてということですぐにできたのですが、次でつまづいてしまいました。
参考にしているサイトではループ処理のコードがザザァーと書いてあったのですが
どこに入れるの？このコード…。もしかして全書き換え？
また憶測で実行してリセットになるのは勘弁なのでチャットで先輩受講生の質問を検索🔍
分かったこと
・どうやら全部書き換えではない
・ブログを読み進めていくとヒントがあるみたい
ということで1度読み進めてできるところから実行することに…
読み進めてできたこと
・editor-style.cssを追加しインポート
・functions.phpに認識させる
なんだ読み進めるとできるところあるじゃんと次に進むと
「コードをループ内に書いてください」
とのこと。・・・？？
PHP触ったことないからわかんないよ…
「ループ内に移動」で検索しましたがパっとわかる情報は得られず…
ということで、
YouTube！
初心者向けにPHPの文法などを解説している動画を見ていましたがこちらもイマイチぱっと来ず。
そこで今までコピペをしてきた他ファイルのPHP部分を見直してみたんですね。
何となく共通点を見出した中での結論がこちら
ループの中に移動とは（私の雑な解釈）
<?php endwhile; の前に全部ぶっこめばＯＫ！
全くひどい解釈ですが解決はしてます(笑)
「ループ内に含める」という意味がわかったらあとはお手のものでした！
お得意のコピペです。そして
ページングとコメントをつけることができました。
最後に
2日目と3日目はコピペ、コピペの作業でした。
お手本通りにはできるけどコードの意味の理解はまだまだ浅いですね…
この辺の理解はテーマ制作2週目と現在取り組んでいる勝手にテーマ開発で理解してスラスラできるようにします…！！
初週、プログラミング学習に取り組んでいたのは3日間、約10時間半でした。
4ヵ月で300時間、つまり1週間で約19時間計算なのでまだまだですね。
次週以降もコツコツ記録していきます。（備忘録感満載ですが…）
コメント