こんにちは!ナガタロックです!
このブログでは2020年6月より
RaiseTech 〜WordPress副業コース〜
を受講し、プログラミング超初心者の著者の成長の記録や感じた事を記録して行ってます。
第13回目の今回は
静的サイトをWordPressテンプレート、テンプレートタグを用いて実装
です!
簡単にいうとhtmlで作った静的サイトをWordPressの動的サイト(PHP)に
移行しましょうということ。
静的サイトというのは、htmlで作るサイトのことで、
基本的に開発者がいじらない限りはページは更新しない。
動的サイトは、見る度に最新の情報が表示されたり
ユーザー毎に表示される内容が違ったりといった特徴。
このコースのメインの目的はこの動的サイトの代表格
WordPress
の習得を目指しています。
段階を踏んで課題に取り組んでおり
大きな流れとしては
①用意された静的ページのデータを説明書のまま動的ページに移行する
②AdobeXDでデザインされたページをhtml化
③htmlにコーディングしたものを、WordPress化していく ←イマココ
となります。
①の頃は、見よう見まね、操り人形のごとく課題に取り組んでいたが
③の頃には、①でやっていた事の意味がわかるという
非常に理にかなった課題の流れ
となっています。
課題に取り組むにあたり、現場で使われている
GitHubやFLOCSS設計なども用いながら進めるので
学習しながら実際の現場に必要なスキルも学ぶという
特盛つゆだくなコースとなっております。
1.テーマディレクトリを作成し、静的ファイルを移動
2.LocalのWordPressの管理画面で起動
3.外観>テーマからエラーをチェック。
index.htmlをindex.phpに変更し、テーマを有効化する。
各コードを抜き取り、それぞれに「○○○○.php」ファイル化。
<?php wp_head(); ?> …ヘッダーに記述
<?php wp_footer(); ?> …フッターに記述
<?php wp_sidebar(); ?> …サイドバーに記述
各ページで共通で使えるパーツを抜き取り、
別ファイルで保存をする。
(課題のハンバーガーサイトでいうとarchive.phpやsearch.phpのページ)
get_template_part()を使ってパーツを呼び出す。
add_theme_support() …テーマに必要な機能を有効化するための関数
必要な機能を設定し、アクションフックにて実行する。
アクションフック add_action() …WordPressが行う処理の節目で
独自の関数を実行できる仕組みのこと
remove_filter() …WordPressのもつ機能をfilterを通して上書き
フィルターフック add_filter() …WordPressが行う処理の内容を部分的に置換
アクションフック、フィルターフックは多数存在する。
それぞれCODEXを参照しよう!
wp_enqueue_style() …CSSの読み込み
wp_enqueue_script …JavaScriptの読み込み
それぞれ記載し、読み込んであげる
様々な投稿データのテストが出来るので、品質の担保につながるので
テーマを設定する際は利用しよう!
これもCODEXよりダウンロード!
本当に世界中の開発者達に感謝とリスペクト!
index.php …テンプレファイルが存在しない場合に呼び出される
front-page.php …トップページの表示
single.php …投稿ページの表示
page.php …固定ページの表示
archive.php …一覧ページの表示
search.php …検索結果ページの表示
404.php …コンテンツがない場合に表示(404エラー)
サイトのタイトル …blog_info(‘name’);
サイトの説明 …blog_info(‘description’);
検索ボックスの設置 …get_search_form()
ループ処理 …
条件分岐 …閲覧しているページによって見た目を変える
YATさんおすすめプラグインWP-PageNavi
管理画面から出力されるものを設定し、見た目はCSSで実装をする。
・ファビコン …ブラウザのタブ部分に表示される画像
・screenshot.png …テーマ選択時に表示される画像。テーマディレクトリの直下に保存すること
・SNSや投稿時に表示される画像など、他にも必要なファイルがあれば用意して
テーマで読み込む。
※とにかく検索しよう!
・テンプレファイル、タグをたくさん知ることでWordPressの開発は早くなる
・実装したいものがあるなら「キーワード+WordPress」などでググろう!!
・作れば作るほどに開発は早くなる!理解したものは自分用にメモしよう!!
必要なテンプレファイルが抜けたりしていると、表示されるのがindex.php。
逆に表示されないようにチェックをしよう!
そもそもindex.phpファイルがないとテーマ開発が出来ないので、
保険的なページの役割の側面もある。
AdobeCC…デザインをするうえで必須
Parallels…MacでWindowsを実行する。無料のソフトもあるが、これは動作が軽い
Transmit5…ファイル転送サービス
グーグルフォト…有料版だち元画像サイズのまま保存・管理が出来る
Microsoft365…Microsoftのソフト群。クライアントの対応で必要なことが多い。
文賢…ブログや記事の文章のチェックをしてくれるサービス
A. 様々な原因が考えられるが、スペルミスはなさそうでよくある原因。
「自分を信じない」こと!!(;・∀・)ドキッ
A. ソースコード的には画像データは1枚のほうが、スマートなコードだが、
必要サイズに応じた画像サイズの物をそれぞれ用意したほうが、
サイトは軽くなって表示がスムーズに行く場合がある。
A. 楽しむこと!やりたいことを見つけること!
1番の敵は「面倒」という気持ち(;´Д`)
小さいことでも自分で自分を褒める!
モチベーションの維持にも効果的(●´ω`●)
残す講義も今回を入れてあと4回。
学習の内容もかなり終盤にきていて、
1番の山場がこの静的サイトのWordPress化!
僕個人としては、静的サイトのコーディングや
jQueryの理解や技術がまだまだな感じで、
WordPress化までたどり着けていないのが現状です。
静的サイトのコーディングに関しては、
以前よりも調べ物をする時間が減ってきたことは
自分の実感として持てているので、
スピードは早くないですが、
自分も少しずつ前に進んでいる!
と実感を持ちながら継続をしていきたいと思います。
周りや上を見たらキリがないですから(;・∀・)
Twitterをやっているとすごい人がいくらでも出てきますし、
RaiseTech内にもたくさんいます!
同期組にもなんと案件をとられた方が出てきました!!
Uさんおめでとうございます\(^o^)/
そういう方々から刺激はしっかりもらいながら
焦りはもらわずにこれからも
とにかく継続!学習をやめない!
をモットーに進んでいきます!
RaiseTechの講義期間は約4ヶ月ですが、
Slack内でのやりとりは継続して出来るので
技術的なことだけでなく、実案件の相談や
コミュニケーションもとることができるのも
RaiseTechの魅力の一つだと最近特に実感しています。
ちなみに自分の学習状況を分析してみると、、
RaiseTech受講の条件として
学習時間300時間確保出来ること!
があります。
これは適切な条件だと感じています。
元々プログラミングスキルはまったくの0からスタートし
毎日学習記録をつけていますが、
現在学習4ヶ月目に入ったところで約170時間。
このペースで、4ヶ月終了したと想定すると200時間ちょっと?
条件に対して、3分2の程度の時間です。
この学習時間の不足が現状の課題の遅れとほぼほぼイコールなのかなと。
学習を積み重ねていくうちに
最初は現実味のなかった課題目標も
おぼろげながら先がイメージ出来るようになってきています!
少しずつ感じ始めている
「成長を実感する気持ち」
を大事にしながらとにかく継続!
あと講義の感想ですが、ここ何回かの内容は
技術的な話だけじゃなくて、
ビジネスとは?!や仕事への姿勢や取り組み方等など
面白い話題が色々と飛び交っています。
自分も含めて、最初より固さが取れてきたのか
すごく良い雰囲気の講義となっています。
YAT先生も講義内容を常に考えたり工夫してくれていたりするので
内容もアップデートされているように感じます。
そういったアップデートが最初から反映される
これから入校する生徒さん達はよりお得です!羨ましい!
そしてそんな楽しい講義も残すところあと3回で
とても寂しい…(´;ω;`)ブワッ
最後まで1分1秒を無駄にすることなく
最後まで講義を受けましょう!!
そしてRaiseTechが気になるという方は
是非公式サイトより無料体験会or受講のお申し込みを(●´ω`●)