wordpressのPHPとCSSをド素人が超初心者目線で超わかりやすい説明してみる

wordpress-588495_640

今回はwordpressの初心者向けカスタマイズの仕方を書いていこうと思います。ちなみに私はプログラミングは全く出来ませんが、最近カスタマイズを行う上で必要なコツのようなものを理解できるようになってきたので、ここに記していきたいと思います。


スポンサーリンク

wordpressの構造を知るとカスタマイズの敷居が結構下がる

wordpressは、PHPとCSSの2つのプログラミング言語で構成されています。ある程度プログラミングの経験を積んだ人にとってはアタリマエのことなのですが、私のようなプログラミング超初心者にとっては、これすら最初はわかりません。

この2つのプログラミング情報がどこに記載されているのかというと、wordpressの管理画面(ダッシュボード)の「外観」から「テーマ編集」を開くと、wordpressを構成している中身を見ることが出来ます。

スクリーンショット 2015-02-04 23.01.03

ちなみに、ここに入っているファイルは使用しているテーマによって異なりますが、基本的にはPHPとCSSのみとなっています。つまり、PHPとCSSが分かればwordpressをかなり自由に扱えるということになります。

PHPが持つ役割と、CSSが持つ役割を理解しておく

wordpressをいじる上で、きっちりわかっておくべきことが、PHPとCSSのそれぞれの意味です。

まずPHPから説明しますと、PHPは、主に文字を司る部分に影響します。厳密にはそれだけではないと思いますが、実際このPHPをちょっといじるだけでもブログの使い勝手は劇的に向上します。

具体例を挙げると、ブログのトップ画面では新着記事が表示されますが、表示される記事の数はPHPにより決められています。通常、wordpressのデフォルト状態では、設定画面から新着記事数をできるので、テーマによってはPHPを直接書き換える必要はないのですが、このブログのように、トップページにデザイン性がある場合、デフォルトの設定から新着記事数を変更することは出来ません。

この場合、直接PHPを書き換える必要があるのですが、この場合変更するのはたったの2文字です。ちなみにいじったファイルは、index.phpというファイルです。index.phpというのは、ブログのトップページを構成しているプログラムファイルです。(これも弄っているうちにようやく気づいたことですが)

スクリーンショット 2015-02-04 23.25.38

デフォルトでは新着記事は4記事しか表示されませんでしたが、先ほどの箇所を12に数字を変更するだけで、トップページに表示される新着記事が12に増えました。

ここで重要なのは、PHPの様なプログラミング言語は、一部をいじるだけで、その影響が全体に及ぶということです。

文章で書くとわかりづらいですが、まずはブログのトップページをご覧ください。このブログテーマは、1列に4記事の新着記事を表示されるようになっていますが、当初は1列のみの4記事が表示されていました。しかし、PHPファイルであるindex.phpの中身を4→12記事に増やしたことで下に2列(8記事)が追加されました。

「ふんふんそれで?」と思ってはダメですよ。これはとても重要なポイントです。下に2列増えたのに、レイアウトが崩れていないことはお気づきでしょうか?あくまでいじったのは数字を4から12に変更しただけですが、きちんと周辺のレイアウトは、保たれています。

偉そうに言わせてもらいますが、これが、プログラミングってやつなのです。すべて絶対位置ではなく、相対位置として表示されるようにプログラムが働いているんですね。

つまり、この場合は、記事数が増えたので、自動的に新着記事より下に表示されている部分も下方向にスライドしたということになります。これが理解できると、wordpressの小規模なレイアウト変更は、割と簡単にできるようになります。

ちなみにこのブログは、先ほどの新着表示記事数に加え、トップページの新着記事タイトルの表示文字数も変更しています。当初は、長すぎる文字数はカットされるようになっていました。

スクリーンショット 2015-02-04 23.42.47

PHPは先ほどと同じくindex.phpの中身を変更。

スクリーンショット 2015-02-04 23.49.01

いかがでしょうか?

正直私もほとんどプログラムは覚えていません。実際、先ほど紹介した表示記事数や、タイトル文字数の変更箇所も、手探りで試しに変更してはプレビューし、何も変化が起きなかったら元に戻し・・・の繰り返しを何度も何度も繰り返し、ようやく望みの状態に変更することが出来ました。

一度イメージが掴めてしまえば、ブログ構成に新しい要素を加えず、既存の構成のちょっとした変更程度であれば、だいたいできるようになると思います。

繰り返しますが、PHPはこのようなブログの文字に司る部分を構成しているプログラムなのです。

CSSはPHPで構成された文字や画像の背景・枠を構成するプログラム

さきほどPHPはブログの文字の部分を司る要素ということを説明しましたが、今度はCSSという背景(見た目)を司るプログラムを説明します。

CSSというのは、wordpressのバック部分、つまり背景や枠を構成しているものです。

わかりやすく画像で説明しましょう。

まず、下の画像をご覧ください。トップページの新着記事のあたりを抜粋したものですが、このブログテーマの新着記事は、上半分に画像、下半分にタイトルを表示するようにできています。そして、その背景には白地の壁紙が見えると思いますが、この壁紙は、実は2つのCSSが組み合わさっています。画像部分の背景と、タイトル部分の背景です。

スクリーンショット 2015-02-05 00.04.23

これをCSSでどのように書かれているかというと、以下のようになっています。(画像クリックで拡大します)

スクリーンショット 2015-02-05 00.14.31

「width:150px; height:150px」というのは、新着記事のサムネイル画像のサイズを指定する意味を持っており、「margin:14px auto 10px」というのは、画像の余白部分をどれだけ取るかということを指定しており、「font-size:13px; display:block; margin:7px 14px」というのは、タイトル部分のフォントサイズと周辺の余白をどれだけ取るのかを指定することを意味しています。

具体的な使い方として例をあげます。

先ほどPHPでタイトル文字数を40文字に増やしたお話をしましたよね。その際に、実はレイアウトが崩れたんですよ。なぜ崩れたか先に答えを言ってしまいますが、CSSのタイトル表示用のスペースの指定が不足してしまったからだったんですね。文字数を増やしたのにもかかわらず、タイトル文字を表示できるスペースが、増やす前の状態のままのCSSで指定されていたので、増えた文字数を収容しきれず、飛び出てしまったのです。

最初はどうして飛び出たかわかりませんでした。私も基本的に超初心者なので。しかし、よくよく考えると、文字数を増やす前は問題なかったのに、文字数を増やした途端崩れた・・・つまり、文字数が原因だろうという仮説を立てたんです。

インターネットでもいろいろ調べましたが、PHPを始めとするプログラム系の記事は、どれもある程度プログラムをわかっている人向けのものばかりで、私のような超初心者が理解できるようなものはありませんでした。

話がそれましたが、CSSとは、wordpressにおいてはPHPで設定した文字や画像の背景を司る要素です。であれば、トップページの新着記事部分を構成しているCSSファイルを見つけ、増やしたタイトル文字を許容できる範囲に広げる必要が有りました。

私の場合は、この部分を増やすことでタイトル部のスペースが下方向に伸ばせました。

スクリーンショット 2015-02-05 00.38.16

確か最初は270くらいだったのを、320まで増やしたことで、きちんとタイトルの文字数(40字)を納めることが出来、無事、トップページのレイアウト崩れが解消されました。

wordpressのPHPとCSS まとめ

wordpressのPHPとCSSについて、今回は理屈というよりも、フィーリングで説明してみましたが、ご理解いただくことは出来たでしょうか?

きちんとしたワードプレステーマを1から作るというのであれば、この程度のことを覚えたところで作成は不可能ですが、既存のテーマをちょっとだけ、かゆいところに手が届く程度のカスタマイズであれば、テーマ編集から少し手を加えるだけで、簡単に変更することが出来ます。

今回は私のTCDのテーマを例に説明しましたが、他のテーマでも基本的な考え方は変わりませんので、是非ともwordpressのカスタマイズに挑戦してみてください。

結構、ブログの印象変わりますよ。

The following two tabs change content below.
ruby(るびぃ)

ruby(るびぃ)

Apple製品、デジカメ、Minecraft、スプラトゥーンが大好きです。ガジェットを駆使して人生を豊かに便利にする方法を日々考案中。
スポンサーリンク

  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

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