[WordPress入門]ざっくりと確認しておきたいWordPressの構造

WordPressを使うには、その構造を理解しておく必要があります。
おおまかにその構造をまとめてみました。

WordPressの構造

テーマで大枠は決まる

WordPressは、テーマというデザインのテンプレートがあります。
これを切り替えるだけで、色やデザインを変更できるのです。

たとえば、サンプルサイトで、テーマを変更すると、次のようになります。
スクリーンショット 2013 10 19 6 50 04

スクリーンショット 2013 10 19 6 50 49

スクリーンショット 2013 10 19 6 51 05

スクリーンショット 2013 10 19 6 51 21

スクリーンショット 2013 10 19 6 51 42

こういったものの中から気に入ったものを使うと簡単にデザインを変えられるのです。
画像向けかそうでないかということには気をつけましょう。
記事に画像がないときに、画像向けのテーマ(トップに画像が表示)を使うと、「NO IMAGE」となり、好ましくありません。
当ブログは、画像を必ず入れているので、画像向けのテーマ(Stinger3)を使っています。


■スポンサードリンク
------※この記事は、投稿日現在の状況、心境、法律に基づいて書いています。---------

■スポンサードリンク


テーマは編集できる

これらのテーマは、ある程度カスタマイズすることもできますが、その度合いはテーマによります。
テーマ自体のカスタマイズでできないことは、直接テーマを編集することが可能です。
私もちょこちょこ編集して自分なりにカスタマイズしています。
知識を身に付ければつけるほど、自由にカスタマイズできることがWordPressの醍醐味です。

WordPressの管理画面で[外観]→[テーマ編集]を選ぶと、次のような画面がでてきて、それぞれを編集します。
スクリーンショット 2013 10 19 6 57 38

たとえば、タイトルの文字の大きさを変えたいなら、スタイルシートの次のような記述を探しましょう。
(テーマにより記述は異なります)

スクリーンショット 2013 10 19 6 33 26

このテーマの場合は、日本語である程度書いてあるので楽です。
font-size: 30px;
がタイトルのフォントサイズを示し、現在はこう表示されています。

スクリーンショット 2013 10 19 6 33 33

これを次のように、30→100にかえて、[ファイルの更新]を押し、サイトを表示させてみてください。
スクリーンショット 2013 10 19 7 04 41

タイトルの大きさが変わります。
スクリーンショット 2013 10 19 6 37 04

アメブロ、FC2などの無料ブログサービスではこういった変更が管理画面で簡単にできます。
ただし、細かいところを変更しようとすると限界があるのです。

WordPressの構造を知っていると、これらの変更が楽になります。

■スポンサードリンク

WordPressの構造

WordPressは、基本的に2つのものから成り立っています。

1つは、スタイルシート。全体の色やデザインを指定するものです。
さきほど、タイトルのフォントサイズを変更するような場合もこのスタイルシートを編集します。
CSSと呼ばれることも多いです。

もう1つは、テンプレート。何を表示させるか、どう動かすかを決めるプログラムです。PHPという言語で書かれています。

図解してみました。テンプレートには複数のものがあり、これもテーマによって異なります。
代表的なテンプレートを見てみましょう。
WordPressの構造

・index.php

ブログのトップ画面の表示です。
ヘッダーを入れ、フッターを入れ、どういう表示をするかを指示します。

スクリーンショット 2013 10 19 6 31 26

・header.php

ヘッダーに関するプログラム。
この位置がヘッダーです。
ここに画像をドンと入れることもできますが、私は入れていません。
ヘッダーをできるだけ少なくし、すぐ記事が読めることを優先しています。
スクリーンショット 2013 10 19 6 31 26

このヘッダーをindex.phpや他のテンプレートで、
<?php get_header(); ?>
というプログラムを書き、呼び出しています。

パーツにわけるとメンテナンスもしやすいですし、書くときの効率もよくなるのです。
これはExcelマクロも同じですね。

・サイドバー

次の画像の部分がサイドバーです。
スクリーンショット 2013 10 19 6 31 41

phpを編集するよりも、ほとんどの場合、WordPress管理画面で[外観]→[ウィジェット] でパーツを組み合わせることで、簡単に編集できます(プラグインを入れていくと、このパーツが増えていきます)。
スクリーンショット 2013 10 19 7 18 30

・single.php

それぞれの記事の表示に関するプログラムです。
スクリーンショット 2013 10 19 6 37 29

・Page.php

固定ページに関するプログラムです。
WordPressに投稿できるものは、記事と固定ページがあります。
記事は通常の投稿で使い、固定ページは、別途プロフィールやセミナーのお知らせ、お問い合わせページに使うことが多いです。
WordPressでHPを作るときは、この固定ページを中心に使います。
私は固定ページはよりシンプルな構成にし、サイドバーも表示していません。
スクリーンショット 2013 10 19 6 37 45

・footer.php

フッター(ページ下部)の表示に関するプログラムです。
スクリーンショット 2013 10 19 6 31 59

ーーーまとめーーー
その他、カテゴリー一覧、検索結果などのphpもあります。
注意すべきなのはテーマを直接編集すると、トラブルも起きうるということです。
プログラムを1文字間違えただけでも、ブログが表示されなくなる場合もあります。

リスクを低くするために、phpを編集するときは、プログラムをコピーして別の場所(テキストファイル、Evernoteなど)に貼り付けておくといいでしょう。
そして、変更は一ヶ所ずつやります。
なにかあったら、元に戻せばいいわけです。

リスクを恐れて、何もやらなければ、WordPressを本当の意味で楽しめません。
いろいろ試してみましょう。





■スポンサードリンク
【編集後記】
昨日は、双方のスケジュールの関係で、朝7時から打ち合わせ。
決算、税金だけでなく、経理業務効率化の方でもお役に立てそうです。
これから楽しみです!




■スポンサードリンク


■ブログEX-ITの購読 →feedlyを使って無料で読む
→Twtterで読む
Facebookで読む

1日1新 Instagram
井ノ上陽一のVALU
■著書
ひとり税理士のIT仕事術―ITに強くなれば、ひとり税理士の真価を発揮できる!!
フリーランスとひとり社長のための 経理をエクセルでトコトン楽にする本
新版 ひとり社長の経理の基本
毎日定時で帰っても給料が上がる時間のつかい方をお金のプロに聞いてみた!
『ひとり税理士の仕事術』
『フリーランスのための一生仕事に困らない本』
『社長!「経理」がわからないと、あなたの会社潰れますよ』
『そのまま使える経理&会計のためのExcel入門』
###