100.100dayチャレンジ終了
今日は自分が勝手に挑戦していた
「Web制作学習継続100日、ブログ更新継続100日」を達成しました。
今回の記事はこれからWeb制作学習を始める方に向けて、私の学習への取り組みなんかをつらつらと書きます。
少しでも役立つと嬉しいです。
web制作未経験で前知識無し、デイトラを受講
「現場レベルのスキルを学べる・挫折しない」というところがスゴイ面白そうだと思ってノータイムポチリして受講しました。
デイトラ受講時のはじめの説明に、
仕事の「自走力」的な話があって、「たしかに！」となったのを今でも覚えています。ゆくゆく一人でやるのだから、自分で解決する力は大事です的な。
そのとおりだなと思って、なるべく調べて自分で解決しようと決意。
問題が発生したら都度調べて、解決しての繰り返し。
前知識ないので、わからないことだらけでした。
わからない→調べる→わからない→ループ
これが基本、「日常」です。
とは言え、仕事として受けたらこれが普通なんだなとしみじみ実感。
私はブログで「わかってる風」に書いていることもありますが、
最初はわからない状態でそれを調べて記事にしています。
最初の頃とか迷走していて、しかも内容間違っているところもあります。
今でもあるとは思いますが…。
つまずいても進みが遅くても、自分の言葉で書けるくらいになるまで食らいつくのが大切かなと思っています。
仕事と学習の両立
私は産業用ロボットや機械制御(電気)を生業としています。
時期によっては日付が変わることもしばしば。
最初の課題は比較的簡単で苦にならなかったのですが、
中級、上級と級が上がるごとに難易度が増していき、予備知識もないと普通に1日で課題をこなせません。
そして仕事で残業になった時なんとかも全然進まない。
たまにイヤになる時もありました。
でも、「ま、こういう日もあるよね。」
というある種の開き直りで、記事にもよく書いていたどんなに遅くても歩みを止めない
を続けて、100日やってきました。
SNSを見れば、スゴイ投稿ばかり、自分よりできる人ばかりです。
でも、
昨日までの自分と今の自分どっちが成長しているかで見ると、昨日より今日。
今日より、明日の自分。
結局、今、自分にできることをコツコツやれる分だけやるしかないなと思います。
自分の目的地にちゃんと向かっているなら到着する時間が多少前後しても構いませんよね。
学習してきた内容
HTMLとCSS
これをプログラミングと思っていたのですが、違いました。
Web制作の基本中の基本の２つ。
どんな技術でも、ブラウザで表示されるなら最後はこの２つの形になっているのでは無いのかなと思います。
「基本であり最終形」だけにしっかりと理解して使えるようになることが大切だなといつも感じています。
自分で書いたコードがページとして表示されるのがおもしろかったです。
こちらがプログラミング言語で、わりと楽しかったのを覚えています。
ページに動きがついて、華やかさがプラスされて動かす度ワクワクしていました。
SassとjQuery
CSSを学習してからSassを学習した時の感動。
JavaScriptを学習してからjQueryを学習した時の感動。
どちらも便利さがUPして、より書きやすくなって、ライブラリとかの存在に感激しました。
本当に先人の方たちには感謝感謝ですね。
データベース・SQL
データをまとめて管理する仕組み、エクセルのようなイメージで、
必要なデータを必要な時に、必要な形で取り出せると言うもの。
こちらはWordPressを使う際に必要な知識でした。
これがサーバーサイドのプログラミング言語です。
Web制作でのサーバーサイドのざっくりとした役割は、HTMLとCSSをブラウザからのリクエストに応じて動的にページを生成してブラウザに送り返す。
こんなイメージです。
学ぶって楽しい
今日まで、そして今日からもずっと学び続けていくと思います。
それがお金につながろうがつながらなかろうが、やります。
なぜなら面白いから。
続けていて、１つ確実に身についたなと感じている能力があります。
それは学ぶ体力がついたこと
わからなくても、なげない。続けることができる。
これが本当に、役立っています。
仕事でも成果が出て、お客さんからほめてもらえたり、
分野は違うけどこうした見えない部分で大きなメリットを享受できている。
そう感じています。
ぜひ、学ぶことを楽しんでやってみてください。
そしてチャレンジしてみてください。
ひとまず、このブログはここでいったん幕を引きます。
ありがとうございました！
では、また。
99.独自テーマの作成をしよう⑥ ～パーマネントリンク～
本日も引き続き学習していきます。
独自テーマについて。
さっそくやっていきましょう。
パーマネントリンクとは
各ページにはURLが存在します。
各々のページを区別するために、個別のURLが必要になってきます。
その個別の部分のことをパーマネントリンクというそうです。
そしてこのパーマネントリンクは
サイトのURL構造はできる限りシンプルにします。論理的かつ人間が理解できる方法で（可能な場合はIDではなく意味のある単語を使用して）URLを構成できるよう、コンテンツを分類します。
ということです。
何故か？
それは天下のGoogle様がそのように推奨しているからです。
デイトラではパーマネントリンクの設定は
『http://ドメイン/投稿名』のシンプルな構造で設定しようと案内されています。
理由は先ほど述べたとおりです。
index.phpで記事の一覧を表示する
index.phpの<!– entry-item –>で、かこまれた部分が記事の１つまとまりとしてとらえられます。
なので、この<!– entry-item –>で囲まれた部分を複製して、記事を読み込んで一覧として表示することができます。
昨日学習したプラグインを使うことで時間が短縮できますね。
デイトラの課題内でもジャンジャンテンプレートタグを使用しています。
本日はここまでにして、寝ます。
本業の方がようやく目途がたってきました。
では、また。
98.独自テーマの作成をしよう⑤ ～編集に便利なプラグイン～
WordPressの独自テーマについて
本日も学習していきます。
それでは早速やっていきましょう。
WordPress独自テーマを作る際に便利なプラグイン
テンプレートのカスタマイズを進めていく上で便利なプラグインがあります。
１つ目は、
Show Current Template
です。
これが一体何かというと、WordPressの管理バーに現在表示しているページが使用しているテンプレートファイルを表示するプラグインです。
つまり何が言いたいのかと言うと、いま表示しているファイルのテンプレートが目視できるのでデザインの適用をしたい時にどのテンプレートを編集すればいいのかが一目瞭然ですよ。
ということです。
これの何が良いのかというと、以前学習したテンプレート階層が関係してきます。
使用されるテンプレートに優先順位があるというお話でしたね。
こんな感じのやつです。
例えば、
XXX.phpテンプレートが適用されて表示されていると思って編集をしていたら、
実は適用されていたのはQQQ.phpだった
みたいな凡ミスをなくすことができます。
これは初心者あるあるだそうです。
自分は一度やりそうです笑
とにかく、このShow Current Template
を使用することでそうしたミスが防げます。
記事を複製するプラグイン
Yoast Duplicate Post
え？何の意味があるのと思った、そこのあなた。
私も同じです。
記事を一覧として表示するようなページのテンプレートを編集する際に、
記事が１つしかない状態でデザインの確認をするのは全体が見れないので不適切ですよね。
かと言って、記事を１記事ずつ、自分で書いていくというのも煩わしいものです。
そこで、このYoast Duplicate Postが活躍するわけですね！
プラグインをインストールして有効化すると、投稿一覧にCloneボタンが表示されるようになります。
投稿一覧内の各記事の「編集」や「ゴミ箱」と同じレベルに複製（Clone）が表示されます。
このボタンを押して増やした要素は下書きとして保存されるので、複製しただけでは表示されないことに注意です。
この場合の操作として、一括操作＞編集＞ステータスを公開済みに変更という順序で操作していき、最終的に更新することで複製した記事が表示されます。
今日のまとめ
- ビギナーは編集するテンプレートを勘違いしがちなので、注意すること
- 解決策として、Show Current Templateプラグイン。これがおすすめ。
- 記事が一覧として表示される場合に記事を複製したい場合がある。
- この解決策がYoast Duplicate Post
プラグインで視覚的に編集すべきテンプレートが確認できるのは、はじめのうちは非常に便利だなと感じました。
では、また。
97.独自テーマの作成をしよう④ ～function.phpでの読み込み～
本日も独自テーマについて。
CSSを読み込む為の記述を確認していきます。
それではさっそくやっていきましょう。
functions.php
例によってファイル名は大事です。
間違えないように独自テーマのフォルダ直下にfunctions.phpを作成しましょう。
できたら、functions.phpの中にスタイルを読み込む為の関数を作ります。
function 任意の関数名{
wp_enqueue_style( $handle, $src, $deps, $ver, $media )
}
wp_enqueue_styleはWordPressの関数で生成したページに対して、
CSSの読み込みができるという代物です。
この関数に引数を渡して実行することで、生成されたページにCSSが読み込まれます。
別途引数について確認していきましょう。
$handle：wp_enqueue_styleのハンドル名。
$src：wp_enqueue_styleでのCSS読み込み先パスを指定する。
$deps：CSSファイルの読み込み順序を書くときに指定する。複数のwp_enqueue_styleを使う場合に配列を使って書く。
$ver：CSSのバージョンを指定する。
media：CSSが定義されているメディアを指定する。
なかなかボリュームありますね。
実際にwp_enuque_styleを使う
まずはコードから
wp_enqueue_style("test", get_template_directory_uri() . "/css/style.css", array(), filemtime(get_theme_file_path('css/style.css')), "all");
今回の引数はそれぞれ
$handle："test"
$src：get_template_directory_uri() . "/css/style.css"
$deps：array()
$ver：filemtime(get_theme_file_path('css/style.css'))
media："all"
です。
難しそうな$srcと$verについて詳しく見ていきましょう。
$srcは先日学習した中で出てきたテンプレートタグget_template_directory_uri() が使われています。
テーマのフォルダまでのパスを自動で取得してくれる
でしたね。
なので、srcには'"テーマフォルダのパス"/css/style.css'という引数が渡されるので、
素晴らしいことにフォルダパスに変更があっても成立するという便利仕様になっています。
テンプレートタグいいですね！
で、
$verについては
filemtime()でファイルに更新があった場合にキャッシュからではなく、再度読み込みさせるということができるそうです。
キャッシュについては
「キャッシュ」とは－意外と知らないIT用語の基本 | @niftyIT小ネタ帳
参考にどうぞ。
そして、filemtime(引数)の 引数 にはどのファイルを対象とするのかを記述します。
ここで新たなテンプレートタグ
get_theme_file_path()
の出番です。
「テーマの指定したファイルのパス」を取得するそうです。
なんて便利なんだ！
変更があっても書き直さなくていいのはスゴイ。
フォルダ/ファイル名でも指定できるようで、今回はcssフォルダ内のstyle.cssのパスを取得しています。
冒頭に戻って
function test{
wp_enqueue_style("test", get_template_directory_uri() . "/css/style.css", array(), filemtime(get_theme_file_path('css/style.css')), "all");
}
というコードを記述することで、
「testというハンドル名でcssフォルダ内のstyle.cssが生成されたページに適用され、更新があった場合はキャッシュを読まずに再参照する。」
この呪文が１行で済むと。
どんだけ便利なんですかテンプレートタグ。
凄まじいワードプレス。
今日のまとめ
- function.phpに読み込み用の関数を書く
- wp_enqueue_styleでCSSの読み込みが便利にできる
- get_theme_file_path()でテーマ内の指定したファイルのパスを取得できる
学ぶことが多いですが、面白いですね！
引き続き楽しみながらやっていきます。
では、また。
96.独自のテーマを作る ～テンプレートタグを使おう～
本日も変わらず独自テーマについてです。
ゆっくりすぎますが、やっていきます。
index.phpにHTMLを書く
index.phpファイルにHTMLを書きます。
どんな内容かと言えば、
index.htmlに書く内容です。
まんまですね笑
ということで、自身が表示したい「静的ページ」をphpに記述するわけです。
ただし、ここで問題があります。
テキストだけの真っ白なサイトが表示される
なぜテキストだけのページになるのか？
それは、CSSや画像のパスが通っていないからです。
テーマフォルダの中に画像を入れていたとしても、表示されません。
例えば、wp-contentの中のthemesフォルダ内の独自テーマフォルダの中のimgフォルダの中のtest.pngが表示されない。
じゃあどうするか？
<img src="wp-content/themes/testtheme/img/test.png" alt="">
をHTMLに記述すればOKです。
と言いたいところですが、これではHTMLをべた書きするのと何も変わらないですよね。しかも複数の画像を使用する場合に毎回この長さを書くのは億劫すぎます。
ここで登場するのが以前にも書いたWordPressの独自関数です。
WordPress関数のことを「テンプレートタグ」と呼ぶこともあるそうです。
テーマまでのパスを取得する
テーマまでのパスを取得するテンプレートタグは
get_template_directory_uri()
です。
で、どうやって使うかと言えば
<img src="<?php echo get_template_directory_uri() ?>/img/test.png" alt="">
こんな感じで、テーマまでのパスを取得して、それをechoで文字列として出力しています。
このテンプレートタグを使うことで、テーマまでのパスを自分で調べることなく指定できました。ミスもなく、便利。
これってテーマ名が変わっても大丈夫ってことですよね。
そして、テーマまでのパスを取得するってことはテーマが切り替わってもテーマ名は自動で変えてくれるってことですよね。
これは何か面白いことがありそうな予感がしますね。
テンプレートタグ便利。
今日のまとめ
- テーマはパスを通さないと画像が表示されず、CSSも適用されない
- その為にテーマまでのパスを取得する関数がWordPressで用意されている
- そうした関数のことをテンプレートタグと呼ぶ
- get_template_directory_uri()は名前の変更等に対応できる保守性高め
本日はテーマ、特にテンプレートタグについて学習しました。
なかなかまとまった時間がとれず進みが遅いですが、あきらめずにやっていきます。
では、また。
95.独自テーマの作成をしよう② ～テンプレートファイルを作成する～
引き続きテンプレートを作成していきます。
と思っていたら、学習中のDAY9の内容がアップグレードして内容が変わったようなので、再度確認しながら進めていきます。
テーマをWordPressに認識させる
WordPressにテーマを認識させる為に、style.cssとindex.phpを準備する必要があります。
昨日まではfunction.phpとstyle.cssをという記述でしたが、
説明に動画が追加されて
wp-contentのファイル内にthemesフォルダを作成し、style.cssとindex.phpファイルを作成するように変わっていました。
わからない内容がわからない内容を呼んでいた状態から、シンプルな解説になっていました。
style.cssの中身は当然昨日と同じです。
/*
Theme Name: 独自テーマ名
*/
index.phpとstyle.cssを配置して、WordPressの管理画面、「外観」からテーマを更新すると独自テーマ認識され、表示されます。
独自テーマのフォルダをVSCodeで開いて、作業をしていくというのも視覚的にわかりやすくなっていました。
動画比較記事みたいになっていますね。
ちょっと軌道修正して…。
テンプレートファイルを用意する
独自テーマに必要なテンプレートを用意します。
テンプレートごとに役割や目的が異なるため、
必須のファイルとして下記が紹介されていました。
・作成高いファイル
・ファイル分割する際に使うファイル
色々種類がありますが、どのテンプレートがどんな役割を持っていて、
独自テーマに対して必要かどうかを判断するというところまで
自身の裁量でできるようにしたいですね。
テンプレート階層について
以前も書いたと思いますが、WordPressにはテンプレート階層があります。
投稿ページにアクセスがあったら、single.phpを表示
固定ページにアクセスがあったら、page.phpを表示
のようにアクセスに対して、特定のファイルを読み込み返すようになっています。
で、ここからが非常に重要です。
テンプレートのファイル名
これはルール通りでないと読み込まれないのです。
テンプレートのファイル名とテンプレート階層にもとづいて、独自テーマを適用したWordPressサイトが表示されるわけです。
その際のリクエストに応じて既定のテンプレート階層を評価して、「存在する」かつ「優先度が高い」テンプレートファイルが選択され使用されるわけですね。
今日のまとめ
ずいぶんとわかりやすくなっていました。
デイトラすごいですね。
理解がしやすいと学びやすいです、ありがたや。
では、また。
94.独自テーマの作成をしよう① ～何から手を付けるのか～
本日は実際に独自テーマの作成に入っていきます。
HTML、CSSも書くのですが今までとは仕組みが違うのは以前の記事で書いたとおりです。
では早速やっていきましょう。
WordPressに独自テーマを認識させる
適当にthemeフォルダにファイルを置いても、WordPressはテーマとして認識してくれません。
テンプレート階層にいくらしたがってファイルを用意しても、認識してくれません。
詰んだ。
そんなことはありません。
WordPressに認識してもらうには独自テーマのフォルダ直下に配置した
style.cssに必要な記述を追加します。
@charset "utf-8";
/*
Theme Name: 独自テーマ名
*/
加えてfunction.phpファイルにテーマのセットアップの為の記述を追加します。
コード自体は割愛しますが、function.phpの中ではWordPressの独自関数(PHP)を使ったりします。一部抜粋すると
add_theme_support( )
add_action()
などなど
当然のようにわからないので調べます
関数リファレンス/add action - WordPress Codex 日本語版 (osdn.jp)
WordPressCodexで検索すると説明があります。
ですが、ここでわからない連鎖が出てきます。
フックって何だろうとか
WordPRessコア？
アクションフック？
と、いつものように総当りで調べるので途端にスピードダウンします。
話を戻して、
Wordpressの管理画面から独自テーマが確認できます。
先程の独自テーマ名としたところが、そのままテーマ名として表示されます。
この状態で有効化してみても、何も表示されません。真っ白です。
なぜなら、昨日もお伝えしたように必要なテンプレートが用意されていないからですね。
index.phpやらテンプレート階層にもとづいて作って行く必要があるわけです。
ファイルは分割せよ
今までHTMLはファイルに全てのセクション等を記述していました。
ですが、せっかくPHPを使うので
共通部分はそもそもphpファイルとして切り出して
分割管理するのが便利だよね。
ということです。
header.php
footer.phpなんかはおおよそ全てのページで共通ですので、分割して作ります。
こうして分けることのメリットは保守性が上がる所だそうです。
headerに変更があった場合にheader.phpだけ修正すれば全てのページのheaderに反映されます。
もしheaderを各々のテンプレートファイルに個別に書いていたら、
一箇所修正があっただけで全てのテンプレートのheaderを修正しないといけないわけです。
これは天と地ほどの差がありますよね。
CSSのクラス設計でも似たようなことがあったような…。
今日のまとめ
- 独自テーマをthemeフォルダに配置しただけでは、WordPressに無視される
- 認識させるにはstyle.cssとfunction.phpに記述をする必要がある
- テンプレート作成の注意点として、各ページ内のHTMLの共通部分は分割してPHPファイルとして管理する
本日から独自テーマ作成に入りました。
わからない言葉が多いので、より一層遅くなりそうですが、しっかり咀嚼していきます。
では、また。
