wordpressのカスタマイズ初心者が理解するべきHTML,CSS,PHPの概念的なこと

この記事は約510秒で読めます。

どうも!!こうすけです。

今日は「wordpressのカスタマイズ初心者が理解するべきHTML,CSS,PHPの概念的なこと」という内容で記事を書いていきたいと思います。

WordPressをカスタマイズする上で必ず必要になってくる知識がHTML,CSS,PHPです。

全てのカスタマイズがプラグインでできればいいんですけど、そういうわけにもいかないですよね。

ここの文字の色を変えたいな、この画像を背景画像として使いたいな、そういったちょっとしたカスタマイズをするときにプラグインで修正することはできないので、HTML,CSS,PHPといった知識が必要になります。

ただ理解するといってもいきなりプログラミング言語のことを勉強してもそんなにすんなり理解できるわけもなく、まずはどういうものなのかをイメージするための概念的ことを理解することが重要になってきます。

ということで今日はタイトルの通り、HTML,CSS,PHPの概念的なことを紹介していきたいと思います。

1. 機械に構成を理解させるために必要なHTMLとは

まず初めにHTMLとは何かを説明していきたいと思います。

HTMLとは、ここはヘッダーだよ、ここは記事だよ、ここはフッターだよ、この文字は日本語だよということを機械(ネット)に分からせるためのプログラミング言語になります。

HTMLとCSSはプログラミング言語ではないと言われていますがそこは気にしないでください。笑

では機械に理解させるとはどういうことか。

まずはファイルに文章を記述し、ブラウザに表示させてみます。この際、HTMLの記述は全く行っていません。


何か意味不明な文字が表示されていますね。

これは文字化けといって、入力した文章を機械が日本語と理解できてないために起こる事象です。

では次はHTMLを記述し、ブラウザに表示させてみましょうか。


次はちゃんと文字が表示されていますね。

しかも太い文字で表示されていたり、文章がちゃんと改行されていたりと、何かホームページらしくなりましたね。

これは機械がこの文章は日本語、ここはタイトル、ここは記事というように理解してくれたのが理由です。

こういった役割をするのがHTMLというプログラミング言語の役割です。

ただ勘違いしないで欲しいのが、HTMLには文字を太くするといった視覚的にわかる変更をもたらすプログラミング言語ではありません。

そういった役割は後述するCSSの役割です。

HTMLはあくまで機械に、ここは記事だよ、ここはヘッダーだよということを理解させるための言語ですので、勘違いしないようにしてください。

画像では文字が太くなったりしていますが、これはHTMLにはデフォルトスタイルシートいうものが適用されており、自分でCSSを設定しない場合にはこのデフォルトスタイルシートが適用されるようになっているためです。

2. おしゃれなデザインには必要不可欠、CSSとは

次にCSSとは何かを説明したいと思います。

CSSとはホームページの文字や記事、ヘッダー、そういったもののデザインを変更するためのプログミング言語です。

もしCSSがないと、文字を太くしたりすることもできませんし、ここはタイトルだということを人が見て分からせるようなこともできません。

そういった人の目から見ても分かるようにデザインを変更することができるのがCSSというプログラミング言語になります。

CSSを適用させるとさっきの画像を以下のようなデザインに変更することができます。


さっきの画像より、よりホームページらしくなりましたね。

これであればどこがタイトルでどこが記事といったことが人の目で見ても分かるようになったと思います。

3. ブログを作る上で非常に重要な役割、PHPとは

最後にPHPについて説明したいと思います。

PHPとは、人がHTMLやCSSを記述するのに向いてないようなことを機械に任せるために必要な言語です。

例えば、あるところに今日の日付を入力したいとしましょう。

HTMLだけで記述すると日付が変わるたびに日付を変更しないといけないですよね。

しかも毎日。

まあ一箇所だけであればめんどくさくないかもしれません。私はめんどくさいですが。

ただそれが100箇所、1000箇所になるとどうでしょう?さすがに誰でもめんどくさいですよね。

もっと増えて1億箇所ならどうでしょう。

もう物理的にも無理になってきますね。

そこでこういったことを解決してくれるのがPHPというプログラミング言語です。

PHPで今日の日付を入力するという記述しておけば、あとは機械がそこに入力したい今日の日付を入力してくれます。

PHPで記述しただけでこんなにもめんどくさかった仕事が1回の仕事で済んでしまいます。

PHPに限らずプログラミングというのは、人が作業するのに向いてない仕事を機械に任せてしまえるためのものです。

ここでは日付を入力することだけを紹介しましたが、ブログでいうと記事のタイトルを表示させる、記事に設定されている内容で記事を表示してくれる、そういった役割もPHPというプログラミング言語がやってくれています。

ブログを作るのに本当に大切な役割をしてくれていますよ。。。

ちなみにHTML,CSSがプログラミング言語と言われないのはこれらのような自動化みたいなことができないことが理由です。

4. 最後に

以上ですがどうでしょうか?

少しはHTML,CSS,PHPのことを理解できましたでしょうか?

もちろんこれだけでこれらの言語のことを完璧に理解できるわけはなく、これからこれらの言語を理解するために非常に大切なことです。

イメージが頭の中にあるのとないのとでは絶対に理解のしやすさが違います。

まずはイメージし、プログラミングの勉強をしていく。何事でも勉強するにおいて非常に大切なことです。

この記事がwordpressをカスタマイズしていくことの助けになれば私も非常に嬉しいです。

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です