こんにちは！ナガタロックです！

このブログでは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に変更し、テーマを有効化する。

共通パーツ化

header,footer,sidebarをテンプレ化

各コードを抜き取り、それぞれに「○○○○.php」ファイル化。

<?php wp_head(); ?>　…ヘッダーに記述
<?php wp_footer(); ?>　…フッターに記述
<?php wp_sidebar(); ?>　…サイドバーに記述

パーツ単位の共通化

各ページで共通で使えるパーツを抜き取り、

別ファイルで保存をする。

（課題のハンバーガーサイトでいうとarchive.phpやsearch.phpのページ）

get_template_part()を使ってパーツを呼び出す。

functions.phpによるテーマ設定

テーマの設定

add_theme_support()　…テーマに必要な機能を有効化するための関数
必要な機能を設定し、アクションフックにて実行する。

アクションフック add_action()　…WordPressが行う処理の節目で
独自の関数を実行できる仕組みのこと

remove_filter()　…WordPressのもつ機能をfilterを通して上書き

フィルターフック add_filter()　…WordPressが行う処理の内容を部分的に置換

アクションフック、フィルターフックは多数存在する。

それぞれCODEXを参照しよう！

外部ファイルの読み込み

wp_enqueue_style()　…CSSの読み込み

wp_enqueue_script　…JavaScriptの読み込み

それぞれ記載し、読み込んであげる

投稿データのインポート

テーマユニットテストデータ

様々な投稿データのテストが出来るので、品質の担保につながるので

テーマを設定する際は利用しよう！

これもCODEXよりダウンロード！

本当に世界中の開発者達に感謝とリスペクト！

テンプレートファイルの用意

テンプレートタグや関数を使って実装する

サイトのタイトル　…blog_info(‘name’);

サイトの説明　…blog_info(‘description’);

検索ボックスの設置　…get_search_form()

ループ処理　…

条件分岐　…閲覧しているページによって見た目を変える

プラグインを利用してページネーションを実装

ページネーションを簡単に実装できる

YATさんおすすめプラグインWP-PageNavi

管理画面から出力されるものを設定し、見た目はCSSで実装をする。

必要ファイルの用意

まとめ

・テンプレファイル、タグをたくさん知ることでWordPressの開発は早くなる

・実装したいものがあるなら「キーワード＋WordPress」などでググろう！！

・作れば作るほどに開発は早くなる！理解したものは自分用にメモしよう！！

質疑応答

本日の感想

残す講義も今回を入れてあと４回。

学習の内容もかなり終盤にきていて、

１番の山場がこの静的サイトのWordPress化！

僕個人としては、静的サイトのコーディングや

jQueryの理解や技術がまだまだな感じで、

WordPress化までたどり着けていないのが現状です。

静的サイトのコーディングに関しては、

以前よりも調べ物をする時間が減ってきたことは

自分の実感として持てているので、

スピードは早くないですが、

自分も少しずつ前に進んでいる！

と実感を持ちながら継続をしていきたいと思います。

周りや上を見たらキリがないですから(；・∀・)

Twitterをやっているとすごい人がいくらでも出てきますし、

RaiseTech内にもたくさんいます！

同期組にもなんと案件をとられた方が出てきました！！

Uさんおめでとうございます＼(^o^)／

そういう方々から刺激はしっかりもらいながら

焦りはもらわずにこれからも

とにかく継続！学習をやめない！

をモットーに進んでいきます！

RaiseTechの講義期間は約4ヶ月ですが、

Slack内でのやりとりは継続して出来るので

技術的なことだけでなく、実案件の相談や

コミュニケーションもとることができるのも

RaiseTechの魅力の一つだと最近特に実感しています。

ちなみに自分の学習状況を分析してみると、、

RaiseTech受講の条件として

学習時間300時間確保出来ること！

があります。

これは適切な条件だと感じています。

元々プログラミングスキルはまったくの０からスタートし

毎日学習記録をつけていますが、

現在学習4ヶ月目に入ったところで約170時間。

このペースで、4ヶ月終了したと想定すると200時間ちょっと？

条件に対して、3分2の程度の時間です。

この学習時間の不足が現状の課題の遅れとほぼほぼイコールなのかなと。

学習を積み重ねていくうちに

最初は現実味のなかった課題目標も

おぼろげながら先がイメージ出来るようになってきています！

少しずつ感じ始めている

「成長を実感する気持ち」

を大事にしながらとにかく継続！

あと講義の感想ですが、ここ何回かの内容は

技術的な話だけじゃなくて、

ビジネスとは？！や仕事への姿勢や取り組み方等など

面白い話題が色々と飛び交っています。

自分も含めて、最初より固さが取れてきたのか

すごく良い雰囲気の講義となっています。

YAT先生も講義内容を常に考えたり工夫してくれていたりするので

内容もアップデートされているように感じます。

そういったアップデートが最初から反映される

これから入校する生徒さん達はよりお得です！羨ましい！

そしてそんな楽しい講義も残すところあと3回で

とても寂しい…(´；ω；｀)ﾌﾞﾜｯ

最後まで1分1秒を無駄にすることなく

最後まで講義を受けましょう！！

そしてRaiseTechが気になるという方は

是非公式サイトより無料体験会or受講のお申し込みを(●´ω｀●)