【RaiseTech】超初心者が1から学ぶプログラミング記〜その13〜

公開日:2020/9/9 最終更新日:2021/2/20

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

このブログでは2020年6月より

RaiseTech 〜WordPress副業コース〜

を受講し、プログラミング超初心者の著者の成長の記録や感じた事を記録して行ってます。

このブログでは

・学習の記録

RaiseTechの学習内容

RaiseTechを受けて感じた事

をまとめています

第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よりダウンロード!

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

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

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」などでググろう!!

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

質疑応答

Q
index.phpファイルには何を記載するのか?
A

必要なテンプレファイルが抜けたりしていると、表示されるのがindex.php。
逆に表示されないようにチェックをしよう!
そもそもindex.phpファイルがないとテーマ開発が出来ないので、
保険的なページの役割の側面もある。

Q
YAT先生オススメ&必須のサブスク
A

AdobeCC…デザインをするうえで必須
Parallels…MacでWindowsを実行する。無料のソフトもあるが、これは動作が軽い
Transmit5…ファイル転送サービス
グーグルフォト…有料版だち元画像サイズのまま保存・管理が出来る
Microsoft365…Microsoftのソフト群。クライアントの対応で必要なことが多い。
文賢…ブログや記事の文章のチェックをしてくれるサービス

Q
WordPressにおいてCSSが反映されない!
A

A. 様々な原因が考えられるが、スペルミスはなさそうでよくある原因。

「自分を信じない」こと!!(;・∀・)ドキッ

Q
同じ画像を色々なサイズで使い回す場合、画像データは1枚だけ用意するほうがいいのか?
A

A. ソースコード的には画像データは1枚のほうが、スマートなコードだが、

必要サイズに応じた画像サイズの物をそれぞれ用意したほうが、

サイトは軽くなって表示がスムーズに行く場合がある。

Q
精神的に心がけていることは?
A

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受講のお申し込みを(●´ω`●)


ABOUT US

この記事を書いた人

ナガタロック

このサイト作成者の写真

アパレルメーカーに勤める30代男
2020年より「RaiseTech」にてプログラミング学習を開始
講義内容の学習記録
副業に関する情報を発信しています

  • カテゴリー